yjxp-web/src/views/disasterRiskMonitor/radarEchoMap.vue

<template>
  <div class="container">
    <div class="map-box">
      <div class="title-box">雷达拼图{{imgList[activeImg] ? imgList[activeImg].time : ''}}</div>
<!--      <img v-for="(item, index) in imgList" :key="index" :src="item.url" alt="" style="width: 200px;height: 200px;">-->
      <div class="btn1" @click="handleChangeDynamic">
        <el-button type="primary">
          <i class="icon1" />
          {{ openDynamicImage ? '切换为静图' : '切换为动图' }}
        </el-button>
      </div>
      <div ref="mapRef" id="map" />
      <div class="right-bottom-box">
        <div :class="showLegend  ? 'legend-btn btn-active' : 'legend-btn'" @click="handleClickLegend">
          <i class="icon-legend" />
          <div>图例</div>
          <div v-if="showLegend" class="legend-box" @click.stop="">
            <img class="img" src="@/assets/images/disasterRiskMonitor/radarEchoMap/legend3.png" alt="">
          </div>
        </div>
        <div :class="showMapSetting  ? 'map-btn btn-active' : 'map-btn'" @click="handleClickMapSetting">
          <i class="icon-map" />
          <div>地图</div>
          <div v-if="showMapSetting" class="map-setting-box" @click.stop="">
            <div class="function-box">
              <div v-for="(item, index) in mapTypeList" :key="index" class="function-item" @click.stop="changeActiveMap(item.value)">
                <div :class="item.value + ' img'">
                  <i v-if="activeMap === item.value" class="checked" />
                </div>
                <div>{{ item.name }}</div>
              </div>
            </div>
            <div class="function-box">
              <div class="function-item" @click.stop="handleShowLatLngLine">
                <i :class="showLatLngLine ? 'icon-latlng2' : 'icon-latlng1'" />
                <div>经纬度</div>
              </div>
              <div class="function-item" @click.stop="handleShowLatPlaceName">
                <i :class="showLatPlaceName ? 'icon-position2' : 'icon-position1'" />
                <div>显示地名</div>
              </div>
            </div>
          </div>
        </div>
        <div class="operate-box">
          <div class="operate-btn" @click="handleIndex('reduce')">
            <i class="icon-left" />
            上时次
          </div>
          <div class="operate-btn" @click="handleIndex('add')">
            <i class="icon-right" />
            下时次
          </div>
          <div :class="playing  ? 'operate-btn btn-active' : 'operate-btn'" @click="handleClickPlaying">
            <i class="icon-play" />
            动画
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="RadarEchoMap">
import { olMap } from '@/utils/olMap/olMap';
import mmJson from '@/assets/json/mm2.json';
import {ElButton} from "element-plus";
import {getRadarChart} from "@/api/disasterRiskMonitor/radarEchoMap";
import { transform } from 'ol/proj'
import Image from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';

let mapRef = ref(null);
let mapState = reactive({
  center: [110.925175, 22],
  zoom: 8.4,
  minZoom: 6,
  maxZoom: 16
});
let map, mapUtils;
// 是否开启动态图
let openDynamicImage = ref(false);

