地理信息系统（GIS）系列—

1、专题图简介

专题图是用于分析和表现数据的一种强有力的方式，用户可以通过使用专题图的方式将数据图形化，使数据以更直观的形式在地图上提现出来。

专题图种类

独立值专题图
点密度专题图
范围专题图
等级符号专题图
时序专题图
多比例尺专题图
多变量专题图
自定义专题图

独立值专题图

独立值专题图是一种比较简单的专题图，它使用不同的颜色、符号、或线型来显示不同的数据。
使用类：esri/renderers/UniqueValueRenderer

点密度专题图

点密度专题图是在地图上用点来显示数据，每个点都代表一定数据，某区域中点是总数与该区域数值的比例。
使用类：esri/rederers/DotDensityRenderer，有两个主要的属性：dotValue 和 dotSize，dotValue是每个点代表的数值，dotSize是点的大小

范围专题图

范围专题图是按照设置的范围显示数据，这些范围利用颜色和图案进行渲染。
使用类：esri/renderers/ClassBreaksRenderer

等级符号专题图

等级符号专题图使用不同大小的符号来表示不同的值，而且符号大小与数据值成反比。
没有专门的类来实现，可以使用渲染器对象setProportionalSymbolInfo方法来实现。

时序专题图

时序专题图可为时间感知型要素图层提供基于时间的渲染，这对于像地震或风暴这样的历史或实时数据的可视化非常有用。
使用类：esri/renderers/TemporalRenderer

多比例尺专题图

根据电子地图放大和缩小，使用不同的渲染器，使用与不同的比例尺。
使用类：esri/renderers/ScaleDependentRenderer

多变量专题图

使用DotDensityRenderer类实现多变量专题图，通过fields属性指定多个字段。

自定义专题图

主要是直方图和饼图。

2、独立值专题图

UniqueValueRenderer，唯一值渲染器

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>Unique Value Renderer</title><link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"><style>html, body, #map{height: 100%;margin: 0;padding: 0;}</style><script src="http://js.arcgis.com/3.14/"></script><script>var map;require(["esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate","esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol","esri/renderers/UniqueValueRenderer", "esri/Color","dojo/domReady!"], function (Map, FeatureLayer, InfoTemplate,SimpleLineSymbol, SimpleFillSymbol,UniqueValueRenderer, Color) {map = new Map("map", {basemap: "streets",center: [-95.625, 39.243],zoom: 4,slider: false});map.on("load", addFeatureLayer);function addFeatureLayer() {var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);// 创建适配器var renderer = new UniqueValueRenderer(defaultSymbol, "SUB_REGION");// 为每个可能值添加符号renderer.addValue("Pacific", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));renderer.addValue("Mtn", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5])));renderer.addValue("N Eng", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5])));renderer.addValue("S Atl", new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])));renderer.addValue("Mid Atl", new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75])));renderer.addValue("E N Cen", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5])));renderer.addValue("W N Cen", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));renderer.addValue("E S Cen", new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5])));renderer.addValue("W S Cen", new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0.5])));var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1", {infoTemplate: new InfoTemplate("&nbsp;", "${SUB_REGION}"),mode: FeatureLayer.MODE_ONDEMAND,outFields: ["SUB_REGION"]});featureLayer.setRenderer(renderer);map.addLayer(featureLayer);}});</script></head><body><div id="map"></div></body></html>

3、点密度和多比例尺专题图

DotDensityRenderer
一个点密度图，可以用来可视化空间密度和离散空间的变化
ScaleDependentRenderer
比例尺渲染器

