使用AMap（高德地图）实现热力图（2D和3D） |
您所在的位置：网站首页 › 高德的热力图设置在哪设 › 使用AMap（高德地图）实现热力图（2D和3D） |
使用AMap（高德地图）实现热力图（2D和3D）
|
首先在入口文件index.html中引入两个js文件 在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的效果 |
【本文地址】