前端实现图片标记符号化以及标注

最新推荐文章于 2024-08-23 17:36:01 发布

gislaozhang

最新推荐文章于 2024-08-23 17:36:01 发布

阅读量1.9k

点赞数

分类专栏： JS 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/gislaozhang/article/details/120465261

版权

JS 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

需求：

对点要素采用图片标记符号化，同时基于某个字段进行标注，最终达到图示的标注效果。

代码：

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>
    Flat symbol layers | Sample | ArcGIS API for JavaScript 4.20
  </title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/layers/support/LabelClass"
    ], (Map, MapView, FeatureLayer, LabelClass) => {
      // Create the Map
      const map = new Map({
        basemap: "streets"
      });

      // Create the SceneView and set initial camera
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-91.027553, 38.792375],
        scale: 20000000,
      });

      const labelClass = new LabelClass({
        symbol: {
          type: "text",  // autocasts as new TextSymbol()
          color: "white",
          haloColor: "blue",
          haloSize: 1,
          yoffset: 10,//标注沿y轴向上偏移
          font: {  // autocast as new Font()
            family: "Ubuntu Mono",
            size: 14,
            weight: "bold"
          }
        },

        labelPlacement: "center-center",
        labelExpressionInfo: {
          expression: 'DefaultValue($feature.OBJECTID, "no data")'
        }
      });

      // Request feature layers and overwrite renderer
      const featureLayer = new FeatureLayer({
        url:
        "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CITIES_EastUSA/FeatureServer/0",
        // define rendering
        renderer: {
          type: "simple",
          symbol: {
            type: "picture-marker",
            url:
            "./pic/pic.png",
            height: "100px",
            width: "70px"
          }
        },
        outFields: ["OBJECTID"],
        // Ensure that all features are shown at all scales
        maxScale: 0,
        minScale: 0,
        labelingInfo: [labelClass]
      });
      map.add(featureLayer);



    });
  </script>
</head>

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

</body>

</html>

其中标记图片我是从网上随便找的一张图片，链接：https://i-1-lanrentuku.qqxzb-img.com/2020/11/9/c18a9b07-a9bf-4966-b969-b07fd9814aef.png

将其下载后放到iis指定的路径下，例如：我放到我自己新建的pic文件夹下。