引言：这里以天地图作为底图使用leaflet.js封装部分地图常用功能，前篇有写过纯天地图封装hooks，所以为什么又换技术栈了呢？起因是为解决天地图渲染十万条数据卡顿问题，自从用了leaflet渲染后就没那么折腾了，使用canvas矢量图层绘制这加载速度也就解决了，心情也舒畅了~除了查leaflet相关攻略大部分都是收费一说，难顶。经过自己开发体验顺便也说一下纯天地图与leaflet的优缺点和感受吧，放在了文章最后，这部分也不重要，仅供参考！
——————————————————————————————————————————
文章改动日志：
2024/8/2：useLeafletMap hooks代码里新增tips注释提醒，旨在针对部分方法封装进行说明，不影响原hooks功能使用
——————————————————————————————————————————
言归正传，仅根据个人习惯封装，仅供参考，内部默认配置项请根据项目实际情况自行配置调整。
leaflet中文文档参考地址1：Documentation - Leaflet - 一个交互式地图 JavaScript 库
leaflet中文文档参考地址2：https://leafletjs.cn/reference.htmlLeaflet 1.9.3 中文文档 - 帮助手册&教程 - 《leaflet 中文文档 - 帮助手册 - 教程》 - 极客文档https://leafletjs.cn/reference.html
天地图API地址：天地图API
vue3引入leaflet参考地址：vue3.0使用leaflet_leaflet vue3-CSDN博客
各方法详细说明均在代码里体现，各方法参数配置参考leaflet文档对应功能，首先创建一个hooks——useLeafletMap.js
/**
* leaflet hooks
* params:
* id: 地图绑定的html标签id，具有唯一性
* mapOptions: 地图初始化配置
* tips:
* 1. 以下关于coordinate默认格式调整：{ lng: lng, lat: lat }
* 2. 入参默认为Null的为非必须传参参数
* 3. 封装旨在外部能更简洁调用使用，以尽量在外部不需要再次引用leaflet一堆直接使用L的前提下进行封
* 装，故有些封装习惯看似冗余实则个人斟酌考虑，如不喜欢请自行调整， 以下均以tips提醒
*/
import { createVNode, render } from 'vue'
import L from 'leaflet'
import 'leaflet.chinatmsproviders'
import 'leaflet/dist/leaflet.css'
export const useLeafletMap = (id) => {
let map = null // 地图对象
// 地图初始化，mapOption：自定义地图配置
const mapInit = (mapOption = {}) => {
//天地图key
const TDT_KEY = '您申请的天地图key';
const normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
key: TDT_KEY,
maxZoom: 18,
minZoom: 5
})
const normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
key: TDT_KEY,
maxZoom: 18,
minZoom: 5
})
const normal = L.layerGroup([normalm, normala])
// 地图默认配置
const defaultMapOption = {
renderer: L.canvas(), // 默认矢量图层绘制方法
center: [37.03, 111.92],
zoom: 16,
layers: [normal],
zoomControl: false, // 缩放组件
logoControl: false, // 去掉logo
attributionControl: false, // 去掉右下角logo
minZoom: 12,
maxZoom: 18, //最大显示层级
preferCanvas: true,
doubleClickZoom: false, // 取消双击放大
closePopupOnClick: false // 默认点击地图关闭popup行为
}
map = new L.Map(id, Object.assign(defaultMapOption, mapOption))
return Promise.resolve() // 回调地图初始化完成
}
// 地图平移
const setMapCenter = (coordinate) => {
const { lng, lat } = coordinate
map.panTo(L.latLng(lat, lng), { animate: true })
}
// 地图缩放
const setMapScale = (coordinate, zoom) => {
const { lng, lat } = coordinate
map.setView(L.latLng(lat, lng), zoom, { animate: true })
}
// 地图显示范围 coordinate1：范围点位1 coordinate2：范围点位2
const setMapBounds = (coordinate1, coordinate2) => {
const { lng: lng1, lat: lat1 } = coordinate1
const { lng: lng2, lat: lat2 } = coordinate2
map.setMaxBounds(L.latLngBounds(L.latLng(lat1, lng1), L.latLng(lat2, lng2)))
}
// 地图设置显示级别
const setZoomLevels = (minLevels = 1, maxLevels = 18) => {
map.setMinZoom(minLevels)
map.setMaxZoom(maxLevels)
}
/**
* 添加图片覆盖物类
* params:
* coordinate1: 经纬度 格式：默认
* coordinate2: 经纬度 格式：默认
* imgUrl: 点位显示图标
* option: 图片覆盖物属性，{ opacity: 图片透明度, alt: 如果无法显示图像，浏览器将显示替代文本 }
*/
const addMapImgOverLay = (coordinate1, coordinate2, imgUrl, option = {}) => {
const { lng: lng1, lat: lat1 } = coordinate1
const { lng: lng2, lat: lat2 } = coordinate2
let bd = L.latLngBounds(L.latLng(lat1, lng1), L.latLng(lat2, lng2))
let imgMarker = L.imageOverlay(imgUrl, bd, option)
imgMarker.addTo(map)
return imgMarker
}
/**
* 地图添加自定义点位并返回该点位对象
* params:
* coordinate: 经纬度 格式：默认
* markerOption: 地图图标对象配置
* iconOption: 地图ICON图标配置
* 格式：{
* iconUrl: String, 图标地址
* iconSize: [30, 30], 图标大小，非必需配置
* iconAnchor: [15, 30] 图标偏移，非必需配置
* }
* clickEvent: 监听点击事件回调
* tips：iconOption本可直接写入markerOption配置里，但因其配置直接使用L，故另封装一个入参，
* 可考虑单独对ICON封装函数，这里就不行此举了
*/
const addMapMarker = (
coordinate,
markerOption = {},
iconOption = null,
clickEvent = null
) => {
const { lng, lat } = coordinate
let option = {}
if (iconOption) {
let icon = L.icon(
Object.assign(
{
iconSize: [30, 30],
iconAnchor: [15, 30]
},
iconOption
)
)
option.icon = icon
}
let marker = L.marker(L.latLng(lat, lng), Object.assign(option, markerOption))
if (clickEvent) {
marker.on('click', clickEvent)
}
marker.addTo(map)
return marker
}
/**
* 地图添加自定义线并返回该线对象
* params:
* coordinateList: 线的各点位经纬度数组 格式：[{ lng: 'lng', lat: 'lat' }]
* polylineOption: 线(polyline)配置项
* clickEvent: 监听点击事件回调
*/
const addMapLine = (coordinateList, polylineOption = null, clickEvent = null) => {
let points = coordinateList.map((item) => {
return L.latLng(item.lat, item.lng)
})
let marker = L.polyline(points, polylineOption)
if (clickEvent) {
marker.on('click', clickEvent)
}
marker.addTo(map)
return marker
}
/**
* 地图添加自定义面并返回该面对象
* params:
* coordinateList: 面的各点位经纬度数组 格式：[[{ lng: 'lng', lat: 'lat' }], [{ lng: 'lng', lat: 'lat' }]]
* 格式说明：处理面内环情况 外环位置是逆时针定义 内环位置值是顺时针定义
* polylineOption: 面(polygon)配置项
* clickEvent: 监听点击事件回调
*/
const addMapPolygon = (coordinateList, polygonOption = null, clickEvent = null) => {
let polygon = coordinateList.map((item) => {
return item.map((pointItem) => {
return L.latLng(pointItem.lat, pointItem.lng)
})
})
let marker = L.polygon(polygon, polygonOption)
if (clickEvent) {
marker.on('click', clickEvent)
}
marker.addTo(map)
return marker
}
/**
* 地图添加自定义窗口并返回窗口对象
* params:
* coordinate: 弹出窗口经纬度 格式：默认
* popupOption: 弹出窗口(popup)配置项
* template: 自定义模板组件
* params: 传入组件自定义参数
* clickEvent: 监听点击事件回调
*/
const addMapPopup = (coordinate, popupOption = {}, template, params = {}, clickEvent = null) => {
// 弹窗默认配置，请根据业务需求参考leaflet文档自定义设置
const defaultOption = {
autoPan: false, // 地图做平移动画，如果同时展示多个弹出窗口则默认不做平移
interactive: true // popup将监听鼠标事件
}
// 创建虚拟节点并传参
const popupContent = getTemplateNode(template, params)
// 监听组件自定义handleClick事件
clickEvent && popupContent.el.addEventListener('click', clickEvent)
// 创建天地图弹出窗口 popupContent.el：test模板dom
let popup = getPopupObj(popupContent.el, coordinate, Object.assign(defaultOption, popupOption))
// 地图添加弹出窗口
addMapOverLay(popup)
return popup
}
/**
* 生成一个模板节点并传参
* params:
* template: 自定义模板组件
* params: 传入组件自定义参数
*/
const getTemplateNode = (template, params) => {
// 创建虚拟节点并传参
const popupContent = createVNode(template, params)
let node = document.createElement('div') // 创建一个div节点
render(popupContent, node) // 实例组件挂载到node节点上
return popupContent
}
// 生成弹出窗口对象
const getPopupObj = (el, coordinate, popupOption) => {
const { lng, lat } = coordinate
let popup = L.popup(popupOption).setLatLng(L.latLng(lat, lng)).setContent(el)
return popup
}
// 地图添加覆盖物 obj: 覆盖物对象
const addMapOverLay = (obj) => {
map.addLayer(obj)
}
// 地图移除覆盖物 obj: 覆盖物对象
const removeMapOverLay = (obj) => {
map.removeLayer(obj)
}
// 地图移除所有覆盖物
const removeMapAllOverLay = () => {
// 地图图层遍历移除
map.eachLayer((layer) => {
removeMapOverLay(layer)
})
}
// 获取map
const getMap = () => {
return map
}
return {
mapInit,
setMapCenter,
setMapScale,
setMapBounds,
setZoomLevels,
addMapImgOverLay,
addMapMarker,
addMapLine,
addMapPolygon,
addMapPopup,
getTemplateNode,
getPopupObj,
addMapOverLay,
removeMapOverLay,
removeMapAllOverLay,
getMap
}
}
引入天地图hooks并初始化地图，以下都为部分关键代码：
<template>
<div id="map"></div>
</template>
<script setup name="index">
import { useLeafletMap } from '@/hooks/useLeafletMap'
// 引入
const {
mapInit,
setMapCenter,
setMapScale,
setMapBounds,
setZoomLevels,
addMapImgOverLay,
addMapMarker,
addMapLine,
addMapPolygon,
addMapPopup,
getTemplateNode,
getPopupObj,
addMapOverLay,
removeMapOverLay,
removeMapAllOverLay,
getMap
} = useLeafletMap('map')
// 初始化地图
onMounted(() => {
mapInit().then(() => {
// 地图初始化完毕后回调操作
})
})
</script>
<style scoped lang="less">
#map {
width: 100vw;
height: 100vh;
}
</style>
setMapCenter：手动设置地图平移示例：
const coordinate = {
lat: '39.89945',
lng: '116.40769'
}
setMapCenter(coordinate)
setMapScale：手动设置地图中心点及比例尺级别示例：
const coordinate = {
lat: '39.89945',
lng: '116.40769'
}
setMapScale(coordinate, 13)
setMapBounds：手动设置地图显示范围示例：
const coordinate1 = {
lat: '30.49365',
lng: '103.90114'
}
const coordinate2 = {
lat: '30.64736',
lng: '104.23073'
}
setMapBounds(coordinate1, coordinate2 )
setZoomLevels：手动设置地图显示级别示例：
setZoomLevels(12, 18) // 设置地图级别
addMapImgOverLay：添加地图图片覆盖物示例：
import testImg from '@/assets/image/test.png'
const coordinate1 = {
lat: '30.49365',
lng: '103.90114'
}
const coordinate2 = {
lat: '30.64736',
lng: '104.23073'
}
addMapImgOverLay(
coordinate1,
coordinate2,
testImg,
{
opacity: 100,
alt: ''
}
)
addMapMarker：添加自定义点位并返回该点位对象示例：
import testIcon from '@/assets/image/test.png'
const coordinate = {
lat: '39.89945',
lng: '116.40769'
}
const marker = addMapMarker(
coordinate,
// leaflet文档里maiker options选项
{
title: '这是title'
},
// // leaflet文档里maiker的icon options选项
{
iconUrl: pointImg
},
(e) => {
console.log(e)
},
)
addMapLine：添加自定义线并返回该线对象示例：
const coordinateList = [
{
lng: '116.40769',
lat: '39.89945'
},
{
lng: '116.50769',
lat: '39.99945'
},
{
lng: '116.60769',
lat: '39.79945'
},
{
lng: '116.70769',
lat: '39.69945'
},
{
lng: '116.80769',
lat: '39.59945'
}
]
// 默认线配置
const marker = addMapLine(coordinateList)
addMapPolygon：添加自定义面并返回该面对象示例：
// 蒙层四角 中国四角坐标 外部图层
const smegmaPointList = [
{
lng: '73.0',
lat: '59.0'
},
{
lng: '73.0',
lat: '3.0'
},
{
lng: '136.0',
lat: '3.0'
},
{
lng: '136.0',
lat: '59.0'
},
{
lng: '73.0',
lat: '59.0'
}
]
// 区域范围
const mapCoordinateData = [
{
lng: '104.0325',
lat: '30.56888'
},
{
lng: '104.04353',
lat: '30.56795'
},
{
lng: '104.04375',
lat: '30.53942'
},
{
lng: '104.02315',
lat: '30.53931'
},
{
lng: '104.02164',
lat: '30.54504'
},
{
lng: '104.02542',
lat: '30.55657'
},
{
lng: '104.03053',
lat: '30.56278'
},
{
lng: '104.0325',
lat: '30.56888'
}
]
// 常规画面示例
const marker = addMapPolygon([smegmaPointList])
// 画内环圆示例并配置相关信息
const marker = addMapPolygon(
[smegmaPointList, mapCoordinateData],
{
color: 'black',
weight: 3,
opacity: 0.2,
fillColor: '#0c2940', // 蒙层颜色
fillOpacity: 0.7 // 透明度
},
() => {}
)
addMapPopup：添加自定义信息窗口并返回该窗口对象示例：
自定义test组件示例：
// 自定义模块test @/components/test/index.vue
<template>
<div>{{ title }}</div>
<template>
<scropt setup>
defineProps({
title: {
type: String,
default: ''
}
})
</scropt>
addMapPopup调用示例：
import TestTemplate from '@/components/test/index.vue'
let coordinate = {
lng: 111.92,
lat: 37.03
}
// 示例场景一：popup直接挂载到point点上
const marker = addMapMarker(coordinate) // 创建点
let content = getTemplateNode(testTemplate, { parentName: '父组件传子组件' }) // 创建窗口节点
content.el.addEventListener('click', (e) => { console.log(e) }) // 窗口节点点击事件
marker1.bindPopup(content.el, { offset: L.point(0, -15), autoClose: false }) // 挂载
// 示例场景二：popup自定义挂载到某个坐标位置
const marker = addMapPopup(
coordinate,
{ autoClose: false },
testTemplate,
{ parentName: '这是自定义popup parentName' },
(e) => {
console.log(e)
console.log(2222)
}
)
addMapOverLay：添加覆盖物示例：
addMapOverLay(marker) // marker同上示例
addMapOverLay：移除覆盖物示例：
removeMapOverLay(marker) // marker同上示例
removeMapAllOverLay：移除天地图所有覆盖物示例：
removeMapAllOverLay()
这里放一个之前写得封装：【天地图】VUE3关于天地图部分功能hooks封装useTdtMap.js_vue3 天地图-CSDN博客
leaflet与纯天地图开发使用比较：
1.论开发地图自定义绘制工具：leaflet依赖第三方插件，插件暂时感觉没天地图灵活（待我再研究研究），天地图只需按管网API开发既是。
2.论十万数据加载速度：leaflet利用canvas绘制方式加载流畅，天地图需另想办法手动优化。
3.论API文档上手难度：体感两个差不多的，个别语法略有不同，比如移除地图所有图层方式上，leaflet相对在细节上感觉更细致些。
4.论加载Geojson数据：leaflet原有对应API方式加载，天地图需手动处理加载。
5.论官网文档查询：leaflet中文文档网页有时候会挂掉，所以我贴了两个地址。
6.论引入方式：leaflet我个人是没在官网找到关于VUE项目引入的，天地图就依照官网引导引入就行。
7.论开发出现问题寻求解决方案：就绿色上网来说，leaflet更多搜的是付费方案，天地图有些搜不太到，两者体感就大差不差了。
8.其它想到了以后再补充吧…………
本文转载自: https://blog.csdn.net/YueMiaoL/article/details/140720140
版权归原作者 半吊子指针 所有， 如有侵权，请联系我们删除。
版权归原作者 半吊子指针 所有， 如有侵权，请联系我们删除。