当前位置：首页 > news >正文

Leaflet地图中实现绘图（点、线、多边形、圆等）功能

news 2024/10/22 11:25:18

一、安装

npm i leaflet@1.9.4 -S
npm i leaflet.pm@2.2.0 -S

二、项目中引入：

import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";

三、初始化地图：

let map = ref(null);map.value = L.map("map", {zoomControl: false}).setView([lat, lon], 10);L.tileLayer("http://localhost:3000/{z}/{x}/{y}/tile.png", {minZoom: 10,maxZoom: 18,attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',}).addTo(map.value);

四、引入leafle.pm原生组件

  map.value.pm.addControls({position: "topright",drawPolygon: true, // 绘制多边形drawMarker: true, //绘制标记点drawCircleMarker: false, //绘制圆形标记drawPolyline: true, //绘制线条drawRectangle: true, //绘制矩形drawCircle: true, //绘制圆圈editMode: true, //编辑多边形dragMode: true, //拖动多边形cutPolygon: true, // 添加一个按钮以删除多边形里面的部分内容removalMode: true, // 清除多边形});

五、设置语言

map.value.pm.setLang('zh');

六、绑定按钮

<template><el-button @click="onDraw">自定义</el-button>
</template><script setup>
const onDraw = () => {map.value.pm.enableDraw("Polygon", {snappable: true,snapDistance: 20,});
};
</script>

七、绘制完成时调用：

  map.value.on("pm:create", (e) => {console.log(e, "绘制完成时调用");if (e.shape == "Circle") {console.log(e.layer._latlng, e.layer._radius, "绘制坐标");} else {console.log(e.layer._latlngs[0], "绘制坐标");}});

八、详细资料：

amap.leaflet.pm: 适配leaflet.pm为高德地图可用

查看全文

http://www.mrgr.cn/news/54663.html