描述

本例展示了如何使用图形显示查询结果，如何使用draw toolbar在地图上选择图形和如何修改图形符号为“高亮”。

在地图上画一个矩形区域，加亮矩形范围内的城市。这个应用统计高亮的城市个数并列出城市名称。能够画另外一个矩形来改变高亮的城市集合。

初始的在地图上见到的城市集和是应用加载时生成的查询结果。查询找到ESRI_StatesCitiesRivers_USA地图服务的Cities layer的Washington州的所有城市。城市被加到地图的GraphicsLayer。

draw toolbar帮助用户在地图上画矩形。工具栏不是一个用户界面控件；工具栏仅仅是为了显示矩形和捕获范围保存JavaScript代码的帮助类。 创建功能栏，激活绘制的类型，提供一个绘制完成时做些事情的事件监听器。在本例中，所以这些都在initToolbar函数中实现:

function initToolbar(map) {
  var tb = new esri.toolbars.Draw(map);
  dojo.connect(tb, "onDrawEnd", findPointsInExtent);
  tb.activate(esri.toolbars.Draw.EXTENT);
}

当画矩形结束时回调函数findPointsInExtent被调用。这个函数循环访问地图里每个城市 graphic并确定它是否在绘制工具栏返回的范围内。如果在范围内，代码修改城市的图形为加亮符号并且增加城市信息到结果数组。结果数组被用于创建地图下面看到的城市名称列表。

注意InfoTemplate利用html在一个表格行中放置每个结果。 results.join()方法连结结果数组中的所有的元素为一个字符串。这个字符串被放置在<table>标签里面来创建一个表格。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html>

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <meta http-equiv="X-UA-Compatible" content="IE=7" />

     <title>Points in Extent</title>

     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">

     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>

     <script type="text/javascript">

       dojo.require("esri.map");

       dojo.require("esri.toolbars.draw");

       dojo.require("esri.tasks.query");

       //global variables

       var map, defaultSymbol, highlightSymbol, resultTemplate;

       function init() {

         //create map, set initial extent and disable default info window behavior

         //创建地图，设置初始化边界

         map = new esri.Map("map", {

           extent: new esri.geometry.Extent(-125.9016637859635, 44.600742276385304, -114.6516637859635, 50.225742276385304, new esri.SpatialReference({wkid:4326})),

           showInfoWindowOnClick:false

         });

         dojo.connect(map, "onLoad", initToolbar);

         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

         //initialize symbology

         defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,0,255]));

         highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0]));

         //initialize & execute query

         var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");

         var query = new esri.tasks.Query();

         query.where = "STATE_NAME = 'Washington'";

         query.returnGeometry = true;

         query.outFields = ["CITY_NAME"];

         queryTask.execute(query, addPointsToMap);

         //info template for points returned

         resultTemplate = new esri.InfoTemplate("City", "<tr><td>${CITY_NAME}</tr></td>");

       }

       //initialize drawing toolbar

       function initToolbar(map) {

         var tb = new esri.toolbars.Draw(map);

         //find points in Extent when user completes drawing extent

         dojo.connect(tb, "onDrawEnd", findPointsInExtent);

         //set drawing mode to extent

         tb.activate(esri.toolbars.Draw.EXTENT);

       }

       //add points to map and set their symbology + info template

       function addPointsToMap(featureSet) {

         var features = featureSet.features;

         for (var i=0, il=features.length; i<il; i++) {

           map.graphics.add(features[i].setSymbol(defaultSymbol).setInfoTemplate(resultTemplate));

         }

       }

       //find all points within argument extent

       function findPointsInExtent(extent) {

         var graphics = map.graphics.graphics;

         var results = [];

         var graphic;

         for (var i=0, il=graphics.length; i<il; i++) {

           graphic = graphics[i];

           //if point is contained within extent, highlight it and add for display in results list

           if (extent.contains(graphic.geometry)) {

             graphic.setSymbol(highlightSymbol);

             results.push(graphic.getContent());

           }

           //else if point was previously highlighted, reset its symbology

           else if (graphic.symbol == highlightSymbol) {

             graphic.setSymbol(defaultSymbol);

           }

         }

         //display number of points in extent

         dojo.byId("inextent").innerHTML = results.length;

         //display list of points in extent

         dojo.byId("results").innerHTML = "<table><tbody>" + results.join("") + "</tbody></table>";

       }

       dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

     Draw an Extent on the map to find all points within this extent

     <!-- map div -->

     <div id="map" style="width:800px; height:400px; border:1px solid #000;"></div>

     <br />

     <!-- display number of points in drawn extent -->

     <b># of points in extent = <span id="inextent">0</span></b>

     <!-- list points in extent -->

     <div id="results" style="width:400px; height:200px; border:1px solid #000; overflow:auto;">

     </div>

   </body>

 </html>

