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

邢雨华

2023-12-01

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"]
            });
            // 一个点代表的价值。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>