前提： 项目需要在内网进行，需求是在地图上进行画矩形，画多边形，画圆。
查了很多资料发现，离线瓦片地图是要通过软件进行下载并且使用 leaflet插件 的 tileLayer方法 进行拼接才可以显示出来。
（注：有很多软件是要收费的，找了一个免费的，现在分享链接：http://www.allmapsoft.com/omm/download.html）
一、打开软件如下：
（1）总共有19个级别
From zoom：开始的级别
To zoom：最后的级别
（2）填写经纬度的信息
（3）填写图片的保存位置
数据填完之后，离线瓦片地图就做好了。
二、使用leaflet和leaflet-geoman插件
（1）安装：npm install leaflet
npm install @geoman-io/leaflet-geoman-free
（2）全局引入插件，在main.js中引入：
import 'leaflet/dist/leaflet.css';
import * as L from 'leaflet';
import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
Vue.L = Vue.prototype.$L = L
（3）在vue文件中使用：
<div id="map"></div>
mounted() {
this.initData();
}
methods: {
initData() {
this.map = L.map("map", {
attributionControl: false //去除右下角leaflet标识
})
L.tileLayer("./test/{z}/{x}/{y}.png", {
minZoom: 3,
maxZoom: 6,
noWrap: true //解决背景图片重复的问题
}).addTo(this.map);
// 根据坐标来画图
// L.circle(纬度， 经度)
var circle = L.circle([40.3130432088809, 96.767578125], {
color: "red",
fillColor: "#f03",
fillOpacity: 0.5,
radius: 1036308.1917954731
}).addTo(this.map);
// 添加左侧按钮
this.map.pm.addControls({
// position: "topleft",
drawPolygon: true, // 添加绘制多边形
drawMarker: false, //添加按钮以绘制标记
drawRectangle: true, //添加按钮绘制矩形
drawCircleMarker: false, //添加按钮以绘制圆形标记
drawPolyline: false, //添加按钮绘制线条
drawCircle: false, // 添加按钮绘制圆圈
editMode: false, // 添加按钮编辑多边形
dragMode: false, // 添加按钮拖动多边形
cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
removalMode: true, // 清除图层
});
// 设置绘制线条颜色
this.map.pm.setPathOptions({
color: "orange",
fillColor: "green",
fillOpacity: 0.4,
});
this.map.pm.setLang("zh"); //设置语言 en, de, it, ru, ro, es, fr, pt_br, zh , nl
this.getlatLngs();
}
}
getlatLngs() {
var latlngsStr = "";
this.map.on("pm:create", (e) => {
var shape = e.shape;
var layer = e.layer;
if (shape !== "Circle") {
for (
var latlngslength = 0;
latlngslength < layer._latlngs[0].length;
latlngslength++
) {
latlngsStr +=
"经度:<font>" +
layer._latlngs[0][latlngslength].lng +
"，纬度：" +
layer._latlngs[0][latlngslength].lat +
"</font><br>";
}
console.log(latlngsStr);
} else {
// 获取圆形的圆心经纬度和半径
console.log(
"经度:" + layer._latlng.lng + ", 纬度" + layer._latlng.lat
);
console.log("半径:" + layer._mRadius);
}
// 获取拖拽后的信息
layer.on("pm:edit", (e) => {
console.log("拖动");
if (shape !== "Circle") {
console.log(e.target._latlngs[0], "拖动后的坐标");
} else {
console.log(e.target);
console.log(
"拖动后的纬度是:" +
e.target._latlng.lat +
",纬度是：" +
e.target._latlng.lng
);
}
});
});
},
