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

3D 地图渲染-区域纹理图添加

news 2025/4/3 10:58:49

引入-初始化地图（关键代码）

// 初始化页面引入高德 webapi -- index.html 文件
<script src = 'https://webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>// 添加地图容器
<div id='container' ></div>// 地图初始化应该在地图容器 div 已经添加到 DOM 树之后let map = {};
// 初始化背景地图--封装方法
export const mapInit = (id = 'index-overView',opts = {},styleId = 'amap://styles/XXXXXXXXXXXXXXXXXXXXXXXXX'
) => {// fc35552908a5c4f34b7330621230b0bd// if(Object.keys(map).length === 0){// }map = new AMap.Map(id,Object.assign({mapStyle: styleId,zoom: 8,center: [110.412427, 29.303573]// pitch: 50,// viewMode: '3D',// features: ['bg', 'road'],},opts));return map;
};// 初始化
this.map = mapInit('mapContainer2', {mask: mask,viewMode: '3D',pitch: this.pitchList[this.currentAreaList.length - 1],zoom: 9.3,center: [120.66888, 29.686606],features: ['bg', 'road'],dragEnable: true,zoomEnable: true,layers: [imageLayer]
});

设置3d-这时候只需要给版块添加个wall ,把版块抬起来就可以了（关键代码）

// 添加高度面(只有添加了这个，才会有立体的感觉，这里用2.0版本，Object3DLayer会报错，所以改用1.0版本)
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
var height = -50000;
var color = '#00C2FF'; //rgba   384C4B — 242D2D  56,76,75  36,45,45    0.2,0.3,0.3   0.15,0.18,0.18var wall = new AMap.Object3D.Wall({path: bounds,height: height,color: color
});
wall.transparent = true;
object3Dlayer.add(wall);this.map.add(object3Dlayer);//修改当前光照-----重点 这里通过修改光照 能到达更好的立体效果
this.map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
this.map.DirectionLight = new AMap.Lights.DirectionLight([0, 2, -14],[1, 1, 1],0.5
);

添加纹理图-将图片放在地图上
注意：图片一定要按实际比例；图片背景必须透明；图片边界和地图四个点相交，如下图：

 // 添加纹理地图
var imageLayer = new AMap.ImageLayer({url: require('/src/assets/images/entService-platform/texture.png'),// 3d模式下，不要轻易改动 bounds 的经纬度值哈，不然你会后悔的，很难调。2d 下通过获取西南方向，和东北方向的经纬度即可bounds: new AMap.Bounds([119.194408, 29.128922],[122.143352, 30.943633]),zIndex: 2
});

这里面的 bounds 是图片中的左下角坐标,和右上角坐标 ,需要自己计算,调试步骤:
1、通过https://lbs.amap.com/demo/javascript-api-v2/example/district-search/draw-district-boundaries 使用DistrictSearch 绘制城市版块,画出该省市的边界线
2、找到边界线,东西南北的四个顶点坐标, 如上图标的数字
3、图片左下角坐标 , 是点1 的经度和点2 的纬度
4、图片右上角坐标 , 是点4 的经度和点3 的纬度

这样就得到了bounds 的值
这里四个点通过找到4个点在拾取器上搜索关键字直接获取到经纬度
点位拾取器
注意：这四个点的坐标,要么计算出来,要么就给地图添加点击事件.通过点击事件获取这四个点的坐标

完整代码

 initMap() {let district = new AMap.DistrictSearch({extensions: 'all',subdistrict: 1,level: this.currentLevel});district.search(this.activeName, async (status, result) => {var districtList = result.districtList[0].districtList;var bounds = result.districtList[0]['boundaries'];var mask = [];this.polygons = [];for (var i = 0; i < bounds.length; i++) {mask.push([bounds[i]]);}// 添加纹理地图var imageLayer = new AMap.ImageLayer({url: require('/src/assets/images/entService-platform/texture.png'),// 3d模式下，不要轻易改动 bounds 的经纬度值哈，不然你会后悔的，很难调。2d 下通过获取西南方向，和东北方向的经纬度即可bounds: new AMap.Bounds([119.194408, 29.128922],[122.143352, 30.943633]mapInit),zIndex: 2});this.map = mapInit('mapContainer2', {mask: mask,viewMode: '3D',pitch: this.pitchList[this.currentAreaList.length - 1],zoom: 9.3,center: [120.66888, 29.686606],features: ['bg', 'road'],dragEnable: true,zoomEnable: true,layers: [imageLayer]});// 添加高度面(只有添加了这个，才会有立体的感觉，这里用2.0版本，Object3DLayer会报错，所以改用1.0版本)var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });var height = -50000;var color = '#00C2FF'; //rgba   384C4B — 242D2D  56,76,75  36,45,45    0.2,0.3,0.3   0.15,0.18,0.18var wall = new AMap.Object3D.Wall({path: bounds,height: height,color: color});wall.transparent = true;object3Dlayer.add(wall);this.map.add(object3Dlayer);//修改当前光照this.map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);this.map.DirectionLight = new AMap.Lights.DirectionLight([0, 2, -14],[1, 1, 1],0.5);this.map.clearMap();let that = this;this.map.on('click', e => {that.$emit('closeDatePicker');// window.infoWindow.close();});this.getPolyline(bounds);getBounds({ searchName: '绍兴市' }).then(res => {this.countiesCenter = res.districtList.map(v => {return {name: v.name,center: [v.center.lng, v.center.lat]};});this.changeMapLevel();});});},//添加外围描边--- 外围需要更明显的边界的话 需要单独给外围 描边getPolyline(bounds) {for (var i = 0; i < bounds.length; i++) {new AMap.Polyline({path: bounds[i],isOutline: true,outlineColor: '#CAECF9',borderWeight: 3,strokeColor: '#69FFFD',strokeWeight: 2,strokeOpacity: 1,map: this.map});}},