From 3481edda6666c21253dbf180263b4c91676252d7 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期三, 19 二月 2025 13:45:26 +0800
Subject: [PATCH] ll
---
admin/src/views/operation/site.vue | 50 +++++++---------
admin/src/views/operation/components/Map.vue | 127 ++++++++++++++++++++++++++++++-----------
2 files changed, 113 insertions(+), 64 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
diff --git a/admin/src/views/operation/site.vue b/admin/src/views/operation/site.vue
index 5a67726..fca27a8 100644
--- a/admin/src/views/operation/site.vue
+++ b/admin/src/views/operation/site.vue
@@ -17,43 +17,34 @@
<!-- 琛ㄦ牸鍜屽垎椤� -->
<template v-slot:table-wrap>
<ul class="toolbar" v-permissions="['business:sites:create']">
- <li><el-button type="primary" @click="$refs.operaSitesWindow.open('鏂板缓绔欑偣')" icon="el-icon-plus" v-permissions="['business:sites:create']">鏂板缓</el-button></li>
+ <li><el-button type="primary" @click="$refs.operaSitesWindow.open('鏂板缓绔欑偣')" icon="el-icon-plus"
+ v-permissions="['business:sites:create']">鏂板缓</el-button></li>
</ul>
- <el-table
- v-loading="isWorking.search"
- :data="tableData.list"
- stripe
- border
- >
- <el-table-column prop="code" label="绔欑偣缂栧彿" :sort-method="(a,b)=>{ return a.code-b.code}" sortable min-width="100px" align="center"></el-table-column>
+ <el-table v-loading="isWorking.search" :data="tableData.list" stripe border>
+ <el-table-column prop="code" label="绔欑偣缂栧彿" :sort-method="(a, b) => { return a.code - b.code }" sortable
+ min-width="100px" align="center"></el-table-column>
<el-table-column prop="name" label="绔欑偣鍚嶇О" sortable min-width="100px" align="center"></el-table-column>
-
- <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" sortable min-width="100px" align="center"></el-table-column>
- <el-table-column
- v-if="containPermissions(['business:sites:update', 'business:sites:delete'])"
- label="鎿嶄綔"
- min-width="120"
- align="center"
- fixed="right"
- >
+
+ <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" sortable min-width="100px" align="center"></el-table-column>
+ <el-table-column v-if="containPermissions(['business:sites:update', 'business:sites:delete'])" label="鎿嶄綔"
+ min-width="120" align="center" fixed="right">
<template slot-scope="{row}">
<el-button type="text" @click="handleDraw(row)">缁樺埗鍦板浘鍖哄煙</el-button>
- <el-button type="text" @click="$refs.operaSitesWindow.open('缂栬緫绔欑偣', row)" icon="el-icon-edit" v-permissions="['business:sites:update']">缂栬緫</el-button>
- <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:sites:delete']">鍒犻櫎</el-button>
+ <el-button type="text" @click="$refs.operaSitesWindow.open('缂栬緫绔欑偣', row)" icon="el-icon-edit"
+ v-permissions="['business:sites:update']">缂栬緫</el-button>
+ <el-button type="text" @click="deleteById(row)" icon="el-icon-delete"
+ v-permissions="['business:sites:delete']">鍒犻櫎</el-button>
</template>
</el-table-column>
</el-table>
- <pagination
- @size-change="handleSizeChange"
- @current-change="handlePageChange"
- :pagination="tableData.pagination"
- >
+ <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination">
</pagination>
</template>
<!-- 鏂板缓/淇敼 -->
<OperaSitesWindow ref="operaSitesWindow" @success="handlePageChange" />
<!-- 鏌ョ湅浜岀淮鐮� -->
- <AMap v-if="isShowMap" ref="MapRef" />
+ <AMap ref="MapRef" />
+ <div id="aaa"></div>
</TableLayout>
</template>
@@ -67,7 +58,7 @@
name: 'Sites',
extends: BaseTable,
components: { TableLayout, Pagination, OperaSitesWindow, AMap },
- data () {
+ data() {
return {
// 鎼滅储
searchForm: {
@@ -88,7 +79,7 @@
isShowMap: false
}
},
- created () {
+ created() {
this.config({
module: '绔欑偣淇℃伅琛�',
api: '/business/sites',
@@ -99,9 +90,10 @@
},
methods: {
handleDraw() {
- this.isShowMap = true
+ this.$refs.MapRef.isShowModal = true
this.$nextTick(() => {
- this.$refs.MapRef.isShowModal = true
+ // this.$refs.MapRef.isShowModal = true
+ this.$refs.MapRef.initMap()
})
}
}
--
Gitblit v1.9.3