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新品发布会,发布了包括 ...
随机推荐
- C语言：地址
一切都是地址 C语言用变量来存储数据,用函数来定义一段可以重复使用的代码,它们最终都要放到内存中才能供 CPU 使用.数据和代码都以二进制的形式存储在内存中,计算机无法从格式上区分某块内存到底存储的是 ...
- CF1025B题解
其他的几篇题解大多都是先求了 \(c_i \gets lcm(a_i,b_i)\) ,然后求全部 \(c_i\) 的最大公约数,但是对每一组数都求一下 \(lcm(a_i,b_i)\) 会增加时间复杂 ...
- [004] .NET 的现状和未来
我们总是能听到一些人说,.NET 不行.学 .NET 没发展前途之类的言论,有的童鞋听多了便也开始怀疑自己选择的 .NET 方向是不是错了. 不得不承认,在 .NET 没有实现跨平台之前,市场行情确实 ...
- Linux文件浏览（less、more、head、tail）以及vim编辑器命令总结
结合小编学习实践,整理了Linux下查看内容(less.more.head.tail)和编辑内容(vim)的部分基础命令解析: 1.less命令 分页浏览内容,如果在shell命令行下按回车键,则一点 ...
- (JAVA5)DOS命令
(JAVA5)DOS命令 开启DOS控制台的几种方式 win + R 输入cmd打开控制台 在任意的文件夹下面,按住shift键 + 右键单击(在此处打开Powershell窗口) 资源管理器的地址前 ...
- 误改win10下的windowsapps文件夹权限，导致自带应用闪退问题
在项目中,为了获得相关应用的具体位置(office的具体exe位置),修改了文件夹WindowsApps权限,导致所有自带应用打开闪退. 通过搜索相关资料,获得解决方法: 重置该文件的权限设置 ica ...
- Spring Cloud分区发布实践(1) 环境准备
最近研究了一下Spring Cloud里面的灰度发布, 看到各种各样的使用方式, 真是纷繁复杂, 眼花缭乱, 不同的场景需要不同的解决思路. 那我们也来实践一下最简单的场景: 区域划分: 服务分为be ...
- sqli-labs 靶场笔记
sqli-labs 靶场笔记 冲冲冲,好好学习 2020年1月12号 先来点铺垫 分类: 按照请求方法分类: 1.Get型注入:注入参数在get的参数里. 2.POST型注入:注入参数在POST的参数 ...
- 《手把手教你》系列技巧篇（十四）-java+ selenium自动化测试-元素定位大法之By xpath上卷（详细教程）
1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath.xpath 的定位方法, 非常强大. 使用这种方法几乎可以定位到页面上的任意元素. ...
- 自学linux——15.云主机的购买流程及域名的购买备案解析
项目上线流程 一.服务器选配购买 项目上线的服务器必须是外网服务器 1.服务器购买情况 真实服务器(成本过高,购买内部自用) 云服务器(上线首选):阿里云,腾讯云,华为云 2.购买阿里云服务器:htt ...