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

最新推荐文章于 2023-08-08 17:06:27 发布

佯佯Young

最新推荐文章于 2023-08-08 17:06:27 发布

阅读量2.3k

点赞数

分类专栏： ArcGIS API for JS 3.x webgis javascript 文章标签： javascript 专题图 arcgis-api-for-js

本文链接：https://blog.csdn.net/yy284872497/article/details/75221048

版权

webgis 同时被 3 个专栏收录

20 篇文章 3 订阅

订阅专栏

ArcGIS API for JS 3.x

13 篇文章 10 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

一、唯一值专题图

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的属性、方法，实例以及相关说明请戳官方文档。

佯佯Young

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【十】ArcGIS API for Javascript之专题图的制作（二）

一、唯一值专题图1、引言唯一值专题图是一种简单的专题图，通过符号来区分不同的属性值。能够反映树地图要素数量或质量的差异。故当我们需要对某一属性进行渲染时，可以选择使用唯一值专题图。二、点密度专题图以点的形式在地图上显示数据，一个点代表一定的数值，某一区域内的点的个数与该区域的数值成比例。所以点密度专题图可以用来可视化空间密度离散空间的变化现象。
复制链接

扫一扫