From 4b9b76e141865b150cd2fdba139f9a80b39dc7e9 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期三, 10 三月 2021 18:25:57 +0800
Subject: [PATCH] 文字标注
---
src/components/panel/ToolBoxPanel.vue | 6 ++-
src/components/panel/bounced/TextBounced.vue | 11 ++++-
src/components/plugin/MakeTation.js | 63 +++++++++++++++++++++++++++++--
src/Sgis.js | 4 +-
4 files changed, 74 insertions(+), 10 deletions(-)
diff --git a/src/Sgis.js b/src/Sgis.js
index 70db008..5b21f5e 100644
--- a/src/Sgis.js
+++ b/src/Sgis.js
@@ -8,7 +8,7 @@
import WmtsSupport from '@components/plugin/wmts_plugins'
import MapConfig from '@/conf/MapConfig'
-import DashFlow from '@components/plugin/PathDashFlow'
+// import DashFlow from '@components/plugin/PathDashFlow'
import CanvasMarkers from '@components/plugin/CanvasMarkers'
import FullScreen from '@components/plugin/FullScreen'
// 涓嬭浇
@@ -29,7 +29,7 @@
MagicMarker.init(L) // 鍔ㄧ敾Marker
WmtsSupport.init(L) // 鎵╁睍锛屼娇鏀寔WMTS
// CustomPopup.init(L) // 鑷畾涔夊脊鍑烘
- DashFlow.DashFlow(L) // 娴佸姩绾垮浘
+ // DashFlow.DashFlow(L) // 娴佸姩绾垮浘
CanvasMarkers.init(L)// 鐢诲竷鍥惧眰
// 鍏ㄥ睆
FullScreen.init(L)
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
index 1e9cba4..7e6489e 100644
--- a/src/components/panel/ToolBoxPanel.vue
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -28,11 +28,14 @@
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 {
@@ -170,8 +173,7 @@
this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
break
case '鐐规爣娉�':
- this.drawLayer = this.map.editTools.startMarker()
- this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
+ MakeTation.StartCircleAnnotation(this.map, this.L)
break
case '鍥炬爣鏍囨敞':
this.drawLayer = this.map.editTools.startIcon()
diff --git a/src/components/panel/bounced/TextBounced.vue b/src/components/panel/bounced/TextBounced.vue
index d3c1f00..d5dde64 100644
--- a/src/components/panel/bounced/TextBounced.vue
+++ b/src/components/panel/bounced/TextBounced.vue
@@ -10,7 +10,7 @@
<li>
<form action="" class="bounced-box-content">
<h6>鍐呭锛�</h6>
- <div><textarea v-model='bouncedText'></textarea></div>
+ <div><textarea v-model='bouncedText' @blur="ChangeText"></textarea></div>
</form>
</li>
<li class="bounced-box-choose">
@@ -24,6 +24,9 @@
</template>
<script>
+
+import MakeTation from '@components/plugin/MakeTation'
+
export default {
name: 'TextBounced',
data () {
@@ -40,6 +43,10 @@
changeLabelTextSelect () {
// this.bouncedSelect = item
console.log('鑾峰彇棰滆壊')
+ },
+ ChangeText () {
+ MakeTation.setContentText(this.bouncedText)
+ console.log(this.bouncedText)
}
}
}
@@ -63,7 +70,7 @@
margin: 0;
li {
- margin: 0.5rem 0;
+ margin: 1rem 0;
}
.bounced-box-title {
diff --git a/src/components/plugin/MakeTation.js b/src/components/plugin/MakeTation.js
index 5bc8ac3..9aedc5e 100644
--- a/src/components/plugin/MakeTation.js
+++ b/src/components/plugin/MakeTation.js
@@ -8,6 +8,8 @@
layers: null,
polyline: null,
marker: null,
+ changeColor: '',
+ changeContent: '',
init: function (map, L) {
// console.log(L)
TextAnnotation.L = L
@@ -18,11 +20,14 @@
TextAnnotation.layers = L.layerGroup()
map.on('click', TextAnnotation.click).on('dblclick', TextAnnotation.dblclick)
},
+ setContent :function (changeContent) {
+ console.log(changeContent)
+ TextAnnotation.changeContent = changeContent
+ },
click: function (e) {
- // console.log(e)
- let contents = 'bouncedText'
+ console.log(TextAnnotation.changeContent)
let labIcon = L.divIcon({
- html: '<div style="color: red;font-size: 18px;">' + contents + '</div>',
+ html: '<div style="color: red;font-size: 18px;">' + TextAnnotation.changeContent + '</div>',
iconSize: [100, 40],
iconAnchor: [0, 0],
className: ''
@@ -46,8 +51,56 @@
}
}
+// 娣诲姞 鐐� 鐨勬爣娉�
+var CircleAnnotation = {
+ points: [],
+ color: 'yellow',
+ L: null,
+ map: null,
+ layers: null,
+ polyline: null,
+ marker: null,
+ init: function (map, L) {
+ // console.log(L)
+ CircleAnnotation.L = L
+ CircleAnnotation.map = map
+ CircleAnnotation.points = []
+ CircleAnnotation.polyline = null
+ CircleAnnotation.marker = null
+ CircleAnnotation.layers = L.layerGroup()
+ map.on('click', CircleAnnotation.click).on('dblclick', CircleAnnotation.dblclick)
+ },
+ click: function (e) {
+ // var myIcon = L.divIcon({className: 'my-div-icon'});
+ let marker = L.marker(e.latlng)
+ marker.addTo(CircleAnnotation.map)
+ },
+ dblclick: function (e) {
+ CircleAnnotation.map.off('click', CircleAnnotation.click).off('dblclick', CircleAnnotation.dblclick)
+ },
+ destory: function () {
+ if (CircleAnnotation.polyline) {
+ CircleAnnotation.map.removeLayer(CircleAnnotation.polyline)
+ }
+ if (CircleAnnotation.marker) {
+ CircleAnnotation.marker.remove()
+ }
+ if (CircleAnnotation.layers) {
+ CircleAnnotation.layers.clearLayers()
+ }
+ }
+}
+
const startMakeText = function (map, L) {
TextAnnotation.init(map, L)
+}
+
+const StartCircleAnnotation = function (map, L) {
+ CircleAnnotation.init(map, L)
+}
+
+const setContentText = function (text) {
+ TextAnnotation.setContent(text)
}
const clearText = function () {
@@ -55,5 +108,7 @@
}
export default {
startMakeText,
- clearText
+ clearText,
+ StartCircleAnnotation,
+ setContentText
}
--
Gitblit v1.8.0