首先在入口文件index.html中引入两个js文件
<script src="https://a.amap.com/jsapi_demos/static/bezier/bezier.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.14&key=秘钥&plugin=AMap.CustomLayer,AMap.ControlBar,AMap.Heatmap,AMap.MapType,AMap.OverView,AMap.Scale,AMap.ToolBar"></script>
在webpack.base.con.js里配置AMap
'AMap': 'AMap'
},
在vue页面里引用
import AMap from "AMap";
2D地图的config
resizeEnable: true,
layers: [new AMap.TileLayer.RoadNet()],
center: [yaxis,xaxis],
zoom: zoom,
mapStyle:'amap://styles/grey'
};
3D地图的config
viewMode: '3D',
pitch: 70,
resizeEnable: true,
center: [yaxis, xaxis],
zoom: zoom,
mapStyle:'amap://styles/grey'
}
绘制2D地图
this.map = new AMap.Map("heatMaps", config);
// this.map.addControl(new AMap.ControlBar({})); // 组合了旋转、倾斜、复位、缩放在内的地图控件,在3D地图模式下会显示
this.map.addControl(new AMap.MapType({})); // 卫星和标准切换,可加路况显示
// this.map.addControl(new AMap.OverView({})); // 地图鹰眼插件,默认在地图右下角显示缩略图
// this.map.addControl(new AMap.Scale({})); // 左下角地图比例尺插件
this.map.addControl(new AMap.ToolBar({})); // 地图工具条插件,可以用来控制地图的缩放和平移
this.trafficLayer = new AMap.TileLayer.Traffic({zIndex: 10});
this.trafficLayer.setMap(this.map);
},
绘制3D地图
this.threemap = new AMap.Map("heatMaps", config);
this.threemap.addControl(new AMap.MapType({})); // 卫星和标准切换,可加路况显示
this.threemap.addControl(new AMap.ToolBar({"position": "LB"})); // 地图工具条插件,可以用来控制地图的缩放和平移
this.heatmapOpts = {//3d 相关的参数
'3d': {//热度转高度的曲线控制参数,可以利用左侧的控制面板获取
heightBezier: [0.4, 0.2, 0.4, 0.8], //取样精度,值越小,曲面效果越精细,但同时性能消耗越大
gridSize: 2,
heightScale: 1
}
};
this.threemapLayer = new AMap.Heatmap(this.threemap, this.heatmapOpts)
this.threemapLayer.setMap(this.threemap);
},
最后 绘制热力图
drwaHeatmap(heatMapData) {
var that = this;
if(that.switchvalue == false){
that.map.plugin(["AMap.Heatmap"], function() {// 初始化heatmap对象
that.heatmap = new AMap.Heatmap(that.map, {
radius: 20, // 给定半径
opacity: [0, 0.8],
gradient: {
0.5: "blue",
0.65: "rgb(117,211,248)",
0.7: "rgb(0, 255, 0)",
0.9: "#ffea00",
1.0: "red"
}
});
that.heatmap.setDataSet(heatMapData);
});
}else{
that.threeheatmap = new AMap.Heatmap(that.threemap, that.heatmapOpts)
that.threeheatmap.setDataSet(heatMapData)
}
},
最后展示一些2D和3D的效果