实时

hd-glasses-app/src/pages/hd_map.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="hd_map">
+    <div id="icon" style="display: none"><img style="width: 40px;height: 40px" src="../assets/map/icon_paishuibeng_h_3.png"></div>
+    <div id="map2" ref="roadmap" style="width: 100%;height: 100%">
+    </div>
+    <div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
+      <div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {OL as ol, api, PlottingLayer, FeatureOperatorEvent, PlotTypes} from 'plot-ol/plottingol'
+import { Notify,Dialog } from 'vant';
+import service from "../utils/service"
+
+export default {
+  name: "hd_map",
+  data() {
+    //  const loadMap = new api.LoadMap("http://172.16.2.2:8600/geoserver", "30efbafe-d218-4d77-8200-0207246924be");
+    const loadMap = new api.LoadMap(process.env.VUE_APP_MAP_URL, process.env.VUE_APP_MAP_AUTHKEY);
+    return {
+      map2: null,
+      loadMap: loadMap,
+      selectPoint: [], //选择的点位
+      center: [12497018.585823221, 2476783.2447665134],
+      icon: require("../assets/map.png"),
+      page: null
+    };
+  },
+  mounted() {
+    console.log(process.env.NODE_ENV)
+    console.log(process.env.NODE_ENV)
+    console.log(process.env.NODE_ENV)
+    console.log(process.env.NODE_ENV)
+    console.log(process.env.NODE_ENV)
+    console.log(this.$route.query.page)
+    this.page = this.$route.query.page;
+
+    this.init();
+    switch (this.page) {
+      case "addAlarmPoint":
+        console.log("新增报警点");
+        this.PageAddAlarmPoint()
+        break
+      default:
+        console.log("未匹配到page参数")
+        this.queryAlarmList()
+        this.queryAllEquipment()
+    }
+  },
+  methods: {
+    init() {
+      // console.log(this.$utils.getUrlParam("page"))
+      //限制地图移动范围
+      const extent = [12482643.010892345, 2470943.170650934, 12505548.591601802, 2482396.032222487];
+      //地图中心点
+      let center = "ol.proj.transform([112.26173, 21.70896], 'EPSG:4326', 'EPSG:3857')"
+      center = [12497018.585823221, 2476783.2447665134];
+      // 初始化地图参数
+      const option = {
+        target: 'map2',
+        layers: [
+          {
+            type: 'WMTS',
+            layerName: 'china:yangjianghedian_dt',
+            projection: 'EPSG:3857',
+            version: '1.0.0',
+            format: 'image/png'
+          },
+          {
+            type: 'WMS',
+            layerName: 'china:yangjianghedian'
+          }
+        ],
+        view: {
+          extent: extent,
+          center: center,
+          zoom: 16,
+          minZoom: 14
+        }
+      }
+      this.map2 = this.loadMap.init(option);
+
+      //载入点位
+      const markerOption = {
+        markers: [{coordinates: this.center}],
+        source: 'EPSG:4326', //源坐标系
+        destination: 'EPSG:3857', //目标坐标系
+        style: new ol.style.Style({
+          image: new ol.style.Icon({
+            src: this.icon
+          })
+        }),
+      }
+      this.loadMap.loadMarkerFromData(markerOption);
+
+
+    },
+    queryAllEquipment(){
+      service.get(`/sys/equipment/pageList`,{
+        params:{
+          pageNo:1,
+          pageSize:50
+        }
+      })
+    },
+    queryAlarmList(){
+      service.get(`/api/alarm/list`,{
+        params:{
+          sendStatus:1,
+          pageNo:1,
+          pageSize:50
+        }
+      })
+    },
+    addAlarmPointNextAction() {
+        if(this.selectPoint.length==0){
+           Dialog({ message: '请先选择点位' });
+        }
+        const result = JSON.stringify(this.selectPoint)
+        location.href = "uniwebview://action?function=addAlarmPoint&params1=" + result;
+    },
+    PageAddAlarmPoint() {
+      //获取点击的点位信息
+      const _this = this;
+      const element = document.getElementById('icon');
+      element.style.display="block"
+      const popup = new ol.Overlay({
+        element: element,
+        positioning: 'bottom-center',
+        stopEvent: false,
+      });
+      this.map2.addOverlay(popup);
+      this.map2.on('singleclick', function (evt) {
+        popup.setPosition(evt.coordinate);
+        _this.selectPoint = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
+      })
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.addAlarmPoint {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  z-index: 100;
+
+  .addAlarmPointNext {
+    width: 80%;
+    height: 80px;
+    line-height: 80px;
+    background-color: #369FFF;
+    border-radius: 20px;
+    font-size: 26px;
+    color: white;
+  }
+}
+</style>
+<style>
+@import '~plot-ol/ol.css';
+
+.ol-touch .ol-control button {
+  font-size: 26px;
+}
+
+.hd_map {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+}
+
+#map2 {
+  width: 100vw;
+  height: 100vh;
+}
+
+
+</style>