描述

本例展示了如何使用图形显示查询结果，如何使用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. eclipse界面更改为黑色

    效果如下: 更改很简单,该两个配置就行了,如下图: 1.在window中打开Preferences,然后跟下图一样配置就行了.

  2. 关于Scrapy爬虫项目运行和调试的小技巧（下篇）

    前几天给大家分享了关于Scrapy爬虫项目运行和调试的小技巧上篇,没来得及上车的小伙伴可以戳超链接看一下.今天小编继续沿着上篇的思路往下延伸,给大家分享更为实用的Scrapy项目调试技巧. 三.设置网 ...

  3. NodeJS学习笔记 (8)网络服务-http-server(ok)

    http服务端概览 创建server 几行代码搞定 var http = require('http'); var requestListener = function(req, res){ res. ...

  4. sqlmap 实战漏洞平台dvwa进行密码破解

    2016-05-24 (1)实验的具体的环境极其思路 首先我们要检测我们的漏洞平台是否有sql注入 ,进行简单的测试发现在用户userid 上存在注入的漏洞 使用抓包工具对其cookie 进行获取如下 ...

  5. Cause of 400 Bad Request Errors

    The 400 Bad Request error displays inside the Internet browser window, just as web pages do. Cause o ...

  6. 纯净版linux （debian）挂载VirtualBox共享文件夹

    使用的虚拟机版本是:VirtualBox-5.2.8-121009 使用的linux版本是:Linux debian 4.9.0-7-amd64 tty 1. 开始配置 1.1:打开虚拟机设置,打开你 ...

  7. vue-cli#2.0项目结构分析

    项目结构 build 构建工具相关的目录 config 配置目录 dist 通过工具打包生成的最终需要上线的目录 node_modules 存放本地开发所有的依赖包的目录 src 源码目录 stati ...

  8. HTML一些标记

    4)a标签也可以转换样式为按钮 <a class="btn btn-primary" href="#" role="button"&g ...

  9. 使用InstelliJ IDEA创建Web应用程序

    环境版本 Windows 8.1IDE:InstelliJ IDEA 13    Spring:Spring 4.1.1 & Spring MVC 4.1.1    WebLogic 10.3 ...

  10. Object-C,NSSet，不可变集合

    又到晚上了,继续码代码. 正在此时,老爸一个电话"海阔凭鱼跃,天高任鸟飞",老爸不在为老问题烦我了. 自由了,突然感觉压力好大啊. 将来混的太惨,可咋办啊- 第1个例子是,不可变集 ...