描述

本例展示了如何增加多个图形图层到地图。一个图形图层显示国家，另一个显示城市。在一个地图中有多个图形图层的能力是在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. LOJ #10121 与众不同 (RMQ+二分)

    题目大意 :给你一个整数序列,定义一个合法子串为子串内所有数互不相同,会有很多询问,求区间$[L,R]$内最长连续合法子串长度 一道思维不错的$RMQ$题,NOIP要是考这种题可能会考挂一片 预处理出 ...

  2. Solr全文检索引擎配置及使用方法

    介绍 Solr是一款开源的全文检索引擎,基于lucene.拥有完善的可配置功能界面.具有丰富的查询语言,可扩展,可优化. 下载安装 进入solr官网下载包(这里我使用的版本是8.0) http://w ...

  3. Springboot+swagger2的接口文档开发

    一.创建一个SpringBoot项目 1. 2. 3. 4. 把web里的web选中,SQL里选择自己需要的,点击next 二.创建各项所需的controller,configure等 1. 项目布局 ...

  4. python如何命令行下载包

    $ wget https://bootstrap.pypa.io/get-pip.py $ python get-pip.py $ pip -V #查看pip版本     $ pip install ...

  5. Java基础学习总结（3）——抽象类

    一.抽象类介绍 下面通过一下的小程序深入理解抽象类 因此在类Animal里面只需要定义这个enjoy()方法就可以了,使用abstract关键字把enjoy()方法定义成一个抽象方法,定义如下:pub ...

  6. 洛谷 P1702 突击考试

    P1702 突击考试 题目描述 一日,老师决定进行一次突击考试.已知每个学生都有一个考试能力等级,教室里一共有N个课桌,按照顺序排成一列,每张课桌可以坐两个人,第i张课桌坐的两个人的能力等级为(A[i ...

  7. 推断扫描后的内容是否是URL

    扫描的明明是Url.竟然当文本给处理了,看来正则没有通过. 扫描二维码后,我參考了QQ的效果.分了三种:网页地址.文件下载地址,文本信息:为了实现这样的效果.我 发现有非常多url非常奇葩.所以就想找 ...

  8. Linux 进程间通信(IPC)

    Linux 进程间通信(IPC): Linux系统中除了进程和进程之间通信,我想大家也应该关注用户空间与内核空间是怎样通信的.例如说netlink等等. 除了传统进程间通信外像Socket通信也须要掌 ...

  9. web集群中经常使用的session同步解决方式及对照

    随着站点的功能越来越多,用户量越来越庞大,单节点模式已经严重不能支撑整个系统的正常运作,轻则用户页面訪问时间越来越慢.重则就会导致整个系统瘫痪.这时候 就须要优化或调整眼下的架构,大部分人就会採用各种 ...

  10. vijos - P1732能量採集 (状态转移)

    P1732能量採集 Accepted 标签:NOI2010[显示标签] 背景 描写叙述 栋栋有一块长方形的地.他在地上种了一种能量植物,这样的植物能够採集太阳光的能量. 在这些植物採集能量后,栋栋再使 ...