ArcGIS 动态地图服务 MapImageLayer 图层要素及标注透明度问题

最新推荐文章于 2023-06-02 12:07:13 发布

孙同学的一个笔记本

最新推荐文章于 2023-06-02 12:07:13 发布

阅读量2.6k

点赞数 1

分类专栏： ArcGIS JS API笔记文章标签： arcgis javascript

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

版权

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

10 篇文章 2 订阅

订阅专栏

*使用ArcGIS JS API 4.20

一、动态地图标注

由Sublayer类的labelingInfo属性控制， labelingInfo属性又是一个LabelClass类的数组，具体描述参见官网：https://developers.arcgis.com/javascript/latest/labeling/
在这里插入图片描述

这里参考的就是这个label sublayer features的例子，做了一些简化。

二、透明度的设置

其中点线面的符号化是由renderer 来控制的，而label注记的符号化则是通过 labelingInfo属性控制。所以二者并不冲突，比如在调整面要素透明度的时候，不会影响label标注的透明度。

在这里插入图片描述

完整测试代码：

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      MapImageLayer - label sublayer features | Sample | ArcGIS API for
      JavaScript 4.20
    </title>

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

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

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer"], (
        Map,
        MapView,
        MapImageLayer
      ) => {
        /*****************************************************************
         * Create renderers for each sublayer
         *****************************************************************/
        const citiesRender = {

        };
        const statesRender = {
            type:"simple",
            symbol:{
                type: "simple-fill",
                color: [240,59,32,0.2]
                
            }
        }
         //define map image layer
         url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";

         const layer = new MapImageLayer({
             url:url,
             sublayers:[
                 {
                    id: 3,
                    opacity: 0.2
                 },
                 {
                     id: 2,
                     renderer: statesRender,
                     opacity: 0.2,
                     labelingInfo: [
                         {
                            labelExpression: "[state_abbr]",
                            labelPlacement: "always-horizontal",
                            symbol: {
                                type: "text",
                                color: [255,255,255,0.9],
                                haloColor: [0,0,0,0.9],
                                haloSize: 1,
                                font:{
                                    size:17
                                }
                            },
                            minScale: 18500000,
                            maxScale: 9250000
                         },
                        
                     ]
                 }
             ]

         });

         //add the layer to the map
         const map = new Map({
            basemap: "satellite",
            layers:[layer]
         });

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

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

效果：
在这里插入图片描述

三、其他

另外推荐一个比较好用的调色器网站：colorbrewer2

孙同学的一个笔记本

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
ArcGIS 动态地图服务 MapImageLayer 图层要素及标注透明度问题

一、动态地图标注由Sublayer类的labelingInfo属性控制， labelingInfo属性又是一个LabelClass类的数组，具体描述参见官网：https://developers.arcgis.com/javascript/latest/labeling/这里参考的就是这个label sublayer features的例子，做了一些简化。二、透明度的设置其中点线面的符号化是由renderer 来控制的，而label注记的符号化则是通过 labelingInfo属性控制。所以二
复制链接

扫一扫