<script>
import icon from '@/assets/pointIcon.png'
import '@/leaflet/leaflet.js'
export default {
name: 'CenterMap',
props: {
mapPointList: {
type: Array,
default: []
}
},
mounted() {
//地图初始化
this.initMap(this.mapPointList)
},
methods: {
//DOM初始化完成进行地图初始化
initMap(list) {
// 设置iocn
var myIcon = L.icon({
iconUrl: icon, //图标
iconSize: [25, 34], //大小
iconAnchor: [12.5, 34] //偏移量
})
// 初始化地图
var map = L.map('container').setView([28.697005, 115.885607], 8)
// 瓦片图层
L.tileLayer('/staticImg/{z}/{x}/{y}.png', {
minZoom: 7, //最小缩小层级
maxZoom: 12, //最大放大层级
attribution: '<b style="color:#40a9ff">高德地图</b>' //版权信息
}).addTo(map)
// 通过数据标注icon
if (list.length > 0) {
list.forEach(v => {
// 这里是纬度在前 【纬度,经度】
var marker = L.marker(v.point, {
icon: myIcon //icon
})
.addTo(map)
// Tooltip 工具提示 https://leafletjs.cn/reference.html#tooltip
.bindTooltip(v.deviceName, {
permanent: false, //是永久打开 Tooltip 还是只在鼠标移动时打开。
direction: 'bottom', //打开 Tooltip 的方向
offset: [0, 5], //Tooltip 位置的可选偏移
opacity: 1, //Tooltip 容器透明度
autoPlan: true //跟随缩放变化 好像没有起作用
})
marker.on('click', function(e) {
L.popup({
offset: [0, -25] //popup 位置的可选偏移
})
.setLatLng(v.point)
.setContent(
`<p style='text-align:center'>${v.deviceName}</p>
<p>设备编码:${v.deviceCode}</p>
<p>设备地址:${ v.address }</p>
<p>设备状态:<span style="background-color:${v.state == 0 ? 'green' : 'red'};color: #fff;
padding: 2px 4px;">${v.state == 0 ? '在线' : '离线'}</span></p>`
)
.openOn(map)
})
})
}
},
// 父组件调用 接口更新地图随之更新
setMapData(list) {
//地图初始化
this.initMap(list)
}
}
}
</script>
Leaflet热力图
- Leaflet热力图开发库展示热力图方法,结合leaflet.heat插件可以很容易的做出热力图
- 通过调整其配置参数可以优化热力图的显示,以达到最佳的可视化效果
Leaflet主要插件:leaflet.heat 插件简介与安装
- Leaflet.heat是 一个小巧,简单,快速的Leaflet热图插件。
官方文档 https://github.com/Leaflet/Leaflet.heat
# 插件安装
npm i leaflet.heat
# 引入热力图插件
import 'leaflet.heat'
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: { // 自定义渐变颜色,区间为 0~1 之间(也可以不指定颜色,使用默认颜色)
'0.2': "#00f",
'0.3': "#0ff",
'0.5': "#0f0",
'0.7': "#ff0",
'1': "#f00"
}
}).addTo(map);
方法 | 说明 |
---|---|
setOptions(options) | 设置新的热力图heatmap属性并重新绘制 |
addLatLng(latlng) | 向热力图heatmap动态添加数据并重新绘制 |
setLatLngs(latlngs) | 重置热力图heatmap数据并重新绘制 |
redraw() | 重绘热力图 |
<template>
<div class="app-contain">
<!-- leaflet 地图容器 -->
<div id="myMap"></div>
</div>
</template>
<script setup>
// 引入热力图数据点状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(`htATRIX={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: { // 自定义渐变颜色,区间为 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>