Vue LeafletJS热力图

随喜师兄

已于 2023-03-07 13:36:13 修改

阅读量500

点赞数 1

文章标签： vue.js javascript 前端 Powered by 金山文档

于 2023-03-02 13:56:47 首次发布

本文链接：https://blog.csdn.net/suixishix/article/details/129299415

版权

Vue LeafletJS热力图

Vue下载leaflet

npm install leaflet

引入，在项目main.js中

//导入leaflet css js
import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
//挂载Vue.L
Vue.L = Vue.prototype.$L = L

1.初始化地图

//HTML
<template>
  <div>
    <div id="map"></div>
  </div>
</template>

//script
	//初始化
      this.map = L.map("map", {
        center: [27.68, 112],
        zoom: 6.5,
        maxZoom: 20,
        minZoom: 5,
        attributionControl: false, // 移除右下角leaflet标识
        zoomControl: false,
        ///编辑插件
        editable: true,
        crs: L.CRS.EPSG4326,
      });

完整代码

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: "",
    };
  },
  mounted() {
    this.initDate();
   },
  methods: {
    initDate() {
      this.map = L.map("map", {
        center: [27.68, 112],
        zoom: 6.5,
        maxZoom: 20,
        minZoom: 5,
        attributionControl: false, // 移除右下角leaflet标识
        zoomControl: false,
        ///编辑插件
        editable: true,
        crs: L.CRS.EPSG4326,
      });
      var tiandituimg = L.tileLayer(
          "http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=6c6c18e4ec555ea8f0976ec71960021f",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      ).addTo(this.map);
      var tianditucia = L.tileLayer(
          "http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=6c6c18e4ec555ea8f0976ec71960021f",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      ).addTo(this.map).setZIndex(10);
    },
  }
};
</script>

<style  scoped>
#map {
  width: 100%;
  height: calc(100vh);
  z-index: 1;
}
.leaflet-label {
  border-radius: 5px;
  background-color: #0b88e9ba;
  padding: 3px;
  text-align: center;
}
.leaflet-marker {
  color: antiquewhite;
}
.sideMap{
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 9999;
}
</style>

2.Leaflet热力图

安装插件

npm install heatmap.js

在组件页面导入

import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'
import L from 'leaflet'

定义模拟数据

      var testData = {
        max: 8,
        data: [
          { lat: 26.6408, lng: 112.7728, count: 3 },
          { lat: 26.7408, lng: 112.8728, count: 3 },
          { lat: 26.8408, lng: 112.9728, count: 3 },
          { lat: 26.5408, lng: 113.0728, count: 3 },
          { lat: 26.4408, lng: 113.1728, count: 3 }
        ]
      };

定义热力图配置

      var cfg ={  //热力图的配置项
        radius: .3,     //设置每一个热力点的半径
        maxOpacity: 0.9,        //设置最大的不透明度
        // minOpacity: 0.3,     //设置最小的不透明度
        scaleRadius: true,      //设置热力点是否平滑过渡
        latField: 'lat',  //维度
        lngField: 'lng', //经度
        blur: 0.85,             //系数越高，渐变越平滑，默认是0.85,
                                //滤镜系数将应用于所有热点数据。
        useLocalExtrema: true,  //使用局部极值
        valueField: 'count',    //热力点的值
        gradient: {   "0.99": "rgba(255,0,0,1)",
          "0.9": "rgba(255,255,0,1)",
          "0.8": "rgba(0,255,0,1)",
          "0.5": "rgba(0,255,255,1)",
          "0": "rgba(0,0,255,1)"
        },
        //过渡，颜色过渡和过渡比例,范例：
        // backgroundColor: 'rgba(27,34,44,0.5)'    //热力图Canvas背景
      };

完整热力图代码

<template>
  <div id="map" style="margin:0 auto;width: 100vh;height: 100vh"></div>
</template>
<script>
import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'
import L from 'leaflet'

export default {
  data () {
    return {
      heatmapLayer: null,
      map: null
    }
  },
  mounted () {
    this.initmap()
  },
  methods: {
    initmap: function () {
      // 数据
      var testData = {
        max: 8,
        data: [
          { lat: 26.6408, lng: 112.7728, count: 3 },
          { lat: 26.7408, lng: 112.8728, count: 3 },
          { lat: 26.8408, lng: 112.9728, count: 3 },
          { lat: 26.5408, lng: 113.0728, count: 3 },
          { lat: 26.4408, lng: 113.1728, count: 3 }
        ]
      };
      // 配置
      var cfg ={  //热力图的配置项
        radius: .3,     //设置每一个热力点的半径
        maxOpacity: 0.9,        //设置最大的不透明度
        // minOpacity: 0.3,     //设置最小的不透明度
        scaleRadius: true,      //设置热力点是否平滑过渡
        latField: 'lat',  //维度
        lngField: 'lng', //经度
        blur: 0.85,             //系数越高，渐变越平滑，默认是0.85,
                                //滤镜系数将应用于所有热点数据。
        useLocalExtrema: true,  //使用局部极值
        valueField: 'count',    //热力点的值
        gradient: {   "0.99": "rgba(255,0,0,1)",
          "0.9": "rgba(255,255,0,1)",
          "0.8": "rgba(0,255,0,1)",
          "0.5": "rgba(0,255,255,1)",
          "0": "rgba(0,0,255,1)"
        },
        //过渡，颜色过渡和过渡比例,范例：
        // backgroundColor: 'rgba(27,34,44,0.5)'    //热力图Canvas背景
      };
      this.heatmapLayer = new HeatmapOverlay(cfg)
      // 图层
      let baseLayer = L.tileLayer(
          "http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=484b70a0f454edbceb150b6080e5f1c6",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      )
      var tiandituimg = L.tileLayer(
          "http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=cda0933a3f64de1ae589eedeb0cb9010",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      )
      this.map = L.map("map", {
        center: [27.68, 112],
        zoom: 6.5,
        maxZoom: 20,
        minZoom: 5,
        attributionControl: false, // 移除右下角leaflet标识
        zoomControl: false,
        crs: L.CRS.EPSG4326,
      });
      baseLayer.addTo(this.map).setZIndex(10);
      tiandituimg.addTo(this.map)
      this.heatmapLayer.addTo(this.map)
      this.heatmapLayer.setData(testData)
    }
  }
}
</script>

*****注意：本文章使用的是EPSG:4326坐标系