在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>
总结
通过本文的介绍，你可以轻松实现天地图在指定范围内高亮显示，范围外灰暗的效果。这种效果不仅适用于天地图，还可以扩展到其他底图服务。如果你有影像图层，实现起来会更加简单。希望本文对你有所帮助，欢迎在评论区分享你的使用体验和问题。
