【十】ArcGIS API for Javascript之专题图的制作（三）

其他 2019-01-19 09:31:10 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yy284872497/article/details/75330498

三、分级色彩专题图

1、引言

分级色彩专题图，即将要素属性值按照一定的分级方法分成若干级别，并用不同的颜色来表示。每个级别代表了数值的一个范围，从而明确地反映专题要素之间的数值差异。

分级色彩专题图制作的关键在于分级方法的选择和色彩的搭配。合理的配色和分级方法可以将地理地理现象的分布规律清晰、明确地体现出来。分级色彩专题图常用来渲染面状要素，多用于表达人口密度分布、农作物产量分布等。

如下图所示，为1990年墨西哥分级色彩人口分布专题图。

这里写图片描述

2、ClassBreaksRenderer

分级色彩专题图的绘制需要使用esri/renderers/ClassBreaksRenderer类，它的构造方法为：

new ClassBreaksRenderer(defaultSymbol, attributeField)

  • defaultSymbol为渲染器默认符号；

  • attributeField为指定渲染的字段名。

    代码实例：

//设置默认符号样式
var symbol = new SimpleFillSymbol();    
symbol.setColor(new Color([150, 150, 150, 0.5]));
//基于"POP1990"属性值进行分级
var renderer = new ClassBreaksRenderer(symbol, "POP1990");

常用方法：

addBreak(minValueOrInfo, maxValue?, symbol?)

  • minValueOrInfo：可以是单个最小值参数，或一个对象
  • maxValue：级别的最大值
  • symbol：分级的渲染符号

代码实例：

//参数形式
renderer.addBreak(2, 5, symbol);
//对象形式
renderer.addBreak({
    minValue: 2,
    maxValue: 5,
    symbol: symbol,
    label: "Low Density"
});

添加要素图层并渲染：

var infoTemplate = new InfoTemplate("${NAME}", "${*}"); 
var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/test/moxica/MapServer/2", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
featureLayer.setRenderer(CBrenderer);
map.addLayer(featureLayer);

添加图例：

