<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./esri-leaflet-v2.5.3/leaflet.css">
<link rel="stylesheet" href="./measure/leaflet-measure-path.css">
<script src="./esri-leaflet-v2.5.3/leaflet.js"></script>
<script src="./esri-leaflet-v2.5.3/esri-leaflet.js"></script>
<script src="./measure/leaflet-measure-path.js"></script>
</head>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.draw-leaflet-tip {
background-color: rgba(0, 0, 0, 0.6);
background-clip: padding-box;
color: #fff;
display: block;
font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 1px 3px;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
white-space: nowrap;
z-index: 6;
border-color: rgba(0, 0, 0, 0.6);
}
.leaflet-tooltip-left:before {
border-left-color: rgba(0, 0, 0, 0.6);
}
.leaflet-tooltip-right:before {
border-right-color: rgba(0, 0, 0, 0.6);
}
.tools {
position: fixed;
top: 50px;
right: 50px;
z-index: 500;
}
.tools li {
list-style: none;
display: inline-block;
width: 50px;
cursor: pointer;
background-color: #ccc;
}
</style>
<body>
<div id="map"></div>
<div class="tools">
<li>园</li>
<li>线</li>
<li>面</li>
<li>清除</li>
</div>
</body>
<script>
var map = L.map('map').setView([37.75, -122.23], 10);
L.esri.basemapLayer('Topographic').addTo(map);
var r = 0
var i = null
var markerTip;
let optionsConfig = {
measure: true,//是否显示距离 面积
}
class DrawPlug {
constructor(map, options) {
this.map = map;
this.i = null;//圆心
this.r = null//半径
this.markerTip = null;//提示框
this.options = { ...optionsConfig, ...options };
this.tempCircle = null;//圆
this.lineObj = null;
this.polygonObj = null;
this.lineArr = [];
this.polygonArr = [];
}
//画圆
initCircle() {
this.map.off('click mousemove contextmenu')
this.map.on('click', (event) => this.circleClickHandle(event));
}
circleClickHandle(event) {
this.tempCircle = L.circle();
this.i = event.latlng;
this.map.on('mousemove', (event) => this.circleMousemoveHandle(event));
this.map.on('contextmenu', (event) => this.circleDblclick(event));
}
circleMousemoveHandle(event1) {
//是否显示距离
if (this.circleTem) this.circleTem.remove();
let latlng = event1.latlng;
this.toolTip(latlng)
if (this.i) {
const { lat, lng } = this.i;
this.r = L.latLng(latlng).distanceTo(this.i)
this.circleTem = L.circle([lat, lng], this.r, { showMeasurements: this.options.measure })
.addTo(this.map);
}
}
circleDblclick() {
if (this.markerTip) {
this.markerTip.remove()
}
this.map.off('mousemove ')
}
deleteCircle() {
if (this.tempCircle) {
this.tempCircle.remove();
this.map.off('click mousemove ')
}
}
toolTip(latlng) {
if (this.markerTip) {
this.markerTip.remove()
}
if (latlng) {
this.markerTip = L.marker(latlng, { opacity: 0, }).addTo(this.map)
this.markerTip.bindTooltip("右击结束", { className: 'draw-leaflet-tip', offset: [0, 20] }).openTooltip();
}
}
//画线
initLine(type = 'line') {
this.type = type;
this.map.off('click mousemove ')
this.map.on('click', (event) => this.lineClick(event));
this.map.on('contextmenu', (event) => this.lineRight(event));
}
lineClick(event) {
let { latlng } = event;
this.lineArr.push([latlng.lat, latlng.lng]);
this.map.on('mousemove', (event) => this.lineMove(event));
}
removeMoveEntity() {
if (this.lineObj) this.lineObj.remove();
if (this.polygonObj) this.polygonObj.remove();
}
lineMove(event) {
let { latlng } = event;
this.toolTip(latlng)
let arr = this.lineArr;
if (arr.length <= 1) {
this.lineArr.push([latlng.lat, latlng.lng]);
} else {
arr[arr.length - 1] = [latlng.lat, latlng.lng];
}
this.lineArr = arr;
if (this.type === 'line') {
if (this.lineObj) this.lineObj.remove();
this.lineObj = L.polyline(arr,
{
showMeasurements: this.options.measure,
}).addTo(this.map)
} else if (this.type === 'polygon') {
if (this.polygonObj) this.polygonObj.remove();
this.polygonObj = L.polygon(arr,
{
showMeasurements: this.options.measure,
}).addTo(this.map)
}
}
lineRight() {
this.lineArr = [];
this.map.off('mousemove')
this.toolTip();
}
deleteAll() {
this.removeMoveEntity();
this.lineArr = [];
this.map.off('click mousemove ')
if (this.circleTem) this.circleTem.remove();
}
}
let draw = new DrawPlug(map);
let dom = document.getElementsByClassName('tools')[0].getElementsByTagName('li');
dom[0].onclick = function () {
draw.initCircle();
}
dom[1].onclick = function () {
draw.initLine();
}
dom[2].onclick = function () {
draw.initLine('polygon');
}
dom[3].onclick = function () {
draw.deleteAll();
}
</script>
</html>
文章版权声明：除非注明，否则均为
譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接