描述

本例展示了如何增加多个图形图层到地图。一个图形图层显示国家，另一个显示城市。在一个地图中有多个图形图层的能力是在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. 【原创】rman备份出现ORA-19625

    [oracle@sunny stage]$ rman target / Recovery Manager: Release 10.2.0.1.0 - Production on Sun Mar 18 ...

  2. centos下nginx配置

    转自  http://www.linuxidc.com/Linux/2016-09/134907.htm 安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Wi ...

  3. POJ 2299 Ultra-QuickSort【树状数组 ，逆序数】

    题意:给出一组数,然后求它的逆序数 先把这组数离散化,大概就是编上号的意思--- 然后利用树状数组求出每个数前面有多少个数比它小,再通过这个数的位置,就可以求出前面有多少个数比它大了 这一篇讲得很详细 ...

  4. 紫书 例题8-4 UVa 11134（问题分解 + 贪心）

     这道题目可以把问题分解, 因为x坐标和y坐标的答案之间没有联系, 所以可以单独求两个坐标的答案 我一开始想的是按照左区间从小到大, 相同的时候从右区间从小到大排序, 然后WA 去uDebug找了数据 ...

  5. IDEA设置控制台日志 不换行

    最新版的IDEA设置控制台不自动换行位置如下:Setting->Editor->General->Console,不要勾选下图项即可.

  6. Maven项目的坐标GroupId和ArtifactId

    GroupId和ArtifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven本地仓库去,你想要找到你的项目就必须根据这两个id去查找.       GroupId一 ...

  7. mysql-幻读及其例子

    第一步建表并插入5条记录:  接下来我们看下大部分mysql所说的幻读现象: 事务1(开启事务查询发现没有记录6准备插入):  事务2(开启事务,发现没有记录6插入,并提交事务):  事务1:查询发现 ...

  8. Html学习(三) 分类学习

    代码: <h1>这是一级分类吗</h1> <h2>这是二级分类吗</h2> <h3>这是三级分类吗 </h3> 效果: 介绍: ...

  9. 手动配置三大框架整合：Spring+Struts2+mybatis

    如今主流的项目框架中,数据库持久层有可能不是hibernate,而是mybatis或者ibatis,事实上它们都是一样的,以下我来把环境搭建一下: [导入相关jar包]新建web项目projectms ...

  10. node04---fs文件操作、静态服务器

    08fs.js var http = require("http"); var fs = require("fs"); var server = http.cr ...