vue 实现 leaflet的测绘，测距，测面
参考1：https://blog.csdn.net/lonly_maple/article/details/83658608
参考2：https://blog.csdn.net/xtfge0915/article/details/80275094#_60
前提：vue项目在安装leaflet的基础上 cnpm install leaflet-draw --save
在 vue项目根目录的index.html文件中引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./static/lib/CSS/leaflet.css">
<link rel="stylesheet" href="./static/lib/CSS/leaflet-measure-path.css">
<title>test-e-leaflet2</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script src="./static/lib/js/leaflet/Leaflet.draw.js"></script> <!--引入这个，不然会报错--> <script> </script>
</html>
.vue文件
方法已经写好了，然后自己在vue的mounted方法内加载地图，在methods中调用方法即可
var DRAWING = false; //是否正在绘制
var DRAWLAYERS = [];
var BarDRAWLAYERS = [];
var ISMEASURE = false; //是否是量距
var MEASURETOOLTIP; //量距提示
var MEASUREAREATOOLTIP; //量面提示
var MEASURERESULT = 0; //测量结果 var DRAWPOLYLINE; //绘制的折线
var DRAWMOVEPOLYLINE; //绘制过程中的折线
var DRAWPOLYLINEPOINTS = []; //绘制的折线的节点集 var DRAWPOLYGON; //绘制的面
var DRAWMOVEPOLYGON; //绘制过程中的面
var DRAWPOLYGONPOINTS = []; //绘制的面的节点集 // 测距
function startDrawLine(func) {
MEASURERESULT = 0; //测量结果
map.getContainer().style.cursor = 'crosshair';
var shapeOptions = {
color: '#F54124',
weight: 3,
opacity: 0.8,
fill: false,
clickable: true
},
DRAWPOLYLINE = new L.Polyline([], shapeOptions); //绘制的折线
map.addLayer(DRAWPOLYLINE);
if (ISMEASURE) { //是否是量距
MEASURETOOLTIP = new L.Tooltip(map); //量距提示
}
map.on('mousedown', onClick);
map.on('dblclick', onDoubleClick);
function onClick(e){
DRAWING = true; //是否正在绘制
DRAWPOLYLINEPOINTS.push(e.latlng); //绘制的折线的节点集
if (DRAWPOLYLINEPOINTS.length > 1 && ISMEASURE) { //是否是量距
MEASURERESULT += e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 2]);
}
DRAWPOLYLINE.addLatLng(e.latlng); //绘制的折线
map.on('mousemove', onMove);
}
function onMove(e){
if (DRAWING) { //是否正在绘制
if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) { //绘制过程中的折线
map.removeLayer(DRAWMOVEPOLYLINE);
}
var prevPoint = DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1];
DRAWMOVEPOLYLINE = new L.Polyline([prevPoint, e.latlng], shapeOptions);
map.addLayer(DRAWMOVEPOLYLINE);
if (ISMEASURE) {
var distance = MEASURERESULT + e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1]);
MEASURETOOLTIP.updatePosition(e.latlng); //量距提示
MEASURETOOLTIP.updateContent({
text: '单击确定点，双击结束！',
subtext: "总长：" + (distance / 1000).toFixed(2) + "公里"
});
}
}
}
function onDoubleClick(e){
map.getContainer().style.cursor = '';
if (DRAWING) {
if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) {
map.removeLayer(DRAWMOVEPOLYLINE);
DRAWMOVEPOLYLINE = null;
}
// if (DRAWPOLYLINEPOINTS.length > 1 && ISMEASURE) {
// MEASURERESULT += e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 2]);
// var distanceLabel = L.marker(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1], {
// icon: new L.divIcon({
// className: 'DistanceLabelStyle',
// iconAnchor: [-8, 15],
// html: "<span class='bubbleLabel'><span class='bubbleLabel-bot bubbleLabel-bot-left'></span><span class='bubbleLabel-top bubbleLabel-top-left'></span><span>总长：" + (MEASURERESULT / 1000).toFixed(2) + "公里" + "</span></span>"
// }),
// }).addTo(_map);
// BarDRAWLAYERS.push(distanceLabel);
// }
// //移除提示框
// if (MEASURETOOLTIP) {
// MEASURETOOLTIP.dispose();
// }
BarDRAWLAYERS.push(DRAWPOLYLINE);
// if (func) {
// func(DRAWPOLYLINEPOINTS);
// }
DRAWPOLYLINEPOINTS = [];
DRAWING = false;
ISMEASURE = false;
map.off('mousedown');
map.off('mousemove');
map.off('dblclick');
}
} } //绘制多边形
function startDrawPolygon(func) {
MEASURERESULT = 0;
map.getContainer().style.cursor = 'crosshair';
map.on('mousedown', function (e) {
DRAWING = true;
DRAWPOLYGONPOINTS.push(e.latlng);
DRAWPOLYGON.addLatLng(e.latlng);
});
map.on('mousemove', function (e) {
if (DRAWING) {
if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) {
map.removeLayer(DRAWMOVEPOLYGON);
}
var prevPoint = DRAWPOLYGONPOINTS[DRAWPOLYGONPOINTS.length - 1];
var firstPoint = DRAWPOLYGONPOINTS[0];
DRAWMOVEPOLYGON = new L.Polygon([firstPoint, prevPoint, e.latlng], shapeOptions);
map.addLayer(DRAWMOVEPOLYGON); if (ISMEASURE && DRAWPOLYGONPOINTS.length > 1) {
var tempPoints = [];
for (var i = 0; i < DRAWPOLYGONPOINTS.length; i++) {
tempPoints.push(DRAWPOLYGONPOINTS[i]);
}
tempPoints.push(e.latlng);
var distance = CalArea(tempPoints);
MEASUREAREATOOLTIP.updatePosition(e.latlng);
MEASUREAREATOOLTIP.updateContent({
text: '单击确定点，双击结束！',
subtext: "总面积：" + (distance / 1000000).toFixed(3) + '平方公里'
});
}
}
});
map.on('dblclick', function (e) {
map.getContainer().style.cursor = '';
if (DRAWING) {
if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) {
map.removeLayer(DRAWMOVEPOLYGON);
DRAWMOVEPOLYGON = null;
}
// if (DRAWPOLYGONPOINTS.length > 2 && ISMEASURE) {
// MEASURERESULT = CalArea(DRAWPOLYGONPOINTS);
// var distanceLabel = L.marker(e.latlng, {
// icon: new L.divIcon({
// className: 'DistanceLabelStyle',
// iconAnchor: [-8, 15],
// html: "<span class='bubbleLabel'><span class='bubbleLabel-bot bubbleLabel-bot-left'></span><span class='bubbleLabel-top bubbleLabel-top-left'></span><span>总面积：" + (MEASURERESULT / 1000000).toFixed(3) + "平方公里" + "</span></span>"
// }),
// }).addTo(_map);
// BarDRAWLAYERS.push(distanceLabel);
// }
// 移除提示框
// if (MEASUREAREATOOLTIP) {
// MEASUREAREATOOLTIP.dispose();
// }
BarDRAWLAYERS.push(DRAWPOLYGON);
if (func) {
func(DRAWPOLYGONPOINTS);
} DRAWPOLYGONPOINTS = [];
DRAWING = false;
ISMEASURE = false;
map.off('mousedown');
map.off('mousemove');
map.off('dblclick');
}
});
var shapeOptions = {
color: '#F54124',
weight: 3,
opacity: 0.8,
fill: true,
fillColor: null,
fillOpacity: 0.2,
clickable: true
}, DRAWPOLYGON = new L.Polygon([], shapeOptions);
map.addLayer(DRAWPOLYGON);
if (ISMEASURE) {
MEASUREAREATOOLTIP = new L.Tooltip(map);
}
} //面积计算
function CalArea(latLngs) {
var pointsCount = latLngs.length,
area = 0.0,
d2r = Math.PI / 180,
p1, p2;
if (pointsCount > 2) {
for (var i = 0; i < pointsCount; i++) {
p1 = latLngs[i];
p2 = latLngs[(i + 1) % pointsCount];
area += ((p2.lng - p1.lng) * d2r) *
(2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r));
}
area = area * 6378137.0 * 6378137.0 / 2.0;
}
return Math.abs(area);
} //清除标绘图层
function clearMap() {
if (MEASURETOOLTIP) {
MEASURETOOLTIP.dispose();
}
if (MEASUREAREATOOLTIP) {
MEASUREAREATOOLTIP.dispose();
}
for (var i = 0; i < BarDRAWLAYERS.length; i++) {
map.removeLayer(BarDRAWLAYERS[i]);
}
BarDRAWLAYERS = [];
}
vue 实现 leaflet的测绘，测距，测面的更多相关文章
- arcgis api 4.x for js 基础工具篇之测距测面
前言 在搭建好WebGIS应用框架的时候,相信大家首先开发的都会是基础功能,此篇文章我们主要讲述的是“测距”."测面"功能. 注* 在测量单位中常规都是基于"平面坐标系& ...
- 【GIS】Vue、Leaflet、highlightmarker、bouncemarker
感谢: https://github.com/brandonxiang/leaflet.marker.highlight https://github.com/maximeh/leaflet.boun ...
- vue 树形下拉框 亲测 好用
https://vue-treeselect.js.org/ 顺带说一个开发中使用这个组件遇到的问题,关于回显之后无法修改的问题 找了很长时间 原因是数据类型导致的问题,数组里面应该是数字类型,直接 ...
- vue 嵌入倒计时组件（ 亲测可用 ）
由于花费了我不少时间才找到的组件,所以记录一下,后面方便自己好找一些,也算是分享出来给各位前端一起用. npm 下载npm install vue2-flip-countdown --save tem ...
- Angular + Leaflet 实现房源数据可视化(附github源码)
这是什么?租房信息展示平台 宏观的租房数据可视化微观的房源信息展示多条件搜索等等 链接地图搜租房 来龙去脉 受 @李国宝 的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息系统方面的 ...
- Vue脚手架报错 Component name "Student" should always be multi-word vue/multi-word-component-names
报错信息分析: 新手在第一个次使用脚手架的时候难免会遇到各种各样奇怪的问题,最近在学习Vue的过程中就出现了如下问题 通过阅读报错信息可知: 是我们的组件名有一些问题,(报错信息翻译过来大概就是组件名 ...
- GPS常识-B版（简）
第一章 绪论 1.简述GPS系统的特点有哪些? 在测绘工程中有如下优点:(1)定位精度高(2)观测时间短(3)测站间无需通视(4)可提供地心坐标(5)操作简便(6)全天候作业(7)功能多.应用广 GP ...
- GPS常识-A版（详）
第一章 绪论 1.简述GPS系统的特点有哪些? GPS在测绘工程中应用的优点 P13 ●定位精度高 应用实践证明,相对静态定位1小时以上观测解,其平面位置:在300-1500m范围内,绝对误差小于1m ...
- 华为4D成像雷达、智能驾驶平台MDC 810
华为4D成像雷达.智能驾驶平台MDC 810 2020年10月底,华为发布了HI品牌,在今年2021年上海国际车展前夕,华为以 "专新致智" 为主题,举办HI新品发布会,发布了包括 ...
随机推荐
- 路由算法（Dijkstra算法以及遗传算法）
(1)Dijkstra算法 1 class Dijkstra(Algorithm): 2 """Dijkstra algorithm for unicast route ...
- 【学习笔记】conda总结
conda常用命令 conda create -n name python=x.x #创建环境 conda activate name #进入环境 conda deactivate #退出环境 con ...
- Python + Requests 知识点回顾
http://www.downza.cn/soft/11145.html PS下载地址 http://www.bejson.com/jsonviewernew/ JSON的在线视图 import re ...
- python基础之列表推导式
#列表推导式 ---> 返回的是列表 for语句 效率更高# 1*1 2*2 3*3 4*4 5*5 6*6 7*7 8*8 9*9# import time# to = time.clock( ...
- Thinkphp大批量插入数据库的处理方法和速度对比
最近在使用TP框架写一个读取excel数据并将其插入到mysql数据库中的小功能.当excel中的数据条数非常多(几千甚至上万),并且多很多个列,并且某些列的内容还非常多的时候就容易出现问题. 第一种 ...
- P7473 [NOI Online 2021 入门组] 重力球
P7473 [NOI Online 2021 入门组] 重力球 题意 给你一个正方形平面,某些位置有障碍,对于平面上两个球,每次你可以改变重力方向使两个球下落到最底端,求使两个球位置重合的最小改变重力 ...
- (JAVA1)学习，复习的好帮手
学习准备:博客 博客,英文名Blog,它的正式名称为网络日记. 为什么要写博客 我们学习任何东西都需要总结和思考.有时候我们一直在赶路,却忘了放慢脚步 提升文笔组织能力 提升学习总结能力 提升逻辑思维 ...
- element UI+vue关于日期范围选择的操作，picker-options属性的使用
一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...
- 几百行代码写个Mybatis，原理搞的透透的！
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 Mybatis 最核心的原理也是它最便于使用的体现,为什么这说? 因为我们在使用 M ...
- 从事IT行业 vs 玩卡牌手游
我曾经玩过一款手游,它一直不停地推出新的更高品质的道具和人物,新出的东西比旧的东西拥有更强力的功能,要想保持领先就必须一直充钱出新东西才行.不管你以前充了十几万还是几十万,如果有半年不充,那就会被新区 ...