描述

本例展示了如何使用图形显示查询结果，如何使用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. Ubuntu 14.04下安装CUDA8.0

    配置环境如下: 系统:Ubuntu14.04 64bit 显卡:Nvidia K620M 显卡驱动:Nvidia-Linux-x86_64-375.66.run CUDA8.0 +  cudnn8.0 ...

  2. HDU-5693 D Game 动态规划 两次动规

    题目链接:https://cn.vjudge.net/problem/HDU-5693 题意 中文题 这个游戏是这样的,首先度度熊拥有一个公差集合{D},然后它依次写下N个数字排成一行.游戏规则很简单 ...

  3. POJ-2752 Seek the Name, Seek the Fame 字符串问题 KMP算法 求前后缀串相同数木

    题目链接:https://cn.vjudge.net/problem/POJ-2752 题意 给一个字符串,求前缀串跟后缀串相同的前缀串的个数 例:alala 输出:a, ala, alala 思路 ...

  4. POJ1743Musical Theme（后缀数组+二分）

    题意 有N(1 <= N <=20000)个音符的序列来表示一首乐曲,每个音符都是1..88范围内的整数,现在要找一个重复的主题.“主题”是整个音符序列的一个子串,它需要满足如下条件: 1 ...

  5. mysql 定时每秒插入一条数据

    1.创建表 2.创建存储过程 CREATE PROCEDURE user()INSERT INTO user(name,sex) VALUES ('1111','1'); 3.创建定时器 CREATE ...

  6. Linux学习总结（10）——Linux查看CPU和内存使用情况

    在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会 ...

  7. Java基础学习总结（7）——Object类

    一.Object类介绍 Object类在JAVA里面是一个比较特殊的类,JAVA只支持单继承,子类只能从一个父类来继承,如果父类又是从另外一个父类继承过来,那他也只能有一个父类,父类再有父类,那也只能 ...

  8. codeforces 570 D Tree Requests

    题意:给出一棵树.每一个结点都有一个字母,有非常多次询问,每次询问.以结点v为根的子树中高度为h的后代是否可以经过调整变成一个回文串. 做法: 推断能否够构成一个回文串的话,仅仅须要知道是否有大于一个 ...

  9. java 短连接+MD5加密短链接

    java 短连接+MD5加密短链接 import java.security.MessageDigest; public class ShotUrlUtil { public static void ...

  10. vncserverpassword改动

    前几天去客户现场,客户说有測试库.Linux下的,帮忙给新建一个数据库,我这么热心的人.是吧 那就開始吧. 一般使用vnc搞图形安装.熟练的打开vnc.输入password,报错!!我愣了几秒,忽然反 ...