vue leaflet heatmapjs

最新推荐文章于 2024-08-08 07:55:56 发布

Tiny2017

最新推荐文章于 2024-08-08 07:55:56 发布

阅读量648

点赞数

分类专栏：前端学习文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Tiny2017/article/details/107845961

版权

前端学习专栏收录该内容

15 篇文章 5 订阅

订阅专栏

首先下载包

npm install leaflet
npm install heatmap.js

引入

import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'heatmap.js'
import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'

创建地图

全局变量
window.heatmaplayer = null; //定义全局图层变量

html部分：
<div id="map"></div>

data部分
cfg: {
          // radius should be small ONLY if scaleRadius is true (or small radius is intended)
          // if scaleRadius is false it will be the constant radius used in pixels
          "radius": 0.1,
          "maxOpacity": .8,
          // scales the radius based on map zoom
          "scaleRadius": true,
          // if set to false the heatmap uses the global maximum for colorization
          // if activated: uses the data maximum within the current map boundaries
          //   (there will always be a red spot with useLocalExtremas true)
          "useLocalExtrema": true,
          // which field name in your data represents the latitude - default "lat"
          latField: 'lat',
          // which field name in your data represents the longitude - default "lng"
          lngField: 'lng',
          // which field name in your data represents the data value - default "value"
          valueField: 'count'
        }

模拟数据
data: {
	max: 15,
	data: [
		{
			lat: '',//经纬度
			lng: '',
			count: 0.1 //值
		},
		...
	]
}

js部分
let map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});
window.map = map; //全局
heatmaplayer = new HeatmapOverlay(cfg) //创建heatmap图层
heatmaplayer.addTo(map)//加到地图上
//设置数据
heatmaplayer.setData(this.data)