Arcgis API 不依赖地图服务的面要素创建和渲染

最新推荐文章于 2022-03-09 10:59:53 发布

gis小白的成长之路

最新推荐文章于 2022-03-09 10:59:53 发布

阅读量540

点赞数

分类专栏： ARCGIS API 要素合集创建要素图层要素转json 文章标签： json arcgis

本文链接：https://blog.csdn.net/qq_36179257/article/details/106274447

版权

ARCGIS API 同时被 3 个专栏收录

21 篇文章 18 订阅

订阅专栏

要素合集创建要素图层

3 篇文章 0 订阅

订阅专栏

要素转json

2 篇文章 0 订阅

订阅专栏

需求场景：做一个专题图，图层不依赖于Arcgis地图服务，同时可以根据外部数据进行渲染。

1. 不依赖于Arcgis地图服务，首先我们想到的是FeatureLayer，创建要素图层有两种方法：

这里我们选第二种方式创建要素图层，此方式最主要是构造featureCollectionObject这个参数。

featureCollecttionObject又是由featureSet和layerDefinition构成，这两个参数构建了一个类似于标准featureLayer的数据结构。

featureSets输入json格式的参数，json数据可以由shp格式通过ArcMap转换而来，转换方法参考:传送门：shp转json

layerDefinition用来描述属性点构成的要素图层，最少需要geometryType和fields两个参数，可以从JSON数据中获取。

2. 根据外部数据渲染图层，具体项目中外部数据一般都是通过接口获得，为了测试方便，我们把外部测试数据放在本地环境中。

在要素合集创建要素图层后，通过嵌套循环方式，把测试数据属性赋予要素图层。

实现步骤：

① 将要素转换为json格式

② 通过json数据和要素合集方式创建要素图层

③ 将外部数据属性赋予要素图层

④ 根据新的属性指标渲染图层

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>不依赖地图服务创建面要素和渲染</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: Arial;
    }
    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0px dashed black;
      background-color: rgb(0, 38, 48);
    }

  </style>
</head>
<body>
<button type="button" onclick="getJson('rk')">人口</button>
<button type="button" onclick="getJson('GDP')">GDP</button>
<button type="button" onclick="getJson('android')">安卓销售</button>
<button type="button" onclick="getJson('ios')">苹果销售</button>
<div id="map">
</div>
</body>

