From f21ba60dd8cd2f9f021d579fe52325abd37f4af1 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期三, 10 三月 2021 17:27:34 +0800
Subject: [PATCH] 修改已知问题
---
src/components/plugin/leaflet-measure-path/leaflet-measure-path.css | 22 +
src/components/plugin/Editable.js | 23
src/components/plugin/MeaSure.js | 163 ++++++++++
src/main.js | 2
src/components/panel/ToolBoxPanel.vue | 35 +
src/components/panel/LegendPanel.vue | 62 +-
src/components/plugin/leaflet-measure-path/leaflet-measure-path.js | 426 ++++++++++++++++++++++++++
src/components/panel/bounced/TextBounced.vue | 110 ++++++
src/components/plugin/FullScreen.js | 1
src/components/plugin/MakeTation.js | 59 +++
src/Sgis.js | 4
11 files changed, 852 insertions(+), 55 deletions(-)
diff --git a/src/Sgis.js b/src/Sgis.js
index f736ba3..70db008 100644
--- a/src/Sgis.js
+++ b/src/Sgis.js
@@ -11,7 +11,10 @@
import DashFlow from '@components/plugin/PathDashFlow'
import CanvasMarkers from '@components/plugin/CanvasMarkers'
import FullScreen from '@components/plugin/FullScreen'
+// 涓嬭浇
import DownLoad from '@components/plugin/DownLoad'
+// 娴嬮噺
+import LeafletMeasurePath from '@components/plugin/leaflet-measure-path/leaflet-measure-path'
let map = null
const L = window.L
@@ -32,6 +35,7 @@
FullScreen.init(L)
// 涓嬭浇
DownLoad.init(L)
+ LeafletMeasurePath.init(L)
map = L.map(div, MapConfig.mapOptions)
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index 2bb4108..5412fae 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -9,10 +9,12 @@
<div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
<p>{{ item.title }}</p>
<ul>
- <li v-for="(ite,inde) in item.items" :key="inde">
- <img :src='ite.legendImage' alt=''>
- <span>{{ ite.legendContent }}</span>
- </li>
+ <div v-for="(ite,inde) in item.items" :key="inde">
+ <li>
+ <img :src='ite.legendImage' alt=''>
+ <span>{{ ite.legendContent }}</span>
+ </li>
+ </div>
</ul>
<div :class="index === 5 ? '':'under-line'"></div>
</div>
@@ -108,7 +110,7 @@
},
{
legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '娌圭敯浼佷笟'
+ legendContent: '娌圭敯浼佷笟 '
},
{
legendImage: '../.././assets/images/map-pages/setting.png',
@@ -206,11 +208,6 @@
methods: {
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
legendChange () {
- // if (this.legendControl === false) {
- // this.legendControl = true
- // } else {
- // this.legendControl = false
- // }
this.legendControl = !this.legendControl
}
}
@@ -233,7 +230,7 @@
.legend-icon {
width: 3.4rem;
height: 1.6rem;
- border-radius: .3rem;
+ border-radius: 0.3rem;
background: white;
text-align: center;
}
@@ -243,9 +240,6 @@
transform: scale(0);
opacity: 0.3;
}
- //50% {
- // transform: scale(1.1);
- //}
100% {
transform: scale(1);
opacity: 1;
@@ -258,18 +252,15 @@
}
.fade-leave-active {
- //transform-origin: right;
- //animation: bounce-in 1s reverse;
transform-origin: right bottom;
animation: bounce-in .5s reverse;
}
.legend-content {
position: absolute;
- right: 1rem;
+ right: 0.3rem;
bottom: 3rem;
width: 30rem;
- height: 30rem;
border-radius: 1rem;
background: #3c7699;
@@ -286,23 +277,32 @@
list-style: none;
display: flex;
flex-wrap: wrap;
- padding-inline: 20px 0;
- margin-block: 0;
+ padding: 0;
+ padding-inline: 0;
- li {
+ div {
width: 25%;
- height: 1.5rem;
display: flex;
- align-items: center;
+ justify-content: center;
+ margin: 0.1rem 0;
- img {
- height: 18px;
- width: 18px;
- }
+ li {
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ margin-left: 15px;
+ margin-right: 15px;
- span {
- font-size: 12px;
- color: white;
+ img {
+ height: 18px;
+ width: 18px;
+ }
+
+ span {
+ width: 80px;
+ font-size: 12px;
+ color: white;
+ }
}
}
}
@@ -311,7 +311,7 @@
.under-line {
height: 2px;
background: #7bc5ef;
- margin-block-start: 0.5rem;
+ margin-block-start: 0;
margin-block-end: 0;
}
}
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
index 0666a93..1e9cba4 100644
--- a/src/components/panel/ToolBoxPanel.vue
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -3,11 +3,6 @@
<div class="init-choose" @click="changeSelect()">
<img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt="">
</div>
- <!-- <transition name="fade">-->
- <!-- <ul v-show='selectGroup'>-->
- <!-- <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"><img :src="item"/></li>-->
- <!-- </ul>-->
- <!-- </transition>-->
<div class="el-select-dropdown" v-show='selectGroup'>
<el-dropdown @command="handleCommand" trigger="click" v-for="(item,i) in imgLists" :key="i" :value="total">
<transition name="fade">
@@ -20,6 +15,8 @@
</el-dropdown-menu>
</el-dropdown>
</div>
+ <!-- // 寮规-->
+ <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>
</div>
</template>
@@ -31,9 +28,16 @@
import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png'
import square from '@/assets/images/map-pages/icon/toolbox/square.png'
+import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css'
+import Measure from '@/components/plugin/MeaSure'
+
+import MakeTation from '@components/plugin/MakeTation'
+
+import TextBounced from '@components/panel/bounced/TextBounced'
+
export default {
name: 'ToolBoxPanel',
- components: {},
+ components: { TextBounced },
data () {
return {
isPanelVisible: false,
@@ -103,11 +107,16 @@
},
selectGroup: false,
drawLayer: null,
+ map: null,
L: window.L,
- map: null
+ // 鎺у埗宸ュ叿鏍� 鏂囧瓧鏍囨敞 鐨勫脊妗嗘槸鍚︽樉绀�
+ bouncedText: false
}
},
methods: {
+ gitBounced (params) {
+ this.bouncedText = params
+ },
changeSelect () {
this.selectGroup = !this.selectGroup
},
@@ -157,7 +166,7 @@
this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
break
case '绠ご鏍囩粯':
- this.drawLayer = this.map.editTools.startPolyline()
+ this.drawLayer = this.map.editTools.startPolylineArrow()
this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
break
case '鐐规爣娉�':
@@ -169,8 +178,14 @@
this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
break
case '鏂囧瓧鏍囨敞':
- this.drawLayer = this.map.editTools.startText()
- this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
+ this.bouncedText = true
+ MakeTation.startMakeText(this.map, this.L)
+ break
+ case '璺濈娴嬮噺':
+ Measure.startMeasureLen(this.map, this.L)
+ break
+ case '闈㈢Н娴嬮噺':
+ Measure.startMeasureArea(this.map, this.L)
break
}
},
diff --git a/src/components/panel/bounced/TextBounced.vue b/src/components/panel/bounced/TextBounced.vue
new file mode 100644
index 0000000..d3c1f00
--- /dev/null
+++ b/src/components/panel/bounced/TextBounced.vue
@@ -0,0 +1,110 @@
+<template>
+ <div class="bounced-box">
+ <ul>
+ <li>
+ <form action="" class="bounced-box-title">
+ <span>鏂囧瓧鏍囨敞璁剧疆</span>
+ <a @click="changeBounced()">X</a>
+ </form>
+ </li>
+ <li>
+ <form action="" class="bounced-box-content">
+ <h6>鍐呭锛�</h6>
+ <div><textarea v-model='bouncedText'></textarea></div>
+ </form>
+ </li>
+ <li class="bounced-box-choose">
+ <span>棰滆壊锛�</span>
+ <select v-model='bouncedSelect' @click="changeLabelTextSelect()">
+ <option v-for="(item,index) in selectOptions" :key="index" :value="item">{{ item }}</option>
+ </select>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'TextBounced',
+ data () {
+ return {
+ bouncedText: '',
+ bouncedSelect: '绾㈣壊',
+ selectOptions: ['绾㈣壊', '钃濊壊', '榛勮壊']
+ }
+ },
+ methods: {
+ changeBounced () {
+ this.$emit('changeBounced', false)
+ },
+ changeLabelTextSelect () {
+ // this.bouncedSelect = item
+ console.log('鑾峰彇棰滆壊')
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+.bounced-box {
+ position: absolute;
+ border: 1px solid grey;
+ width: 150px;
+ right: 5%;
+ top: 238px;
+ background-color: rgba(3, 28, 61, 0.8);
+ color: white;
+ cursor: default;
+ left: 814px;
+
+ ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ li {
+ margin: 0.5rem 0;
+ }
+
+ .bounced-box-title {
+ background-color: rgba(34, 83, 130, 0.8);
+ cursor: move;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+
+ a {
+ color: white;
+ cursor: pointer;
+ }
+ }
+
+ .bounced-box-content {
+ h6 {
+ padding: 0;
+ margin: 5px;
+ }
+
+ div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ textarea {
+ width: 90%;
+ resize: none;
+ outline: 0;
+ border: 1px solid #a0b3d6;
+ border-radius: 5px;
+ }
+ }
+ }
+
+ .bounced-box-choose {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ }
+ }
+}
+</style>
diff --git a/src/components/plugin/Editable.js b/src/components/plugin/Editable.js
index 943fdcd..bd287f5 100644
--- a/src/components/plugin/Editable.js
+++ b/src/components/plugin/Editable.js
@@ -298,7 +298,6 @@
connectCreatedToMap: function (layer) {
return this.featuresLayer.addLayer(layer)
},
-
// 馃崅method startPolyline(latlng: L.LatLng, options: hash): L.Polyline
// Start drawing a Polyline. If `latlng` is given, a first point will be added. In any case, continuing on user click.
// If `options` is given, it will be passed to the Polyline class constructor.
@@ -306,6 +305,16 @@
const line = this.createPolyline([], options)
line.enableEdit(this.map).newShape(latlng)
return line
+ },
+ // 绠ご鏍囩粯
+ startPolylineArrow: function (latlng, options) {
+ const lineArrow = this.createPolyline([], {
+ color: 'black',
+ weight: 3,
+ opacity: 1.0
+ })
+ lineArrow.enableEdit(this.map).newShape(latlng)
+ return lineArrow
},
// 馃崅method startPolygon(latlng: L.LatLng, options: hash): L.Polygon
@@ -347,18 +356,6 @@
const circle = this.createCircle(latlng, options)
circle.enableEdit(this.map).startDrawing()
return circle
- },
- // 鏂囧瓧鏍囨敞
- startText: function (latlng, options) {
- latlng = latlng || this.map.getCenter().clone()
- const markerBuilding = this.createMarker(latlng, options).bindTooltip('闂鏍囨敞鍐呭', {
- offset: [0, 0],
- permanent: true,
- direction: 'top',
- className: 'anim-tooltip'
- })
- markerBuilding.enableEdit(this.map).startDrawing()
- return markerBuilding
},
// 鍥炬爣鏍囨敞
diff --git a/src/components/plugin/FullScreen.js b/src/components/plugin/FullScreen.js
index 888371d..a6f36f3 100644
--- a/src/components/plugin/FullScreen.js
+++ b/src/components/plugin/FullScreen.js
@@ -1,4 +1,5 @@
/* eslint-disable */
+// 鍏ㄥ睆灞曠ず鎻掍欢
const init = (L) => {
(function (factory) {
if (typeof define === 'function' && define.amd) {
diff --git a/src/components/plugin/MakeTation.js b/src/components/plugin/MakeTation.js
new file mode 100644
index 0000000..5bc8ac3
--- /dev/null
+++ b/src/components/plugin/MakeTation.js
@@ -0,0 +1,59 @@
+/* eslint-disable */
+// 娣诲姞鏂囧瓧鏍囨敞
+var TextAnnotation = {
+ points: [],
+ color: 'yellow',
+ L: null,
+ map: null,
+ layers: null,
+ polyline: null,
+ marker: null,
+ init: function (map, L) {
+ // console.log(L)
+ TextAnnotation.L = L
+ TextAnnotation.map = map
+ TextAnnotation.points = []
+ TextAnnotation.polyline = null
+ TextAnnotation.marker = null
+ TextAnnotation.layers = L.layerGroup()
+ map.on('click', TextAnnotation.click).on('dblclick', TextAnnotation.dblclick)
+ },
+ click: function (e) {
+ // console.log(e)
+ let contents = 'bouncedText'
+ let labIcon = L.divIcon({
+ html: '<div style="color: red;font-size: 18px;">' + contents + '</div>',
+ iconSize: [100, 40],
+ iconAnchor: [0, 0],
+ className: ''
+ })
+ let marker = L.marker(e.latlng, { icon: labIcon })
+ marker.addTo(TextAnnotation.map)
+ },
+ dblclick: function (e) {
+ TextAnnotation.map.off('click', TextAnnotation.click).off('dblclick', TextAnnotation.dblclick)
+ },
+ destory: function () {
+ if (TextAnnotation.polyline) {
+ TextAnnotation.map.removeLayer(TextAnnotation.polyline)
+ }
+ if (TextAnnotation.marker) {
+ TextAnnotation.marker.remove()
+ }
+ if (TextAnnotation.layers) {
+ TextAnnotation.layers.clearLayers()
+ }
+ }
+}
+
+const startMakeText = function (map, L) {
+ TextAnnotation.init(map, L)
+}
+
+const clearText = function () {
+ startMakeText.destory()
+}
+export default {
+ startMakeText,
+ clearText
+}
diff --git a/src/components/plugin/MeaSure.js b/src/components/plugin/MeaSure.js
new file mode 100644
index 0000000..b6730f1
--- /dev/null
+++ b/src/components/plugin/MeaSure.js
@@ -0,0 +1,163 @@
+/* eslint-disable */
+// 闈㈢Н娴嬮噺鏂规硶
+var areaMeasure = {
+ points: [],
+// markers:[],
+ color: 'red',
+ L: null,
+ layers: null,
+ polygon: null,
+ marker: null,
+ init: function (map, L) {
+ areaMeasure.L = L
+ areaMeasure.map = map
+ areaMeasure.points = []
+ areaMeasure.polygon = null
+ areaMeasure.marker = null
+ areaMeasure.layers = L.layerGroup()
+ areaMeasure.map.on('click', areaMeasure.click).on('dblclick', areaMeasure.dblclick)
+ },
+ close: function (latlng) {
+ /*areaMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {
+ //console.log('marker',e);
+ if(areaMeasure.polygon)
+ map.removeLayer(areaMeasure.polygon);
+
+ if(areaMeasure.marker)
+ areaMeasure.marker.remove();
+ });
+ //areaMeasure.markers.push(marker);
+ */
+
+ },
+ click: function (e) {
+ areaMeasure.map.doubleClickZoom.disable()
+// 娣诲姞鐐逛俊鎭�
+ areaMeasure.points.push(e.latlng)
+// 娣诲姞闈�
+ areaMeasure.map.on('mousemove', areaMeasure.mousemove)
+ },
+ mousemove: function (e) {
+ areaMeasure.points.push(e.latlng)
+ if (areaMeasure.polygon) {
+ areaMeasure.map.removeLayer(areaMeasure.polygon)
+ }
+ areaMeasure.polygon = areaMeasure.L.polygon(areaMeasure.points, {
+ showMeasurements: true,
+ color: 'red'
+ })
+//areaMeasure.polygon.addTo(map);
+ areaMeasure.polygon.addTo(areaMeasure.layers)
+ areaMeasure.layers.addTo(areaMeasure.map)
+ areaMeasure.points.pop()
+ },
+ dblclick: function (e) { // 鍙屽嚮缁撴潫
+ console.log('鍙屽嚮缁撴潫', e)
+ areaMeasure.polygon.addTo(areaMeasure.layers)
+ areaMeasure.close(e.latlng)
+//areaMeasure.polygon.enableEdit();
+//map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon);
+ areaMeasure.map.off('click', areaMeasure.click).off('mousemove', areaMeasure.mousemove).off('dblclick', areaMeasure.dblclick)
+ },
+ destory: function () {
+ if (areaMeasure.polygon) {
+ areaMeasure.map.removeLayer(areaMeasure.polygon)
+ }
+
+ if (areaMeasure.marker) {
+ areaMeasure.marker.remove()
+ }
+ if (areaMeasure.layers) {
+ areaMeasure.layers.clearLayers()
+ }
+ }
+}
+
+// 璺濈娴嬮噺鏂规硶
+var distanceMeasure = {
+ points: [],
+// markers:[],
+ color: 'red',
+ L: null,
+ map: null,
+ layers: null,
+ polyline: null,
+ marker: null,
+ init: function (map, L) {
+ console.log(L)
+ distanceMeasure.L = L
+ distanceMeasure.map = map
+ distanceMeasure.points = []
+ distanceMeasure.polyline = null
+ distanceMeasure.marker = null
+ distanceMeasure.layers = L.layerGroup()
+ map.on('click', distanceMeasure.click).on('dblclick', distanceMeasure.dblclick)
+ },
+ close: function (latlng) {
+ /*distanceMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {
+ //console.log('marker',e);
+ if(distanceMeasure.polyline)
+ map.removeLayer(distanceMeasure.polyline);
+
+ if(distanceMeasure.marker)
+ distanceMeasure.marker.remove();
+ });*/
+ },
+ click: function (e) {
+ distanceMeasure.map.doubleClickZoom.disable()
+// 娣诲姞鐐逛俊鎭�
+ distanceMeasure.points.push(e.latlng)
+// 娣诲姞绾�
+ distanceMeasure.map.on('mousemove', distanceMeasure.mousemove)
+ },
+ mousemove: function (e) {
+ distanceMeasure.points.push(e.latlng)
+ if (distanceMeasure.polyline) {
+ distanceMeasure.map.removeLayer(distanceMeasure.polyline)
+ }
+ distanceMeasure.polyline = distanceMeasure.L.polyline(distanceMeasure.points, {
+ showMeasurements: true,
+ color: 'red'
+ })
+ distanceMeasure.polyline.addTo(distanceMeasure.layers)
+ distanceMeasure.layers.addTo(distanceMeasure.map)
+ distanceMeasure.points.pop()
+ },
+ dblclick: function (e) { // 鍙屽嚮缁撴潫
+ console.log('鍙屽嚮缁撴潫', e)
+ distanceMeasure.polyline.addTo(distanceMeasure.layers)
+ distanceMeasure.close(e.latlng)
+//distanceMeasure.polygon.enableEdit();
+//map.on('editable:vertex:drag editable:vertex:deleted', distanceMeasure.polygon.updateMeasurements, distanceMeasure.polygon);
+ distanceMeasure.map.off('click', distanceMeasure.click).off('mousemove', distanceMeasure.mousemove).off('dblclick', distanceMeasure.dblclick)
+ },
+ destory: function () {
+ if (distanceMeasure.polyline) {
+ distanceMeasure.map.removeLayer(distanceMeasure.polyline)
+ }
+ if (distanceMeasure.marker) {
+ distanceMeasure.marker.remove()
+ }
+ if (distanceMeasure.layers) {
+ distanceMeasure.layers.clearLayers()
+ }
+ }
+}
+
+const startMeasureArea = function (map, L) {
+ areaMeasure.init(map, L)
+}
+
+const startMeasureLen = function (map, L) {
+ distanceMeasure.init(map, L)
+}
+
+const clearMeasure = function () {
+ areaMeasure.destory()
+ distanceMeasure.destory()
+}
+export default {
+ startMeasureArea,
+ startMeasureLen,
+ clearMeasure
+}
diff --git a/src/components/plugin/leaflet-measure-path/leaflet-measure-path.css b/src/components/plugin/leaflet-measure-path/leaflet-measure-path.css
new file mode 100644
index 0000000..b583261
--- /dev/null
+++ b/src/components/plugin/leaflet-measure-path/leaflet-measure-path.css
@@ -0,0 +1,22 @@
+.leaflet-measure-path-measurement {
+ position: absolute;
+ font-size: 10px;
+ color: black;
+ text-shadow: -1px 0 0 white,
+ -1px -1px 0 white,
+ 0 -1px 0 white,
+ 1px -1px 0 white,
+ 1px 0 0 white,
+ 1px 1px 0 white,
+ 0 1px 0 white,
+ -1px 1px 0 white;
+ white-space: nowrap;
+ transform-origin: 0;
+ pointer-events: none;
+}
+
+.leaflet-measure-path-measurement > div {
+ position: relative;
+ margin-top: -25%;
+ left: -50%;
+}
diff --git a/src/components/plugin/leaflet-measure-path/leaflet-measure-path.js b/src/components/plugin/leaflet-measure-path/leaflet-measure-path.js
new file mode 100644
index 0000000..28fdfd9
--- /dev/null
+++ b/src/components/plugin/leaflet-measure-path/leaflet-measure-path.js
@@ -0,0 +1,426 @@
+/* eslint-disable */
+const init = (L) => {
+ !(function() {
+ 'use strict'
+
+ L.Marker.Measurement = L[L.Layer ? 'Layer' : 'Class'].extend({
+ options: {
+ pane: 'markerPane'
+ },
+
+ initialize: function(latlng, measurement, title, rotation, options) {
+ L.setOptions(this, options)
+
+ this._latlng = latlng
+ this._measurement = measurement
+ this._title = title
+ this._rotation = rotation
+ },
+
+ addTo: function(map) {
+ map.addLayer(this)
+ return this
+ },
+
+ onAdd: function(map) {
+ this._map = map
+ var pane = this.getPane ? this.getPane() : map.getPanes().markerPane
+ var el = this._element = L.DomUtil.create('div', 'leaflet-zoom-animated leaflet-measure-path-measurement', pane)
+ var inner = L.DomUtil.create('div', '', el)
+ inner.title = this._title
+ inner.innerHTML = this._measurement
+
+ map.on('zoomanim', this._animateZoom, this)
+
+ this._setPosition()
+ },
+
+ onRemove: function(map) {
+ map.off('zoomanim', this._animateZoom, this)
+ var pane = this.getPane ? this.getPane() : map.getPanes().markerPane
+ pane.removeChild(this._element)
+ this._map = null
+ },
+
+ _setPosition: function() {
+ L.DomUtil.setPosition(this._element, this._map.latLngToLayerPoint(this._latlng))
+ this._element.style.transform += ' rotate(' + this._rotation + 'rad)'
+ },
+
+ _animateZoom: function(opt) {
+ var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round()
+ L.DomUtil.setPosition(this._element, pos)
+ this._element.style.transform += ' rotate(' + this._rotation + 'rad)'
+ }
+ })
+
+ L.marker.measurement = function(latLng, measurement, title, rotation, options) {
+ return new L.Marker.Measurement(latLng, measurement, title, rotation, options)
+ }
+
+ var formatDistance = function(d) {
+ var unit,
+ feet
+
+ if (this._measurementOptions.imperial) {
+ feet = d / 0.3048
+ if (feet > 3000) {
+ d = d / 1609.344
+ unit = 'mi'
+ } else {
+ d = feet
+ unit = 'ft'
+ }
+ } else {
+ if (d > 1000) {
+ d = d / 1000
+ unit = 'km'
+ } else {
+ unit = 'm'
+ }
+ }
+
+ if (d < 100) {
+ return d.toFixed(1) + ' ' + unit
+ } else {
+ return Math.round(d) + ' ' + unit
+ }
+ }
+
+ var formatArea = function(a) {
+ var unit,
+ sqfeet
+
+ if (this._measurementOptions.imperial) {
+ if (a > 404.685642) {
+ a = a / 4046.85642
+ unit = 'ac'
+ } else {
+ a = a / 0.09290304
+ unit = 'ft虏'
+ }
+ } else {
+ if (a > 1000000) {
+ a = a / 1000000
+ unit = 'km虏'
+ } else {
+ unit = 'm虏'
+ }
+ }
+
+ if (a < 100) {
+ return a.toFixed(1) + ' ' + unit
+ } else {
+ return Math.round(a) + ' ' + unit
+ }
+ }
+
+ var RADIUS = 6378137
+ // ringArea function copied from geojson-area
+ // (https://github.com/mapbox/geojson-area)
+ // This function is distributed under a separate license,
+ // see LICENSE.md.
+ var ringArea = function ringArea(coords) {
+ var rad = function rad(_) {
+ return _ * Math.PI / 180
+ }
+ var p1, p2, p3, lowerIndex, middleIndex, upperIndex,
+ area = 0,
+ coordsLength = coords.length
+
+ if (coordsLength > 2) {
+ for (var i = 0; i < coordsLength; i++) {
+ if (i === coordsLength - 2) {// i = N-2
+ lowerIndex = coordsLength - 2
+ middleIndex = coordsLength -1
+ upperIndex = 0
+ } else if (i === coordsLength - 1) {// i = N-1
+ lowerIndex = coordsLength - 1
+ middleIndex = 0
+ upperIndex = 1
+ } else { // i = 0 to N-3
+ lowerIndex = i
+ middleIndex = i+1
+ upperIndex = i+2
+ }
+ p1 = coords[lowerIndex]
+ p2 = coords[middleIndex]
+ p3 = coords[upperIndex]
+ area += ( rad(p3.lng) - rad(p1.lng) ) * Math.sin( rad(p2.lat))
+ }
+
+ area = area * RADIUS * RADIUS / 2
+ }
+
+ return Math.abs(area)
+ }
+ /**
+ * Handles the init hook for polylines and circles.
+ * Implements the showOnHover functionality if called for.
+ */
+ var addInitHook = function() {
+ var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover
+ if (this.options.showMeasurements && !showOnHover) {
+ this.showMeasurements()
+ }
+ if (this.options.showMeasurements && showOnHover) {
+ this.on('mouseover', function() {
+ this.showMeasurements()
+ })
+ this.on('mouseout', function() {
+ this.hideMeasurements()
+ })
+ }
+ }
+
+ var circleArea = function circleArea(d) {
+ var rho = d / RADIUS
+ return 2 * Math.PI * RADIUS * RADIUS * (1 - Math.cos(rho))
+ }
+
+ var override = function(method, fn, hookAfter) {
+ if (!hookAfter) {
+ return function() {
+ var originalReturnValue = method.apply(this, arguments)
+ var args = Array.prototype.slice.call(arguments)
+ args.push(originalReturnValue)
+ return fn.apply(this, args)
+ }
+ } else {
+ return function() {
+ fn.apply(this, arguments)
+ return method.apply(this, arguments)
+ }
+ }
+ }
+
+ L.Polyline.include({
+ showMeasurements: function(options) {
+ if (!this._map || this._measurementLayer) return this
+
+ this._measurementOptions = L.extend({
+ showOnHover: (options && options.showOnHover) || false,
+ minPixelDistance: 30,
+ showDistances: true,
+ showArea: true,
+ showTotalDistance: true,
+ lang: {
+ totalLength: 'Total length',
+ totalArea: 'Total area',
+ segmentLength: 'Segment length'
+ }
+ }, options || {})
+
+ this._measurementLayer = L.layerGroup().addTo(this._map)
+ this.updateMeasurements()
+
+ this._map.on('zoomend', this.updateMeasurements, this)
+
+ return this
+ },
+
+ hideMeasurements: function() {
+ if (!this._map) return this
+
+ this._map.off('zoomend', this.updateMeasurements, this)
+
+ if (!this._measurementLayer) return this
+ this._map.removeLayer(this._measurementLayer)
+ this._measurementLayer = null
+
+ return this
+ },
+
+ onAdd: override(L.Polyline.prototype.onAdd, function(originalReturnValue) {
+ var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover
+ if (this.options.showMeasurements && !showOnHover) {
+ this.showMeasurements(this.options.measurementOptions)
+ }
+
+ return originalReturnValue
+ }),
+
+ onRemove: override(L.Polyline.prototype.onRemove, function(originalReturnValue) {
+ this.hideMeasurements()
+
+ return originalReturnValue
+ }, true),
+
+ setLatLngs: override(L.Polyline.prototype.setLatLngs, function(originalReturnValue) {
+ this.updateMeasurements()
+
+ return originalReturnValue
+ }),
+
+ spliceLatLngs: override(L.Polyline.prototype.spliceLatLngs, function(originalReturnValue) {
+ this.updateMeasurements()
+
+ return originalReturnValue
+ }),
+
+ formatDistance: formatDistance,
+ formatArea: formatArea,
+
+ updateMeasurements: function() {
+ if (!this._measurementLayer) return this
+
+ var latLngs = this.getLatLngs(),
+ isPolygon = this instanceof L.Polygon,
+ options = this._measurementOptions,
+ totalDist = 0,
+ formatter,
+ ll1,
+ ll2,
+ p1,
+ p2,
+ pixelDist,
+ dist
+
+ if (latLngs && latLngs.length && L.Util.isArray(latLngs[0])) {
+ // Outer ring is stored as an array in the first element,
+ // use that instead.
+ latLngs = latLngs[0]
+ }
+
+ this._measurementLayer.clearLayers()
+
+ if (this._measurementOptions.showDistances && latLngs.length > 1) {
+ formatter = this._measurementOptions.formatDistance || L.bind(this.formatDistance, this)
+
+ for (var i = 1, len = latLngs.length; (isPolygon && i <= len) || i < len; i++) {
+ ll1 = latLngs[i - 1]
+ ll2 = latLngs[i % len]
+ dist = ll1.distanceTo(ll2)
+ totalDist += dist
+
+ p1 = this._map.latLngToLayerPoint(ll1)
+ p2 = this._map.latLngToLayerPoint(ll2)
+
+ pixelDist = p1.distanceTo(p2)
+
+ if (pixelDist >= options.minPixelDistance) {
+ L.marker.measurement(
+ this._map.layerPointToLatLng([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]),
+ formatter(dist), options.lang.segmentLength, this._getRotation(ll1, ll2), options)
+ .addTo(this._measurementLayer)
+ }
+ }
+
+ // Show total length for polylines
+ if (!isPolygon && this._measurementOptions.showTotalDistance) {
+ L.marker.measurement(ll2, formatter(totalDist), options.lang.totalLength, 0, options)
+ .addTo(this._measurementLayer)
+ }
+ }
+
+ if (isPolygon && options.showArea && latLngs.length > 2) {
+ formatter = options.formatArea || L.bind(this.formatArea, this)
+ var area = ringArea(latLngs)
+ L.marker.measurement(this.getBounds().getCenter(),
+ formatter(area), options.lang.totalArea, 0, options)
+ .addTo(this._measurementLayer)
+ }
+
+ return this
+ },
+
+ _getRotation: function(ll1, ll2) {
+ var p1 = this._map.project(ll1),
+ p2 = this._map.project(ll2)
+
+ return Math.atan((p2.y - p1.y) / (p2.x - p1.x))
+ }
+ })
+
+ L.Polyline.addInitHook(function() {
+ addInitHook.call(this)
+ })
+
+ L.Circle.include({
+ showMeasurements: function(options) {
+ if (!this._map || this._measurementLayer) return this
+
+ this._measurementOptions = L.extend({
+ showOnHover: false,
+ showArea: true,
+ lang: {
+ totalArea: 'Total area',
+ }
+ }, options || {})
+
+ this._measurementLayer = L.layerGroup().addTo(this._map)
+ this.updateMeasurements()
+
+ this._map.on('zoomend', this.updateMeasurements, this)
+
+ return this
+ },
+
+ hideMeasurements: function() {
+ if (!this._map) return this
+
+ this._map.on('zoomend', this.updateMeasurements, this)
+
+ if (!this._measurementLayer) return this
+ this._map.removeLayer(this._measurementLayer)
+ this._measurementLayer = null
+
+ return this
+ },
+
+ onAdd: override(L.Circle.prototype.onAdd, function(originalReturnValue) {
+ var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover
+ if (this.options.showMeasurements && !showOnHover) {
+ this.showMeasurements(this.options.measurementOptions)
+ }
+
+ return originalReturnValue
+ }),
+
+ onRemove: override(L.Circle.prototype.onRemove, function(originalReturnValue) {
+ this.hideMeasurements()
+
+ return originalReturnValue
+ }, true),
+
+ setLatLng: override(L.Circle.prototype.setLatLng, function(originalReturnValue) {
+ this.updateMeasurements()
+
+ return originalReturnValue
+ }),
+
+ setRadius: override(L.Circle.prototype.setRadius, function(originalReturnValue) {
+ this.updateMeasurements()
+
+ return originalReturnValue
+ }),
+
+ formatArea: formatArea,
+
+ updateMeasurements: function() {
+ if (!this._measurementLayer) return
+
+ var latLng = this.getLatLng(),
+ options = this._measurementOptions,
+ formatter = options.formatArea || L.bind(this.formatArea, this)
+
+ this._measurementLayer.clearLayers()
+
+ if (options.showArea) {
+ formatter = options.formatArea || L.bind(this.formatArea, this)
+ var area = circleArea(this.getRadius())
+ L.marker.measurement(latLng,
+ formatter(area), options.lang.totalArea, 0, options)
+ .addTo(this._measurementLayer)
+ }
+ }
+ })
+
+ L.Circle.addInitHook(function() {
+ addInitHook.call(this)
+ })
+ })()
+}
+export default {
+ init
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 1d1c6ac..e9343a2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,7 +20,7 @@
Vue.use(ElementUI)
Vue.prototype.$cancels = []
Vue.prototype.L = L
-// 娉ㄥ唽鎸囦护
+// 娉ㄥ唽鎸囦护7
// registerDirectives(Vue)
// 娉ㄥ唽echarts鐨偆
--
Gitblit v1.8.0