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

duansamve

已于 2024-10-20 17:27:44 修改

阅读量857

点赞数 3

分类专栏：其它JS框架文章标签： Leaflet

于 2024-10-20 17:27:17 首次发布

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/143095243

版权

其它JS框架专栏收录该内容

10 篇文章

订阅专栏

一、安装

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为高德地图可用