From 431067312ac266c2189b13ca71e5230d2bfa7da4 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 19 二月 2025 15:09:25 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/2.0.1' into 2.0.1
---
admin/src/views/operation/components/Map.vue | 127 ++++++++++++++++++++++++++++++-----------
1 files changed, 92 insertions(+), 35 deletions(-)
diff --git a/admin/src/views/operation/components/Map.vue b/admin/src/views/operation/components/Map.vue
index 5aa2193..78d395c 100644
--- a/admin/src/views/operation/components/Map.vue
+++ b/admin/src/views/operation/components/Map.vue
@@ -1,13 +1,24 @@
<template>
- <GlobalWindow title="缁樺埗鍦板浘鍋滆溅鍖哄煙" :visible.sync="isShowModal" :confirm-working="isWorking" @confirm="confirm"
- width="1000px">
- <div class="map_title">绔欑偣鍚嶇О 鍋滆溅鍖哄煙缁樺埗</div>
- <div id="mapContainer" style="width: 100%; height: calc( 100% - 40px )"></div>
+ <GlobalWindow title="缁樺埗鍋滆溅鍖哄煙" :visible.sync="isShowModal" :confirm-working="isWorking" @close="close"
+ @confirm="confirm" width="1000px">
+ <div class="map_title">缁樺埗锛氶紶鏍囧乏閿偣鍑诲強绉诲姩鍗冲彲缁樺埗鍥惧舰锛岀粯鍒惰繃绋嬩腑鎸変笅esc閿彲涓柇璇ヨ繃绋�</div>
+ <div class="map_title">榧犳爣宸﹂敭鍙屽嚮鍗冲彲缁撴潫褰撳墠澶氳竟褰㈢粯鍒讹紝澶氳竟褰細鑷姩闂悎锛�</div>
+ <div class="map_wrap">
+ <div class="btns">
+ <el-button plain type="primary" @click="changeMode">缁撴潫缁樺埗</el-button>
+ <el-button plain type="primary" @click="handleAgain">缁х画缁樺埗</el-button>
+ <el-button plain @click="reset">閲嶆柊缁樺埗</el-button>
+ <el-button plain type="danger" @click="deleteObj">鍒犻櫎</el-button>
+ </div>
+ <div id="container" style="width: 100%; height: 100%"></div>
+ </div>
</GlobalWindow>
</template>
<script>
import GlobalWindow from '@/components/common/GlobalWindow'
+var map // 鍦板浘
+// var editor // 缂栬緫鍣�
export default {
components: {
GlobalWindow
@@ -16,58 +27,104 @@
return {
isShowModal: false,
isWorking: false,
+
+ map: null,
+ editor: null,
+ polygon: null,
+ polygons: [], // 瀛樺偍鎵�鏈夌粯鍒剁殑澶氳竟褰�
+ selectedPolygon: null,
}
- },
- mounted() {
- this.$nextTick(() => {
- this.initMap()
- })
},
methods: {
initMap() {
- this.map = new TMap.Map(document.getElementById("mapContainer"), {
- zoom: 14, // 璁剧疆鍦板浘缂╂斁绾у埆
- center: new TMap.LatLng(30.656964, 104.066186), // 璁剧疆鍦板浘涓績鐐瑰潗鏍�
+ map = new TMap.Map("container", {
+ zoom: 15, // 璁剧疆鍦板浘缂╂斁绾у埆
+ center: new TMap.LatLng(31.722763, 117.385480) // 璁剧疆鍦板浘涓績鐐瑰潗鏍�
})
- var polygon = new TMap.MultiPolygon({
- map: this.map,
+ this.polygon = new TMap.MultiPolygon({
+ map: map,
+ id: 'polygon',
+ selectedStyleId: 'highlight',
+ styles: {
+ highlight: new TMap.PolygonStyle({
+ color: 'rgba(255, 255, 0, 0.6)'
+ })
+ },
})
this.editor = new TMap.tools.GeometryEditor({
- // TMap.tools.GeometryEditor 鏂囨。鍦板潃锛歨ttps://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
- map: this.map, // 缂栬緫鍣ㄧ粦瀹氱殑鍦板浘瀵硅薄
- overlayList: [
- // 鍙紪杈戝浘灞� 鏂囨。鍦板潃锛歨ttps://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
- {
- overlay: polygon,
- id: "polygon",
- },
- ],
+ map,
+ overlayList: [{
+ overlay: this.polygon,
+ id: 'polygon',
+ }],
actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 缂栬緫鍣ㄧ殑宸ヤ綔妯″紡
- activeOverlayId: this.activeId, // 婵�娲诲浘灞�
+ activeOverlayId: 'polygon', // 婵�娲诲浘灞�
snappable: true, // 寮�鍚惛闄�
+ selectable: true,
})
- // 鐩戝惉缁樺埗缁撴潫浜嬩欢锛岃幏鍙栫粯鍒跺嚑浣曞浘褰�
- this.editor.on("draw_complete", (geometry) => {
- console.log('鎵�鏈夐《鐐瑰潗鏍囬泦鍚�', geometry)
- // 澶氳竟褰㈠鐞�
- if (this.activeId === "polygon") {
- console.log("寰楀埌椤剁偣缁忕含搴︾殑鏁扮粍", geometry.paths)
+
+ let evtList = ['delete', 'adjust', 'split', 'union']
+ evtList.forEach(evtName => {
+ this.editor.on(evtName + '_complete', evtResult => {
+ // console.log(evtName, evtResult)
+ })
+ })
+ this.editor.on('draw_complete', (geometry) => {
+ var id = geometry.id
+ if (this.editor.getActiveOverlay().id === 'polygon') {
+ var geo = this.polygon.geometries.filter(function (item) {
+ return item.id === id
+ })
+ // console.log('缁樺埗鐨勫杈瑰舰鍧愭爣锛�', geo[0].paths)
}
})
},
- confirm() { }
+ handleAgain() {
+ this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW)
+ },
+ reset() {
+ // this.editor.enable()
+ this.polygon.setGeometries([])
+ this.polygon.remove('polygon')
+ this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW)
+ },
+ changeMode() {
+ this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT)
+ },
+ deleteObj() {
+ this.editor.delete()
+ },
+ close() {
+ editor = null
+ },
+ confirm() {
+ this.changeMode()
+ const list = this.editor.getOverlayList()[0].overlay.geometries
+ console.log('list', list);
+
+ }
}
}
</script>
<style lang="scss" scoped>
.map_title {
- font-size: 16px;
+ font-size: 14px;
font-weight: 500;
- margin-bottom: 10px;
+ margin-bottom: 6px;
}
-#mapContainer {
-
+.map_wrap {
+ width: 100%;
+ height: calc( 100% - 60px );
+ position: relative;
+
+ .btns {
+ position: absolute;
+ left: 50%;
+ top: 10px;
+ transform: translate(-50%, 0);
+ z-index: 99999999999;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3