From bbe33e5fd87e5961fdab804bfb0b4cf354e0c5b2 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 24 十一月 2021 10:00:17 +0800
Subject: [PATCH] 地图接口
---
src/pages/internetEquipment/module/mapIndex.vue | 125 ++++++++++++++++++++++++++++++++++-------
1 files changed, 102 insertions(+), 23 deletions(-)
diff --git a/src/pages/internetEquipment/module/mapIndex.vue b/src/pages/internetEquipment/module/mapIndex.vue
index 5716128..a4a648d 100644
--- a/src/pages/internetEquipment/module/mapIndex.vue
+++ b/src/pages/internetEquipment/module/mapIndex.vue
@@ -13,6 +13,8 @@
</template>
<script>
+import { getHelemtData, getZones, createZones } from "@/api/helemt";
+
import "ol/ol.css";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
@@ -41,6 +43,9 @@
let myModify = {};
export default {
+ created() {
+ this.getNodeData();
+ },
data() {
return {
showBtn: false,
@@ -59,17 +64,7 @@
rangeArr: [],
zoom: 15,
center: [116.06667, 39.66667],
- polygonArr: [
- {
- data: [
- [12919660.904416857, 4817401.4907109635],
- [12921041.54824026, 4817277.28054],
- [12920195.963614853, 4816775.662541878],
- [12919493.698417485, 4816785.2171704145],
- ],
- id: "1",
- },
- ],
+ polygonArr: [],
polyFeature: [],
drawStore: [],
modifyStore: [],
@@ -79,8 +74,38 @@
this.initMap();
},
methods: {
- initMap() {
- this.initPolygonArr();
+ async getNodeData() {},
+ async initMap() {
+ // 鑾峰彇鑺傜偣
+ const res = await getHelemtData();
+ this.nodeArr = [];
+ res.data.items.forEach((item) => {
+ this.nodeArr.push({
+ data: [item.lng, item.lat],
+ id: item.device_sn,
+ color: item.is_out_bound == 0 ? "缁�" : "绾�",
+ });
+ });
+
+ // 鑾峰彇鍖哄煙
+ const res2 = await getZones();
+ if (res2.data && res2.data.items && res2.data.items.length > 0) {
+ this.polygonArr = res2.data.items.map((obj) => {
+ obj.data = obj.dots.map((item) => {
+ return transform([item[0], item[1]], "EPSG:4326", "EPSG:3857");
+ });
+ return obj;
+ });
+ }
+ console.log(this.polygonArr);
+
+ // 璁剧疆鍦板浘涓績
+ this.center = this.nodeArr[0].data;
+
+ if (this.polygonArr.length > 0) {
+ this.initPolygonArr();
+ }
+
const vectorSource = new VectorSource({
features: this.polyFeature,
});
@@ -176,9 +201,7 @@
location() {
const view = myMap.getView();
view.setZoom(this.zoom);
- view.setCenter(
- transform([116.06667, 39.66667], "EPSG:4326", "EPSG:3857")
- );
+ view.setCenter(transform(this.center, "EPSG:4326", "EPSG:3857"));
},
drawPolygon() {
this.showBtn = true;
@@ -188,10 +211,26 @@
});
myDraw = draw;
draw.on("drawend", (event) => {
- let id =
- this.drawStore.length > 0
- ? +this.drawStore[this.drawStore.length - 1].id + 1
- : +this.polygonArr[this.polygonArr.length - 1].id + 1;
+ let id;
+
+ /* if (this.polygonArr.length > 0) {
+ id =
+ this.drawStore.length > 0
+ ? +this.drawStore[this.drawStore.length - 1].id + 1
+ : +this.polygonArr[this.polygonArr.length - 1].id + 1;
+ } else {
+ id = 1;
+ } */
+
+ if (this.drawStore.length > 0) {
+ id = +this.drawStore[this.drawStore.length - 1].id + 1;
+ } else {
+ id =
+ this.polygonArr.length > 0
+ ? +this.polygonArr[this.polygonArr.length - 1].id + 1
+ : "1";
+ }
+
event.feature.id = id;
this.drawStore.push({
id,
@@ -232,7 +271,7 @@
this.drawStore = [];
this.modifyStore = [];
},
- savePoly() {
+ async savePoly() {
myMap.removeInteraction(myDraw);
myMap.removeInteraction(myModify);
this.showBtn = false;
@@ -250,12 +289,52 @@
});
this.modifyStore = [];
}
+ const arrData = this.polygonArr.map((item) => {
+ let name = item.name ? item.name : "";
+ console.log(item);
+ let data = item.data.map((arr) => {
+ arr = transform([arr[0], arr[1]], "EPSG:3857", "EPSG:4326");
+ return arr.join(",");
+ });
+ data = data.join("&");
+ return {
+ name,
+ dots: data,
+ id: item.id,
+ };
+ });
+ const res = await createZones({ dots_arr: arrData });
+ console.log(res);
},
},
watch: {
nodeId: {
- handler(val) {
- const arr = this.nodeArr.filter((item) => item.id == val);
+ async handler(val) {
+ if (!val) {
+ if (this.rangeArr.length > 0) {
+ this.rangeArr.forEach((item) => {
+ myVectorSource.removeFeature(item);
+ });
+ this.rangeArr = [];
+ }
+
+ return;
+ }
+
+ const res = await getHelemtData({ sn: val });
+ const arr = [];
+ if (res.data.items && res.data.items.length > 0) {
+ res.data.items.forEach((obj) => {
+ this.nodeArr.forEach((item) => {
+ if ((item.id = obj.device_sn)) {
+ arr.push(item);
+ }
+ });
+ });
+ }
+
+ console.log(this.rangeArr);
+
if (this.rangeArr.length > 0) {
this.rangeArr.forEach((item) => {
myVectorSource.removeFeature(item);
--
Gitblit v1.8.0