描述

本例展示了如何使用图形显示查询结果，如何使用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. hiho 1613 - 墨水滴 - bfs+优先队列 *

    题目链接 小Ho有一张白纸,上面有NxN个格子.小Ho可以选择一个格子(X, Y),在上面滴一滴墨水.如果这滴墨水的颜色深度是G,那么这个格子也会被染成深度为G的格子.同时周围的格子也会被这滴墨水浸染 ...

  2. 快速沃尔什变换（FWT）笔记

    开头Orz hy,Orz yrx 部分转载自hy的博客 快速沃尔什变换,可以快速计算两个多项式的位运算卷积(即and,or和xor) 问题模型如下: 给出两个多项式$A(x)$,$B(x)$,求$C( ...

  3. vmware vsphere出现“需要整合虚拟机磁盘”的告警处理方法（完整版）

    vmware vsphere出现“需要整合虚拟机磁盘”的告警 处理步骤: 1.选择对应虚机,快照——整合 (不行看下一条) 通常情况执行完第一步就好了 2.如果整合报错,提示文件锁定 2.1 新建快照 ...

  4. window下搭建Python3.7+selenium3.1.1+pycharm环境

    1.安装Python3.7 1.1  下载 Python并安装 Python3.5 (勾选上 Add Python3.7 to PATH) 点击 Install Now,安装完成后将python路径加 ...

  5. Android自己定义处理崩溃异常

    用过安卓手机的用户以及安卓开发人员们会时长碰到程序异常退出的情况.普通用户遇到这样的情况,肯定非常恼火,甚至会骂一生垃圾软件,然后卸载掉.那么开发人员们在开发过程中遇到这样的情况给怎么办呢,当然,你不 ...

  6. mysql-数据库维护

    一.备份数据 1.使用mysqldump命令备份:前提:musql的版本必须一致. mysqldump -u username -p  --default -character-set=gbk dbn ...

  7. 自己封装js组件 - 中级中高级

    接着做关于alert组件的笔记 怎么又出来个中高级呢 对没错 就是出一个中高级来刷流量呵呵呵,但是中高级也不是白叫的 这次主要是增加了widget类,增加了自己绑定的事件和触发事件的方法!这么做是为什 ...

  8. less10 loop循环

    less .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // 递归调用自身 4 3 2 1 0 width: (10p ...

  9. 38.angular的scope作用域

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...

  10. <Three.js>（第二节）添加长方体

    一.实验内容 上一节已经搭好了实验的框架.这一节我们将在屏幕上显示一些几何图形.如下图所示,我们将在屏幕上显示一个正方体. 二.实验步骤 1.创建场景 正像上一节所说,首先我们需要建一个场景,场景就是 ...