新xiugai

马宇豪

2025-05-08 1289c40801a6f0da5ba786fb4a9e8203e3e2620a

 src/views/bigScreen/components/map.vue

@@ -1,28 +1,55 @@
<template>
  <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.126263, lat: 45.603813}" :zoom="17" map-type="BMAP_SATELLITE_MAP" @ready="initMap">
<!--    <bm-polygon :path="polygonPath1" stroke-color="blue" fillColor="blue" :fillOpacity="1" :stroke-weight="2"/>-->
<!--    <bm-polygon :path="polygonPath2" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>-->
<!--    <bm-overlay pane="mapPane" class="bg-pic" @draw="initMap">-->
      <bm-ground class="picBg" :bounds="{ne: {lng: 85.129048, lat: 45.605790}, sw:{lng: 85.122984, lat: 45.592812}}" imageURL="/bigMap2.png" opacity="1" :displayOnMaxLevel="18" :zIndex="1"></bm-ground>
<!--    </bm-overlay>-->
    <bm-overlay pane="mapPane" class="polys" @draw="initMap">
      <bm-polygon :path="polygonPath3" stroke-color="yellow" fillColor="yellow" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="1" :position="{lng: 85.127634, lat: 45.604176}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="1" :zIndex="3"/>
  <!--    <bm-polygon :path="polygonPath4" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>-->
      <bm-polygon :path="polygonPath5" stroke-color="#01007f" fillColor="#01007f" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="2" :position="{lng: 85.126928, lat: 45.603873}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="2" :zIndex="3"/>
      <bm-polygon :path="polygonPath6" stroke-color="#ff00fa" fillColor="#ff00fa" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="3" :position="{lng: 85.123940, lat: 45.604109}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="3" :zIndex="3"/>
      <bm-polygon :path="polygonPath7" stroke-color="#02ff02" fillColor="#02ff02" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="4" :position="{lng: 85.125489, lat: 45.603525}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="4" :zIndex="3"/>
      <bm-polygon :path="polygonPath8" stroke-color="#028002" fillColor="#028002" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="5" :position="{lng: 85.126150, lat: 45.603173}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="5" :zIndex="3"/>
      <bm-polygon :path="polygonPath9" stroke-color="#008081" fillColor="#008081" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="6" :position="{lng: 85.126805, lat: 45.602739}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="6" :zIndex="3"/>
    </bm-overlay>
