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

安装
引入，在项目main.js中
初始化地图
- 初始化
- 引入图层,可以引入多个图层
- 地图事件
添加绘制工具
- 引入leafle.pm原生组件
- 设置绘图样式
- 设置语言
自定义绘图按钮
- Drawing Mode绘图模式
- 绑定按钮
- 获取绘制的坐标
自定义编辑按钮
- 绘制多边形
- Edit Mode 编辑功能
- 全局编辑
Drag Mode 拖拽模式
Removal Mode 移除模式
Cutting Mode 剪切模式

安装

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.myPolygonlayer.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.myPolygonlayer.on('pm:cut', e => {console.log(e, "剪切")});
},
disableCut () {// 关闭剪切功能this.map.pm.Draw.Cut.disable();
}

vue使用leafLet（绘图工具详解）相关推荐

pyecharts的绘图原理详解
其实学习任何一门编程语言,最重要的就是学习它的原理.在前面我们已经介绍了matplotlib.seaborn.plotly的绘图原理,今天给大家介绍的是,我认为交互效果最好的一个python绘图库,学 ...
rpm包安装和卸载，rpm查询，yum工具详解，yum仓库搭建
rpm包安装和卸载 [root@binbinlinux Packages]# rpm -ivh zip-3.0-1.el6.x86_64.rpm 安装rpm包命令 ivh I=安装的意思in ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
python turtle库setpos_Python内置海龟(turtle)库绘图命令详解（二）
继续谈利用海龟库(turtle库)做图.在这篇文章(Python内置海龟(turtle)库绘图命令详解(一))中已经介绍了turtle的一些基本画图命令,包括画布的设计.画笔属性与状态的设置以及画笔的 ...
centos rpm 安装 perl_XtraBackup工具详解 Part 2 xtrabackup安装
实验环境此次实验的环境如下 MySQL 5.7.25 Redhat 6.10 1. xtrabackup版本我们在官方网站可以看到xtrabackup有多个版本 https://www.perco ...
Chrome开发者工具详解(4)-Profiles面板
Chrome开发者工具详解(4)-Profiles面板如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...
parted工具详解
通常我们用的比较多的一般都是fdisk工具来进行分区,但是现在由于磁盘越来越廉价,而且磁盘空间越来越大:而fdisk工具他对分区是有大小限制的,它只能划分小于2T的磁盘.但是现在的磁盘空间很多都已经是 ...
Java定时任务调度工具详解之Timer篇
Java定时任务调度工具详解之Timer篇 https://segmentfault.com/a/1190000009542398

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

目录

安装

引入，在项目main.js中

初始化地图

初始化

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

地图事件

添加绘制工具

引入leafle.pm原生组件

设置绘图样式

设置语言

自定义绘图按钮

Drawing Mode绘图模式

绑定按钮

获取绘制的坐标

自定义编辑按钮

绘制多边形

Edit Mode 编辑功能

全局编辑

Drag Mode 拖拽模式

Removal Mode 移除模式

Cutting Mode 剪切模式

vue使用leafLet（绘图工具详解）相关推荐

最新文章

热门文章