- 引入-初始化地圖（關鍵代碼）
// 初始化頁面引入高德 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});}},
補充：高德地圖掩模（背景設置透明的前提下）
- mask 方式
- 設置衛星圖層 new AMap.TileLayer.Satellite({ opacity: 0 })
)