<!--    <bm-ground class="picBg" :bounds="{ne: {lng: 85.127749, lat: 45.600383}, sw:{lng: 85.106981, lat: 45.592463}}" imageURL="/bigMapPic.jpg" opacity="0.5"></bm-ground>-->
  <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" @zoomend="zoomMap" type="API" :scroll-wheel-zoom="true" :center="{lng: 87.681678, lat: 43.943557}" :zoom="18" map-type="BMAP_SATELLITE_MAP" @ready="initMap">
        <bm-overlay pane="mapPane" class="polys" @draw="initMap">
          <bm-polygon :path="polygonPath1" stroke-color="yellow" fillColor="yellow" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
          <bm-label content="1" :position="{lng: 87.679807, lat: 43.94402 }" :labelStyle="tittleStyle" title="1" :zIndex="3"/>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="1#电石库" :position="{lng: 87.679667, lat: 43.94382}" :labelStyle="textStyle" title="1#电石库" />

          <bm-polygon :path="polygonPath2" stroke-color="#061959" fillColor="#061959" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
          <bm-label content="2" :position="{lng: 87.679663, lat: 43.942926}" :labelStyle="tittleStyle" title="2" :zIndex="3"/>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="渣浆清液池" :position="{lng: 87.679363, lat:43.942676}" :labelStyle="textStyle" title="渣浆清液池" />

          <bm-polygon :path="polygonPath3" stroke-color="#048599" fillColor="#048599" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
          <bm-label content="3" :position="{lng: 87.681455, lat: 43.943401}" :labelStyle="tittleStyle" title="3" :zIndex="3"/>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="中间罐区" :position="{lng: 87.681205, lat:43.943131}" :labelStyle="textStyle" title="中间罐区" />

          <bm-polygon :path="polygonPath4" stroke-color="green" fillColor="green" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
          <bm-label content="4" :position="{lng: 87.683095, lat: 43.943702 }" :labelStyle="tittleStyle" title="1" :zIndex="3"/>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="3#冷冻" :position="{lng: 87.683005, lat: 43.943502 }" :labelStyle="textStyle" title="3#冷冻" />

          <bm-polygon :path="polygonPath5" stroke-color="#3eec34" fillColor="#3eec34" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
          <bm-label content="5" :position="{lng: 87.683509, lat: 43.943055}" :labelStyle="tittleStyle" title="5" :zIndex="3"/>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="新增浓缩池" :position="{lng: 87.683209, lat:43.942875}" :labelStyle="textStyle" title="新增浓缩池" />

          <bm-polygon :path="polygonPath6" stroke-color="#ff52e7" fillColor="#ff52e7" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
          <bm-label content="6" :position="{lng: 87.68274, lat: 43.944283 }" :labelStyle="tittleStyle" title="1" :zIndex="3"/>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="3#精馏" :position="{lng: 87.68264, lat: 43.944083 }" :labelStyle="textStyle" title="3#精馏" />

          <bm-polygon :path="polygonPath7" stroke-color="#0055eb" fillColor="#0055eb" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
          <bm-label content="7" :position="{lng: 87.682286, lat: 43.944765}" :labelStyle="tittleStyle" title="4" :zIndex="3"/>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="3#压缩" :position="{lng: 87.682206, lat: 43.944565}" :labelStyle="textStyle" title="3#压缩" />

          <bm-polygon :path="polygonPath8" stroke-color="#11feee" fillColor="#11feee" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
          <bm-label content="8" :position="{lng: 87.681338, lat: 43.944341 }" :labelStyle="tittleStyle" title="1" :zIndex="3"/>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="2#精馏" :position="{lng: 87.681238, lat: 43.944141}" :labelStyle="textStyle" title="2#精馏" />

          <bm-polygon :path="polygonPath9" stroke-color="#b330d2" fillColor="#b330d2" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
          <bm-label content="9" :position="{lng: 87.680727, lat: 43.944157}" :labelStyle="tittleStyle" title="1" :zIndex="3"/>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="1#精馏" :position="{lng: 87.68061, lat:43.943955}" :labelStyle="textStyle" title="1#精馏" />

          <bm-polyline :path="polylinePath1" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
          <bm-polyline :path="polylinePath11" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
          <bm-polyline :path="polylinePath12" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="155m 方位1" :position="{lng: 87.6798, lat:43.943708}" :labelStyle="numberStyle" title="155m 方位1" />

          <bm-polyline :path="polylinePath2" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
          <bm-polyline :path="polylinePath21" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
          <bm-polyline :path="polylinePath22" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
          <bm-label style="background-color: rgba(0,0,0,0) !important;" content="145m 方位2" :position="{lng:87.681065, lat:43.942399}" :labelStyle="numberStyle" title="145m 方位2" />
        </bm-overlay>
        <bm-ground class="picBg" :bounds="{ne: {lng: 87.679854, lat: 43.945406}, sw:{lng: 87.67801, lat: 43.94331}}" imageURL="/directions.png" opacity="1"></bm-ground>
    <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
<!--                  <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>-->
    <!--                  <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>-->
  </baidu-map>
</template>

@@ -31,80 +58,130 @@
import screen from './components/screen.vue'
import screenfull from 'screenfull'
import { ElMessage, ElMessageBox } from 'element-plus';
import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel} from 'vue-baidu-map-3x'
import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline} from 'vue-baidu-map-3x'

