本节讲的是Arcgis for Js的针对graphiclayer的空间查询，内容很简单，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
        #map_ctrl{
            z-index: 99;
            position: absolute;
            top: 20pt;
            right: 10pt;
            background: #fff;
        }
        .button{
            padding: 3px 8px;
            background: #eee;
            text-align: center;
            font-size: 12px;
            font-family: "微软雅黑";
        }
        .button:hover,.attr_ctrl:hover{
            background: #ccc;
            cursor: pointer;
        }
    </style>
    <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
    <script src="jquery-1.8.3.js"></script>
    <script>
        var iconPath = "M24.0,2.199C11.9595,2.199,2.199,11.9595,2.199,24.0c0.0,12.0405,9.7605,21.801,21.801,21.801c12.0405,0.0,21.801-9.7605,21.801-21.801C45.801,11.9595,36.0405,2.199,24.0,2.199zM31.0935,11.0625c1.401,0.0,2.532,2.2245,2.532,4.968S32.4915,21.0,31.0935,21.0c-1.398,0.0-2.532-2.2245-2.532-4.968S29.697,11.0625,31.0935,11.0625zM16.656,11.0625c1.398,0.0,2.532,2.2245,2.532,4.968S18.0555,21.0,16.656,21.0s-2.532-2.2245-2.532-4.968S15.258,11.0625,16.656,11.0625zM24.0315,39.0c-4.3095,0.0-8.3445-2.6355-11.8185-7.2165c3.5955,2.346,7.5315,3.654,11.661,3.654c4.3845,0.0,8.5515-1.47,12.3225-4.101C32.649,36.198,28.485,39.0,24.0315,39.0z";
        var CITY_DATA={
            "total":34,
            "items":[{"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212},
                {"id":2,"name":"拉萨","X":91.162998,"Y":29.71042},
                {"id":3,"name":"西宁","X":101.797303,"Y":36.593642},
                {"id":4,"name":"兰州","X":103.584297,"Y":36.119086},
                {"id":5,"name":"成都","X":104.035508,"Y":30.714179},
                {"id":6,"name":"重庆","X":106.519115,"Y":29.478925},
                {"id":7,"name":"贵阳","X":106.668071,"Y":26.457312},
                {"id":8,"name":"昆明","X":102.726775,"Y":24.969385},
                {"id":9,"name":"银川","X":106.167225,"Y":38.598524},
                {"id":10,"name":"西安","X":108.967128,"Y":34.276112},
                {"id":11,"name":"南宁","X":108.233931,"Y":22.748296},
                {"id":12,"name":"海口","X":110.346181,"Y":19.96992},
                {"id":13,"name":"广州","X":113.226683,"Y":23.18307},
                {"id":14,"name":"长沙","X":112.947928,"Y":28.169916},
                {"id":15,"name":"南昌","X":115.893715,"Y":28.652363},
                {"id":16,"name":"福州","X":119.246768,"Y":26.070765},
                {"id":17,"name":"台北","X":121.503567,"Y":25.008274},
                {"id":18,"name":"杭州","X":120.183046,"Y":30.330584},
                {"id":19,"name":"上海","X":121.449707,"Y":31.253361},
                {"id":20,"name":"武汉","X":114.216597,"Y":30.579253},
                {"id":21,"name":"合肥","X":117.262302,"Y":31.838353},
                {"id":22,"name":"南京","X":118.805692,"Y":32.085022},
                {"id":23,"name":"郑州","X":113.6511,"Y":34.746308},
                {"id":24,"name":"济南","X":117.048331,"Y":36.60841},
                {"id":25,"name":"石家","X":114.478215,"Y":38.033276},
                {"id":26,"name":"太原","X":112.483066,"Y":37.798404},
                {"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},
                {"id":28,"name":"天津","X":117.351094,"Y":38.925719},
                {"id":29,"name":"沈阳","X":123.296299,"Y":41.801604},
                {"id":30,"name":"长春","X":125.26142,"Y":43.981984},
                {"id":31,"name":"哈尔","X":126.567138,"Y":45.69381},
                {"id":32,"name":"北京","X":116.068276,"Y":39.892225},
                {"id":33,"name":"香港","X":114.093117,"Y":22.427852},
                {"id":34,"name":"澳门","X":113.552482,"Y":22.184495}
            ]
        };
        var map, mapCenter;
        var drawToolbar, selectedGraphics=new Array();
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/geometry/Point",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/renderers/SimpleRenderer",
            "dojo/_base/Color",
            "dojo/on",
            "dojo/dom",
            "dojo/domReady!"],
        function(Map,
             Tiled,
             FeatureLayer,
             GraphicsLayer,
             Point,
             PictureMarkerSymbol,
             SimpleLineSymbol,
             SimpleRenderer,
             Color,
             on,
             dom)
        {
            map = new Map("map", {logo:false,slider: true});
            var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
            map.addLayer(tiled,0);
            var chartLayer = new GraphicsLayer({"id":"chartLayer"});
            map.addLayer(chartLayer,1);
            mapCenter = new Point(103.847, 36.0473, map.spatialReference);
            map.centerAndZoom(mapCenter,4);
            addReadPopup(CITY_DATA);
            //添加红气泡
            function addReadPopup(data){
                var items= data.items;
                for(var i=0;i<data.total;i++){
                    var pt=new Point(items[i].X,items[i].Y,map.spatialReference);
                    var graphic = new esri.Graphic(pt,createSymbol(iconPath, "#ff0000"),items[i]);
                    chartLayer.add(graphic);
                }
            };
            function createSymbol(path, color){
                var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
                markerSymbol.setPath(path);
                markerSymbol.setColor(new dojo.Color(color));
                markerSymbol.setOutline(null);
                return markerSymbol;
            };

            drawToolbar = new esri.toolbars.Draw(map);
            drawToolbar.on("draw-end",showResults);
            on(dom.byId("extent"), "click", function(){
                map.setMapCursor("pointer");
                for(var i= 0, total=selectedGraphics.length;i<total;i++){
                    selectedGraphics[i].symbol = createSymbol(iconPath,"#f00");
                    chartLayer.redraw();
                }
                selectedGraphics=[];
                drawToolbar.activate(esri.toolbars.Draw.EXTENT);
            });

            function showResults(extent){
                drawToolbar.deactivate();
                map.setMapCursor("default");
                var graphics = chartLayer.graphics;
                for(var i= 0, total=graphics.length;i<total;i++){
                    if(extent.geometry.contains(graphics[i].geometry)){
                        selectedGraphics.push(graphics[i]);
                        graphics[i].symbol = createSymbol(iconPath,"#0ff");
                        chartLayer.redraw();
                    }
                }
            };
        });
    </script>
