From 7069ff06f3e28c615eba1b42015a4784d996dd05 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期四, 08 五月 2025 13:13:16 +0800 Subject: [PATCH] 新修改 --- src/views/bigScreen/components/map.vue | 123 +++++++++++++++++++++++++++++++++------- 1 files changed, 101 insertions(+), 22 deletions(-) diff --git a/src/views/bigScreen/components/map.vue b/src/views/bigScreen/components/map.vue index ab5cc41..7875851 100644 --- a/src/views/bigScreen/components/map.vue +++ b/src/views/bigScreen/components/map.vue @@ -1,30 +1,51 @@ <template> - <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 87.681678, lat: 43.943787}" :zoom="18" map-type="BMAP_SATELLITE_MAP" @ready="initMap"> + <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" @zoomend="zoomMap" v="3.0" 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="#ff52e7" fillColor="#ff52e7" :fillOpacity="0.6" :stroke-weight="2" :zIndex="2"/> - <bm-label content="1" :position="{lng: 87.68091, lat: 43.944395}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="1" :zIndex="3"/> - <bm-label style="background-color: rgba(0,0,0,0) !important;" content="1#2#精馏区" :position="{lng: 87.68061, lat:43.944155}" :labelStyle="{color: '#fff', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',borderColor: '#fff'}" title="1#2#精馏区" /> - <bm-polygon :path="polygonPath2" stroke-color="#35ff00" fillColor="#35ff00" :fillOpacity="0.6" :stroke-weight="2" :zIndex="2"/> - <bm-label content="2" :position="{lng: 87.679663, lat: 43.942926}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="2" :zIndex="3"/> - <bm-label style="background-color: rgba(0,0,0,0) !important;" content="1#2#渣浆" :position="{lng: 87.679363, lat:43.942676}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',borderColor: 'red'}" title="1#2#渣浆" /> - <bm-polygon :path="polygonPath3" stroke-color="yellow" fillColor="yellow" :fillOpacity="0.6" :stroke-weight="2" :zIndex="2"/> - <bm-label content="3" :position="{lng: 87.681455, lat: 43.943401}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="3" :zIndex="3"/> - <bm-label style="background-color: rgba(0,0,0,0) !important;" content="中间罐区" :position="{lng: 87.681205, lat:43.943131}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',borderColor: 'red'}" title="中间罐区" /> - <bm-polygon :path="polygonPath4" stroke-color="#11feee" fillColor="#11feee" :fillOpacity="0.6" :stroke-weight="2" :zIndex="2"/> - <bm-label content="4" :position="{lng: 87.683099, lat: 43.943842}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="4" :zIndex="3"/> - <bm-label style="background-color: rgba(0,0,0,0) !important;" content="精馏和冷却" :position="{lng: 87.682850, lat:43.943602}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',borderColor: 'red'}" title="精馏和冷却" /> - <bm-polygon :path="polygonPath5" stroke-color="#0055eb" fillColor="#0055eb" :fillOpacity="0.6" :stroke-weight="2" :zIndex="2"/> - <bm-label content="5" :position="{lng: 87.683509, lat: 43.943055}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="5" :zIndex="3"/> - <bm-label style="background-color: rgba(0,0,0,0) !important;" content="乙炔新增渣浆区" :position="{lng: 87.683009, lat:43.942775}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',borderColor: 'red'}" title="乙炔新增渣浆区" /> + <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="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',fontWeight: 'bold',border: 'none'}" title="155m 方位1" /> + <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="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',fontWeight: 'bolder',border: 'none'}" title="145m 方位2" /> + <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> @@ -46,12 +67,20 @@ polygonPath3: 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: {} + textStyle2: {} + tittleStyle: {} + numberStyle: {} } interface location{ lng: number | null @@ -67,12 +96,39 @@ polygonPath3: [], polygonPath4: [], polygonPath5: [], + polygonPath6: [], + polygonPath7: [], + polygonPath8: [], + polygonPath9: [], polylinePath1: [], polylinePath11: [], polylinePath12: [], polylinePath2: [], polylinePath21: [], - polylinePath22: [] + polylinePath22: [], + textStyle: { + color: '#fff', + fontSize : '16px', + backgroundColor: 'rgba(0,0,0,0)', + borderColor: '#fff' + }, + textStyle2: { + color: 'red', + fontSize : '16px', + backgroundColor: 'rgba(0,0,0,0)', + borderColor: 'red' + }, + tittleStyle: { + color: '#000000', + fontSize : '20px' + }, + numberStyle: { + color: 'red', + fontSize : '16px', + backgroundColor: 'rgba(0,0,0,0)', + fontWeight: 'bolder', + border: 'none' + } }); // 页面加载时 @@ -93,11 +149,15 @@ }); const map = reactive({}) const initMap=()=>{ - state.polygonPath1 = [{ lng: 87.680177, lat: 43.944441 }, { lng: 87.681239, lat: 43.94478 }, { lng: 87.68172, lat: 43.944013 }, { lng: 87.680649, lat: 43.943647 }] + 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.942857 }, { lng: 87.680992, lat: 43.942359 }] - state.polygonPath4 = [{ lng: 87.682381, lat: 43.944043 }, { lng: 87.683216, lat: 43.944326 }, { lng: 87.683851, lat: 43.943348 }, { lng: 87.683004, lat: 43.943053 }] + 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}] @@ -105,8 +165,27 @@ 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 = (type, target)=>{ + if(type.target.Za>=18){ + state.textStyle.fontSize = '16px' + state.textStyle2.fontSize = '16px' + state.tittleStyle.fontSize = '20px' + state.numberStyle.fontSize = '16px' + }else if(type.target.Za>=15 && type.target.Za<=17){ + state.textStyle.fontSize = '12px' + state.textStyle2.fontSize = '12px' + state.tittleStyle.fontSize = '14px' + state.numberStyle.fontSize = '12px' + }else{ + state.textStyle.fontSize = '10px' + state.textStyle2.fontSize = '10px' + state.tittleStyle.fontSize = '10px' + state.numberStyle.fontSize = '10px' + } + } return { initMap, + zoomMap, map, ...toRefs(state) }; -- Gitblit v1.9.2