<!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"/><title>Dot Density Renderer - Multiple Variables</title><link rel="stylesheet" href="//js.arcgis.com/3.14/esri/css/esri.css"><style>html, body, #map {height: 100%;margin: 0;}#map {background-color: #000}#infopane {position: absolute;width: 300px;top: 0;right: 0;background-color: rgba(0,0,0,0.75);padding: 10px;border-radius: 0 0 0 10px;font-family: Segoe UI;color: #aaa;}.esriLegendServiceLabel, #info-title {font-weight: 600;}.hidden {display: none;}#toggle-button {cursor: pointer;}</style><script src="//js.arcgis.com/3.14/"></script><script>var map;require(["esri/map", "esri/geometry/Extent", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/layers/ArcGISTiledMapServiceLayer","esri/renderers/SimpleRenderer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/DotDensityRenderer", "esri/renderers/ScaleDependentRenderer","esri/Color", "dojo/query", "dojo/dom", "esri/dijit/Legend", "dojo/domReady!"], function (Map, Extent, FeatureLayer, InfoTemplate, ArcGISTiledMapServiceLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, DotDensityRenderer, ScaleDependentRenderer, Color, query, dom, Legend) {map = new Map("map", {center: [-122.12, 37.60],zoom: 10,maxZoom: 12,minZoom: 9});var basemap = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer", {opacity: 0.15});map.addLayer(basemap);var layer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BayAreaWorkingClasses/FeatureServer/0", {outFields: ["CC", "SC", "WC", "FFF"]});// 一个点代表的价值。dotValuevar createRenderer = function (dotValue) {// 点密度渲染器return new DotDensityRenderer({fields: [{name: "CC",color: new Color([21, 137, 255])}, {name: "SC",color: new Color([200, 111, 0])}, {name: "WC",color: new Color([0, 255, 0])}, {name: "FFF",color: new Color([255, 0, 0])}],dotValue: dotValue,dotSize: 2,outline: new SimpleLineSymbol("solid", new Color([50, 50, 50, 1]), 0.5),legendOptions: {valueUnit: "people",backgroundColor: new Color([32, 32, 32])}});};// 设置放大比例尺，显示的点密度适配器var rendererInfos = [{renderer: createRenderer(400),maxZoom: 9,minZoom: 9}, {renderer: createRenderer(100),maxZoom: 10,minZoom: 10}, {renderer: createRenderer(25),maxZoom: 11,minZoom: 11}, {renderer: createRenderer(6),maxZoom: 12,minZoom: 12}];// 比例尺渲染器var scaleDependentRenderer = new ScaleDependentRenderer({// 渲染器信息参数rendererInfos: rendererInfos});layer.setRenderer(scaleDependentRenderer);map.addLayer(layer);var legend = new Legend({map: map,layerInfos: [{ layer: layer }]}, "legend");legend.startup();dom.byId("toggle-button").onclick = function () {query(".toggle-pane").toggleClass("hidden");};});</script></head><body><div id="map"></div><div id="infopane"><div id="toggle-button">[Toggle/expand information pane]</div><div class="toggle-pane"><div id="legend"></div></div></div></body>
</html>

4、范围专题图

ClassBreaksRenderer
类范围渲染器，象征着每个图形基于一些数值属性的值