// 定义接口来定义对象的类型
interface TableDataState {
  // polygonPath1: Array<location>
  // polygonPath2: Array<location>
  polygonPath1: Array<location>
  polygonPath2: Array<location>
  polygonPath3: Array<location>
  // polygonPath4: Array<location>
  polygonPath4: Array<location>
  polygonPath5: Array<location>
  polygonPath6: Array<location>
  polygonPath7: Array<location>
  polygonPath8: Array<location>
  polygonPath9: Array<location>
  polylinePath1: Array<location>
  polylinePath11: Array<location>
  polylinePath12: Array<location>
  polylinePath2: Array<location>
  polylinePath21: Array<location>
  polylinePath22: Array<location>
  textStyle: {}
  tittleStyle: {}
  numberStyle: {}
}
interface location{
  lng: number | null
  lat: number | null
}
export default defineComponent({
    name: 'map',
    components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel },
    setup() {
        const state = reactive<TableDataState>({
          // polygonPath1: [],
          // polygonPath2: [],
          polygonPath3: [],
          // polygonPath4: [],
          polygonPath5: [],
          polygonPath6: [],
          polygonPath7: [],
          polygonPath8: [],
          polygonPath9: []
        });

        // 页面加载时
        onMounted(() => {
          const baseSize = 38;
          /* 设置 rem 函数 */
          function setRem() {
            const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
            document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
            console.log('切换尺寸>>',document.documentElement.style.fontSize)
          }
          setRem();/* 初始化 rem */

          window.onresize = () => {
            setRem();/* 改变窗口大小时重新设置 rem */
            console.log('执行切换')
          }
        });
      const map = reactive({})
      const initMap=()=>{
        // state.polygonPath1 = [{ lng: 85.126523, lat: 45.604790 }, { lng: 85.126364, lat: 45.604687 }, { lng: 85.126775, lat: 45.604416 }, { lng: 85.126933, lat: 45.604528 }],
        // state.polygonPath2 = [{ lng: 85.127235, lat: 45.604406 }, { lng: 85.126908, lat: 45.604141 }, { lng: 85.127041, lat: 45.604046 }, { lng: 85.127396, lat: 45.604313 }],
        state.polygonPath3 = [{ lng: 85.127634, lat: 45.604176 }, { lng: 85.127331, lat: 45.603931 }, { lng: 85.127885, lat: 45.603602 }, { lng: 85.128178, lat: 45.603853 }],
        // state.polygonPath4 = [{ lng: 85.125247, lat: 45.604832 }, { lng: 85.124665, lat: 45.604483 }, { lng: 85.125910, lat: 45.603576 }, { lng: 85.126564, lat: 45.604053 }],
        state.polygonPath5 = [{ lng: 85.126928, lat: 45.603873 }, { lng: 85.126253, lat: 45.603399 }, { lng: 85.126923, lat: 45.602951 }, { lng: 85.127580, lat: 45.603464 }],
        state.polygonPath6 = [{ lng: 85.123940, lat: 45.604109 }, { lng: 85.123651, lat: 45.603782 }, { lng: 85.124211, lat: 45.603426 }, { lng: 85.124538, lat: 45.603693 }],
        state.polygonPath7 = [{ lng: 85.125489, lat: 45.603525 }, { lng: 85.124729, lat: 45.603024 }, { lng: 85.125304, lat: 45.602703 }, { lng: 85.125988, lat: 45.603217 }],
        state.polygonPath8 = [{ lng: 85.126150, lat: 45.603173 }, { lng: 85.125339, lat: 45.602580 }, { lng: 85.125847, lat: 45.602235 }, { lng: 85.126700, lat: 45.602838 }],
        state.polygonPath9 = [{ lng: 85.126805, lat: 45.602739 }, { lng: 85.125929, lat: 45.602127 }, { lng: 85.126505, lat: 45.601715 }, { lng: 85.127309, lat: 45.602365 }]
        console.log(map,'map')
        // const poly = document.getElementsByClassName('polys')
        // console.log(poly)
        // poly.attributes.style.zIndex = 9999999
        // console.log(poly,'poly')
  name: 'map',
  components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline },
  setup() {
    const state = reactive<TableDataState>({
      polygonPath1: [],
      polygonPath2: [],
      polygonPath3: [],
      polygonPath4: [],
      polygonPath5: [],
      polygonPath6: [],
      polygonPath7: [],
      polygonPath8: [],
      polygonPath9: [],
      polylinePath1: [],
      polylinePath11: [],
      polylinePath12: [],
      polylinePath2: [],
      polylinePath21: [],
      polylinePath22: [],
      textStyle: {
        color: '#fff',
        fontSize : '16px',
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#fff'
      },
      tittleStyle: {
        color: '#000000',
        fontSize : '20px'
      },
      numberStyle: {
        color: 'red',
        fontSize : '16px',
        backgroundColor: 'rgba(0,0,0,0)',
        fontWeight: 'bolder',
        border: 'none'
      }
    });

      return {
        initMap,
        map,
          ...toRefs(state)
        };
    // 页面加载时
    onMounted(() => {
      const baseSize = 38;
      /* 设置 rem 函数 */
      function setRem() {
        const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
        document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
        console.log('切换尺寸>>',document.documentElement.style.fontSize)
      }
      setRem();/* 初始化 rem */

      window.onresize = () => {
        setRem();/* 改变窗口大小时重新设置 rem */
        console.log('执行切换')
      }
    });
    const map = reactive({})
    const initMap=()=>{
      state.polygonPath1 = [{ lng: 87.679428, lat: 43.944073 }, { lng: 87.679929, lat: 43.944245 }, { lng: 87.680345, lat: 43.943524 }, { lng: 87.67985, lat: 43.943355 }]
      state.polygonPath2 = [{ lng: 87.678872, lat: 43.94283 }, { lng: 87.680266, lat: 43.943274 }, { lng: 87.680698, lat: 43.94254 }, { lng: 87.67929, lat: 43.942076 }]
      state.polygonPath3 = [{ lng: 87.680406, lat: 43.943341 }, { lng: 87.681953, lat: 43.943873}, { lng: 87.682582, lat: 43.942807 }, { lng: 87.680992, lat: 43.942309 }]
      state.polygonPath4 = [{ lng: 87.682575, lat: 43.943725 }, { lng: 87.683401, lat: 43.94402}, { lng: 87.683756, lat: 43.943383 }, { lng: 87.682961, lat: 43.943112 }]
      state.polygonPath5 = [{ lng: 87.682825, lat: 43.942898 }, { lng: 87.683931, lat: 43.943295 }, { lng: 87.684201, lat: 43.942784 }, { lng: 87.683081, lat: 43.942438}]
      state.polygonPath6 = [{ lng: 87.682305, lat: 43.944163 }, { lng: 87.683123, lat: 43.944449}, { lng: 87.683339, lat: 43.944071 }, { lng: 87.68253, lat: 43.943802 }]
      state.polygonPath7 = [{ lng: 87.681605, lat: 43.944581}, { lng: 87.682826,lat: 43.944903 }, { lng: 87.68308, lat: 43.944527 }, { lng: 87.681874, lat: 43.944102 }]
      state.polygonPath8 = [{ lng: 87.681052, lat: 43.944205 }, { lng: 87.681581, lat: 43.944387 }, { lng: 87.681771, lat: 43.944056 }, { lng: 87.681254, lat: 43.943877 }]
      state.polygonPath9 = [{ lng: 87.680507, lat: 43.944051 }, { lng: 87.680952, lat: 43.944182 }, { lng: 87.68115, lat: 43.943840 }, { lng: 87.680729, lat: 43.943697 }]
      state.polylinePath1 = [{ lng: 87.681944, lat: 43.943929}, {lng: 87.680313, lat: 43.943402}]
      state.polylinePath11 = [{lng: 87.680313, lat: 43.943402},{ lng: 87.680420, lat: 43.943512}]
      state.polylinePath12 = [{lng: 87.680313, lat: 43.943402},{ lng: 87.680503, lat: 43.943402}]
      state.polylinePath2 = [{ lng: 87.681000, lat: 43.942226}, {lng: 87.680323, lat: 43.943302}]
      state.polylinePath21 = [{lng: 87.680323, lat: 43.943302},{ lng: 87.680303, lat: 43.943202}]
      state.polylinePath22 = [{lng: 87.680323, lat: 43.943302},{ lng: 87.680453, lat: 43.943242}]

    }
    const zoomMap = (e)=>{
      const zoom = e.target.getZoom()
      if(zoom>=18){
        state.textStyle.fontSize = '16px'
        state.tittleStyle.fontSize = '20px'
        state.numberStyle.fontSize = '16px'
      }else if(zoom>=15 && zoom<=17){
        state.textStyle.fontSize = '12px'
        state.tittleStyle.fontSize = '14px'
        state.numberStyle.fontSize = '12px'
      }else{
        state.textStyle.fontSize = '10px'
        state.tittleStyle.fontSize = '10px'
        state.numberStyle.fontSize = '10px'
      }
    }
    return {
      initMap,
      zoomMap,
      map,
      ...toRefs(state)
    };
  }
});
</script>
<style lang="scss" scoped>
@@ -115,7 +192,7 @@
    position: relative;
    z-index: 9999999 !important;
  }
  :deep(BMapLabel){
  :deep(.BMapLabel){
    z-index: 9999999 !important;
  }
}
@@ -127,4 +204,16 @@
  position: relative;
  z-index: 2;
}
.sample {
  position: absolute;
  width: 120px;
  height: 40px;
  line-height: 40px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
}
</style>