实时

hd-glasses-app/src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import utils from './utils/publicFun';
 import router from './router'
 
 import axios from 'axios'
@@ -16,6 +16,8 @@ import 'amfe-flexible';
 
 Vue.config.productionTip = false
 
+Vue.prototype.$utils = utils;
+
 new Vue({
   render: h => h(App),
   router //添加路由对象

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>

hd-glasses-app/src/router/index.js

@@ -6,21 +6,24 @@ import MyHello from '../components/MyHello.vue'
 Vue.use(Router);
 
 //配置路由
-const router =  new Router({
+const router = new Router({
     routes: [
         {
-            path:"/hello",
-            component:MyHello
+            path: "/hello",
+            component: MyHello
         },
-        //路由懒加载(按需加载)
         {
             path: '/map',
             name: 'map',
-            component: () => import('../pages/map.vue')
-        },{
+            component: () => import('../pages/map.vue') //路由懒加载(按需加载)
+        }, {
             path: '/call_room',
             name: 'call_room',
             component: () => import('../pages/call_room.vue')
+        }, {
+            path: '/hd_map',
+            name: 'hd_map',
+            component: () => import('../pages/hd_map.vue')
         }
     ]
 });

hd-glasses-app/src/utils/publicFun.js

@@ -0,0 +1,23 @@
+/**
+ * getUrlKey 截取地址栏参数
+ * @param value
+ * @returns {String}
+ */
+const getUrlParam = (name) => {
+    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
+    let url = window.location.href.split('#')[0];
+    let search = url.split('?')[1];
+    console.log(search);
+    if (search) {
+        var r = search.substr(0).match(reg);
+        if (r !== null) {
+            return unescape(r[2]);
+        }
+        return null;
+    } else return null;
+
+}
+
+export default {
+    getUrlParam,
+};

hd-glasses-app/src/utils/service.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 let service = axios.create({
-    baseURL:"",//相同绝对路径
+    baseURL:process.env.VUE_APP_API,//相同绝对路径
     timeout: 100000,//超过这么多时间，则请求终止
     headers: {//请求头携带数据的格式
         "Content-Type": "application/json;charset=UTF-8",
@@ -12,10 +12,11 @@ let service = axios.create({
 service.interceptors.request.use(function (config) {
     // 发送请求之前做写什么
     let token =  localStorage.getItem("token");
+    token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTc1NDg5NjUsInVzZXJuYW1lIjoiem56cTEifQ.-qgy6DGCWvMTJYE8rDPvABa7S-heeh_rb9Pf4WTxEe0"
     // 如果有
     if(token){
         // 放在请求头（token跟后端沟通，他需要什么该成什么就可以了）
-        config.headers.authorization = token;
+        config.headers["X-Access-Token"] = token;
     }
     return config;
 }, function (error) {