ArcGIS api for javascript——图形-选择一个范围内的点的更多相关文章

  1. ArcGIS api for javascript——图形-使用多个图形图层

    描述 本例展示了如何增加多个图形图层到地图.一个图形图层显示国家,另一个显示城市.在一个地图中有多个图形图层的能力是在ArcGIS JavaScript API v1.4增加的. 从蓝色的城市点分隔灰 ...

  2. ArcGIS api for javascript——图形-增加图形到地图

    描述 本例展示了如何使用Draw工具栏在地图上描绘许多种类的几何体.ArcGIS JavaScript API包含工具栏. 工具栏不是一个在页面上自动地可见的用户界面组件.相反,工具栏是一个助手类,可 ...

  3. 基于ArcGIS API for Javascript的地图编辑工具

    最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...

  4. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

  5. 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述

    原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...

  6. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  7. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

  8. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  9. ArcGIS API for JavaScript FeatureLayer服务属性编辑

    首先说一下感想吧,刚入行时感觉深似海,掉到了GIS开发的陨石大坑里了,首先是学了小半年的Flex,用到了ArcGIS API for Flex,接着又是半年的ArcEngine开发,现在终于摸到了一点 ...

随机推荐

  1. 使用rman恢复数据小结

    恢复前提有数据备份 以 alter database open resetlogs 开机以后多要做一次全备(以前的备份失效了) 恢复参数文件: restore spfile from '/home/o ...

  2. php获取当前月份的前（后）几个月

    //获取当前月份的前一月 function GetMonth($sign) { //得到系统的年月 $tmp_date=date("Ym"); //切割出年份 $tmp_year= ...

  3. 路飞学城Python-Day14(practise)

    本章总结 练习题 1.logging模块有几个日志级别? 5个,按级别从高到低分别是 CRITICAL(灾难)>ERROR(错误)>WARNING(警示)>INFO(信息)>D ...

  4. layui层级

    zIndex:layer.zIndex, success : function(layero){ var zIndex = layer.index; $(layero).css(‘z-index’,z ...

  5. luogu P1622 释放囚犯

    题目描述 Caima王国中有一个奇怪的监狱,这个监狱一共有P个牢房,这些牢房一字排开,第i个紧挨着第i+1个(最后一个除外).现在正好牢房是满的. 上级下发了一个释放名单,要求每天释放名单上的一个人. ...

  6. 紫书 习题8-12 UVa 1153（贪心）

    本来以为这道题是考不相交区间, 结果还专门复习了一遍前面写的, 然后发现这道题的区间是不是 固定的, 是在一个范围内"滑动的", 只要右端点不超过截止时间就ok. 然后我就先考虑有 ...

  7. Object-C,数组NSArray

    晚上回来,写了2个iOS应用程序. 就是在界面中,展示标签.一种是手动构造界面,然后绑定事件.另外一种是,使用自带的界面作为容器,但是手动向里面放其它界面元素. 书中的观点是,使用图形化界面,构造界面 ...

  8. FarPoint自动换行

    单元格自动换行 FarPoint.Win.Spread.CellType.TextCellType mType = new FarPoint.Win.Spread.CellType.TextCellT ...

  9. 洛谷—— P2896 [USACO08FEB]一起吃饭Eating Together

    https://www.luogu.org/problem/show?pid=2896 题目描述 The cows are so very silly about their dinner partn ...

  10. 很好的DP思路，字符串比较次数

    题目: https://leetcode.com/problems/distinct-subsequences/?tab=Description 一般没有明显思路的情况下,都要想想DP,用下Divid ...