使用FeatureCollection添加标注(4490坐标系)

效果

代码

<!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">
  <title>Flickr</title>

  <link rel="stylesheet" href="https://js.arcgisonline.cn/3.28/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .esriScalebar {
      padding: 20px 20px;
    }

    #map {
      padding: 0;
    }
  </style>

  <script>var dojoConfig = { parseOnLoad: true };</script>
  <script src="https://js.arcgisonline.cn/3.28/init.js"></script>
  <script>
    var map;
    require([
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/dijit/PopupTemplate",
      'esri/layers/LabelClass',
      "esri/request",
      "esri/geometry/Point",
      "esri/graphic", "esri/SpatialReference",
      "dojo/on",
      "dojo/_base/array",
      "dojo/domReady!",

    ], function (
      Map,
      FeatureLayer, ArcGISDynamicMapServiceLayer,
      PopupTemplate,
      LabelClass,
      esriRequest,
      Point,
      Graphic, SpatialReference,
      on,
      array,
    ) {

      var featureLayer;
      var tilemap = new ArcGISDynamicMapServiceLayer("https://linux111.esrichina.com/server/rest/services/aoj/beijing4490/MapServer");
      map = new Map("map", {
        center: new Point(117.13408259800008, 40.207635504000052,
          new SpatialReference({ wkid: 4490 })),
        showLabels: true
      });
      map.addLayer(tilemap);
      var featureCollection = getFeatureCollection();
      var labelJson = {
        "labelPlacement": "below-center",
        "minScale": 0,
        "maxScale": 0,
        "labelExpressionInfo": { "value": "{pollutantcode}" },
        "symbol": {
          "color": [78, 78, 78, 255],
          "haloSize": 2,
          "haloColor": [255, 255, 255, 255],
          "angle": 0,
          "xoffset": 0,
          "yoffset": 0,
          "keining": true,
          "type": "esriTS",
          "font": { "family": "serif", "size": 10, "style": "italic", "weight": "bold", "decoration": "none" }
        }
      };
      var layer = new FeatureLayer(featureCollection, {
        id: '要素点',
        showLabels: true,
        outFields: ["*"]
      });
      window.map.addLayer(layer);
      var labelArray = [];
      if (Array.isArray(labelJson)) {
        for (var index in labelJson) {
          labelArray.push(new LabelClass(labelJson[index]));
        }
      } else {
        labelArray.push(new LabelClass(labelJson));
      }
      layer.setLabelingInfo(labelArray);
      var internalLabelLayer = document.getElementById('_internal_LabelLayer_layer');
      if (internalLabelLayer) {
        internalLabelLayer.style['pointer-events'] = 'none';
      }
    });

    function getFeatureCollection() {
      var layerDefinition = {
        "geometryType": "esriGeometryPoint",
        "objectIdField": "val",
        "drawingInfo": {
          "renderer": {
            "type": "simple",
            "symbol": {
              "color": [0, 48, 161, 255],
              "size": 8,
              "type": "esriSMS",
              "style": "esriSMSCircle"
            }
          }
        },
        "fields": [
          {
            "name": "val",
            "alias": "val",
            "type": "esriFieldTypeOID"
          }, {
            "name": "pollutantcode",
            "alias": "pollutantcode",
            "type": "esriFieldTypeString"
          }]
      };

      var featuresJson = [
        {
          "attributes": {
            "val": 5041,
            "pscode": "150300000020",
            "ObjectID": 0,
            "pollutantcode": "A21026"
          },
          "geometry": {
            "y": 40.397174871000061,
            "spatialReference": {
              "wkid": 4490
            },
            "x": 116.42988750000006
          }
        },
        {
          "attributes": {
            "val": 54471,
            "pscode": "150600000082",
            "ObjectID": 1,
            "pollutantcode": "A21026"
          },
          "geometry": {
            "y": 40.524859517000039,
            "spatialReference": {
              "wkid": 4490
            },
            "x": 116.98363503600001
          }
        },
        {
          "attributes": {
            "val": 3399,
            "pscode": "150300000016",
            "ObjectID": 2,
            "pollutantcode": "A21026"
          },
          "geometry": {
            "y": 40.512648949000038,
            "spatialReference": {
              "wkid": 4490
            },
            "x": 116.14809500000001
          }
        },
        {
          "attributes": {
            "val": 41,
            "pscode": "150300000021",
            "ObjectID": 3,
            "pollutantcode": "A21026"
          },
          "geometry": {
            "y": 40.218508750000069,
            "spatialReference": {
              "wkid": 4490
            },
            "x": 116.32859000000008
          }
        },
        {
          "attributes": {
            "val": 144497,
            "pscode": "150600000005",
            "ObjectID": 4,
            "pollutantcode": "A21026"
          },
          "geometry": {
            "y": 40.207635504000052,
            "spatialReference": {
              "wkid": 4490
            },
            "x": 117.13408259800008
          }
        },
        {
          "attributes": {
            "val": 288,
            "pscode": "150600000046",
            "ObjectID": 5,
            "pollutantcode": "A21026"
          },
          "geometry": {
            "y": 40.145354179000037,
            "spatialReference": {
              "wkid": 4490
            },
            "x": 116.71574623400011
          }
        },
        {
          "attributes": {
            "val": 169,
            "pscode": "150600000119",
            "ObjectID": 6,
            "pollutantcode": "A21026"
          },
          "geometry": {
            "y": 40.042010142000038,
            "spatialReference": {
              "wkid": 4490
            },
            "x": 115.78815500000007
          }
        }];
      var featureCollection = {
        "layerDefinition": layerDefinition,
        "featureSet": {
          "features": featuresJson,
          "geometryType": "esriGeometryPoint"
        }
      };
      return featureCollection;
    }
  </script>
</head>

<body>
  <div id="map"></div>
</body>

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值