// 初始化地图
const initMap = () => {
  const index = mapTypeList.findIndex((item) => item.value === activeMap.value);
  mapUtils = new olMap({
    dom: mapRef.value,
    id: mapTypeList[index].data,
    center: mapState.center,
    zoom: mapState.zoom,
    minZoom: mapState.minZoom,
    maxZoom: mapState.maxZoom,
    // 加载完成事件
    onLoadCompleted: (yMap) => {
      map = yMap;
      getImageData();
      mapUtils.createVecByJson2(mmJson, { strokeWeight: 2 });
      mapUtils.handleLngLatLine(showLatLngLine.value);
      map.updateSize();
    }
  });
};
// 获取图层数据
let imageLayer;
let activeImg  = ref(0);
let imgList = ref([]);
// 获取图层数据
const getImageData = () => {
  getRadarChart().then((res) => {
    imgList.value = res.data;
    switchImage();
  })
}
// 加载图层到地图中
const switchImage = () => {
  if (!!imageLayer) {
    map.removeLayer(imageLayer);
    imageLayer = null;
  }
  let left = 18.1,
      bottom = 108.5,
      right = 26.9,
      top = 119
  let lb = (transform([bottom, left], 'EPSG:4326', 'EPSG:4490'));
  let tr = (transform([top, right], 'EPSG:4326', 'EPSG:4490'));

  // 创建ImageStatic图层
  imageLayer = new Image({
    source: new ImageStatic({
      url: imgList.value[activeImg.value].url,
      crossOrigin: '',
      projection: 'EPSG:4490',
      imageExtent: [lb[0], lb[1], tr[0], tr[1]]
    })
  });
  map.getLayers().push(imageLayer);
}
// 上下一个时间
const handleIndex = (type = 'add') => {
  if (type === 'add') {
    if (activeImg.value + 1 < imgList.value.length) {
      activeImg.value += 1;
    } else if (playing.value) {
      activeImg.value = 0
    }
  } else if (type === 'reduce' && activeImg.value - 1 >= 0) {
    activeImg.value -= 1;
  }
  switchImage();
};
// 切换动/静图
const handleChangeDynamic = () => {
  openDynamicImage.value = !openDynamicImage.value;
}

// 图例显隐
let showLegend = ref(false);
const handleClickLegend = () => {
  showLegend.value = !showLegend.value;
}
// 地图配置显隐
let showMapSetting = ref(false);
const handleClickMapSetting = () => {
  showMapSetting.value = !showMapSetting.value;
}
// 当前显示图层
let activeMap = ref('satelliteMap');
let mapTypeList = reactive([
  { name: '业务图', value: 'businessMap', data: [{id: 'YZT1708679726700', zIndex: 0}, {id: 'YZT1695608158269', zIndex: 100}] },
  { name: '卫星图', value: 'satelliteMap', data: [{id: 'YZT1640925052482', zIndex: 0}, {id: 'YZT1695608158269', zIndex: 100}] }
])
// 切换地图
const changeActiveMap = (value) => {
  handleClickMapSetting();
  if(activeMap.value === value) return;
  activeMap.value = value;
  const index = mapTypeList.findIndex((item) => item.value === activeMap.value);
  let layers = mapTypeList[index].data;
  // 判断是否显示地名
  if (!showLatPlaceName.value) {
    layers = layers.filter(item => item.id !== 'YZT1695608158269');
  }
  mapUtils.removeMask();
  mapUtils.replaceLayers(layers, () => {
    //加载完基础图层后再加载其他图层
    mapUtils.createVecByJson2(mmJson, { strokeWeight: 2 })
    if (showLatLngLine.value) {
      mapUtils.handleLngLatLine(showLatLngLine.value);
    }
  });
};
// 显隐经纬线
let showLatLngLine = ref(true);
let showLatPlaceName = ref(true);
const handleShowLatLngLine = () => {
  showLatLngLine.value = !showLatLngLine.value;
  handleClickMapSetting();
  mapUtils.handleLngLatLine(showLatLngLine.value);
}
// 显隐地名
const handleShowLatPlaceName = () => {
  showLatPlaceName.value = !showLatPlaceName.value;
  handleClickMapSetting();
  if (showLatPlaceName.value) {
    mapUtils.formatXml(['YZT1695608158269'])
  } else {
    mapUtils.removeLayer('YZT1695608158269')
  }
}
// 动画
let playing = ref(false);
let timer
const handleClickPlaying = () => {
  playing.value = !playing.value;
  if (playing.value) {
    timer = setInterval(handleIndex, 1000)
  } else {
    clearInterval(timer)
  }
}
onMounted(() => {
  initMap();
})
</script>

