Ly_leaflet_vue3 NPM

ly_leaflet_vue3

安装依赖

npm i ly_leaflet_vue3 -S

在main.js 引用

import LyMap from 'ly_leaflet_vue3'

app.use(LyMap)

<template>
	<Map target="地图dom id" crs="坐标系" tianToken="天地图token" center="[维度, 经度]" zoom="默认放大等级" options="{}地图配置项" />
</template>

参数说明

参数	说明	默认值
target	地图dom id	'LyMap'
crs	坐标系	'EPSG4490'
tianToken	天地图token
center	默认地图中心	29.038014380717993, 119.69593384554005
zoom	默认放大等级	10
options	地图配置	{}

crs

EPSG4490、EPSG4326、EPSG3857、EPSG3395、EPSG900913、EPSG4547、CRS3006

飞线

使用方式

import lyLeaflet from 'ly_leaflet_vue3'

const { LineMigrationControl } = lyLeaflet

const lineMigrationControl = new LineMigrationControl(lyMap)
const lineMigration1 = lineMigrationControl.add(
    [
        {
            labels: ['开始', '结束'],
            from: [119.69593384554005, 29.538014380717993],
            to: [119.69593384554005, 28.538014380717993],
            color: 'rgba(101,169,249, 1)',
            value: '2'
        }
    ],
    {
        line: {
            width: 1,
            order: false,
            icon: {
                type: 'arrow',
                imgUrl: '',
                size: 20
            }
        },
        ring: {
            left: 1,
            top: 1
        }
    },
	123321
) // 返回lineMigration对象
// lineMigration对象有show、hide、play、pause方法
// show——显示
// hide——隐藏
// play——开启动画
// pause——暂停动画

npm.io

参数说明

LineMigrationControl

参数	说明	是否必填	默认值
map	leaflet地图/Object	是	无

lineMigrationControl.add——添加飞线

参数	说明	是否必填	默认值
data	飞线数据，lineMigrationData, lineMigrationData, ...，参数说明详见lineMigrationData说明	是	无
options	飞线点和线配置，详见lineMigrationOptions说明	是	无
code	飞线唯一编码/String	是	无
onAdd	添加图层时调用的方法	否	无
onRemove	删除图层时调用的方法	否	无

lineMigrationData

// 例子
[
	{
		labels: ['开始', '结束'],
		from: [119.69593384554005, 29.538014380717993],
		to: [119.69593384554005, 28.538014380717993],
		color: 'rgba(101,169,249, 1)',
		value: ''
	}
]

参数	说明	是否必填	默认值
labels	起点label, 终点label	否	无
from	起点经纬度lng, lat	是	无
to	终点经纬度lng, lat	是	无
color	起始/结束点的颜色	是	无
value	飞线值，会显示在飞线的tooltip中	否	无

lineMigrationOptions

{
	marker: {
		radius: [5, 10],
		pulse: {
			left: 0,
			top: 0
		},
		textVisible: true
	},
	line: {
		width: 1,
		order: false,
		icon: {
			type: 'arrow',
			imgUrl: '',
			size: 20
		}
	}
}

参数	说明	是否必填	默认值
marker	点的样式	否	Object
marker.radius	min, max会根据lineMigrationData.value来决定marker的大小	否	5, 10
marker.pulse	marker的光圈动画是否启动/Boolean	否	true
marker.textVisible	marker的label是否显示	否	false
line	飞线样式	否	Object
line.width	飞线宽度	否	1
line.order	飞线扫描是否按顺序进行	否	false
line.icon	飞线头部的的样式	否	Object
line.icon.type	类型枚举——'circle', 'arrow', 'img'	否	circle
line.icon.imgUrl	当type是img时，图片的路径	否	无
line.icon.size	icon大小	否	20

lineMigrationControl.clear——删除所有的飞线

lineMigrationControl.removeByCode——根据code删除对应的飞线

lineMigrationControl.destroy——摧毁所有图层

高亮Marker

使用方法

import lyLeaflet from 'ly_leaflet_vue3'
const { HighlightMarkerControl } = lyLeaflet

const highlightMarkerControl = new HighlightMarkerControl(mapRef.value.lyMap)
highlightMarkerControl.add([29.13014380717993, 119.69593384554005], {}, '12323221', 'label文本')
highlightMarkerControl.add([29.038014380717993, 119.69593384554005], {
		color: '#fe1500',
		apertureColor: '-webkit-radial-gradient(rgba(254, 21, 0, 100), rgba(254, 21, 0, 0) 70%)',
		apertureRadius: 30,
		iconAnchor: [2, 10] // marker 偏移
	}, '1232221', 'label2文本')

npm.io

参数说明

HighlightMarkerControl

参数	说明	是否必填	默认值
map	leaflet地图/Object	是	无

highlightMarkerControl.add——返回marker对象

参数	说明	是否必填	默认值
latlng	添加点的经纬度	是	无
options	点的配置	是	见highlightMarkerOptions
code	点的唯一值	是	无
tooltipLabel	marker的tooltip的label	否	无
tooltipOptions	marker的tooltip的配置	否	{ permanent: true }
onAdd	marker添加时候的回调	否	无
onRemove	marker删除时候的回调	否	无

highlightMarkerOptions

{
	color: '#FED300FF', // marker 颜色
	apertureColor: '-webkit-radial-gradient(rgba(254, 211, 0, 1), rgba(255, 223, 67, 0) 70%)', // 扩散光圈颜色
	apertureRadius: 36, // 扩散光圈大小
	iconSize: [20, 20], // marker 大小
	iconAnchor: [10, 10] // marker 偏移
}

