是在百度中建设网站?,做网站有什么用,如何提高网站索引量,外贸移动商城网站建设引入-初始化地图#xff08;关键代码#xff09;
// 初始化页面引入高德 webapi -- index.html 文件
script src https://webapi.amap.com/maps?v2.0key您申请的key值/script// 添加地图容器
div idcontainer /div// 地图初始化应该…引入-初始化地图关键代码
// 初始化页面引入高德 webapi -- index.html 文件
script src https://webapi.amap.com/maps?v2.0key您申请的key值/script// 添加地图容器
div idcontainer /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 })
