arcgis for js实现层叠立体效果

时间:2025-02-12 09:10:17
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) }) })