描述

本例展示了如何增加多个图形图层到地图。一个图形图层显示国家，另一个显示城市。在一个地图中有多个图形图层的能力是在ArcGIS JavaScript API v1.4增加的。

从蓝色的城市点分隔灰色的区县多边形使图形易于管理。例如，如果仅仅想要删除城市，仅需删除有这个城市点的图形图层。如果城市和区县在同一个图形图层里，就不得不写一些额外的代码来探测城市图层并且删除它们。

注意如果单击一个重叠的图形区域（本例中是一个城市），仅仅上层的图形响应单击事件。

 <!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" charset="utf-8">

       dojo.require("esri.map");

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

       var map;

       function init() {

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

           extent: new esri.geometry.Extent(-102.61, 36.2, -93.82, 40.5, new esri.SpatialReference({wkid: 4326})),

           slider: false

         });

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

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

       }

       function doQueries(map) {

         //查询所有国家 in Kansas

         var countyQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

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

         countyQuery.outFields = ["*"];

         countyQuery.returnGeometry = true;

         countyQuery.outSpatialReference = map.spatialReference;

         countyQuery.where = "STATE_NAME = 'Kansas'";

         countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);

         //查询所有城市 in Kansas

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

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

         cityQuery.outFields = ["*"];

         cityQuery.returnGeometry = true;

         cityQuery.outSpatialReference = map.spatialReference;

         cityQuery.where = "STATE_NAME = 'Kansas'";

         cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);

       }

       function addCountyFeatureSetToMap(featureSet) {

         var symbol = new esri.symbol.SimpleFillSymbol();

         symbol.setColor(new dojo.Color([150,150,150,0.5]));

         //Create graphics layer for counties

         var countyLayer = new esri.layers.GraphicsLayer();

         map.addLayer(countyLayer);

         var infoTemplate = new esri.InfoTemplate("${NAME}","${'*'}");

         //Add counties to the graphics layer

         dojo.forEach(featureSet.features, function(feature) {

           countyLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));

         });

       }

       function addCityFeatureSetToMap(featureSet) {

         var symbol = new esri.symbol.SimpleMarkerSymbol();

         symbol.setColor(new dojo.Color([0,0,255]));

         //Create graphics layer for cities

         var cityLayer = new esri.layers.GraphicsLayer();

         map.addLayer(cityLayer);

         map.reorderLayer(cityLayer,1);

         var infoTemplate = new esri.InfoTemplate("${CITY_NAME}","${'*'}");

         //Add cities to the graphics layer

         dojo.forEach(featureSet.features, function(feature) {

           cityLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));

         });

       }

       dojo.addOnLoad(init);

     </script>

   </head>

   <body>

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

   </body>

 </html>

ArcGIS api for javascript——图形-使用多个图形图层的更多相关文章

  1. ArcGIS API For JavaScript 开发（五）要素图层的编辑

    2018-4-3 这篇博客主要讲述要素的层的编辑功能,是基于FeatureLayer的applyEdit方法.由于自己目前正在学习当中,有许多不足之处请各位指出,欢迎指导学习! 主要功能是 1.将地图 ...

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

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

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

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

  4. ArcGIS API for JavaScript介绍

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

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

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

  6. ArcGIS api for javascript——加载查询结果，悬停显示信息窗口

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  7. 关于ArcGIS api for JavaScript的一些内容

    2018-3-19 ArcGIS api for JavaScript 在3.4之后就已经抛弃了过时的写法,采用了AMD的写法,AMD规范即异步模块加载机制,这种规范让JS就像其它面向对象语言(比如J ...

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

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

  9. ArcGIS API for JavaScript 4.0（一）

    原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...

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

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

随机推荐

  1. http_build_query 字符串拼接

    http_build_query 字符串拼接 产生一个urlencode之后的请求字符串. 1.将数组转化成url问号(?)后的字符串 <?php $date=array( 'name'=> ...

  2. QNX多线程同步之Barrier(屏障)

    之前和大家介绍过QNX上的线程同步方法metux和semophore,通过这两种方法可以对一个或者几个资源进行加锁,避免资源使用上的冲突.在另一种情况下,某个线程需要在其它线程完成工作后才继续执行,这 ...

  3. oracle查询优化之子查询条件优化

    环境:oracle 11g 现有a表与b表通过a01字段关联,要查询出a表的数据在b表没有数据的数据:sql如下 ) ) 因为flag是虚拟字段没有走不了索引导致这条sql执行起来特别慢 310W条数 ...

  4. （GDOI2018模拟九）【UOJ#192】【UR#14】最强跳蚤

    (开头先Orz myh) 原题目: 在人类和跳蚤的战争初期,人们凭借着地理优势占据了上风——即使是最强壮的跳蚤,也无法一下越过那一堵坚固的城墙. 在经历了惨痛的牺牲后,跳蚤国王意识到再这样下去,跳蚤国 ...

  5. luogu P1622 释放囚犯

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

  6. weak和alias

    一.强符号和弱符号 在C语言中,如果多个模块定义同名全局符号时,链接器认为函数和已初始化的全局变量(包括显示初始化为0)是强符号,未初始化的全局变量是弱符号. 根据这个定义,Linux链接器使用下面的 ...

  7. sshd修改监听端口

    vi /etc/sshd/sshd_config ListenAddress 0.0.0.0 #修改为 ListenAddress 192.168.0.1 #代表只监听192.168.0.1的SSH请 ...

  8. SVN版本号管理工具使用中常见的代码提交冲突问题的解决方法

    相信刚開始学习使用SVN的小伙伴在项目合作开发的过程中一定常常遇到一些影响到自己编写的代码的苦恼.我这里列举了几种常见的问题以及问题的解决方法: 1.误删除和误操作的问题 问题1:有A和B两个人一块合 ...

  9. C++写的UrlEncode和UrlDecode

    关于UrlEncode的实现(C++).网上有非常多不同的版本号.对须要编码的字符集的选取并不统一.那么究竟有没有标准呢?答案是有的.參见wiki 绝对不编码的,仅仅有字母.数字.短横线(-).下划线 ...

  10. vim　插件之vundle

    vundle这个插件主要是用来插件管理的.它可以根据你配置的插件地址,自动下载.更新.删除插件,非常的好用 地址 https://github.com/gmarik/vundle 然后你在 .vim下 ...