【天地图】VUE3基于Leaflet.js部分功能hooks封装useLeafletMap.js

引言：这里以天地图作为底图使用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.其它想到了以后再补充吧…………

标签： javascript vue.js 前端

本文转载自: https://blog.csdn.net/YueMiaoL/article/details/140720140
版权归原作者 半吊子指针 所有，如有侵权，请联系我们删除。

【天地图】VUE3基于Leaflet.js部分功能hooks封装useLeafletMap.js

发表评论

“【天地图】VUE3基于Leaflet.js部分功能hooks封装useLeafletMap.js”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航