vue結(jié)合leaflet實現(xiàn)熱力圖

更新時間：2023年06月26日 14:59:45 作者：努力搬磚的giser

本文主要介紹了vue實現(xiàn)熱力圖，結(jié)合leaflet.heat插件可以很容易的做出熱力圖，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧

本文介紹了Web端使用 Leaflet開發(fā)庫展示熱力圖方法 (底圖來源:天地圖)，結(jié)合leaflet.heat插件可以很容易的做出熱力圖，通過調(diào)整其配置參數(shù)可以優(yōu)化熱力圖的顯示，以達到最佳的可視化效果，顯示效果如下圖所示。

開發(fā)環(huán)境

Vue開發(fā)庫：3.2.37 & Leaflet開發(fā)庫：1.9.3
Leaflet主要插件：leaflet.heat

代碼簡介

插件簡介與安裝

Leaflet.heat是一個小巧，簡單，快速的Leaflet熱圖插件。

官方文檔 https://github.com/Leaflet/Leaflet.heat

# 插件安裝
npm i leaflet.heat
# 引入熱力圖插件
import 'leaflet.heat'

使用簡介

let heatDataList = []
// 構(gòu)造熱力圖數(shù)據(jù)
HeatData.features.forEach((v) => {
    // 緯度、經(jīng)度、閾值
    let group = [v.properties.lat, v.properties.lon, v.properties.valve]
    heatDataList.push(group)
})
// 生成熱力圖圖層，并添加到地圖中
let heat = L.heatLayer(heatDataList, {
    radius: 12, 
    minOpacity: 0.2,
    gradient: { // 自定義漸變顏色，區(qū)間為 0~1 之間(也可以不指定顏色，使用默認顏色)
      '0.2': "#00f",
      '0.3': "#0ff",
      '0.5': "#0f0",
      '0.7': "#ff0",
      '1': "#f00"
    }
}).addTo(map);

此外，Leaflet.heat插件還提供了幾個別的方法：

方法	說明
setOptions(options)	設置新的熱力圖heatmap屬性并重新繪制
addLatLng(latlng)	向熱力圖heatmap動態(tài)添加數(shù)據(jù)并重新繪制
setLatLngs(latlngs)	重置熱力圖heatmap數(shù)據(jù)并重新繪制
redraw()	重繪熱力圖

詳細源碼(Vue3)

<template>
? <div class="app-contain">
? ? <!-- leaflet 地圖容器 -->
? ? <div id="myMap"></div>
? </div>
</template>
<script setup>
// 引入熱力圖數(shù)據(jù)點狀geojson
import HeatData from '/@/assets/mapData/heatData.json'
// 引入樣式
import { onMounted } from 'vue'
import L from 'leaflet';
import 'leaflet/dist/leaflet.css'
// 熱力圖
import 'leaflet.heat'
// 天地圖TK
let tdtKey = 'YOURS_TK'
const initMap = () => {
? // 影像地圖
? const sourceMap = L.tileLayer(`https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}`)
? // 天地圖注記
? const tiandituText = L.tileLayer(`http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
? const layers = L.layerGroup([sourceMap, tiandituText])
? let map = L.map('myMap', { ?//需綁定地圖容器div的id
? ? center: [25.67052, 121.99804], //初始地圖中心
? ? zoom: 12, //初始縮放等級
? ? maxZoom: 20,
? ? minZoom: 2,
? ? zoomControl: true, //縮放組件
? ? attributionControl: false, //去掉右下角logol
? ? scrollWheelZoom: true, //默認開啟鼠標滾輪縮放
? ? // 限制顯示地理范圍
? ? maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)),
? ? layers: [layers] // 圖層
? })
? // 添加比例尺要素顯示
? L.control.scale({ maxWidth: 200, metric: true, imperial: false }).addTo(map)
? /** 熱力圖 */
? let heatDataList = []
? HeatData.features.forEach((v) => {
? ? let group = [v.properties.lat, v.properties.lon, v.properties.valve]
? ? heatDataList.push(group)
? })
? // 生成熱力圖圖層，并添加到地圖中
? let heat = L.heatLayer(heatDataList, {
? ? radius: 12, minOpacity: 0.2,
? ? /*
? ? gradient: { // 自定義漸變顏色，區(qū)間為 0~1 之間
? ? ? '0.2': "#00f",
? ? ? '0.3': "#0ff",
? ? ? '0.5': "#0f0",
? ? ? '0.7': "#ff0",
? ? ? '1': "#f00"
? ? }
? ? ?*/
? }).addTo(map);
}
onMounted(() => {
? initMap()
})
</script>
<style scoped>
#myMap {
? width: 92vw;
? height: 92vh;
}
</style>

到此這篇關(guān)于vue結(jié)合leaflet實現(xiàn)熱力圖的文章就介紹到這了,更多相關(guān)vue leaflet熱力圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: