🗺️【ArcGIS】解决图层无法置顶的问题

示例中用的arcgis是4.28,如果你是低版本的也没关系,也可以使用

❓ 问题描述

之前在做arcgis地图的时候,遇到了一个问题,我有一个图层需要让他永远置顶.

比如说下面这样的场景,我想要让红色的图层永远在蓝色的上面

但是怎么设置都没有效果,添加图层的时候设置顺序

js 复制代码

map.add([layerName],10)

比如像上面这样,设置之后你会发现后面添加的图层还是把红色盖住了

这是因为arcgis设置图层顺序的时候,当你设置的索引超出当前图层数量的时候,就会导致这个图层的索引自动变成但钱图层数,也就是最顶层

💡 解决办法

为了解决这个办法,我们需要用到一个函数reorder

🤔 reorder是什么?

它是arcgis提供的一个方法,可以将图层插入到指定层级

语法如下:

js 复制代码

map.reorder([图层对象],要插入的层级)

那么有了这个方法,我们前面的问题就可以解决了

js 复制代码

const addBlueLayer = () => {
    const center = this.view.center
    const offsetX = (Math.random() - 0.5) * 0.02
    const offsetY = (Math.random() - 0.5) * 0.02
    const bluLayer = createLayer(
      [0, 0, 255],
      '蓝色',
      center.longitude + offsetX,
      center.latitude + offsetY,
      0.005,
      1
    )
    map.reorder(bluLayer, 0)
}

这是我添加蓝色图层的代码,我现在用上前面那个方法reorder,并且设置为0,这样我红色的图层顺序就可以用永远在蓝色图层的上面

效果如下:

看这个动图,可以看到我下设置了之后,这个蓝色图层永远在红色图层之下了

📋 完整示例

完整示例代码如下

js 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>arcgis图层置顶演示</title>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.28/esri/themes/light/main.css"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="https://js.arcgis.com/4.28/"></script>
  </head>

  <body>
    <main class="container">
      <div id="map"></div>
      <aside class="menu">
        <button>添加图形图层</button>
      </aside>
    </main>
    <script>
      ;(() => {
        require([
          'esri/Map',
          'esri/views/MapView',
          'esri/layers/GraphicsLayer',
          'esri/Graphic',
          'esri/geometry/Polygon',
          'esri/symbols/SimpleFillSymbol'
        ], function (
          Map,
          MapView,
          GraphicsLayer,
          Graphic,
          Polygon,
          SimpleFillSymbol
        ) {
          // 创建地图实例
          this.map = new Map({
            basemap: 'streets-vector'
          })
          // 创建地图视图
          this.view = new MapView({
            container: 'map',
            map: this.map,
            center: [120.16, 30.25], // 杭州坐标 [经度, 纬度]
            zoom: 10
          })

          // 创建多边形的通用方法
          const createPolygon = (centerLng, centerLat, size = 0.01) => {
            return new Polygon({
              rings: [
                [
                  [centerLng - size, centerLat + size],
                  [centerLng + size, centerLat + size],
                  [centerLng + size, centerLat - size],
                  [centerLng - size, centerLat - size],
                  [centerLng - size, centerLat + size]
                ]
              ]
            })
          }

          // 创建图层的通用方法
          const createLayer = (color, name, lng, lat, size, order) => {
            const layer = new GraphicsLayer({ title: `${name}图层` })
            const polygon = createPolygon(lng, lat, size)
            const symbol = new SimpleFillSymbol({
              color: [...color, 0.6],
              outline: { color, width: 2 }
            })
            const graphic = new Graphic({
              geometry: polygon,
              symbol,
              attributes: { name: `${name}多边形` }
            })
            layer.add(graphic)
            this.map.add(layer, order)
            return layer
          }

          // 初始化红色图层
          const initRedLayer = () => {
            const redLayer = createLayer(
              [255, 0, 0],
              '红色',
              120.16,
              30.25,
              0.01,
              2
            )
          }
          // 添加蓝色图层
          const addBlueLayer = () => {
            const center = this.view.center
            const offsetX = (Math.random() - 0.5) * 0.02
            const offsetY = (Math.random() - 0.5) * 0.02
            const bluLayer = createLayer(
              [0, 0, 255],
              '蓝色',
              center.longitude + offsetX,
              center.latitude + offsetY,
              0.005,
              1
            )
            map.reorder(bluLayer, 0)
          }
          // 等待视图加载完成
          this.view.when(() => {
            initRedLayer()
            document
              .querySelector('button')
              .addEventListener('click', addBlueLayer)
          })
        })
      })()
    </script>
  </body>
</html>