From a836f03a5d1fbfa81e147d09ffdfa87ba3975c13 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期二, 18 三月 2025 16:45:02 +0800
Subject: [PATCH] 1
---
admin/src/views/business/components/Map.vue | 144 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 144 insertions(+), 0 deletions(-)
diff --git a/admin/src/views/business/components/Map.vue b/admin/src/views/business/components/Map.vue
new file mode 100644
index 0000000..101232f
--- /dev/null
+++ b/admin/src/views/business/components/Map.vue
@@ -0,0 +1,144 @@
+<template>
+ <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="reset">{{ polygons.length > 0 ? '閲嶆柊缁樺埗' : '寮�濮嬬粯鍒�' }}</el-button>
+ <!-- <el-button plain type="primary" @click="changeMode">缁撴潫缁樺埗</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'
+import { Message } from 'element-ui'
+var map // 鍦板浘
+// var editor // 缂栬緫鍣�
+export default {
+ components: {
+ GlobalWindow
+ },
+ data() {
+ return {
+ isShowModal: false,
+ isWorking: false,
+
+ map: null,
+ editor: null,
+ polygon: null,
+ polygons: [], // 瀛樺偍鎵�鏈夌粯鍒剁殑澶氳竟褰�
+ selectedPolygon: null,
+ }
+ },
+ methods: {
+ initMap() {
+ map = new TMap.Map("container", {
+ zoom: 16, // 璁剧疆鍦板浘缂╂斁绾у埆
+ center: new TMap.LatLng(31.722763, 117.385480) // 璁剧疆鍦板浘涓績鐐瑰潗鏍�
+ })
+ var tempList = []
+ if (this.polygons.length > 0) {
+ tempList = [{ paths: this.polygons.map(item => new TMap.LatLng(item.lat, item.lng)) }]
+ }
+ this.polygon = new TMap.MultiPolygon({
+ map: map,
+ id: 'polygon',
+ selectedStyleId: 'highlight',
+ styles: {
+ highlight: new TMap.PolygonStyle({
+ color: 'rgba(255, 255, 0, 0.6)'
+ })
+ },
+ geometries: tempList
+ })
+ this.editor = new TMap.tools.GeometryEditor({
+ map,
+ overlayList: [{
+ overlay: this.polygon,
+ id: 'polygon',
+ }],
+ actionMode: tempList.length > 0 ? TMap.tools.constants.EDITOR_ACTION.INTERACT : TMap.tools.constants.EDITOR_ACTION.DRAW, // 缂栬緫鍣ㄧ殑宸ヤ綔妯″紡
+ activeOverlayId: 'polygon', // 婵�娲诲浘灞�
+ snappable: true, // 寮�鍚惛闄�
+ selectable: true,
+ })
+
+ 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
+ })
+ this.polygons = geo[0].paths
+ // console.log('缁樺埗鐨勫杈瑰舰鍧愭爣锛�', geo[0].paths)
+ }
+ this.changeMode()
+ })
+ },
+ handleAgain() {
+ this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW)
+ },
+ reset() {
+ // this.editor.enable()
+ this.polygons = []
+ 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() {
+ this.reset()
+ map.destroy()
+ this.isShowModal = false
+ },
+ confirm() {
+ const list = this.editor.getOverlayList()[0].overlay.geometries
+ if (list.length == 0) return Message.warning('璇峰厛缁樺埗杩愯惀鍖哄煙')
+ this.isShowModal = false
+ this.reset()
+ this.$emit('change', list[0].paths)
+
+
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.map_title {
+ font-size: 14px;
+ font-weight: 500;
+ margin-bottom: 6px;
+}
+
+.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