highlightMarkerControl.clear——删除所有的点

highlightMarkerControl.removeByCode——根据code删除对应的点

highlightMarkerControl.destroy——摧毁所有图层

点聚合MarkerCluster

使用方法

import lyLeaflet from 'ly_leaflet_vue3'
const { MarkerClusterControl } = lyLeaflet

 const MyCustomMarker = L.icon({
		iconAnchor: new L.Point(12, 12),
		iconSize: new L.Point(24, 24),
		iconUrl: positionPng
	})
const markerClusterControl = new MarkerClusterControl(mapRef.value.lyMap, {})
markerClusterControl.add([29.13014380717993, 119.69593384554005], { icon: MyCustomMarker }, 0)
markerClusterControl.add([29.23014380717993, 119.59593384554005], { icon: MyCustomMarker }, 1)
markerClusterControl.add([29.33014380717993, 119.49593384554005], { icon: MyCustomMarker }, 2)
markerClusterControl.add([29.43014380717993, 119.69593384554005], { icon: MyCustomMarker }, 3)
markerClusterControl.add([29.53014380717993, 119.59593384554005], { icon: MyCustomMarker }, 4)
markerClusterControl.add([29.63014380717993, 119.79593384554005], { icon: MyCustomMarker }, 5)
markerClusterControl.add([29.03014380717993, 119.69593384554005], { icon: MyCustomMarker }, 6)
markerClusterControl.add([28.13014380717993, 119.69593384554005], { icon: MyCustomMarker }, 7)
markerClusterControl.add([28.43014380717993, 120.69593384554005], { icon: MyCustomMarker }, 8)
markerClusterControl.add([28.63014380717993, 118.69593384554005], { icon: MyCustomMarker }, 9)
markerClusterControl.add([28.83014380717993, 119.29593384554005], { icon: MyCustomMarker }, 10)

npm.io

参数说明

MarkerClusterControl

参数	说明	是否必填	默认值
map	leaflet地图/Object	是	无
clusterOptions	点聚合相关配置	否

clusterOptions默认值及说明

const defaultOptions = {
	showCoverageOnHover: true, // 当鼠标经过一个聚合点时，会显示其包含的标记围成的范围。
	zoomToBoundsOnClick: true, // 当点击一个聚合点时，会快捷缩放至一个其对应范围适合显示的zoom级别
	spiderfyOnMaxZoom: true, // 当在最大缩放级别点击一个聚合点时，插件会将其蜘蛛化，以便能看到其包含的所有标记
	removeOutsideVisibleBounds: true, // 如果聚合点及标记处于你的显示区域外，则出于性能考虑将其从地图上移除
	animate: true // 当地图缩放或显示蜘蛛化的过程中，平滑的拆分/合并聚合点的子项。如果 L.DomUtil.TRANSITION为false，则该选项的值不会产生任何影响
	// animateAddingMarkers: false, // 如果设置为true (animate 选项也需要设置为true)，在MarkerClusterGroup被添加到地图上之后，如果将单个标记添加到MarkerClusterGroup中，则也会添加动画并聚合。默认是false，因为这样会获得更好的性能表现。不支持使用 addLayers 批量添加标记, 只支持通过 addLayer单个添加标记
	// disableClusteringAtZoom: false, // 如果设置true，在指定缩放级别以及更高级别，标记将不会被聚合。默认是false。
	// maxClusterRadius: 80, // 一个聚合点的最大影响半径（单位为像素px），默认值是80。减小这个值，将可能会产生更多数值小的聚合点 。也可以定义一个函数，根据当前地图的缩放等级，返回一个单位为像素的聚合点最大影响半径。
	// polygonOptions: null, // 这个选项通过创建一个多边形L.Polygon(points, options) ，来显示一个聚合点的边界。默认为空，则leaflet会使用 默认路径选项.
	// singleMarkerMode: false, // 如果设置为true，所有的标记的图标将会被覆盖，并且为同一尺寸。（标注: 标记本身不会被聚合点的实例对象替换，仅仅是图标被覆盖，因此，他们仍然对正常的事件有反应，选项 disableClusteringAtZoom并不能恢复他们之前的图标。 (查阅 issue#391).）
	// spiderLegPolylineOptions: { weight: 1.5, color: '#222', opacity: 0.5 }, // 允许自定义 PolylineOptions 来改变蜘蛛腿的样式， 默认样式是 { weight: 1.5, color: '#222', opacity: 0.5 }.
	// spiderfyDistanceMultiplier: 1 // 从1开始增加，以此增加蜘蛛化的标记距离中心点的距离。如果使用较大的标记图标，请使用这个选项。默认值为1。
	// iconCreateFunction: function () {}, // 可定义一个函数去创建聚合点的图标
	// spiderfyShapePositions: false, // 可定义一个函数去覆盖蜘蛛化图形的位置信息。
	// clusterPane: false // 聚合点的图标将被添加到指定图层，默认则是添加到leaflet地图的标记所在图层
}

markerClusterControl.add——返回marker对象

参数	说明	是否必填	默认值
latlng	添加点的经纬度	是	无
options	leaflet marker点的配置	是	见leaflet marker相关配置
code	点的唯一值	是	无

markerClusterControl.addBatchMarkers——批量添加点

参数	说明	是否必填	默认值
latlngArr	经纬度数组	是	无
options	leaflet marker点的配置	是	见leaflet marker相关配置

latlngArr

Array [{ latlng: [], code: '' }]
// 例：
[
    {
        latlng: [29.13014380717993, 119.69593384554005],
        code: 1
    },
    {
        latlng: [29.33014380717993, 119.79593384554005],
        code: 2
    }
    
]