var legend = new Legend({     //设置专题信息
     map: map, 
     layerInfos: [{ 
          layer: featureLayer,
          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;
        left: 0;
        bottom: 0;
        padding: 1em 1em 0 1em;
        background: #fff;
        font: 14px sans-serif;
        width: 250px;
        text-align: center;
        border-radius: 0 10px 0 0;
        border: 1px solid #000;
      }
    </style>
    <script type="text/javascript">
    var map;
    require([
        "esri/map", 
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/FeatureLayer",
        "esri/InfoTemplate", 
        "esri/symbols/SimpleFillSymbol", 
        "esri/renderers/ClassBreaksRenderer",
        "esri/dijit/Legend",
        "esri/Color", 
        "dojo/dom-style", 
        "dojo/on",
        "dojo/domReady!"],
    function(Map, ArcGISDynamicMapServiceLayer, FeatureLayer, InfoTemplate, SimpleFillSymbol, ClassBreaksRenderer, Legend, Color, domStyle, on) {
        map = new Map("map", {
            basemap:"topo",
            center: [-102.12, 23.09],
            zoom: 5,
            logo:false
        });
        var moxico= ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/moxico/MapServer");
        map.addLayer(moxico);
        var symbol = new SimpleFillSymbol();    //设置默认符号样式
        symbol.setColor(new Color([150, 150, 150, 0.5]));
        var CBrenderer = new ClassBreaksRenderer(symbol, "POP1990");   
        CBrenderer.addBreak(0, 1000000, new SimpleFillSymbol().setColor(new Color([0, 159, 255, 0.5])));
        CBrenderer.addBreak(1000000, 3000000, new SimpleFillSymbol().setColor(new Color([0, 209, 56, 0.5])));
        CBrenderer.addBreak(3000000, 5000000, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
        CBrenderer.addBreak(5000000, 7000000, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
        CBrenderer.addBreak(7000000, 9000000, new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])));
        CBrenderer.addBreak(9000000, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

        var infoTemplate = new InfoTemplate("${NAME}", "${*}");    //新建信息模板
        var featureLayer = new FeatureLayer("http:// localhost:6080/arcgis/rest/services/test/moxico/MapServer/2", {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ["*"],
            infoTemplate: infoTemplate
        });
        featureLayer.setRenderer(CBrenderer);    //渲染器应用到特征图层
        map.addLayer(featureLayer);            //加载特征图层到地图
        featureLayer.on("load", function(e) {
          var legend = new Legend({     //设置专题信息
              map: map, 
              layerInfos: [{ 
                  layer: featureLayer,
                  title: " 1990年墨西哥人口分布图" 
              }]
          }, "legend");
          legend.startup();
        });
    });
    </script>
  </head>
  <body class = "claro">
    <div id="map"></div>  
    <div id="info">
        <div id="legend" style="width=200px;"></div>
    </div>
  </body>
</html>

想了解更多关于ClassBreaksRenderer的相关属性方法可访问官方文档。

四、分级符号专题图

1、引言

分级符号专题图，即根据不同级别的要素属性值，采用大小不同的符号对其进行渲染而得到的地图。符号的形状取决于专题要素的特征，符号的大小取决于级别的高低或者等级数值的大小。分级符号一般用于表示点状、线状要素，如表达人口分级图、道路分级图等。

在ArcGIS API for Javascript中，没有专门用于分级符号专题图制作的类，对于点要素、线要素图层，可以通过调用渲染器类的setSizeInfo(info)方法实现渲染；对于面要素图层，可使用ClassBreaksRenderer类来分级实现。

2、点要素图层分级符号专题图

如下图所示，为墨西哥城市人口点要素分级专题图。

这里写图片描述

在调用setSizeInfo(info)方法之前，首先应该实例化一个sizeInfo信息对象，常用属性如下：

  • Field：包含属性值的属性字段名或返回数据值的公式；
  • valueUnit：若数据表示长度时，则该属性的单位为长度单位，如inches、feet、yards、miles、nautical-miles、millimeters、centimeters、decimeters、meters、kilometers、decimal-degrees、unknown等，若不代表长度则需将该属性设置为“unknown”；
  • maxDataValue：属性值的最大值。
  • minDataValue：属性值的最小值。当valueUnit设置为“unknown”时，则必须指定该属性。
  • maxSize：符号最大值，单位为像素。
  • minSize：符号最大值，单位为像素。当valueUnit设置为“unknown”时，则必须指定该属性。

示例代码：

var sizeInfo = {
    field: "POPULATION",
    valueUnit: "unknown",
    minSize: 5,
    maxSize: 50,
    minDataValue: 100000,
    maxDataValue: 500000 
};

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;
        left: 0;
        bottom: 0;
        padding: 1em 1em 0 1em;
        background: #fff;
        font: 14px sans-serif;
        width: 250px;
        text-align: center;
        border-radius: 0 10px 0 0;
        border: 1px solid #000;
      }
    </style>
    <script type="text/javascript">
    var map;
    require([
        "esri/map", 
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/FeatureLayer",
        "esri/InfoTemplate", 
        "esri/symbols/SimpleFillSymbol", 
        "esri/renderers/ClassBreaksRenderer",
        "esri/dijit/Legend",
        "esri/Color", 
        "dojo/on",
        "dojo/domReady!"],
    function(Map, ArcGISDynamicMapServiceLayer, FeatureLayer, InfoTemplate, SimpleFillSymbol, ClassBreaksRenderer, Legend, Color, on) {
        map = new Map("map", {
            basemap:"topo",
            center: [-102.12, 23.09],
            zoom: 5,
            logo:false
        });
        var moxico= ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/moxico/MapServer");
        map.addLayer(moxico);
        var sizeInfo = {
            field: "POPULATION",
            valueUnit: "unknown",
            minSize: 5,
            maxSize: 50,
            minDataValue: 100000,
            maxDataValue: 500000 };
        var infoTemplate = new InfoTemplate("${NAME}", "${*}");    //新建信息模板
        var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/test/moxico/MapServer/0", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
        featureLayer.on("load", function(e) {
            featureLayer.renderer.setSizeInfo(sizeInfo);  //调用渲染器类的.setSizeInfo方法
            map.addLayer(featureLayer); 
            var legend = new Legend({     //设置专题信息
                map: map, 
                layerInfos: [{ 
                  layer: featureLayer,
                  title: " The population of city(1990)" 
                }]
            }, "legend");
            legend.startup();
        });
    });
    </script>
  </head>
  <body class = "claro">
    <div id="map"></div>  
    <div id="info">
        <div id="legend" style="width=150px;"></div>
    </div>
  </body>
</html>

4、面要素图层分级符号专题图

面要素分级专题图，可使用ClassBreaksRenderer类来分类实现，在多边形中显示指定的符号。这种方法设置的符号大小与分级字段的属性值不成比例。

如下图所示，为墨西哥各州面积分级专题图。

这里写图片描述

定义符号：

//定义符号属性
var outline = new SimpleLineSymbol().setWidth(1.5).setColor(new Color("#76EEC6"));
var color = new Color([50, 205, 100, 0.75]);

新建ClassBreaksRenderer并分级：

var renderer = new ClassBreaksRenderer(null, "AREA");
//基于"AREA"属性值进行分级
var classBreaks = [
    { minValue:0, maxValue:10000, size:10 },
    { minValue:10000, maxValue:30000, size:20 },
    { minValue:30000, maxValue:50000, size:30 },
    { minValue:50000, maxValue:70000, size:40 },
    { minValue:70000, maxValue:90000, size:50 },
    { minValue:90000, maxValue:1000000, size:60}
];
array.forEach(classBreaks, function (classBreak) {
     renderer.addBreak(classBreak.minValue, classBreak.maxValue, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, classBreak.size, outline, color));
});

5、完整代码：

<!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;
        left: 0;
        bottom: 0;
        padding: 1em 1em 0 1em;
        background: #fff;
        font: 14px sans-serif;
        width: 230px;
        text-align: center;
        border-radius: 0 10px 0 0;
        border: 1px solid #000;
      }
    </style>
    <script type="text/javascript">
    var map;
    require([
        "esri/map", 
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/FeatureLayer",
        "esri/InfoTemplate", 
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol", 
        "esri/renderers/ClassBreaksRenderer",
        "dojo/_base/array",
        "esri/dijit/Legend",
        "esri/Color", 
        "dojo/domReady!"],
    function(Map, ArcGISDynamicMapServiceLayer, FeatureLayer, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, ClassBreaksRenderer, array, Legend, Color, on) {
        map = new Map("map", {
            basemap:"topo",
            center: [-102.12, 23.09],
            zoom: 5,
            logo:false
        });
        var moxico = ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/moxico/MapServer");
        map.addLayer(moxico);

        var outline = new SimpleLineSymbol().setWidth(1.5).setColor(new Color("#76EEC6"));
        var color = new Color([50, 205, 100, 0.75]);

        var renderer = new ClassBreaksRenderer(null, "AREA");   //基于"AREA"属性值进行分级
        var classBreaks = [
            { minValue:0, maxValue:10000, size:10 },
            { minValue:10000, maxValue:30000, size:20 },
            { minValue:30000, maxValue:50000, size:30 },
            { minValue:50000, maxValue:70000, size:40 },
            { minValue:70000, maxValue:90000, size:50 },
            { minValue:90000, maxValue:1000000, size:60}
        ];
        var infoTemplate = new InfoTemplate("${NAME}", "${*}");    //新建信息模板
        var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/test/moxico/MapServer/2", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });

        array.forEach(classBreaks, function (classBreak) {
                renderer.addBreak(classBreak.minValue, classBreak.maxValue, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, classBreak.size, outline, color));
            });

        featureLayer.setRenderer(renderer);    //渲染器应用到要素图层
        map.addLayer(featureLayer);            //显示要素图层

        featureLayer.on("load", function(e) {
          var legend = new Legend({     //设置专题信息
              map: map, 
              layerInfos: [{ 
                layer: featureLayer,
                title: " The area of state(1990)" 
              }]
          }, "legend");
          legend.startup();
        });
    });
    </script>
  </head>
  <body class = "claro">
    <div id="map"></div>  
    <div id="info">
        <div id="legend" style="width=150px;"></div>
    </div>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/yy284872497/article/details/75330498
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022