描述

本例展示了如何增加多个图形图层到地图。一个图形图层显示国家，另一个显示城市。在一个地图中有多个图形图层的能力是在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. 【参考】查找Oracle最高的几个等待事件以及锁的信息

    1.通过操作系统的命令找到系统资源的bottleneck,如:CPU, Memory, I/O, Network  同时主要关注IOWait, PI/PO, Memory的使用情况 2.通过查询v$s ...

  2. 初识Git(一)

    以前经常听到Git,作为一个菜鸟级自学选手从没有真正去了解Git,借刘铁猛老师在油管上的<对答如刘>初步认识了git,作以下记录. 1.初始化一个git管理的文件夹 首先我在我的电脑C盘P ...

  3. 使用TensorFlow编写常用模块的Python代码示例

    将数据转化成tfrecords的形式 import os import tensorflow as tf import numpy as np import matplotlib.image as m ...

  4. 影像服务——加载CESIUM自带的影像服务

    1.加载arcgis数据——ArcGisMapServerImageryProvider var viewer = new Cesium.Viewer("cesiumDiv",{ ...

  5. [codevs3657]括号序列

    题目大意:有一列只有'(',')','[',']'构成的括号序列,求在序列中至少加上多少括号,能使该序列合法. 解题思路:区间dp. 我们以$f[i][j]$表示把区间$[i,j]$添成合法括号所需的 ...

  6. session 超时跳转登陆页面

    /** * session超时跳转登陆页面 * @author zhangdong * 2017年10月24日 */ @Aspect @Component public class SessionTi ...

  7. JAVA Web项目获取src和WebContent目录下的配置文件

    一,获取src下面的配置文件信息 1,结构图如下: package com.binp.properties; import java.io.FileInputStream; import java.i ...

  8. 【BZOJ 1196】[HNOI2006]公路修建问题

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二分最后选的边中的最大值是多少. mid 则所有边权小于等于mid的边都可以用了. 那么我们要怎么选择呢? ->优先选择一级的 ...

  9. 【转】Hook钩子C#实例

    [转]Hook钩子C#实例 转过来的文章,出处已经不知道了,但只这篇步骤比较清晰,就贴出来了. 一.写在最前 本文的内容只想以最通俗的语言说明钩子的使用方法,具体到钩子的详细介绍可以参照下面的网址: ...

  10. mysql中文乱码解决方式

    近期项目使用到mysql.却突然出现了中文乱码问题.尝试了多种方案,最终解决乱码问题,总结一下解决方式,给遇到同样问题的人一点參考. 中文乱码的原因 1.安装mysqlserver的时候编码集设定有问 ...