在内网中使用leaflet和leaflet-geoman

前提： 项目需要在内网进行，需求是在地图上进行画矩形，画多边形，画圆。

查了很多资料发现，离线瓦片地图是要通过软件进行下载并且使用 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             );           }         });       });     },

 

标签：map,layer,false,leaflet,._,geoman,网中
来源： https://www.cnblogs.com/xingzoudecd/p/16334840.html