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

最新推荐文章于 2025-03-21 16:35:29 发布

佯佯Young

最新推荐文章于 2025-03-21 16:35:29 发布

阅读量2.5k

点赞数

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

本文链接：https://blog.youkuaiyun.com/yy284872497/article/details/75221048

版权

本文详细介绍了如何使用ArcGIS API for JavaScript创建专题图，包括唯一值专题图和点密度专题图的实现步骤及示例代码，帮助读者理解如何通过API呈现地图要素的属性差异和空间密度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、唯一值专题图

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>
    <

最低0.47元/天解锁文章