描述

本例展示了如何使用图形显示查询结果，如何使用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. Matlab---从入门到精通 Chapter 4 编程基础

    ---恢复内容开始--- 4-1 M文件编辑器 在命令窗口输入edit命令,可以打开M文件编辑器,创建新的M文件 在命令行中输入edit filename,那么可以打开在当前目录环境下的M文件 4-2 ...

  2. es6 学习7 Set 和 Map 数据结构

     Set 和 Map 数据结构 一.Set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. const set = new Set([1, 2, 3, 4, ...

  3. HDU-3746 Cyclic Nacklace 字符串匹配 KMP算法 求最小循环节

    题目链接:https://cn.vjudge.net/problem/HDU-3746 题意 给一串珠子,我们可以在珠子的最右端或最左端加一些珠子 问做一条包含循环珠子的项链,最少还需要多少珠子 思路 ...

  4. POJ-3159 Candies 最短路应用（差分约束）

    题目链接:https://cn.vjudge.net/problem/POJ-3159 题意 给出一组不等式 求第一个变量和最后一个变量可能的最大差值 数据保证有解 思路 一个不等式a-b<=c ...

  5. 计数排序（counting-sort）

    计数排序是一种稳定的排序算法,它不是比较排序.计数排序是有条件限制的:排序的数必须是n个0到k的数,所以计数排序不适合给字母排序.计数排序时间复杂度:O(n+k),空间复杂度:O(k),当k=n时,时 ...

  6. 浅谈python 中正则的一些函数

         主要的函数有  : match() search() findall() group() groups() split()  match (): 含义  开头匹配,匹配成功返回一个对象失败则 ...

  7. Python3+Gurobi使用教程(一)

    Gurobi使用教程 1.Gurobi使用的一般框架 from gurobipy import * try: m=Model('modelname') except GurobiError: prin ...

  8. Axios 使用时遇到的问题

    最近使用 vue 构建一个小项目,在使用 axios 发送 post 请求的时候,发现 axios 发送数据默认使用 json 格式,百度搜了下,更改 ContentType 不管用,最终问题原来是: ...

  9. Qt之OpenSSL

    简述 OpenSSL是一个强大的安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. 简述 下载安装 使用 更多参考 下载安装 ...

  10. Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessException总结

    最新项目中遇到了 Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.Proces ...