在 Web 开发中，利用 ArcGIS for JS 实现一些炫酷的地图效果能够极大地提升用户体验。本文将详细介绍如何使用 ArcGIS for JS 实现层叠立体效果，并展示最终的效果图。
效果图
实现思路
要实现层叠立体效果，关键在于获取边界图形的坐标，然后对这些坐标进行多次平移操作，从而创建出多个多边形。这些多边形会从下至上层层覆盖，最终营造出立体的视觉效果。最后，我们将加载区域天地图作为底图，使整个效果更加完整。
实现代码
html代码, 复制运行即可
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>我不当帕鲁谁当帕鲁</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><!-- <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script> --><script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script><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/GraphicsLayer','esri/Graphic'], function (Map,MapView,Basemap,WebTileLayer,GroupLayer,GeoJSONLayer,GraphicsLayer,Graphic) {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'})// 初始化底图const map = new Map({basemap: vecBasemap // 指定一个底图// basemap: 'dark-gray-vector'})// 创建2维视图let view = new MapView({container: 'mapView',map: map,zoom: 9, // 初始化级别center: [103.93347958618153, 30.9146073004904] // 初始化中心点坐标})// 添加点击view.on('click', function (e) {console.log('>>> 点击的坐标: ')console.log(`${e.mapPoint.longitude}, ${e.mapPoint.latitude}`)})view.when(async () => {// 去除原本底图// map.basemap = null// 边界线const boundaryLineLayer = new GeoJSONLayer({url: 'https://geo.datav.aliyun.com/areas_v3/bound/510100.json',outFields: ['*'],renderer: {type: 'simple',symbol: {type: 'simple-line',color: '#B1E4B1',width: 2}}})// 获取边界图形const { features } = await boundaryLineLayer.queryFeatures()const rings = features[0].geometry.rings // 拿到最大的区域坐标// 装扩展边界的图形图层const extendLayer = new GraphicsLayer({ title: '扩展边界图层' })map.add(extendLayer)const colors = ['#106B5A', '#118971', '#0CAE8A', '#15C99E']for (let i = 0; i <= 3; i++) {const poly = turf.polygon(rings) // 转为turf多边形// 向下平移的距离, 必须是从下至上的顺序let distance = -8 + 2 * iconst translatedPoly = turf.transformTranslate(poly, distance, 350)const graphic = new Graphic({geometry: {type: 'polygon',rings: translatedPoly.geometry.coordinates[0]},symbol: {type: 'simple-fill',color: colors[i],outline: {width: 0,color: '#7BD6F4'}}})extendLayer.add(graphic)}// 范围内的高亮地图const areaLayer = new GroupLayer({layers: [imgLayer,ciaLayer,new GeoJSONLayer({url: 'https://geo.datav.aliyun.com/areas_v3/bound/510100.json',blendMode: 'destination-in',outFields: ['*'],renderer: {type: 'simple',symbol: {type: 'simple-fill',color: [227, 139, 79, 1],outline: {color: [0, 122, 204, 0.8],width: 2}}}})]})// 边界线和蒙层图层最后加载, 使其在最上层map.add(areaLayer)map.add(boundaryLineLayer)})})</script></body>
</html>注意事项
- 天地图服务需要使用有效的 token，文中的 token 是私人的，如果地图加载不出来，请换成自己的 token。
- 注意各个图层的添加顺序。
