ArcGIS 前端动态地图与要素服务符号化的区别小结

最新推荐文章于 2024-06-13 15:10:00 发布

孙同学的一个笔记本

最新推荐文章于 2024-06-13 15:10:00 发布

阅读量910

点赞数 1

分类专栏： ArcGIS JS API笔记文章标签： arcgis 前端符号化

本文链接：https://blog.csdn.net/suntongxue100/article/details/128626159

版权

ArcGIS JS API笔记专栏收录该内容

10 篇文章 2 订阅

订阅专栏

在ArcGIS中，除了在桌面端做配图之外，一些符号化工作也可以在代码端去进行设置，这里简单的做了一些测试及小结。

一、服务的区别

在ArcGIS中最基础的两种数据服务就是动态地图服务（MapServer）和要素服务（FeatureServer）：
在这里插入图片描述动态地图服务一般用于可视化展示，当然也可以通过Query的一些方法获取到地图中的数据信息，例如geometry等信息。这里的可视化属于服务器端渲染，一般是渲染完成之后将地图对应的图片传递到浏览器进行显示。

要素服务则是偏向于用于在线编辑和分析功能，但是也可以通过代码进行符号化，属于前端渲染。所以一般动态地图服务如果需要支持某些分析功能，就需要先通过查询等手段获取到geometry之后，再去构建feature要素用于分析传递。

二、动态地图服务的符号化

如果发布的服务为MapServer，在作图的时候没有设置相应的样式，或者有不同的符号化需求，则可以通过设置renderer来进行修改。

这里的示例代码为使用的图片符号，如果需要其他符号方式，可以具体查看官网：
在这里插入图片描述测试代码使用了PictureMarkerSymbol：

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      MapImageLayer - set renderers on sublayers | Sample | ArcGIS Maps SDK for
      JavaScript 4.25
    </title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require(["esri/Map", "esri/views/MapView", 
      "esri/layers/MapImageLayer","esri/symbols/PictureMarkerSymbol"], (
        Map,
        MapView,
        MapImageLayer,
        PictureMarkerSymbol
      ) => {

        const citiesRenderer = {
          type: "simple", 
          symbol: {
            type: "picture-marker", 
            url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
            width: "64px",
            height: "64px"
            }
        
        };


        const layer = new MapImageLayer({
          url: "http://localhost:6080/arcgis/rest/services/pointtest/MapServer",
          sublayers: [
            {
              id: 0,
              renderer: citiesRenderer,
              opacity: 0.6
            }
          ]
        });

        /*****************************************************************
         * Add the layer to a map
         *****************************************************************/

        const map = new Map({
          basemap: "dark-gray-vector",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 5,
          center: [108.5, 18.5]
        });
      });
    </script>
  </head>

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

这里采用的实际上是服务器端渲染，我们在浏览器可以看到请求返回的是渲染好的图片：
在这里插入图片描述这种方式在服务访问数比较小数据量大的情况下，理论上借助服务器的渲染能力，应该能提高渲染能力。但是如果访问渲染的数量需求过大可能会给服务器带来较大压力。

三、要素服务的符号化

同样的要素服务在代码也是使用renderer来进行符号化来设置和渲染，测试代码如下：

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      MapImageLayer - set renderers on sublayers | Sample | ArcGIS Maps SDK for
      JavaScript 4.25
    </title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require(["esri/Map", "esri/views/MapView", 
      "esri/layers/MapImageLayer",
      "esri/symbols/PictureMarkerSymbol",
    "esri/layers/FeatureLayer"], (
        Map,
        MapView,
        MapImageLayer,
        PictureMarkerSymbol,
        FeatureLayer
      ) => {
        

        const layer = new FeatureLayer({
          url: "https://localhost:6443/arcgis/rest/services/pointlighttest/FeatureServer",
          
        });

        /*****************************************************************
         * Add the layer to a map
         *****************************************************************/

        layer.renderer = {
          type: "simple", 
          symbol: {
            type: "picture-marker", 
            url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
            width: "64px",
            height: "64px"
            }
        }

        const map = new Map({
          basemap: "dark-gray-vector",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 5,
          center: [108.5, 18.5]
        });
      });
    </script>
  </head>

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