描述

本例展示了如何增加多个图形图层到地图。一个图形图层显示国家，另一个显示城市。在一个地图中有多个图形图层的能力是在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. socket网络编程登录实现及多客户端和服务端的数据交互

    一.TCP/IP 客户端 package com.demo.entity; import java.io.Serializable; public class UserInfo implements ...

  2. 状压DP复习

    深感自己姿势水平之蒻……一直都不是很会状压DP,NOIP又特别喜欢考,就来复习一发…… 题目来源 Orz sqzmz T1 [BZOJ4197][NOI2015]寿司晚宴 (做过)质因数分解最大的质因 ...

  3. sql 技巧

    1.想把一张表的 某个字段或多个字段 的 所有数据 复制到另外一张表里  insert into 表名(字段) select (字段) from 表名 2.from Users u , IN(u.ro ...

  4. mariadb数据库的链接查询和表格设计

    链接查询 练习准备: --创建学生表 create table students ( id int unsigned not null auto_increment primary key, name ...

  5. 一个tomcat下部署多个项目或一个服务器部署多个tomcat

    最近需要把两个项目同时部署到服务器上,于是研究了一下,页借鉴了很多别人的方法,把过程记录下来,以儆效尤. 目录: 1,一个tomcat下同时部署两个项目(多个项目可以参考) 1.1项目都放在webap ...

  6. max带来的冲突

    题目要求: /* * Copyright (c) 2014, 烟台大学计算机学院 * All rights reserved. * 文件名:sum123.cpp * 作 者:林海云 * 完毕日期:20 ...

  7. jQuery -&gt; 怎样【先创建、再改动、后加入】 DOM元素

    怎样一气呵成地.on the fly地操作DOM元素呢? 比如顺序运行[创建]-> [改动]-> [加入]三个动作. 因为jQuery支持链式操作,事实上就是设计模式的builder模式, ...

  8. 10、匿名内部类、枚举类、日期、Math、Random、String、equals、StringBuffer、包装类、对象数组、克隆，标准输出3

    1对象的克隆(clone) 单纯的同类的两个对象a0 a00,a0=a00只是栈指向同一个堆,而不是开辟两个新堆,修改其中一个,另一个也会受牵连. 需要重写Clone()方法,并且实现Cloneabl ...

  9. ACdream 1139(Sum-逆元)

    J - Sum Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitStatu ...

  10. HDU 1542 Atlantis（矩形面积并）

    HDU 1542 Atlantis 题目链接 题意:给定一些矩形,求面积并 思路:利用扫描线,因为这题矩形个数不多,直接暴力扫就能够了.假设数据大.就要用线段树 代码: #include <cs ...