</head>

<body>
<div id="map">
    <div id="map_ctrl">
        <a id="extent" class="button">矩 形</a>
    </div>
</div>
</body>
</html>

实现后的效果如下：

初始状态

选择框

Arcgis for Js实现graphiclayer的空间查询的更多相关文章

  1. Arcgis for Js实现graphiclayer的空间查询（续）

    上文中,实现了简单的针对graphiclayer的空间查询工作,在本节,将更加详细的介绍针对graphiclayer的空间查询.首先,空间查询的方式:提供多种类型的空间查询,包括点周边.线周边.面内等 ...

  2. Arcgis for Js之featurelayer实现空间查询和属性查询

    空间查询和属性查询是常用的两种对数据的检索与查询方式,在本节,将讲述Arcgis for Js下如何实现featurelayer的这两种查询方式,先贴图给大家看看: 实现界面 属性查询 空间查询 看完 ...

  3. Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示

    功能需求: 分省市统计并展示全国雨量站的数目与位置. 常规做法: 分省市雨量站的数目通过统计表的形式在页面端展示,位置根据XY坐标信息将雨量站标绘在图上. 优化做法: 去掉统计图的展示方式,直接将各省 ...

  4. Arcgis for Js之Graphiclayer扩展具体解释

    在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就具体的讲讲esri/la ...

  5. Arcgis for Js之Graphiclayer扩展详解

    在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就详细的讲讲esri/la ...

  6. （转）Arcgis for Js之Graphiclayer扩展详解

    http://blog.csdn.net/gisshixisheng/article/details/41208185 在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种 ...

  7. ArcGIS for Android示例解析之空间查询-----QueryTask

    转自:http://blog.csdn.net/wozaifeiyang0/article/details/7331450 QueryTask 查询功能在GIS中是一个不可或缺的重要功能,示例中提供了 ...

  8. 使用ArcGIS API for Silverlight 进行复合多条件空间查询

    原文:使用ArcGIS API for Silverlight 进行复合多条件空间查询 这两天帮网上认识的一个兄弟做了一个查询的示例,多多少少总结一下,在此和大家分享. 为什么说是复合多条件呢?因为进 ...

  9. ArcGIS API for JavaScript 4.2学习笔记[25] 官方第八章Analysis（空间查询）概览与解释

    开森,最关注的空间分析章节终于到了,在空间查询那节逻辑性的代码简直要命(呵呵,空间分析的代码也要命...). 上目录截图: [Geodesic buffers(GeometryEngine)] 使用G ...

