Bjjs-Cloud/ruoyi-ui/src/views/mapIndex/index.vue

<template>
  <div class="map-content">
    <div id="mapChart"></div>
    <div class="map-tools">
      <div :class="{'map-tool-item':mapToolName!='测距','map-tool-itemActive':mapToolName=='测距'}" 
            @click="handleMapTools('测距')">
        <img v-if="mapToolName!='测距'" src="@/assets/yujing/map/measure-deactive.png"/>
        <img v-else src="@/assets/yujing/map/measure-active.png"/>
      </div>
      <div :class="{'map-tool-item':mapToolName!='测面','map-tool-itemActive':mapToolName=='测面'}" 
            @click="handleMapTools('测面')">
        <img v-if="mapToolName!='测面'" src="@/assets/yujing/map/area-deactive.png"/>
        <img v-else src="@/assets/yujing/map/area-active.png"/>
      </div>
    </div>
    <!-- 地图站点信息弹框 -->
    <div ref="popupRefs" class="map-popup" v-show="showPopup">
      <div class="map-popup-top">
        <img src="@/assets/yujing/map/取消.png" @click="closePopup"/>
      </div>
      <div class="map-popup-content">
        <div class="popup-content-left">
          <span>测站名称：</span>
          <span>所在河流：</span>
          <span>最新监测时间：</span>
          <span>溶解氧(mg/L)：</span>
          <span>高锰酸盐指数(mg/L)：</span>
          <span>氨氮(mg/L)：</span>
          <span>总磷(mg/L)：</span>
          <span>锑(μg/L)：</span>
        </div>
        <div class="popup-content-right">
          <span 
            style="color: #4a93f5;cursor: pointer;" 
            @click="handleStnmDialog(mapPopupData,'stnm')"
          >{{ mapPopupData.stnm }}</span>
          <span 
            style="color: #4a93f5;cursor: pointer;"
            @click="handleStnmDialog(mapPopupData,'river')"
          >{{ mapPopupData.river }}</span>
          <span>{{ mapPopupData.tm }}</span>
          <span>{{ mapPopupData.cod }}</span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="popup-trangle"></div>
    </div>
    <StnmDialog :showStnmDialog="stnmDialogVisible" :stnmData="stnmDialogData" @closeDialog="closeStnmDialog"/>
  </div>
</template>

<script setup>
import {ElMessage} from 'element-plus';
import 'ol/css';
import {ScaleLine, defaults as defaultControls} from 'ol/control';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from "ol/layer/Tile";
import { XYZ, Vector as VectorSource } from 'ol/source.js';
import VectorLayer from "ol/layer/Vector";
import { LineString, Point } from "ol/geom";
import { Icon, Style, Text,Circle } from 'ol/style';
import Fill from "ol/style/Fill";
import Feature from 'ol/Feature';
import Stroke from "ol/style/Stroke";
import Overlay from 'ol/Overlay';
import StnmDialog from "./components/StnmDialog.vue";
import imgⅣ from "@/assets/yujing/map/Ⅳ.png";

const mapChart = ref(null);
const mapCenter = ref([120.745, 31.120]);
const mapZoom = ref(10.6);
const mapToolName = ref("");
const mapPointData = [
  {
    stnm: "太浦闸下",
    river: "太浦河干流",
    tm: "2025-08-21 13:51",
    lgtd: 120.745,
    lttd: 31.120,
    cod:10.87,
  },
  {
    stnm: "太浦闸上",
    river: "太浦河干流",
    tm: "2025-09-05 15:48",
    lgtd: 120.545,
    lttd: 31.020,
    cod:8.87,
  },
];
const popupRefs = ref(null);
const showPopup = ref(false);
const mapPopupData = ref({});
const stnmDialogVisible = ref(false);
const stnmDialogData = ref({});

onMounted(() => {
});

const initMap = (mapObj) => { 
  let vecLayer = new TileLayer({
    source: new XYZ({
      url: "http://t0.tianditu.gov.cn/vec_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
    }),
  });
  let cvaLayer = new TileLayer({
    source: new XYZ({
      url: "http://t0.tianditu.gov.cn/cva_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
    }),
  });
  mapChart.value= new Map({
    target: 'mapChart',
    view: new View({
      center: mapObj.center,
      zoom: mapObj.zoom,
      minZoom: 3,
      maxZoom: 16,
      projection: 'EPSG:4326',
    }),
    layers: [vecLayer, cvaLayer],
    controls: defaultControls({
      zoom: false,//不显示放大放小按钮
      rotate: false,//不显示指北针控件
      attribution: false,//不显示右下角的地图信息控件
      scaleLine:false,//不显示比例尺控件
    })
  });
  // 添加地图站点
  let featuresData = [];
  mapPointData.forEach((item) => {
    let iconFeature = new Feature({
      geometry: new Point([item.lgtd,item.lttd]), 
      properties: item,
    });
    iconFeature.setStyle(
      new Style({
        image: new Icon({
          src: imgⅣ,
          anchor: [0.5, 0.5],
          scale: 0.08,
        }),
      })
    );
    featuresData.push(iconFeature);
  })
  var polygonLayer = new VectorLayer({
    source:new VectorSource({
      features: featuresData,
    }),
    zIndex:5,
    visible:true,
  })
  mapChart.value.addLayer(polygonLayer);
  if(mapObj.pageName == '首页'){
    singleclick();
  }
};
// 地图点击事件
const singleclick = () => {
  let elpopup = popupRefs.value;
  let popupOverlay = new Overlay({
    element: elpopup,
    positioning: "bottom-center",
    stopEvent: false,
    offset: [220, 110],
  });
  mapChart.value.on("singleclick", (e) => {
    let feature = mapChart.value.forEachFeatureAtPixel(e.pixel, (feature) => feature);
    if (feature) {
      showPopup.value = true;
      mapPopupData.value = feature.values_.properties;
      let position = [mapPopupData.value.lgtd, mapPopupData.value.lttd];
      popupOverlay.setPosition(position);
    }
  });
  // 设置弹窗位置
  mapChart.value.addOverlay(popupOverlay);
};
// 关闭站点信息弹框
const closePopup = () => { 
  showPopup.value = false;
};
const handleStnmDialog = (data,type) => { 
  stnmDialogData.value = {
    ...data,
    type
  };
  stnmDialogVisible.value = true;
};
const closeStnmDialog = (status) => { 
  stnmDialogVisible.value = status;
};

const mapToolsRefs = ref(null);
const handleMapTools = (name) => {
  mapToolName.value = name;
  if(name == '测距'){
    mapToolsRefs.value.distance(mapChart.value);
  }
}
defineExpose({
  initMap,
});
</script>

<style scoped lang="scss">
.map-content{
  height: 100%;
  width: 100%;
  position: relative;
  #mapChart{
    height: 100%;
    width: 100%;
  }
  .map-tools{
    position: absolute;
    top: 8%;
    left: 1%;
    width: 30px;
    height: 80px;
    display: flex;
    flex-direction: column;
    .map-tool-item{
      width: 100%;
      height: 30px;
      background: rgba(255,255,255,0.9);
      border-radius: 3px;
      margin: 5px 0;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img{
        width: 18px;
        height: 18px;
      }
    }
    .map-tool-itemActive{
      width: 100%;
      height: 30px;
      background: rgba(74, 147, 245,0.9);
      border-radius: 3px;
      margin: 5px 0;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img{
        width: 18px;
        height: 18px;
      }
    }
    .map-tool-item:hover{
      background: rgba(74, 147, 245,0.9);
    }
  }
}
.map-popup {
  width:400px;
  height: 220px;
  background-color: rgba(255, 255, 255,0.9);
  border-radius: 5px;
  position: relative;
  .map-popup-top{
    width: 100%;
    height: 20px;
    background: url("@/assets/images/lefttitle-bg.png");
    background-size: 100% 100%;
    border-radius: 5px 5px 0 0;
    img{
      position: absolute;
      top: 2px;
      right: 2px;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
  .map-popup-content{
    width: 95%;
    height: 82%;
    margin: 2.5%;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    display: flex;
    .popup-content-left{
      display: flex;
      flex-direction: column;
      font-size: 14px;
      font-weight: bolder;
      color: #444444;
      line-height: 22px;
      margin-left: 5PX;
    }
    .popup-content-right{
      display: flex;
      flex-direction: column;
      font-size: 14px;
      color: #444444;
      line-height: 22px;
    }
  }
  .popup-trangle{
    width:0;
    height:0;
    content:'';
    border-right:10px solid rgba(255,255,255,0.9);
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    position:absolute;
    left:-10px;
    bottom:100px;
  }
}
</style>