From a6ed23b018343a68f9fd276647cc4af817398d1b Mon Sep 17 00:00:00 2001
From: qingyiay <2386314947@qq.com>
Date: 星期四, 01 二月 2024 15:21:26 +0800
Subject: [PATCH] feat:修改部分问题
---
src/views/your/map/areaMap.vue | 540 +++++++++++++++++++++++++++++------------------------------
1 files changed, 265 insertions(+), 275 deletions(-)
diff --git a/src/views/your/map/areaMap.vue b/src/views/your/map/areaMap.vue
index fc1dad1..47f610f 100644
--- a/src/views/your/map/areaMap.vue
+++ b/src/views/your/map/areaMap.vue
@@ -1,291 +1,281 @@
<template>
- <div>
+ <div>
<div style="float: left;width: 15%;overflow:auto">
- <Table
- border
- :columns="columns"
- :data="data"
- ref="table"
- height="600"
- highlight-row
- @on-current-change="handleRowChange"
- ></Table>
+ <Table
+ border
+ :columns="columns"
+ :data="data"
+ ref="table"
+ height="600"
+ highlight-row
+ @on-current-change="handleRowChange"
+ ></Table>
</div>
<div style="float: right;width: 85%;">
- <!--<div id="container"></div>-->
- <!--<ul class="drawing-panel" style="z-index: 99;">-->
- <!--<li class = "btn" @click="openEdit">寮�鍚紪杈�</li>-->
- <!--<li class = "btn" @click="closeEdit">淇濆瓨缂栬緫</li>-->
- <!--</ul>-->
+ <!--<div id="container"></div>-->
+ <!--<ul class="drawing-panel" style="z-index: 99;">-->
+ <!--<li class = "btn" @click="openEdit">寮�鍚紪杈�</li>-->
+ <!--<li class = "btn" @click="closeEdit">淇濆瓨缂栬緫</li>-->
+ <!--</ul>-->
- <ul class = "drawing-panel">
- <li class="bmap-btn bmap-polygon" id="polygon" @click="draw"></li>
- <!--<li class = "btn" @click="clearAll">娓呴櫎閲嶇敾</li>-->
- </ul>
- <div id = "container"></div>
+ <ul class="drawing-panel">
+ <li class="bmap-btn bmap-polygon" id="polygon" @click="draw"></li>
+<!-- <li class="btn" @click="clearAll">娓呴櫎閲嶇敾</li>-->
+ </ul>
+ <div id="container"></div>
</div>
- </div>
+ </div>
</template>
<script>
- import {
- getAllArea,
- addAreaMap,
- getAllByAreaId,
- delAreaMap,
- } from "@/api/open";
- export default {
- name: "",
- data() {
- return {
- polygon: {},
- columns: [
- {
- title: "鐗囧尯鍚嶇О",
- key: "name",
- },
- ],
- data:[],
- map:{},
- areaId:"",
- drawingManager:{},
- overlays:[]
- }
+import {
+ getAllArea,
+ addAreaMap,
+ getAllByAreaId,
+ delAreaMap,
+} from "@/api/open";
+
+export default {
+ name: "",
+ data() {
+ return {
+ polygon: {},
+ columns: [
+ {
+ title: "鐗囧尯鍚嶇О",
+ key: "name",
},
- mounted() {
- this.getDataList();
-
- this.map = new BMapGL.Map('container',{enableMapClick:false});
- var point = new BMapGL.Point(118.187167,39.636514);
- this.map.centerAndZoom(point, 12);
- this.map.enableScrollWheelZoom(true);
-
-
-
-
-
-
-
- // this.polygon = new BMapGL.Polygon([
- // new BMapGL.Point(118.127822,39.697015),
- // new BMapGL.Point(118.253728,39.697459),
- // new BMapGL.Point(118.256028,39.601458),
- // new BMapGL.Point(118.109424,39.59612),
- // new BMapGL.Point(118.100801,39.650809),
- // ], {
- // strokeColor: 'blue',
- // strokeWeight: 2,
- // strokeOpacity: 0.5
- // });
- // this.map.addOverlay(this.polygon);
- },
- methods:{
- clearAll() {
- for(var i = 0; i < this.overlays.length; i++){
- this.map.removeOverlay(this.overlays[i]);
- }
- this.overlays.length = 0
- },
- draw(e) {
- this.clearAll();
-
- var styleOptions = {
- strokeColor: '#5E87DB', // 杈圭嚎棰滆壊
- fillColor: '#5E87DB', // 濉厖棰滆壊銆傚綋鍙傛暟涓虹┖鏃讹紝鍦嗗舰娌℃湁濉厖棰滆壊
- strokeWeight: 2, // 杈圭嚎瀹藉害锛屼互鍍忕礌涓哄崟浣�
- strokeOpacity: 1, // 杈圭嚎閫忔槑搴︼紝鍙栧�艰寖鍥�0-1
- fillOpacity: 0.2 // 濉厖閫忔槑搴︼紝鍙栧�艰寖鍥�0-1
- };
-
- // 瀹炰緥鍖栭紶鏍囩粯鍒跺伐鍏�
- this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
- // isOpen: true, // 鏄惁寮�鍚粯鍒舵ā寮�
- enableCalculate: false, // 缁樺埗鏄惁杩涜娴嬭窛娴嬮潰
- enableSorption: true, // 鏄惁寮�鍚竟鐣屽惛闄勫姛鑳�
- sorptiondistance: 20, // 杈圭晫鍚搁檮璺濈
- polygonOptions: styleOptions, // 澶氳竟褰㈢殑鏍峰紡
- });
-
- console.log(e)
- var arr = document.getElementsByClassName('bmap-btn');
- for(var i = 0; i<arr.length; i++) {
- arr[i].style.backgroundPositionY = '0';
- }
- //e.style.backgroundPositionY = '-52px';
- var drawingType = BMAP_DRAWING_POLYGON;
- // 杩涜缁樺埗
- if (this.drawingManager._isOpen && this.drawingManager.getDrawingMode() === drawingType) {
- this.drawingManager.close();
- } else {
- this.drawingManager.setDrawingMode(drawingType);
- this.drawingManager.open();
- }
-
- this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete);
- },
- overlaycomplete(e){
- this.overlays.push(e.overlay);
- var path = e.overlay.getPath();
- delAreaMap({id:this.areaId}).then((res) => {
- if(res.success){
- for(var i=0;i<path.length;i++){
- addAreaMap({areaId:this.areaId,lng:path[i].lng,lat:path[i].lat,seq:i}).then((res) => {
- this.findMap();
- });
- //this.sleep(150)
- }
- // addAreaMap({areaId:this.areaId,lng:path[0].lng,lat:path[0].lat}).then((res) => {
- //
- // });
- }
- });
- },
- sleep(delay) {
- var start = (new Date()).getTime();
- while((new Date()).getTime() - start < delay) {
- continue;
- }
- },
- openEdit() {
- this.polygon.enableEditing();
- },
- closeEdit() {
- this.polygon.disableEditing();
- var obj = this.polygon.points;
- console.log(this.polygon)
-
- delAreaMap({id:this.areaId}).then((res) => {
- if(res.success){
- for(var i=0;i<obj.length;i++){
- addAreaMap({areaId:this.areaId,lng:this.getLng(obj[i].lng,obj[i].lat),lat:this.getLat(obj[i].lng,obj[i].lat)}).then((res) => {
- this.findMap();
- });
- }
- }
- });
-
- },
- getDataList() {
- getAllArea({}).then((res) => {
- if (res.success) {
- this.data = res.result;
- }
- });
- },
- handleRowChange(currentRow, oldCurrentRow){
- this.areaId = currentRow.id
- this.findMap();
- },
- findMap(){
- getAllByAreaId({id:this.areaId}).then((res) => {
- if (res.success) {
- this.map.clearOverlays();
- if(res.result.length>2){
- var ps = []
- for(var i=0;i<res.result.length;i++){
- ps.push(new BMapGL.Point(res.result[i].lng,res.result[i].lat))
- }
- this.polygon = new BMapGL.Polygon(ps, {
- strokeColor: 'blue',
- strokeWeight: 2,
- strokeOpacity: 0.5
- });
- this.map.addOverlay(this.polygon);
- }else{
- // this.polygon = new BMapGL.Polygon([
- // new BMapGL.Point(118.127822,39.697015),
- // new BMapGL.Point(118.253728,39.697459),
- // new BMapGL.Point(118.256028,39.601458),
- // new BMapGL.Point(118.109424,39.59612),
- // new BMapGL.Point(118.100801,39.650809),
- // ], {
- // strokeColor: 'blue',
- // strokeWeight: 2,
- // strokeOpacity: 0.5
- // });
- // this.map.addOverlay(this.polygon);
- }
- }
- });
- }
- }
+ ],
+ data: [],
+ map: {},
+ areaId: "",
+ drawingManager: {},
+ overlays: []
}
+ },
+ mounted() {
+ this.getDataList();
+
+ this.map = new BMapGL.Map('container', {enableMapClick: false});
+ var point = new BMapGL.Point(118.187167, 39.636514);
+ this.map.centerAndZoom(point, 12);
+ this.map.enableScrollWheelZoom(true);
+ },
+ methods: {
+ clearAll() {
+ for (var i = 0; i < this.overlays.length; i++) {
+ this.map.removeOverlay(this.overlays[i]);
+ }
+ this.overlays.length = 0
+ },
+ draw(e) {
+ this.clearAll();
+
+ var styleOptions = {
+ strokeColor: '#5E87DB', // 杈圭嚎棰滆壊
+ fillColor: '#5E87DB', // 濉厖棰滆壊銆傚綋鍙傛暟涓虹┖鏃讹紝鍦嗗舰娌℃湁濉厖棰滆壊
+ strokeWeight: 2, // 杈圭嚎瀹藉害锛屼互鍍忕礌涓哄崟浣�
+ strokeOpacity: 1, // 杈圭嚎閫忔槑搴︼紝鍙栧�艰寖鍥�0-1
+ fillOpacity: 0.2 // 濉厖閫忔槑搴︼紝鍙栧�艰寖鍥�0-1
+ };
+
+ // 瀹炰緥鍖栭紶鏍囩粯鍒跺伐鍏�
+ this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
+ // isOpen: true, // 鏄惁寮�鍚粯鍒舵ā寮�
+ enableCalculate: false, // 缁樺埗鏄惁杩涜娴嬭窛娴嬮潰
+ enableSorption: true, // 鏄惁寮�鍚竟鐣屽惛闄勫姛鑳�
+ sorptiondistance: 20, // 杈圭晫鍚搁檮璺濈
+ polygonOptions: styleOptions, // 澶氳竟褰㈢殑鏍峰紡
+ });
+
+ console.log(e)
+ var arr = document.getElementsByClassName('bmap-btn');
+ for (var i = 0; i < arr.length; i++) {
+ arr[i].style.backgroundPositionY = '0';
+ }
+ //e.style.backgroundPositionY = '-52px';
+ var drawingType = BMAP_DRAWING_POLYGON;
+ // 杩涜缁樺埗
+ if (this.drawingManager._isOpen && this.drawingManager.getDrawingMode() === drawingType) {
+ this.drawingManager.close();
+ } else {
+ this.drawingManager.setDrawingMode(drawingType);
+ this.drawingManager.open();
+ }
+
+ this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete);
+ },
+ overlaycomplete(e) {
+ this.overlays.push(e.overlay);
+ var path = e.overlay.getPath();
+ delAreaMap({id: this.areaId}).then((res) => {
+ if (res.success) {
+ for (var i = 0; i < path.length; i++) {
+ addAreaMap({areaId: this.areaId, lng: path[i].lng, lat: path[i].lat, seq: i}).then((res) => {
+ this.findMap();
+ });
+ //this.sleep(150)
+ }
+ // addAreaMap({areaId:this.areaId,lng:path[0].lng,lat:path[0].lat}).then((res) => {
+ //
+ // });
+ }
+ });
+ },
+ sleep(delay) {
+ var start = (new Date()).getTime();
+ while ((new Date()).getTime() - start < delay) {
+ continue;
+ }
+ },
+ openEdit() {
+ this.polygon.enableEditing();
+ },
+ closeEdit() {
+ this.polygon.disableEditing();
+ var obj = this.polygon.points;
+ console.log(this.polygon)
+
+ delAreaMap({id: this.areaId}).then((res) => {
+ if (res.success) {
+ for (var i = 0; i < obj.length; i++) {
+ addAreaMap({
+ areaId: this.areaId,
+ lng: this.getLng(obj[i].lng, obj[i].lat),
+ lat: this.getLat(obj[i].lng, obj[i].lat)
+ }).then((res) => {
+ this.findMap();
+ });
+ }
+ }
+ });
+
+ },
+ getDataList() {
+ getAllArea({}).then((res) => {
+ if (res.success) {
+ this.data = res.result;
+ }
+ });
+ },
+ handleRowChange(currentRow, oldCurrentRow) {
+ this.areaId = currentRow.id
+ this.findMap();
+ },
+ findMap() {
+ getAllByAreaId({id: this.areaId}).then((res) => {
+ if (res.success) {
+ this.map.clearOverlays();
+ if (res.result.length > 2) {
+ var ps = []
+ for (var i = 0; i < res.result.length; i++) {
+ ps.push(new BMapGL.Point(res.result[i].lng, res.result[i].lat))
+ }
+ this.polygon = new BMapGL.Polygon(ps, {
+ strokeColor: 'blue',
+ strokeWeight: 2,
+ strokeOpacity: 0.5
+ });
+ this.map.addOverlay(this.polygon);
+ }
+ }
+ });
+ }
+ }
+}
</script>
<style scoped>
- body, html, #container {width: 100%; height: 600px; overflow: hidden; margin: 0; font-family: "寰蒋闆呴粦";}
- ul li {list-style: none;}
- .drawing-panel {
- z-index: 999;
- position: fixed;
- bottom: 3.5rem;
- margin-left: 2.5rem;
- padding-left: 0;
- border-radius: .25rem;
- height: 47px;
- box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
- }
- .bmap-btn {
- border-right: 1px solid #d2d2d2;
- float: left;
- width: 64px;
- height: 100%;
- background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
- cursor: pointer;
- }
- .drawing-panel .bmap-marker {
- background-position: -65px 0;
- }
- .drawing-panel .bmap-polyline {
- background-position: -195px 0;
- }
- .drawing-panel .bmap-rectangle {
- background-position: -325px 0;
- }
- .drawing-panel .bmap-polygon {
- background-position: -260px 0;
- }
- .drawing-panel .bmap-circle {
- background-position: -130px 0;
- }
- /*body,*/
- /*html,*/
- /*#container {*/
- /*overflow: hidden;*/
- /*width: 100%;*/
- /*height: 600px;*/
- /*margin: 0;*/
- /*font-family: "寰蒋闆呴粦";*/
- /*}*/
- /*ul li {*/
- /*list-style: none;*/
- /*}*/
- /*.drawing-panel {*/
- /*z-index: 999;*/
- /*position: fixed;*/
- /*bottom: 3.5rem;*/
- /*margin-left: 3rem;*/
- /*padding: 1rem 1rem;*/
- /*border-radius: .25rem;*/
- /*background-color: #fff;*/
- /*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
- /*}*/
- /*.btn {*/
- /*width: 150px;*/
- /*height: 30px;*/
- /*float: left;*/
- /*background-color: #fff;*/
- /*color: rgba(27, 142, 236, 1);*/
- /*font-size: 14px;*/
- /*border:1px solid rgba(27, 142, 236, 1);*/
- /*border-radius: 5px;*/
- /*margin: 0 5px;*/
- /*text-align: center;*/
- /*line-height: 30px;*/
- /*}*/
- /*.btn:hover {*/
- /*background-color: rgba(27, 142, 236, 0.8);*/
- /*color: #fff;*/
- /*}*/
+body, html, #container {
+ width: 100%;
+ height: 600px;
+ overflow: hidden;
+ margin: 0;
+ font-family: "寰蒋闆呴粦";
+}
+
+ul li {
+ list-style: none;
+}
+
+.drawing-panel {
+ z-index: 999;
+ position: fixed;
+ bottom: 3.5rem;
+ margin-left: 2.5rem;
+ padding-left: 0;
+ border-radius: .25rem;
+ height: 47px;
+ box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
+}
+
+.bmap-btn {
+ border-right: 1px solid #d2d2d2;
+ float: left;
+ width: 64px;
+ height: 100%;
+ background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
+ cursor: pointer;
+}
+
+.drawing-panel .bmap-marker {
+ background-position: -65px 0;
+}
+
+.drawing-panel .bmap-polyline {
+ background-position: -195px 0;
+}
+
+.drawing-panel .bmap-rectangle {
+ background-position: -325px 0;
+}
+
+.drawing-panel .bmap-polygon {
+ background-position: -260px 0;
+}
+
+.drawing-panel .bmap-circle {
+ background-position: -130px 0;
+}
+
+/*body,*/
+/*html,*/
+/*#container {*/
+/*overflow: hidden;*/
+/*width: 100%;*/
+/*height: 600px;*/
+/*margin: 0;*/
+/*font-family: "寰蒋闆呴粦";*/
+/*}*/
+/*ul li {*/
+/*list-style: none;*/
+/*}*/
+/*.drawing-panel {*/
+/*z-index: 999;*/
+/*position: fixed;*/
+/*bottom: 3.5rem;*/
+/*margin-left: 3rem;*/
+/*padding: 1rem 1rem;*/
+/*border-radius: .25rem;*/
+/*background-color: #fff;*/
+/*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
+/*}*/
+/*.btn {*/
+/*width: 150px;*/
+/*height: 30px;*/
+/*float: left;*/
+/*background-color: #fff;*/
+/*color: rgba(27, 142, 236, 1);*/
+/*font-size: 14px;*/
+/*border:1px solid rgba(27, 142, 236, 1);*/
+/*border-radius: 5px;*/
+/*margin: 0 5px;*/
+/*text-align: center;*/
+/*line-height: 30px;*/
+/*}*/
+/*.btn:hover {*/
+/*background-color: rgba(27, 142, 236, 0.8);*/
+/*color: #fff;*/
+/*}*/
</style>
\ No newline at end of file
--
Gitblit v1.9.1