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

<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>