您的位置:首页 > Web前端 > Vue.js

vue.js高德地图实现热点图代码实例

2019-04-18 18:02 701 查看

1.在index.html引入高德地图JSAPI

<script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script>

2.地图dom

<div class="map-container">
<div id="container" style="width:100%;height:500px"></div>
</div>

3.js实现

export default {
data() {},
methods:{
initMap(){
let map = new AMap.Map('container', {
features: ['bg', 'road'],
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 11,
viewMode: '2D',
pitch: 50,
showZoomBar:true,
});
if (!this.isSupportCanvas()) {
this.$Message.info('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
}
let heatmap;
let heatmapData=[];
//从接口获取数据
//官网示例数据结构 http://a.amap.com/jsapi_demos/static/resource/heatmapData.js
this.$axios.get("/map/data").then(res => {
if(res.success) {
if(res.data){
res.data.forEach(item=>{
let obj={
lng:item.longitude,
lat:item.latitude,
count:item.count,
}
heatmapData.push(obj);
})
map.plugin(["AMap.Heatmap"], function() {
//初始化heatmap对象
 heatmap = new AMap.Heatmap(map, {
      radius: 25, //给定半径
      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'
     }
});
//设置数据集
heatmap.setDataSet({
data: heatmapData,
max: 5
});
});
}else{
heatmapData =[];
}
} else {
heatmapData =[];
}
});
}
},
isSupportCanvas() {//判断浏览区是否支持canvas
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
},
}

参考:https://lbs.amap.com/api/javascript-api/example/selflayer/heatmap

以上所述是小编给大家介绍的vue.js高德地图实现热点图详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: