描述

本例使用唯一值渲染器来作为美国的符号。每个州有一个字符串属性"SUB_REGION"表示它的国家的地区。UniqueValueRenderer.addValue()方法被用来重复地为每个区域定义一个颜色。

 <!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>Unique Value Renderer</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({xmin:-130.78125,ymin:19.51171875,xmax:-60.46875,ymax:54.66796875,spatialReference:{wkid:}}),

           slider: false

         });

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

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

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

       }

       dojo.addOnLoad(init);

       function connectErrorHandler() {

         dojo.connect(map.graphics, "onError", errorHandler);

       }

       function errorHandler(err) {

         console.error(err.message);

       }

       function doQuery() {

         var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1");

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

         query.where = "1=1";

         query.outFields = ["SUB_REGION"];

         query.returnGeometry = true;

         queryTask.execute(query, addFeatureSetToMap);

       }

       function addFeatureSetToMap(featureSet) {

         //define default symbol for features

         var defaultSymbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_NULL);

         defaultSymbol.outline.setStyle(esri.symbol.SimpleLineSymbol.STYLE_NULL);

         //create renderer

         var renderer = new esri.renderer.UniqueValueRenderer(defaultSymbol, "SUB_REGION");

         //add symbol for each possible value

         renderer.addValue("Pacific", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([,,,0.5])));

         renderer.addValue("Mtn", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([,,,0.5])));

         renderer.addValue("N Eng", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([,,,0.5])));

         renderer.addValue("S Atl", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([,,,0.5])));

         renderer.addValue("Mid Atl", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([,,,0.75])));

         renderer.addValue("E N Cen", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([,,,0.5])));

         renderer.addValue("W N Cen", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([,,,0.5])));

         renderer.addValue("E S Cen", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([,,,0.5])));

         renderer.addValue("W S Cen", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([,,,0.5])));

         map.graphics.setRenderer(renderer);

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

           map.graphics.add(feature);

         });

       }

     </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介绍

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

  2. 使用Arcgis Api for Javascript 调用 本地Portal发布的WebMap

    1.环境搭建 安装Arcgis Portal 10.4,Server 10.4,DataStore ,WebAdaptor for IIS,搭建arcgis api for javascript 4. ...

  3. ArcGIS API For JavaScript 开发（二）基础地图

    有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...

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

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

  5. arcgis api for javascript 3.16开发（一）

    原来一直都在用Flex开发arcgis的地图接口,用的时间很长,用的习惯也顺手,可Flex这个开发工具已经基本要淘汰了,并且地图借助flash的方式加载在浏览器里已经不能适应webgis的快速开发需求 ...

  6. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  7. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  8. ArcGIS API for JavaScript 中的数据类型【vs】GPServer的数据类型

    熟悉GPServer的同学肯定知道,GPServer在10.1的ArcMap后需要执行成功一次才能发布. 发布GPServer,可以是ArcMap的工具箱的工具,也可以是自己写的模型. 不管是ArcM ...

  9. ArcGIS API for JavaScript 入门教程[0] 目录

    随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...

随机推荐

  1. CSS3———linear-gradient() 线性渐变

    线性渐变linear-gradient() 遇到了这样的css样式 body { height: 100%; background-color: #ffffff; background-image: ...

  2. Vue this.$router.push、replace、go的区别

    1.this.$router.push 描述:跳转到不同的url,但这个方法会向history添加一个记录,点击后会返回到上一个页面 用法 //字符串 this.$router.push('home' ...

  3. js验证输入框

    项目开发中,都会有对表单form中的input输入框进行一些限制验证 如: <!DOCTYPE html><html lang="en"> <head ...

  4. 关于 Error: No PostCSS Config found in 的错误

    问题描述: 项目在本地运行不报错,上传到 GitHub 之后,再 clone 到本地, npm install 安装完成之后再执行 npm run dev 这时报错 Error: No PostCSS ...

  5. 紫书 例题 11-12 UVa 1515 （最大流最小割）

    这道题要分隔草和洞, 然后刘汝佳就想到了"割"(不知道他怎么想的, 反正我没想到) 然后就按照这个思路走, 网络流建模然后求最大流最小割. 分成两部分, S和草连, 洞和T连 外围 ...

  6. 紫书 习题8-4 UVa 11491 （贪心）

    题意:给你一个数, 要求删去一些数字, 使得剩下的数字最大. 这道题用贪心解决. 大家想一想, 两个数比较大小, 肯定先比较第一位的数,然后依次比较第二位,以此类推. 既然我们要保证最后的数字最大, ...

  7. 【Educational Codeforces Round 41 (Rated for Div. 2) D】Pair Of Lines

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果点的个数<=3 那么直接输出有解. 否则. 假设1,2最后会在一条直线上,则把这条直线上的点都删掉. 看看剩余的点是否在同 ...

  8. POJ 2607 Fire Station

    Fire Station Time Limit: 5000ms Memory Limit: 65536KB This problem will be judged on PKU. Original I ...

  9. mysql-增删改数据

    一.增加操作 INSERT用来插入或添加行到数据库表的.插入用以下几种方式: 1.插入完整的行 insert into customers values(null,'Pep E,LaPew','100 ...

  10. input range 模拟滑块

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...