随机推荐

  1. Python Parameter Passing Note

    我刚刚开始学习Python, Python中的参数传递总是让我很困惑.我写了4个简单的Demo,帮助我理解Python的参数传递,希望对大家都能有所帮助. 0: def change(x): x = ...

  2. appium server日志分析

    文章出处http://blog.csdn.net/yan1234abcd/article/details/60765295 每次运行测试,可以从Appium Server控制台看到有特别多的日志输出, ...

  3. 基本运算符与流程控制（Day5）

    一  运算符 1.算数运算 2.比较运算 3.赋值运算 4.逻辑运算 and注解: 在Python 中,and 和 or 执行布尔逻辑演算,如你所期待的一样,但是它们并不返回布尔值:而是,返回它们实际 ...

  4. rails timeout 异常

    发现经常有”超时“的错误信息,如/usr/lib/ruby/1.8/timeout.rb:54:in `rbuf_fill': execution expired (Timeout::Error),恩 ...

  5. 08 Spring框架 AOP （一）

    首先我们先来介绍一下AOP: AOP(Aspect Orient Programming),面向切面编程,是面向对象编程OOP的一种补充.面向对象编程是从静态角度考虑程序的结构,面向切面编程是从动态的 ...

  6. 和为定值的m个数

    和为定值的m个数 np 问题(时间复杂度o(2**n)) code1: 暴力递归 解决 只有正数的情况 class Solution { private List<List<Integer ...

  7. 如何判断某String是否经过urlEncoder.encode过

    import java.util.BitSet; public class UrlEncoderUtils { private static BitSet dontNeedEncoding; stat ...

  8. 在Ubuntu上安装Brackets的步骤（加源和移除源）

    学习编写接口开发和测试时需要用到编写HTML页面,在Windows下采用的是HBuilder,但是无Ubuntu版本.安装一个网上推荐的Brackets 安装步骤:参见http://www.xiton ...

  9. 谁说程序员不懂爱情【Her】

    2014.8.17日 我和我女朋友恋爱两周年的日子.走到今天很不容易,我很珍惜. 就想趁这机会,尽自己能力做一个特别的礼物. 这款应用两周前就开始计划了.也熬了几个晚上.接触wp开发时间不长,第一款应 ...

  10. Python3.x：pyodbc调用sybase的存储过程

    Python3.x:pyodbc调用sybase的存储过程 示例代码 # python3 # author lizm # datetime 2018-03-02 17:00:00 # -*- codi ...