Arcgis for Js实现graphiclayer的空间查询
本节讲的是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的空间查询的更多相关文章
- Arcgis for Js实现graphiclayer的空间查询(续)
上文中,实现了简单的针对graphiclayer的空间查询工作,在本节,将更加详细的介绍针对graphiclayer的空间查询.首先,空间查询的方式:提供多种类型的空间查询,包括点周边.线周边.面内等 ...
- Arcgis for Js之featurelayer实现空间查询和属性查询
空间查询和属性查询是常用的两种对数据的检索与查询方式,在本节,将讲述Arcgis for Js下如何实现featurelayer的这两种查询方式,先贴图给大家看看: 实现界面 属性查询 空间查询 看完 ...
- Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示
功能需求: 分省市统计并展示全国雨量站的数目与位置. 常规做法: 分省市雨量站的数目通过统计表的形式在页面端展示,位置根据XY坐标信息将雨量站标绘在图上. 优化做法: 去掉统计图的展示方式,直接将各省 ...
- Arcgis for Js之Graphiclayer扩展具体解释
在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就具体的讲讲esri/la ...
- Arcgis for Js之Graphiclayer扩展详解
在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就详细的讲讲esri/la ...
- (转)Arcgis for Js之Graphiclayer扩展详解
http://blog.csdn.net/gisshixisheng/article/details/41208185 在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种 ...
- ArcGIS for Android示例解析之空间查询-----QueryTask
转自:http://blog.csdn.net/wozaifeiyang0/article/details/7331450 QueryTask 查询功能在GIS中是一个不可或缺的重要功能,示例中提供了 ...
- 使用ArcGIS API for Silverlight 进行复合多条件空间查询
原文:使用ArcGIS API for Silverlight 进行复合多条件空间查询 这两天帮网上认识的一个兄弟做了一个查询的示例,多多少少总结一下,在此和大家分享. 为什么说是复合多条件呢?因为进 ...
- ArcGIS API for JavaScript 4.2学习笔记[25] 官方第八章Analysis(空间查询)概览与解释
开森,最关注的空间分析章节终于到了,在空间查询那节逻辑性的代码简直要命(呵呵,空间分析的代码也要命...). 上目录截图: [Geodesic buffers(GeometryEngine)] 使用G ...
随机推荐
- mysql增量恢复的一个实例操作
通过防火墙禁止web等应用向主库写数据或者锁表,让主库暂时停止更新,然后进行恢复 模拟整个场景 1.登录数据库 [root@promote 3306]# mysql -uroot -S /data/3 ...
- React:快速上手(5)——掌握Redux(2)
React:快速上手(5)——掌握Redux(2) 本文部分内容参考阮一峰的Redux教程. React-Redux原理 React-Redux运行机制 我觉得这张图清楚地描述React-Redux的 ...
- 112. Path Sum (判断路径和是否等于某值)
Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up a ...
- 手机调取摄像头问题(getUserMedia)
先说坏消息,苹果机没法玩这个!!! 而且,必须拥有 https 的安全协议!!! 而安卓机想完成这个功能倒是很 easy 的,看一眼代码 主要传入三个参数,配置对象,成功,失败 var mediaOp ...
- shell-最近7天目录
#采用将最近7天的日期放入到数组中,遍历整个目录,将这7天的目录连接成一个字符串paths. #注意: .日期目录里面的文件只是做了简单的以part开头的匹配. # .path路径是日期的上一层,以/ ...
- unbntu修改mac地址
分享下Ubuntu下更改MAC地址的简单方法: 首先把网卡设备给 down 掉,否则会报告系统忙,无法更改. sudo ifconfig eth0 down 然后修改 MAC 地址,这一步较 Wind ...
- [BZOJ1257]余数之和
Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + … + k mod n的值 其中k mod i表示k除以i的余数. 例如j(5 ...
- API接口幂等性框架设计
表单重复提价问题 rpc远程调用时候 发生网络延迟 可能有重试机制 MQ消费者幂等(保证唯一)一样 解决方案: token 令牌 保证唯一的并且是临时的 过一段时间失效 分布式: redis+to ...
- Java数据类型——面试题
1.short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 +=1;有什么错? 答:对于short s1=1;s1=s1+1来说,在s1+1运算时会自动提升表 ...
- springmvc跨域
//mvc默认是text/plain;charset=ISO-8859-1@RequestMapping(value = "/xxx", produces = "appl ...