ly_leaflet_vue3
v0.0.11
Published
> npm i ly_leaflet_vue3 -S >
Readme
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——暂停动画
参数说明
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文本')
参数说明
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)
参数说明
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
}
]