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

最新推荐文章于 2024-07-07 10:09:04 发布

佯佯Young

最新推荐文章于 2024-07-07 10:09:04 发布

阅读量2.9k

点赞数 1

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

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

版权

本文详细介绍了如何使用ArcGIS API for JavaScript创建分级色彩和分级符号专题图。分级色彩专题图用于渲染面状要素，如人口密度分布，而分级符号专题图适用于点状和线状要素，如人口分级和道路分级。文章提供了具体代码示例，包括ClassBreaksRenderer类的使用和sizeInfo对象的配置。

摘要由CSDN通过智能技术生成

三、分级色彩专题图

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