更新说明

• v1.0.1:
  • 新增 getLeaflet()方法, 基于leaflet的方法, 都用它来实现, 请不要单独导入 leaflet 来使用
  • 新增 loadGeoJson方法

leaflet地图构建工具

1. 安装

npm i leaflet-easy-w

2. 使用

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import LEasy from 'leaflet-easy-w'
import type { EditLayer } from 'leaflet-easy-w'
import type { GeoJsonObject } from 'geojson'

const mapRef = ref<HTMLDivElement>()
let mapInstance: LEasy | null = null
const layerMap = new Map<string, EditLayer>()

const initMap = () => {
    if (!mapRef.value) return
    
    // 创建地图实例
    mapInstance = new LEasy(mapRef.value, {
        center: [51.505, -0.09],
        zoom: 13,
    })
    
    // 获取地图示例
    // const map = mapInstance.getMap()
    
    // 添加一个 geojson 图层
    // mapInstance.loadGeoJsonMap(gansu as GeoJsonObject, { color: '#3db93d', fillOpacity: 0.1 })
}

const drawPolygon = () => {
    if (!mapInstance) return
    const layer = mapInstance.startPolygon()
    if (layer) {
        layerMap.set('polygon', layer)
    }
}

const enabledEdit = () => {
    layerMap.forEach(layer => {
        mapInstance?.enableEdit(layer)
    })
}

const disabledEdit = () => {
    layerMap.forEach(layer => {
        mapInstance?.disableEdit(layer)
    })
}

onMounted(() => {
    initMap()
})
</script>
<template>
    <div class="w-full h-full">
        <div class="absolute top-0 left-0 z-10 p-4">
            <div @click="drawPolygon">画多边形</div>
            <div @click="enabledEdit">开启编辑</div>
            <div @click="disabledEdit">关闭编辑</div>
        </div>
        <div ref="mapRef" class="w-[1000px] h-[600px]"></div>
    </div>
</template>

3. 常用方法

3.1 基本

| 方法名 | 参数 | 默认值 | 返回值 | 描述 | |-----------------------|--------------------------------------------------------------------------------------|-----|---------------------|--------------------------------| | getMap | - | - | L.Map\|null | 获取地图实例 | | resetView | - | - | - | 重置地图视图 | | removeLayer | layer: L.Layer | - | - | 从地图上移除图层 | | createPane | name: string, zIndex: number | - | - | 创建地图图层, 需要在地图初始化后调用 | | createVelocityLayer | velocityData: L.VelocityData[], options?: L.VelocityLayerOptions | - | - | 创建风场图层 | | loadGeoJsonMap | geoJson: GeoJsonObject, layerOption: L.PathOptions, nameOption?: L.TooltipOptions | - | L.GeoJSON \| null | 加载 GeoJson 数据到地图上, (常用语自定义地图 ) | | | | | | |

3.2 海量点支持

| 方法名 | 参数 | 默认值 | 返回值 | 描述 | |----------------------------|---------------------------------------------|-----|--------------|-----------------------------------------------------| | addMarkersToCanvas | markers: L.Marker[] | - | - | 添加markers组到canvas图层 | | clearMarkersFromCanvas | - | - | - | 从canvas图层上清除markers | | filterIconMarkersByZoom | points: L.Marker[], options: SizeOption[] | | L.Marker[] | 过滤图标markers, 根据地图级别, 动态修改markers的显示, 主要是修改图片大小之类的操作 |

3.3 工具集成

| 方法名 | 参数 | 默认值 | 返回值 | 描述 | |---------------------|--------------------------------------------|-----|----------|-----------------| | vectorToSpeed | uMs: number, vMs: number, fixed?: number | - | number | 根据 u 和 v 分量计算风速 | | vectorToDirection | uMs: number, vMs: number, fixed?: number | - | number | 根据 u 和 v 分量计算风向 |

3.4 鼠绘功能

| 方法名 | 参数 | 默认值 | 返回值 | 描述 | |---------------------|-------------------------|-----|---------------------------|---------------------------------------------------------------| | startPolyline | firstPoint?: L.LatLng | - | L.Polyline \| undefined | 开始绘制线段, 如果提供了第一个点, 则以该点为起点开始绘制, 否则以用户点击的第一个点为起点开始绘制 | | startPolygon | firstPoint?: L.LatLng | - | L.Polyline \| undefined | 开始绘制多边形, 如果提供了第一个点, 则以该点为起点开始绘制, 否则以用户点击的第一个点为起点开始绘制 | | startMarker | firstPoint?: L.LatLng | - | L.Polyline \| undefined | 开始添加marker, 如果提供了第一个点, 则以该点为起点开始绘制, 否则以用户点击的第一个点为起点开始绘制 | | startCircleMarker | firstPoint?: L.LatLng | - | L.Polyline \| undefined | 开始添加circleMarker, 如果提供了第一个点, 则以该点为起点开始绘制, 否则以用户点击的第一个点为起点开始绘制 | | startRectangle | firstPoint?: L.LatLng | - | L.Polyline \| undefined | 开始绘制矩形, 如果提供了第一个点, 则以该点为起点开始绘制, 否则以用户点击的第一个点为起点开始绘制 | | startCircle | firstPoint?: L.LatLng | - | L.Polyline \| undefined | 开始绘制圆形, 如果提供了第一个点, 则以该点为起点开始绘制, 否则以用户点击的第一个点为起点开始绘制 | | disableEdit | layer: EditLayer | - | - | 关闭编辑 | | enableEdit | layer: EditLayer | - | - | 开启编辑 |

补充类型说明

export interface SizeOption {
    zoom: number
    option: L.IconOptions & { rotationAngle: number }
}

export type EditLayer = L.Polyline<LineString | MultiLineString, any> | L.Polygon<any> | L.Marker<any> | L.CircleMarker<any> | L.Rectangle<any> | L.Circle<any>