<!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"/><title>Map and Layer</title><link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"><style>html, body, #map {height: 100%;margin: 0;}#info {position: absolute;right: 0;top: 0;padding: 10px;background-color: #999;font: 14px Segoe UI;width: 200px;text-align: center;border-radius: 0 0 0 10px;}</style><script src="http://js.arcgis.com/3.14/"></script><script>var map, calculateSquareMiles;require(["esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate","esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/ClassBreaksRenderer","esri/dijit/Legend","esri/Color", "dojo/number", "dojo/domReady!"], function (Map, FeatureLayer, InfoTemplate,SimpleFillSymbol, SimpleLineSymbol, ClassBreaksRenderer,Legend,Color, number) {map = new Map("map", {basemap: "gray",center: [-89.849, 40.369],zoom: 6});// 创建专题图map.on("layers-add-result", createLegend);// 信息模板var infoTemplate = new InfoTemplate("${COUNTY}, ${STATE}","${M163_07} acres of corn in 2007, which is ${M163_07:calculateSquareMiles} square miles.");var layer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0", {infoTemplate: infoTemplate,outFields: ["STATE", "COUNTY", "M163_07", "AREA", "FID"],opacity: 0.5});// 区域面积layer.setDefinitionExpression("AREA > 0.01");// 英亩转换成平方英里// 还使用的功能层的信息模板// 测试具有“属性”// 确定参数是一个图形或数字// 使用的属性字段匹配值calculateSquareMiles = function (value) {var acres = (value.hasOwnProperty("attributes")) ? value.attributes.M163_07 : value;// 小数位数return number.format(acres / 640, { places: 2 });};// 创建类范围渲染器var renderer = new ClassBreaksRenderer(null, calculateSquareMiles);// 设置最大容量renderer.setMaxInclusive(true);// yellowvar color1 = new Color([247, 252, 185]); // light greenvar color2 = new Color([173, 221, 142]); // greenvar color3 = new Color([49, 163, 84]); // 添加一个范围renderer.addBreak({minValue: 0,maxValue: 10,// 平方公里label: "< 10 Square Miles",symbol: new SimpleFillSymbol("solid",new SimpleLineSymbol("solid", color1, 1),color1)});renderer.addBreak({minValue: 10,maxValue: 100,// 平方公里label: "10 - 100 Square Miles",symbol: new SimpleFillSymbol("solid",new SimpleLineSymbol("solid", color2, 1),color2)});renderer.addBreak({minValue: 100,// 无穷maxValue: Infinity,// 平方公里label: "> 100 Square Miles",symbol: new SimpleFillSymbol("solid",new SimpleLineSymbol("solid", color3, 1),color3)});layer.setRenderer(renderer);map.addLayers([layer]);// 创建专题列表function createLegend(results) {var legend = new Legend({layerInfos: [{layer: results.layers[0].layer,title: " "}],map: map}, "legend");legend.startup();}});</script></head><body><div id="map"></div><div id="info"><div style="font-size: 36px;">Square miles of farmland used for corn.</div><div id="legend"></div></div></body>
</html>

5、等级符号专题图

根据自定义的数值，划分等级，在地图上渲染

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>等级符号专题图</title><link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"><style>html, body, #map {height: 100%;margin: 0;}#info {position: absolute;right: 0;top: 0;font: 14px sans-serif;background: #fff;width: 160px;text-align: center;border-radius: 0 0 0 10px;}</style><script src="http://js.arcgis.com/3.9/"></script><script>var map;require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer","esri/InfoTemplate", "esri/renderers/DotDensityRenderer", "esri/symbols/SimpleLineSymbol","esri/dijit/Legend", "esri/Color", "dojo/domReady!"], function (Map, ArcGISTiledMapServiceLayer, FeatureLayer,InfoTemplate, DotDensityRenderer, SimpleLineSymbol, Legend, Color) {map = new Map("map");var baseMapUrl = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";var baseMap = new ArcGISTiledMapServiceLayer(baseMapUrl);map.addLayer(baseMap);var layerUrl = "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/WorldCities/FeatureServer/0";var layer = new FeatureLayer(layerUrl, {infoTemplate: new InfoTemplate("${name_en}", "${*}"),// 快速模式mode: FeatureLayer.MODE_SNAPSHOT,outFields: ["*"]});var proportionalSymbolInfo = {// 设置自动field: "pop",// 单位valueUnit: "unknown",minDataValue: 1000000,minSize: 3,maxSize: 30,// 自定义等级范围值legendOptions: {customValues: [1000000, 5000000, 10000000, 20000000, 30000000, 40000000]}};layer.on("load", function () {// 设置图层渲染器的符号信息参数layer.renderer.setProportionalSymbolInfo(proportionalSymbolInfo);var legend = new Legend({map: map,layerInfos: [{layer: layer,title: "世界大城市"}]}, "legend");legend.startup();});map.addLayer(layer);});</script>
</head>
<body><div id="map"></div><div id="info"><div id="legend"></div></div>
</body>
</html>

