地理信息系统（GIS）系列——专题图

小鱼儿 2023-01-10 14:38 226阅读 0赞

### 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">
        
        <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(" ", "${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"] }); // 一个点代表的价值。dotValue var 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); // yellow var color1 = new Color([247, 252, 185]); // light green var color2 = new Color([173, 221, 142]); // green var 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>