百度地图热力图的实现(一看就懂)
a.在静态文件public里的index.html中引入。b.在随便的.vue文件中创建一个div,放入id。1.先初始化地图,让地图出来。c.初始化地图,让地图出来。d.写个方法执行绘制热力图。
·
1.先初始化地图,让地图出来
a.在静态文件public里的index.html中引入
<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
<script src="static/common.js"></script>
<script src="https://unpkg.com/mapvgl@1.0.0-beta.168/dist/mapvgl.min.js"></script>
b.在随便的.vue文件中创建一个div,放入id
<div id="map"></div>
c.初始化地图,让地图出来
this.map = new BMapGL.Map('map') // 创建地图实例
this.map.clearOverlays()
this.map.centerAndZoom(new window.BMapGL.Point(117.66080346230646, 38.957995566132666), 11)
window.BMapGL.Point(117.66080346230646, 38.957995566132666), 12)
this.map.setMinZoom(10.5)
d.写个方法执行绘制热力图
drawMap() {
const view = new window.mapvgl.View({
map: this.map
})
const PointAll = mapPoint
var remap = new window.mapvgl.HeatmapLayer({
size: 1000, // 单个点绘制大小
max: 2, // 最大阈值
height: 0, // 最大高度,默认为0
unit: 'm', // 单位,m:米,px: 像素
gradient: { // 对应比例渐变色
0.25: 'rgba(0, 0, 255, 1)',
0.55: 'rgba(0, 255, 0, 1)',
0.85: 'rgba(255, 255, 0, 1)',
1: 'rgba(255, 0, 0, 1)'
},
onClick: (e) => { // 点击事件
console.log(e)
}
})
const datas = PointAll(这个换成你的坐标)
const data = datas.map(r => {
return {
geometry: {
type: 'Point',
coordinates: [r.lng, r.lat]
},
properties: {
count: 1 // 这个是我自己用来判断的,你可以不写
}
}
})
this.view.addLayer(remap)
remap.setData(data)
// this.heatmap = heatmap //用来清除绘制的热聚合点
},
e.PointAll点的坐标类型
{
'lng': 117.53087255334319,
'lat': 38.85467271420956,
'type': 3
},
{
'lng': 117.62055937545938,
'lat': 38.945425330112016,
'type': 3
},
{
'lng': 117.63090785493432,
'lat': 38.96248453373196,
'type': 2
},
更多推荐
已为社区贡献6条内容
所有评论(0)