【十】ArcGIS API for Javascript之专题图的制作（二）
来源：互联网 发布：同志小说软件免费下载 编辑：程序博客网 时间：2024/06/10 19:44
一、唯一值专题图
1、引言
唯一值专题图是一种简单的专题图，通过符号来区分不同的属性值。能够反映树地图要素数量或质量的差异。故当我们需要对某一属性进行渲染时，可以选择使用唯一值专题图。
如下图所示，以墨西哥为例的唯一值专题图。 
2、UniqueValueRenderer
esri/renderers/UniqueValueRenderer类用于制作唯一值专题图，常用的构造方法：
new UniqueValueRenderer(defaultSymbol, attributeField,attributeField2?, attributeField3?)
- defaultSymbol：用于未指定属性值的要素；
- attributeField：渲染的要素属性名称；
- attributeField2和attributeField3：额外需要时附加的属性字段；
代码实例：
//设置默认符号样式var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL); defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);//新建唯一值渲染器 var UVrenderer = new UniqueValueRenderer(defaultSymbol, "NAME"); 常用方法：
addValue(valueOrInfo, symbol?)
使用addValue方法设置对应的符号，其中valueOrInfo为具体的属性值，symbol为对应的符号。
代码实例：
//为每个可能的值添加渲染符号UVrenderer.addValue("Baja California Norte", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));UVrenderer.addValue("Baja California Sur", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5])));添加要素图层：
//新建信息模板 var infoTemplate = new InfoTemplate("${NAME}", "${*}");//新建要素图层 var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/test/moxica/MapServer/2", { infoTemplate: infoTemplate, mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"]});使用唯一值渲染器对要素图层进行渲染。并将结果添加到地图显示：
featureLayer.setRenderer(UVrenderer);featureLayer.refresh();map.addLayer(featureLayer); 3、全部代码
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <title>唯一值专题图</title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css" /> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <style> html, body, #content,#map{ height: 100%; margin: 0; padding: 0; } </style> <script> var map; require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/UniqueValueRenderer", "esri/Color", "dojo/on", "dojo/parser", "dojo/domReady!"], function(Map, ArcGISDynamicMapServiceLayer, FeatureLayer, InfoTemplate, SimpleLineSymbol, SimpleFillSymbol, UniqueValueRenderer, Color, on, parser) { parser.parse(); map = new Map("map", { basemap:"topo", center: [-102.12, 23.09], zoom: 5, logo:false }); var moxica= ArcGISDynamicMapServiceLayer("http://192.168.70.193:6080/arcgis/rest/services/test/moxica/MapServer"); map.addLayer(moxica); //添加地图服务 var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL); defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL); var UVrenderer = new UniqueValueRenderer(defaultSymbol, "NAME"); //新建唯一值渲染器 //为每个可能的值添加符号 UVrenderer.addValue("Baja California Norte", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.3]))); UVrenderer.addValue("Baja California Sur", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.3]))); UVrenderer.addValue("Nayarit", new SimpleFillSymbol().setColor(new Color([0, 255, 157, 0.3]))); UVrenderer.addValue("Jalisco", new SimpleFillSymbol().setColor(new Color([105, 0, 255, 0.3]))); UVrenderer.addValue("Guanajuato", new SimpleFillSymbol().setColor(new Color([255, 155, 0, 0.3]))); UVrenderer.addValue("Queretaro de Arteaga", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.3]))); UVrenderer.addValue("Hidalgo", new SimpleFillSymbol().setColor(new Color([30, 191, 255, 0.3]))); UVrenderer.addValue("Michoacan de Ocampo", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.3]))); UVrenderer.addValue("Mexico", new SimpleFillSymbol().setColor(new Color([255, 0, 200, 0.3]))); UVrenderer.addValue("Distrito Federal", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.3]))); UVrenderer.addValue("Colima", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.3]))); UVrenderer.addValue("Morelos", new SimpleFillSymbol().setColor(new Color([0, 255, 157, 0.3]))); UVrenderer.addValue("Yucatan", new SimpleFillSymbol().setColor(new Color([105, 0, 255, 0.3]))); UVrenderer.addValue("Campeche", new SimpleFillSymbol().setColor(new Color([255, 155, 0, 0.3]))); UVrenderer.addValue("Puebla de Arteaga", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.3]))); UVrenderer.addValue("Quintana Roo", new SimpleFillSymbol().setColor(new Color([30, 191, 255, 0.3]))); UVrenderer.addValue("Tlaxcala", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.3]))); UVrenderer.addValue("Guerrero", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.3]))); UVrenderer.addValue("Oaxaca", new SimpleFillSymbol().setColor(new Color([255, 0, 200, 0.3]))); UVrenderer.addValue("Tabasco", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.3]))); UVrenderer.addValue("Chiapas", new SimpleFillSymbol().setColor(new Color([0, 255, 157, 0.3]))); UVrenderer.addValue("Sonora", new SimpleFillSymbol().setColor(new Color([105, 0, 255, 0.3]))); UVrenderer.addValue("Chihuahua", new SimpleFillSymbol().setColor(new Color([255, 155, 0, 0.3]))); UVrenderer.addValue("Coahuila De Zaragoza", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.3]))); UVrenderer.addValue("Sinaloa", new SimpleFillSymbol().setColor(new Color([30, 191, 255, 0.3]))); UVrenderer.addValue("Durango", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.3]))); UVrenderer.addValue("Zacatecas", new SimpleFillSymbol().setColor(new Color([255, 0, 200, 0.3]))); UVrenderer.addValue("San Luis Potosi", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.3]))); UVrenderer.addValue("Nuevo Leon", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.3]))); UVrenderer.addValue("Tamaulipas", new SimpleFillSymbol().setColor(new Color([0, 255, 157, 0.3]))); UVrenderer.addValue("Veracruz-Llave", new SimpleFillSymbol().setColor(new Color([105, 0, 255, 0.3]))); UVrenderer.addValue("Aguascalientes", new SimpleFillSymbol().setColor(new Color([30, 191, 255, 0.3]))); UVrenderer.addValue("Puebla", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.3]))); var infoTemplate = new InfoTemplate("${NAME}", "${*}"); //新建信息模板 var featureLayer = neFeatureLayer("http://localhost:6080/arcgis/rest/services/test/moxica/MapServer/2", { infoTemplate: infoTemplate, mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], }); featureLayer.setRenderer(UVrenderer); featureLayer.refresh(); map.addLayer(featureLayer); }); </script> </head> <body class = "claro"> <div id="map"></div> </body></html>想了解更多关于UniqueValueRenderer的属性、方法，实例以及相关说明请戳官方文档。
二、点密度专题图
1、引言
点密度专题图以点的形式在地图上显示数据，一个点代表一定的数值，某一区域内的点的个数与该区域的数值成比例。所以点密度专题图可以用来可视化空间密度离散空间的变化现象。
如下图所示，为墨西哥人口分布点密度专题图，其中一个点代表3000。 
2、DotDensityRenderer
esri/renderers/DotDensityRenderer类用来绘制点密度专题图，它的构造方法为：
new DotDensityRenderer(params)
其中，params有两个很重要的属性分别为dotValue和dotSize。
- dotValue：指每个点代表的数值，数值越大则在地图上显示的点越少；
- dotSize：是点的大小，依据数据值的大小来设置合适的点大小。
- fields：一个数组对象，定义渲染的属性名称和颜色；
- dotShape：定义符号样式，”square” 或 “circle”，默认“square”；
代码实例：
//新建点密度渲染器DDrenderer=new DotDensityRenderer({ fields: [{ name: "POP1990", color: new Color("#FF3E96") }], dotValue: 3000, //设置点代表值 dotSize: 1.5, //设置点大小 dotShape:"circle" //设置点类型，默认square}); 使用点密度渲染器对要素图层进行渲染。并将结果添加到地图显示：
layer.setRenderer(DDrenderer);map.addLayers([layer]);设置图例：
//设置专题信息var legend = new Legend({ map: map, layerInfos: [{ layer: population, title: " 1990年墨西哥人口密度图" }]}, "legend");legend.startup();3、全部代码
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <title>点密度专题图</title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css" /> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <style> html, body, #map { height: 100%; margin: 0; padding: 0; } #info { position: absolute; right: 0; top: 0; padding: 1em 1em 0 1em; background: #fff; font: 14px sans-serif; width: 300px; text-align: center; border-radius: 0 0 0 10px; border: 1px solid #000; } </style> <script> var map; require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/renderers/DotDensityRenderer", "esri/dijit/Legend", "esri/Color", "dojo/on", "dojo/domReady!"], function( Map, ArcGISDynamicMapServiceLayer, FeatureLayer, InfoTemplate, DotDensityRenderer, Legend, Color, on ) { map = new Map("map", { basemap:"topo", center: [-102.12, 23.09], zoom: 5, logo:false }); var moxica = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/moxica/MapServer"); map.addLayer(moxica); var layer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/test/moxica/MapServer/2", { outFields: ["*"], infoTemplate: new InfoTemplate("${NAME}", "<b>POP1990:</b> ${POP1990}<br/><b>Area:</b> ${AREA}" ) //新建要素图层 }); layer.setDefinitionExpression("POP1990>1"); //设置图层显示的筛选表达式“SQL语句” DDrenderer=new DotDensityRenderer({ //新建点密度渲染器 fields: [{ name: "POP1990", color: new Color("#FF3E96") }], dotValue: 3000, //设置点代表值 dotSize: 1.5, //设置点大小 dotShape:"circle" //设置点类型，默认square }); layer.setRenderer(DDrenderer); map.addLayers([layer]); map.on("layers-add-result", function(e) { var population = e.layers[0].layer; var legend = new Legend({ //设置专题信息 map: map, layerInfos: [{ layer: population, title: " 1990年墨西哥人口密度图" }] }, "legend"); legend.startup(); }); }); </script> </head> <body> <div id="map"></div> <div id="info"> <div id="legend" style="width=300px;"></div> </div> </body></html> 想了解更多关于DotDensityRenderer的属性、方法，实例以及相关说明请戳官方文档。
阅读全文
0 0
- 【十】ArcGIS API for Javascript之专题图的制作（二）
- 【十】ArcGIS API for Javascript之专题图的制作（一）
- 【十】ArcGIS API for Javascript之专题图的制作（三）
- 【十】ArcGIS API for Javascript之专题图的制作（六）
- ArcGIS api for JavaScript 制作统计专题图
- （十）ArcGIS API For Javascript之动态图层
- arcgis api for flex之专题图制作（饼状图，柱状图等）
- ArcGIS For JavaScript API Switch Basemap(切换底图)————（二十）
- （二）ArcGIS API For JavaScript之Hello_World
- Arcgis API for Javascript入门（二）
- arcgis api for javascript 使用GraphicLayer 渲染专题图
- 二、ArcGIS API for JavaScript之地图与图层（1）
- ArcGIS API for javascript开发笔记（四）——GP服务调用之GP模型的规范化制作详解
- 【ArcGis for javascript从零开始】之二 ArcGIS for JavaScript安装本地API
- web端输出打印地图（ArcGIS api for Javascript）一、地图打印模板的制作
- 【ArcGis for javascript从零开始】之二 ArcGis加载天地图
- ArcGIS API for Javascript 实现在线要素编辑（二）
- ArcGIS API for Javascript 实现在线要素编辑（二）
- 当当网Dubbox
- 关于service中的事物回滚问题
- 用jQuery实现倒计时
- windows平台VR全景播放器,支持图片视频,rtsp,rtmp,http,udp,hls等网络格式
- 分针网——每日分享：实现电商菜单切换效果
- 【十】ArcGIS API for Javascript之专题图的制作（二）
- 跨域问题
- HDU
- 【链表】[Lintcode]合并两个排序链表
- colorAccent,colorPrimary,colorPrimaryDark
- 急速入门nginx
- 我的：Android Studio 实用小技巧 / 快捷方式
- MYCAT教程
- 安全狗防护引擎安装失败
