vue3-leaflet-map-component

该项目为vue3+leaflet组件，欢迎一起加入继续完善.

运行案例(run example)

yarn dev

安装(install)

npm install vue3-leaflet-map-component

使用(use)

vue3-leaflet-map-component

ls-map

功能描述

地图显示组件

属性

参数	说明	类型	可选值	默认值
tk	地图key	string		无
layers	地图图层	string[]		['https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}', 'https://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={tk}' ]
showMiniMap	显示缩放地图	boolean	true/false	true
miniMapOptions	迷你地图选项	Record<string, any>		{toggleDisplay: true, zoomAnimation: true, hideText: 'hideText', showText: 'showText' }
showScale	比例尺	boolean		true
options	地图选项	Record<string, any>		{ center: [28.39864879699246, 105.51818847656251], //初始地图中心 zoom: 9, //初始缩放等级 maxZoom: 18, //最大缩放等级 minZoom: 9, //最小缩放等级 zoomControl: false, copyRight: '&copy; <a href="http://www.bddigi.com/index.html#banner">成都磊数</a>' }
copyRight	版权信息	string		285121973@qq.com

事件

事件名	说明	回调参数
click	单击地图触发	{latlng:鼠标事件发生的地理坐标, layerPoint:鼠标事件发生点相对于地图图层的像素坐标。 containerPoint:鼠标事件发生的点相对于地图容器的像素坐标。 originalEvent}

方法

ls-map-geo

功能描述

根据地区码加载对应的geoJson文件，可自定义geoJson数据输入

属性

参数	说明	类型	可选值	默认值

方法

事件

ls-map-marker

功能描述

标记组件，可以自定义图标和样式

属性

target?: Record<string, any>//

?: //position: [number, number]//

参数	说明	类型	可选值	默认值
target	数据	Record<string, any>
iconType	图标类型	string
position	位置	[number, number]

方法

事件

ls-map-divmarker

功能描述

自定义标记组件样式

属性

参数	说明	类型	可选值	默认值
target	数据	Record<string, any>
number	显示的消息	number
position	位置	[number, number]

方法

事件

ls-map-popup

功能描述

弹窗组件

属性

参数	说明	类型	可选值	默认值
position	位置	[number, number]
target	数据	Record<string, any>
options	选项	Record<string, any>
isShow	是否打卡弹出	boolean

作用域插槽（Scoped Slot）

插槽名	参数
default	{data}

方法

事件

ls-map-trackline

功能描述

轨迹显示组件

属性

参数	说明	类型	可选值	默认值

方法

事件

import { LsMap, LsMapDivMarker, LsMapGeo, LsMapMarker, LsMapPopup } from 'vue3-leaflet-map-component';

联系作者(CONCACT AUTHOR)

welcome communication with me!

phone:+86 13541779726

wechat:hecongyuan2023

email:2851212973@qq.com

gmail:h285121973@gmail.com