当前位置：首页 > article >正文

arcgis for js范围内天地图高亮，其余底图灰暗

article 2025/2/8 0:08:21

在GIS地图开发中，有时我们需要突出显示某个特定区域，而将其他区域灰暗处理，以达到视觉上的对比效果。本文将介绍如何使用ArcGIS for JavaScript实现这一功能，具体效果为：在指定范围内，天地图高亮显示，而范围外的区域则呈现灰暗效果。

效果展示

在这里插入图片描述

如上图所示，地图中的某个区域（如成都市）高亮显示，而其他区域则呈现灰暗效果。这种效果不仅增强了地图的可读性，还能帮助用户快速聚焦于特定区域。

实现思路

加载天地图底图：首先加载天地图的影像图和注记图层作为底图。
灰暗处理范围外的地图：通过GroupLayer将范围外的地图进行灰暗处理，使用effect属性设置模糊、亮度和灰度效果。
高亮显示范围内的地图：通过GeoJSONLayer加载指定区域的边界数据，并使用GroupLayer将范围内的地图高亮显示。
添加阴影效果：为边界线添加阴影效果，进一步增强视觉对比。

PS: 如果项目本身就有影像图层，那就只需要对天地图底图灰暗处理，再通过MapImageLayer加载影像图层即可

实现

以下代码复制后运行即可

如果天地图加载不出来，就将token换成自己的

<!DOCTYPE html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>arcgis 天地图区域高亮, 其他灰暗</title>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        background: #000;
      }
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: linear-gradient(135deg, rgba(16, 101, 91, 1) 0%, rgba(16, 101, 91, 0.2) 100%);
      }

      #mapView {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.23/"></script>
  </head>
  <body>
    <div id="mapView"></div>

    <script>
      require([
        'esri/Map',
        'esri/views/MapView',
        'esri/Basemap',
        'esri/layers/WebTileLayer',
        'esri/layers/GroupLayer',
        'esri/layers/GeoJSONLayer',
        'esri/layers/GroupLayer'
      ], function (Map, MapView, Basemap, WebTileLayer, GroupLayer, GeoJSONLayer, GroupLayer) {
        var tiandituBaseUrl = 'http://{subDomain}.tianditu.gov.cn' // 天地图服务地址
        var token = 'b5a612fc171599a0f5c51aa03efd4948' // 我个人的天地图token, 地图加载不出来的话就换成自己的

        // 天地图底图
        var imgLayer = new WebTileLayer({
          urlTemplate:
            tiandituBaseUrl + '/DataServer?T=img_w/wmts&x={col}&y={row}&l={level}&tk=' + token,
          subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
          copyright: '天地图影像图'
        })
        var ciaLayer = new WebTileLayer({
          urlTemplate:
            tiandituBaseUrl +
            '/DataServer?T=cia_w?T=vec_c/wmts&x={col}&y={row}&l={level}&tk=' +
            token,
          subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
          copyright: '天地图影像注记'
        })

        var vecBasemap = new Basemap({
          baseLayers: [imgLayer, ciaLayer],
          title: '影像图',
          id: 'img_w',
          thumbnailUrl:
            'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/0/0/0'
        })

        // 初始化底图
        window.map = new Map({
          basemap: vecBasemap // 指定一个底图
          // basemap: 'dark-gray-vector'
        })

        // 创建2维视图
        let view = new MapView({
          container: 'mapView',
          map: map,
          zoom: 9, // 初始化级别
          center: [103.97992123657217, 30.680738016500914] // 初始化中心点坐标
        })

        // 添加点击
        view.on('click', function (e) {
          console.log('>>> 点击的坐标: ')
          console.log(`${e.mapPoint.longitude}, ${e.mapPoint.latitude}`)
        })

        view.when(() => {
          // 背景颜色在CSS中设置

          // 范围外的灰暗地图
          const groupLayer = new GroupLayer({
            // layers: [imgLayer, ciaLayer], // 不能直接使用原有的底图
            layers: [
              // 创建新的底图
              new WebTileLayer({
                urlTemplate:
                  tiandituBaseUrl +
                  '/DataServer?T=img_w/wmts&x={col}&y={row}&l={level}&tk=' +
                  token,
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                copyright: '天地图影像图'
              })
            ],
            effect: 'blur(1px) brightness(0.5) grayscale(0.8)'
          })
          map.add(groupLayer)

          // 边界线
          const boundaryLineLayer = new GeoJSONLayer({
            url: 'https://geo.datav.aliyun.com/areas_v3/bound/510100.json',
            // 加上阴影效果
            effect: 'drop-shadow(2px, 8px, 8px, rgba(0,0,0,1))',
            outFields: ['*'],
            renderer: {
              type: 'simple',
              symbol: {
                type: 'simple-line',
                color: '#fff',
                width: 4
              }
            }
          })
          map.add(boundaryLineLayer)

          // 必须等边界线的geojson加载完成, 否则两个图层同时请求该url会冲突, 除非使用自己的json地址
          boundaryLineLayer.when(() => {
            // 范围内的高亮地图
            const maskLayer = new GroupLayer({
              layers: [
                imgLayer,
                ciaLayer,
                new GeoJSONLayer({
                  url: 'https://geo.datav.aliyun.com/areas_v3/bound/510100.json',
                  blendMode: 'destination-in'
                })
              ]
            })
            map.add(maskLayer)
          })
        })
      })
    </script>
  </body>
</html>