<style lang="scss" scoped>
.container {
  .map-box {
    width: 100%;
    height: calc(100vh - 55px);
    position: relative;
    #map {
      width: 100%;
      height: 100%;
    }
    .title-box {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.3);
      color: #ffffff;
      font-size: 14px;
    }
    .btn1 {
      position: absolute;
      top: 40px;
      right: 5px;
      z-index: 10;
      color: #fff;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon1 {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/icon1.png") no-repeat;
        background-size: 100% 100%;
        margin-right: 3px;
      }
    }
    .right-bottom-box {
      position: absolute;
      bottom: 5px;
      right: 5px;
      z-index: 10;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .legend-btn,
      .map-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
        width: 48px;
        height: 48px;
        margin-bottom: 5px;
        position: relative;
        .legend-box {
          position: absolute;
          bottom: 53px;
          right: 0;
          border: 1px solid #e0e0e0;
          .img {
            width: 46px;
          }
        }
        .map-setting-box {
          position: absolute;
          bottom: 0;
          right: 53px;
          border: 1px solid #e0e0e0;
          background-color: #ffffff;
          color: #445267;
          .function-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px;
            .function-item {
              width: 68px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-left: 5px;
              position: relative;
              &:first-child {
                margin-left: 0;
              }
              .checked {
                position: absolute;
                top: -3px;
                right: -3px;
                display: inline-block;
                width: 12px;
                height: 12px;
                background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/checked.png") no-repeat;
                background-size: 100% 100%;
              }
              .businessMap {
                width: 68px;
                height: 48px;
                background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/businessGraph.png") no-repeat;
                background-size: 100% 100%;
                margin-bottom: 5px;
                position: relative;
              }
              .satelliteMap {
                width: 68px;
                height: 48px;
                background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/satellite.png") no-repeat;
                background-size: 100% 100%;
                margin-bottom: 5px;
                position: relative;
              }
              .icon-latlng1 {
                background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/latlng1.png") no-repeat;
              }
              .icon-latlng2 {
                background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/latlng2.png") no-repeat;
              }
              .icon-position1 {
                background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/position1.png") no-repeat;
              }
              .icon-position2 {
                background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/position2.png") no-repeat;
              }
              .icon-latlng1,
              .icon-latlng2,
              .icon-position1,
              .icon-position2 {
                display: inline-block;
                width: 36px;
                height: 36px;
                background-size: 100% 100%;
              }
            }
          }
        }
        .icon-legend {
          display: inline-block;
          width: 16px;
          height: 17px;
          background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/legend1.png") no-repeat;
          background-size: 100% 100%;
          margin: 3px 0;
        }
        .icon-map {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/map1.png") no-repeat;
          background-size: 100% 100%;
          margin: 3px 0;
        }
      }
      .operate-box {
        display: flex;
        align-items: center;
        .operate-btn {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #ffffff;
          border-radius: 4px;
          border: 1px solid #e0e0e0;
          width: 48px;
          height: 48px;
          margin-left: 5px;
          &:first-child {
            margin-left: 0;
          }
          font-size: 12px;
          .icon-left {
            display: inline-block;
            width: 13px;
            height: 15px;
            background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/left.png") no-repeat;
            background-size: 100% 100%;
            margin: 3px 0;
          }
          .icon-right {
            display: inline-block;
            width: 12px;
            height: 15px;
            background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/right.png") no-repeat;
            background-size: 100% 100%;
            margin: 3px 0;
          }
          .icon-play {
            display: inline-block;
            width: 17px;
            height: 16px;
            background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/play.png") no-repeat;
            background-size: 100% 100%;
            margin: 3px 0;
          }
          &:active {
            background-color: #48a1f7;
            color: #fff;
            border: 1px solid #48a1f7;
            .icon-left {
              background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/left2.png") no-repeat;
              background-size: 100% 100%;
            }
            .icon-right {
              background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/right2.png") no-repeat;
              background-size: 100% 100%;
            }
            .icon-play {
              background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/play2.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
      .btn-active {
        background-color: #48a1f7 !important;
        color: #fff !important;
        border: 1px solid #48a1f7 !important;
        .icon-legend {
          background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/legend2.png") no-repeat;
          background-size: 100% 100%;
        }
        .icon-map {
          background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/map2.png") no-repeat;
          background-size: 100% 100%;
        }
        .icon-play {
          background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/play2.png") no-repeat !important;
          background-size: 100% 100% !important;
        }
      }
    }
  }
}
</style>