在 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 * i
const 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。
- 注意各个图层的添加顺序。