<!-- 引入ARCGIS API -->
<script src="https://js.arcgis.com/3.20"></script>
<script type="text/javascript">
  var map, getJson;
  require([
    "esri/map",
    'esri/Color',
    "esri/tasks/FeatureSet",
    "esri/layers/FeatureLayer",
    'esri/renderers/UniqueValueRenderer',
    'esri/symbols/SimpleFillSymbol',
    'esri/symbols/SimpleLineSymbol',
    'esri/graphic',
    "esri/geometry/Extent",
    "dojo/domReady!"
  ], function(
    Map,
    Color,
    FeatureSet,
    FeatureLayer,
    UniqueValueRenderer,
    SimpleFillSymbol,
    SimpleLineSymbol,
    Graphic,
    Extent
  ) {

    //地图范围
    var mapExtent = new Extent({
      xmax: 113.799760210539,
      xmin: 106.57095767482662,
      ymax: 20.459116202966324,
      ymin: 18.27952992162579,
      spatialReference: {
        wkid: 4326
      }
    })
    map = new Map("map", {
      extent: mapExtent,
      sliderStyle: "small",
      logo: false,
    });

    map.on('load', function () {
      map.hideZoomSlider()
      map.hidePanArrows()

    })
    //测试数据
    var dataTest = [
      {"city":"海口", "rk":1, "GDP":1, "android":1, "ios":1},
      {"city":"三亚", "rk":2, "GDP":2, "android":2, "ios":2},
      {"city":"文昌", "rk":1, "GDP":2, "android":3, "ios":4},
      {"city":"儋州", "rk":4, "GDP":3, "android":2, "ios":1},
      {"city":"琼海", "rk":3, "GDP":4, "android":1, "ios":2},
      {"city":"保亭", "rk":2, "GDP":3, "android":4, "ios":1},
      {"city":"陵水", "rk":1, "GDP":2, "android":3, "ios":4},
      {"city":"东方", "rk":4, "GDP":3, "android":2, "ios":1},
      {"city":"白沙", "rk":3, "GDP":4, "android":1, "ios":2},
      {"city":"临高", "rk":2, "GDP":3, "android":4, "ios":1},
      {"city":"定安", "rk":1, "GDP":2, "android":3, "ios":4},
      {"city":"澄迈", "rk":4, "GDP":1, "android":2, "ios":3},
      {"city":"琼中", "rk":3, "GDP":4, "android":1, "ios":2},
      {"city":"屯昌", "rk":2, "GDP":3, "android":4, "ios":1},
      {"city":"乐东", "rk":1, "GDP":2, "android":3, "ios":4},
      {"city":"昌江", "rk":4, "GDP":1, "android":2, "ios":3},
      {"city":"万宁", "rk":1, "GDP":2, "android":3, "ios":4},
      {"city":"五指山", "rk":2, "GDP":3, "android":4, "ios":1}
    ]
    window.onload = function() {
      getJson("GDP")// 默认GDP指标渲染
    }

    //获取本地json数据，根据json数据创建要素图层，根据属性指标渲染图层
    getJson = function (type) {
      var json = null
      var url = "city.json"/*json文件url*/
      var request = new XMLHttpRequest();
      request.open("get", url);/*设置请求方法与路径*/
      request.send(null);/*不发送数据到服务器*/
      request.onload = function () {/*XHR对象获取到返回信息后执行*/
        if (request.status == 0) {/*返回状态为0，即为数据获取成功*/
          json = JSON.parse(request.responseText);
          var featureSet = new FeatureSet(json)
          var layerDefinition = {  //要素描述
            "geometryType": "esriGeometryPolygon",
            "fields":[
              {
                "name" : "FID", //字段名称
                "type" : "esriFieldTypeOID", //字段类型
                "alias" : "FID"
              },
              {
                "name" : "city_name",
                "type" : "esriFieldTypeString",
                "alias" : "city_name",
                "length" : 254
              },
              {
                "name" : "value",
                "type" : "esriFieldTypeInteger",
                "alias" : "value"
              }
            ]
          }
          //要素合集
          var featureCollection = {
            layerDefinition: layerDefinition,
            featureSet: featureSet
          }
          var featurelayer = new FeatureLayer(featureCollection) //使用要素合集创建要素图层
          addData(featurelayer,dataTest)  //测试数据属性赋予图层
          var symbol = new SimpleFillSymbol() //渲染类型
          symbol.setColor(new Color([150, 150, 150, 0.5]))
          var renderer = new UniqueValueRenderer(symbol, type)  //唯一值渲染
          renderer.addValue('1', new SimpleFillSymbol().setColor(new Color([079, 135, 062, 0.5])))
          renderer.addValue('2', new SimpleFillSymbol().setColor(new Color([252, 237, 136, 0.5])))
          renderer.addValue('3', new SimpleFillSymbol().setColor(new Color([238, 155, 053, 0.5])))
          renderer.addValue('4', new SimpleFillSymbol().setColor(new Color([233, 087, 062, 0.5])))
          featurelayer.setRenderer(renderer)
          map.addLayer(featurelayer)
        }
      }
    }
    //将测试数据属性赋予要素图层
    addData = function(layer,data) {
      var length = layer.graphics.length
      for (var i=0; i<length; i++){
        cityname = layer.graphics[i].attributes.city_name
        for (var j=0; j<data.length; j++) {
          city = data[j].city
          if (cityname == city) {
            layer.graphics[i].attributes = Object.assign(data[j], {'cityname': data[j].city})
          }
        }
      }
    }

  });
</script>
</html>

效果：