标签：map layer false 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);
// 根据坐标来画图
// 添加左侧按钮
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();
}
}
// 获取圆形的圆心经纬度和半径 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。