地图调整

src/components/Map/YztMap/index.vue

@@ -50,13 +50,13 @@ watch(
   () => props.activeMap,
   () => {
     if (!map) return;
-    const id = props.activeMap === 'satellite2' ? ['YZT1715739306532', 'YZT1695608158269'] : ['YZT1708679726700', 'YZT1695608158269'];
+    const id = props.activeMap === 'imageMap' ? ['YZT1640925052482', 'YZT1695608158269'] : ['YZT1708679726700', 'YZT1695608158269'];
     map.replaceLayers(id);
   }
 );
 
 const init = () => {
-  const id = props.activeMap === 'satellite2' ? ['YZT1715739306532', 'YZT1695608158269'] : ['YZT1708679726700', 'YZT1695608158269'];
+  const id = props.activeMap === 'imageMap' ? ['YZT1640925052482', 'YZT1695608158269'] : ['YZT1708679726700', 'YZT1695608158269'];
   map = new olMap({
     dom: mapRef.value,
     id: id,

src/components/Map/index.vue

@@ -114,7 +114,7 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
       // 添加遮罩
     // , { strokeColor: '#ff0000',strokeWeight: 2, offset }
     //   { strokeColor: '#2a8797', strokeOpacity: 0.6,strokeWeight: 6, fillOpacity: 0},
-      creatMask([{ strokeWeight: 2, fillColor: '#4f95ff', fillOpacity: 0.2 }]);
+      creatMask([{ strokeWeight: 2 }]);
       drawTool.initMouseTool({ container: 'aMap', map, AMap });
       handleResize();
     },

src/hooks/AMap/useAMap.ts

@@ -248,11 +248,11 @@ export function useAMap(options) {
         pathArray.push.apply(pathArray, holes);
         const polygon = new AMap.Polygon({
           pathL: pathArray,
-          strokeColor: option.strokeColor ? option.strokeColor : '#fefefe',
+          strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
           strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
           strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
-          fillColor: option.fillColor ? option.fillColor : '#1791fc',
-          fillOpacity: option.fillOpacity ? option.fillOpacity : 0.2
+          fillColor: option.fillColor ? option.fillColor : '#10243b',
+          fillOpacity: option.fillOpacity ? option.fillOpacity : 0.65
         });
         polygon.setPath(pathArray);
         map.add(polygon);

src/utils/olMap/olMap.ts

@@ -293,10 +293,10 @@ export class olMap {
       source: new VectorSource(),
       style: new Style({
         fill: new Fill({
-          color: 'rgba(23, 145, 252, 0.2)'
+          color: 'rgba(16, 36, 59, 0.65)'
         }),
         stroke: new Stroke({
-          color: 'rgba(254, 254, 254,1)',
+          color: 'rgba(38, 138, 185, 1)',
           width: 2
         })
       }),

src/views/globalMap/RightMenu/RainMonitor/RainChart.vue

@@ -10,7 +10,7 @@
         <div class="text2" style="margin-left: 10px">{{ parseTime(updateTime, '{h}:{i}') }}</div>
       </div>
     </div>
-    <Chart :option="chartOption" style="flex: 1" />
+    <Chart :option="chartOption" style="height: 1200px" />
   </Dialog>
 </template>
 
@@ -174,34 +174,35 @@ const handleClose = () => {
       text-overflow: ellipsis;
     }
   }
-  .time-box {
-    width: 482px;
-    min-width: 482px;
-    height: 83px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/dateBox.png') no-repeat;
+}
+.time-box {
+  width: 482px;
+  min-width: 482px;
+  height: 83px;
+  background: url('@/assets/images/map/rightMenu/rainMonitor/dateBox.png') no-repeat;
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+  .text1 {
+    font-size: 32px;
+    color: #fff;
     display: flex;
-    align-items: center;
-    .text1 {
-      font-size: 32px;
-      color: #fff;
-      display: flex;
-      line-height: 75px;
-      padding-left: 108px;
-    }
-    .text2 {
-      font-size: 32px;
-      font-family: BEBAS-1;
-      /* 设置字体透明 */
-      color: transparent;
-      /* 设置线性渐变，从红色渐变到蓝色 */
-      background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
-      /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
-      -webkit-background-clip: text;
-      /* 非Webkit内核浏览器需要使用标准前缀 */
-      background-clip: text;
-      /* 把当前元素设置为行内块，以便能够应用背景 */
-      display: inline-block;
-    }
+    line-height: 75px;
+    padding-left: 108px;
+  }
+  .text2 {
+    font-size: 32px;
+    font-family: BEBAS-1;
+    /* 设置字体透明 */
+    color: transparent;
+    /* 设置线性渐变，从红色渐变到蓝色 */
+    background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
+    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+    -webkit-background-clip: text;
+    /* 非Webkit内核浏览器需要使用标准前缀 */
+    background-clip: text;
+    /* 把当前元素设置为行内块，以便能够应用背景 */
+    display: inline-block;
   }
 }
 .title {

src/views/globalMap/SwitchMapTool.vue

@@ -31,8 +31,8 @@ const mapData = ref([
   // { name: '逻辑地图', key: 'logical' },
   { name: '矢量地图', key: 'vectorgraph' },
   { name: '卫星地图', key: 'satellite' },
-  { name: '粤政图', key: 'satellite2' },
-  { name: '粤政图2', key: 'satellite3' }
+  { name: '影像图', key: 'imageMap' },
+  // { name: '粤政图2', key: 'satellite3' }
 ]);
 let open = ref(false);
 const selectItem = (key) => {
@@ -128,6 +128,10 @@ const handleExpand = () => {
     background: url('@/assets/images/map/satellite.png') no-repeat;
     background-size: 100% 100%;
   }
+  .imageMap {
+    background: url('@/assets/images/map/satellite2.png') no-repeat;
+    background-size: 100% 100%;
+  }
   .satellite2 {
     background: url('@/assets/images/map/satellite2.png') no-repeat;
     background-size: 100% 100%;

src/views/globalMap/index.vue

@@ -2,8 +2,8 @@
   <div id="globalMap">
     <div class="global-map">
       <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
-      <!--      <YMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" :activeMap="activeMap" />-->
-      <YztMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :point-type="pointType" />
+      <!--      <YMap v-else-if="['imageMap', 'satellite2', 'satellite3'].includes(activeMap)" :activeMap="activeMap" />-->
+      <YztMap v-else-if="['imageMap', 'satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :point-type="pointType" />
       <Map v-else ref="mapRef" :active-map="activeMap" :point-type="pointType" @handle-show-video="handleShowVideo" @handleShowWarehouse="handleShowWarehouse" />
       <!--左侧菜单-->
       <LeftMenu style="position: absolute; top: 20px; left: 20px" @click-menu="clickMenu" @select-search-marker="selectSearchMarker" />
@@ -48,7 +48,7 @@ const switchMap = (key) => {
 let pointType = ref<PointType[]>([]);
 let markerList = ref([]);
 const addMarkers = (item) => {
-  const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
+  const dom = activeMap.value === 'imageMap' ? map2Ref.value : mapRef.value;
   if (dom) {
     if (!item.checked) {
       let index = pointType.value.findIndex((item2) => item.component === item2.component);
@@ -96,7 +96,7 @@ const addMarkers = (item) => {
 };
 // 跳转指定地点
 const toAddress = (item) => {
-  const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
+  const dom = activeMap.value === 'imageMap' ? map2Ref.value : mapRef.value;
   dom.setCenter(item);
 };
 
@@ -139,7 +139,7 @@ const findChecked = (dataList, name) => {
 };
 // 点击搜索结果，添加标注
 const selectSearchMarker = (item) => {
-  const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
+  const dom = activeMap.value === 'imageMap' ? map2Ref.value : mapRef.value;
   let item2 = deepClone(item);
   // 获取图标
   if (iconList[item2.dataType]) {
@@ -161,7 +161,7 @@ const handleAnalysisData = (data) => {
 };
 // 获取地图元素操作
 const getMap = () => {
-  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
+  if (['imageMap', 'satellite2', 'satellite3'].includes(activeMap.value)) {
     return map2Ref.value.getMap();
   } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
     return mapRef.value.getMap();
@@ -169,7 +169,7 @@ const getMap = () => {
   return {};
 };
 const showDetail = (data, dataType) => {
-  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
+  if (['imageMap', 'satellite2', 'satellite3'].includes(activeMap.value)) {
     return map2Ref.value.handleHover(data, dataType);
   } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
     return mapRef.value.handleHover(data, dataType);
@@ -177,7 +177,7 @@ const showDetail = (data, dataType) => {
   return {};
 };
 const getDrawTool = () => {
-  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
+  if (['imageMap', 'satellite2', 'satellite3'].includes(activeMap.value)) {
     return map2Ref.value.drawTool;
   } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
     return mapRef.value.drawTool;
@@ -185,7 +185,7 @@ const getDrawTool = () => {
   return {};
 };
 const getMarkers = () => {
-  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
+  if (['imageMap', 'satellite2', 'satellite3'].includes(activeMap.value)) {
     return map2Ref.value.getMarkers();
   } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
     return mapRef.value.getMarkers();
@@ -193,7 +193,7 @@ const getMarkers = () => {
   return {};
 };
 const trackPlayback = (data) => {
-  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
+  if (['imageMap','satellite2', 'satellite3'].includes(activeMap.value)) {
     return map2Ref.value.trackPlayback(data);
   } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
     return mapRef.value.trackPlayback(data);