6、多变量专题图

使用综合渲染器 SimpleRenderer 实现多变量专题图

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>多变量专题图</title><link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"><link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"><style>html, body, #border-container {height: 100%;margin: 0;}</style><script src="http://js.arcgis.com/3.9/"></script><script>require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer", "esri/dijit/Legend","esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol","esri/Color", "dojo/_base/array", "dojo/parser", "esri/InfoTemplate","esri/symbols/SimpleLineSymbol","dijit/layout/BorderContainer", "dijit/layout/ContentPane","dojo/domReady!"], function (Map, ArcGISTiledMapServiceLayer, FeatureLayer, Legend, SimpleRenderer, SimpleMarkerSymbol,Color, arrayUtils, parser, InfoTemplate, SimpleLineSymbol) {parser.parse();var map = new Map("map", {logo: false,zoom: 5});var baseMapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/";var baseMap = new ArcGISTiledMapServiceLayer(baseMapUrl);map.addLayer(baseMap);var layer = new FeatureLayer("http://tmservices1.esri.com/arcgis/rest/services/LiveFeeds/NOAA_METAR_current_wind_speed_direction/MapServer/0", {mode: FeatureLayer.MODE_ONDEMAND,outFields: ["*"],infoTemplate: new InfoTemplate("${STATION_NAME}, ${COUNTRY}", "<table><tr><td>Temperature</td><td>${TEMP}F</td></tr><tr><td>Dew point</td><td>${DEW_POINT}</td></tr><tr><td>Relative humidity</td><td>${R_HUMIDITY}</td></tr><tr><td>Wind</td><td>from ${WIND_DIRECT} degrees at ${WIND_SPEED}mph</td></tr><tr><td>Visibility</td><td>${VISIBILITY}</td></tr><tr><td>Pressure</td><td>${PRESSURE}mb</td></tr><tr><td>Coulds</td><td>${SKY_CONDTN}</td></tr><tr><td>Weather</td><td>${WEATHER}</td></tr><tr><td>Heat index</td><td>${HEAT_INDEX}</td></tr></table><hr><i>${UTC_DATETIME}</i>")});map.addLayers([layer]);var marker = new SimpleMarkerSymbol().setPath("M14.5,29 23.5,0 14.5,9 5.5,0z").setOutline(new SimpleLineSymbol().setWidth(0.5));var renderer = new SimpleRenderer(marker);renderer.setRotationInfo({field: "WIND_DIRECT"});renderer.setProportionalSymbolInfo({field: "WIND_SPEED",minSize: 6,maxSize: 25,minDataValue: 5,maxDataValue: 50,valueUnit: "unknown"});renderer.setColorInfo({field: "TEMP",minDataValue: -20,maxDataValue: 130,colors: [new Color([0, 104, 214]), new Color([20, 120, 220]), new Color([39, 136, 226]),new Color([59, 152, 232]), new Color([78, 169, 237]), new Color([98, 185, 243]),new Color([131, 197, 181]), new Color([164, 210, 120]), new Color([197, 222, 58]),new Color([205, 188, 80]), new Color([212, 155, 102]), new Color([220, 121, 124]),new Color([216, 87, 115]), new Color([211, 53, 106]), new Color([206, 19, 97])]});layer.setRenderer(renderer);// 设置图例map.on("layers-add-result", function (evt) {var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {return { layer: layer.layer, title: "温度(F)" };});if (layerInfo.length > 0) {var legendDijit = new Legend({map: map,layerInfos: layerInfo}, "legend");legendDijit.startup();}});});</script>
</head>
<body class="claro"><div id="border-container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false"><div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" style="width: 100px;"><div id="legend"></div></div><div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding: 0;"></div></div>
</body>
</html>