vue使用leafLet（绘图工具详解）

安装leafletleaflet.pm绘图工具引入，在项目main.js中import Vue from "vue";import App from "./App.vue";import router from "./router";import store from "./store";// 引入Leaflet对象挂载到Vue上，便于全局使用，也可以单独页面中单独引用import * as L

清虚桂意

14190人浏览 · 2021-12-06 18:18:36

清虚桂意 · 2021-12-06 18:18:36 发布

安装

leaflet
leaflet.pm绘图工具

npm install leaflet
npm install leaflet.pm

引入，在项目main.js中

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";

Vue.config.productionTip = false;
Vue.L = Vue.prototype.$L = L;

/* leaflet icon */
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
  iconUrl: require("leaflet/dist/images/marker-icon.png"),
  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

初始化地图

初始化

this.map = L.map("map", {
	  center: [40.02404009136253, 116.50641060224784], // 地图中心
	  zoom: 14, //缩放比列
	  zoomControl: false, //禁用 + - 按钮
	  doubleClickZoom: false, // 禁用双击放大
	  attributionControl: false, // 移除右下角leaflet标识
});

引入图层,可以引入多个图层

let gaoDeLayer = L.tileLayer(
  "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
)
gaoDeLayer.addTo(this.map);

地图事件

// 添加地图点击弹窗
this.map.on('click', (e) => {
   L.popup().setLatLng(e.latlng)
     .setContent("You clicked the map at " + e.latlng.toString())
     .openOn(this.map);
 });

添加绘制工具

引入leafle.pm原生组件

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

设置绘图样式

接收参数

1、单独设置某个模式的样式

// 控制绘制样式  如下给Polygon多边形设置样式
var options = {
  // 连接线  标记之间的线
  templineStyle: {
    color: 'red',
  },
  // 提示线  从最后一个标记到鼠标光标的线
  hintlineStyle: {
    color: 'red',
    dashArray: [5, 5],
  },
  // 绘制完成的样式
  pathOptions: {
    color: 'orange',
    fillColor: 'green',
  },
};
// 会激活绘制多边形功能
this.map.pm.enableDraw('Polygon', options);

2、设置全局的pathOptions样式

this.map.pm.setPathOptions({
  color: 'orange',
  fillColor: 'green',
  fillOpacity: 0.4,
});

设置语言

//设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
this.map.pm.setLang('zh');

自定义绘图按钮

Drawing Mode绘图模式

// 启用绘制多边形功能
map.pm.enableDraw('Polygon', {
  snappable: true,//启用捕捉到其他绘制图形的顶点
  snapDistance: 20,//顶点捕捉距离
});
 
// 关闭绘制  注意也可以关闭其他模式的绘制功能
map.pm.disableDraw('Polygon');

在这里插入图片描述

绑定按钮

<template>
  <div class="home">
    <button @click="drawRectangle">绘制矩形</button>
    <button @click="drawCircle">绘制圆</button>
    <button @click="disableDraw">关闭绘制</button>

    <div id="map"></div>
  </div>
</template>

drawRectangle () {
  this.map.pm.enableDraw('Rectangle', {
    snappable: true,
    snapDistance: 20,
  });
},
drawCircle () {
  this.map.pm.enableDraw('Circle', {
    snappable: true,
    snapDistance: 20,
  });
},
disableDraw () {
  this.map.pm.disableDraw('Rectangle');
},

获取绘制的坐标

//pm:drawstart 开始第一个点的时候调用
//pm:drawend  禁止绘制时调用
//pm:create  图形创建完成时调用
this.map.on("pm:drawstart", e => {
  console.log(e, "first");
});
this.map.on("pm:drawend", e => {
  console.log(e, "禁止绘制");
});
this.map.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], "绘制坐标")
  }
});

自定义编辑按钮

绘制多边形

官方详解

      // 绘制多边形
      let latlngs = [
        [50.0214690112063, 116.50239229202272],
        [50.019694293123855, 116.50224208831787],
        [50.01979288978388, 116.50580406188966],
        [50.021436146476105, 116.50601863861085],
        [50.02253710631967, 116.50316476821901]
      ];
      // color：线段颜色
      // weight：线段宽度
      // opacity：线段透明度
      // dashArray：虚线间隔
      // fill：是否填充内部(true/false)
      // fillColor:内部填充颜色，如不设置，默认为color颜色
      // fillOpacity：内部填充透明度
      this.myPolygon = L.polygon(latlngs, { color: "red" }).addTo(this.map);
      // 调整地图视图中心点为多边形中心点
      this.map.setView(this.myPolygon.getCenter(), 16)

Edit Mode 编辑功能

layer为需要改变的图层，即矢量元素（如多边形等）

<button @click="enableEdit">编辑</button>
<button @click="disableEdit">关闭编辑</button>

// 编辑
enableEdit () {
  let layer = this.myPolygon
  // 添加可编辑功能
  layer.pm.enable({
    allowSelfIntersection: false,
  });
  
  // 监听编辑事件
  layer.on('pm:vertexadded', e => {
    console.log(e, "添加顶点")
  });
  layer.on('pm:edit', e => {
    console.log(e, "拖动");
    console.log(e.target._latlngs[0], "拖动后的坐标")
  });
},

// 关闭编辑
disableEdit () {
  let layer = this.myPolygon
  layer.pm.disable()
}

全局编辑

// 开启全体编辑
this.map.pm.enableGlobalEditMode();
// 禁用全局编辑
this.map.pm.disableGlobalEditMode()
// 全局编辑切换
this.map.pm.toggleGlobalEditMode();
// 判断是否全局编辑,有返回值
let isEdit = this.map.pm.globalEditEnabled();

Drag Mode 拖拽模式

// 全局拖拽模式切换
this.map.pm.toggleGlobalDragMode();
// 是否启用全局拖动模式,有返回值
console.log(this.map.pm.globalDragModeEnabled())

// 全局的拖拽模式切换监听器
this.map.on('pm:globaldragmodetoggled', e => {
  console.log(e);
});
// 单个元素添加拖拽监听
let layer = this.myPolygon
layer.on('pm:dragend', e => {
  console.log(e, "拖拽")
});

Removal Mode 移除模式

map.pm.toggleGlobalRemovalMode();
map.pm.globalRemovalEnabled()

Cutting Mode 剪切模式

<button @click="enableCut">启用剪辑</button>
<button @click="disableCut">关闭剪辑</button>

enableCut () {
  // 开启剪切功能
  this.map.pm.Draw.Cut.enable({
    allowSelfIntersection: false,
  });
  // 单个元素添加剪切监听
  let layer = this.myPolygon
  layer.on('pm:cut', e => {
    console.log(e, "剪切")
  });
},
disableCut () {
  // 关闭剪切功能
  this.map.pm.Draw.Cut.disable();
}