mapUtils

src/api/globalMap/potentialFloodHazard.ts

@@ -18,7 +18,7 @@ export const getWaterloggedAllVideoInfo = (params) => {
 
 export const getWaterloggedRoadsUpdateTime = () => {
   return request({
-    url: 'api/gateway/v1/get_waterlogged_roads_update_time',
+    url: '/api/gateway/v1/get_waterlogged_roads_update_time',
     method: 'get'
   });
 };

src/components/Map/YztMap/index.vue

@@ -1,17 +1,7 @@
 <template>
   <div ref="containerRef" class="map-container">
     <div ref="mapRef" id="YztMap" class="map-container" :style="{ width: width, height: height }"></div>
-    <!-- 右下工具  -->
-    <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
-    <div class="right-tool">
-      <!-- 快捷缩放 -->
-      <QuickZoom v-model:zoom="mapState.zoom" @change-step="setMapZoom" />
-      <div class="flex" style="margin-top: 5px; justify-content: center">
-        <div class="mask-btn" @click="handleShowMask">{{ showMask ? '显' : '隐' }}</div>
-<!--        <div class="model-btn" @click="switchThreeDimensional">{{ mapState.isThreeDimensional ? '3D' : '2D' }}</div>-->
-        <div class="ruler-icon" style="margin-left: 5px" @click="changeScaleControl"></div>
-      </div>
-    </div>
+    <rightTool :mapState="mapState" type="YztMap" :showMask="showMask" @changeShowMask="changeShowMask" />
   </div>
 </template>
 
@@ -46,16 +36,16 @@ const mapState = reactive({
 const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
-let yztMap, map;
+let map, mapUtils;
 
 // 监听是否开启绘制
 watch(
   () => props.drawing,
   (value) => {
     if (value) {
-      map.drawGraphics(props.graphicsType);
+      mapUtils.drawGraphics(props.graphicsType);
     } else {
-      map.closeDraw();
+      mapUtils.closeDraw();
     }
   }
 );
@@ -69,23 +59,23 @@ const mapList = reactive({
 watch(
   () => props.activeMap,
   () => {
-    if (!map) return;
-    map.replaceLayers(mapList[props.activeMap]);
+    if (!mapUtils) return;
+    mapUtils.replaceLayers(mapList[props.activeMap]);
   }
 );
 watch(
   () => props.showMask,
   () => {
     if (props.showMask) {
-      map.createVecByJson(mmJson, '茂名市');
+      mapUtils.createVecByJson(mmJson, '茂名市');
     } else {
-      map.removeMask();
+      mapUtils.removeMask2();
     }
   }
 );
-let scaleLine;
+let scale;
 const init = () => {
-  map = new olMap({
+  mapUtils = new olMap({
     dom: mapRef.value,
     id: mapList[props.activeMap],
     center: mapState.center,
@@ -111,71 +101,36 @@ const init = () => {
     },
     // 加载完成事件
     onLoadCompleted: (yMap) => {
-      yztMap = yMap;
-      // initMouseTool(map);
-      scaleLine = new ScaleLine();
-      yztMap.addControl(scaleLine);
-      yztMap.getView().on('change:resolution', () => {
-        mapState.zoom = yztMap.getView().getZoom().toFixed(2);
+      map = yMap;
+      // initMouseTool(mapUtils);
+      scale = new ScaleLine();
+      map.addControl(scale);
+      map.getView().on('change:resolution', () => {
+        mapState.zoom = map.getView().getZoom().toFixed(2);
       });
       if (props.showMask) {
-        yztMap.createVecByJson(mmJson, '茂名市');
+        mapUtils.createVecByJson(mmJson, '茂名市');
       }
       handleResize();
     }
   });
 };
 const addMarker = (points) => {
-  map.addMarker(points);
-};
-// 设置地图层级
-const setMapZoom = (value) => {
-  if (!yztMap) return;
-  const view = yztMap.getView();
-  if (value === 1) {
-    view.setCenter([110.925175, 21.678955]);
-    view.setZoom(7.9);
-  } else if (value === 2) {
-    view.setCenter([110.925175, 21.6789558]);
-    view.setZoom(9.21);
-  } else if (value === 3) {
-    view.setCenter([110.925175, 21.678955]);
-    view.setZoom(11.38);
-  } else if (value === 4) {
-    view.setCenter([110.925175, 21.678955]);
-    view.setZoom(12.83);
-  }
-};
-// 切换2D、3D
-const switchThreeDimensional = () => {
-  const view = yztMap.getView();
-  mapState.isThreeDimensional = !mapState.isThreeDimensional;
-  const pitch = mapState.isThreeDimensional ? 45 : 0;
-  view.setPitch(pitch);
+  mapUtils.addMarker(points);
 };
 
-// 切换比例尺
-const changeScaleControl = () => {
-  mapState.showScale = !mapState.showScale;
-  if (mapState.showScale) {
-    yztMap.addControl(scaleLine);
-  } else {
-    yztMap.removeControl(scaleLine);
-  }
-};
 const clearMarker = () => {
-  map.clearMarker();
+  mapUtils.clearMarker();
 };
-const handleShowMask = () => {
+const changeShowMask = () => {
   emits('update:showMask', !props.showMask);
 };
-defineExpose({ addMarker, clearMarker });
 const handleResize = () => {
   const containerWidth = containerRef.value.clientWidth * containerScale().scaleX;
   const containerHeight = containerRef.value.clientHeight * containerScale().scaleY;
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
-  yztMap.updateSize();
+  map.updateSize();
 };
 // 加载事件
 onMounted(() => {
@@ -186,6 +141,15 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize);
 });
+const getMap = () => {
+  return map;
+};
+const getScale = () => {
+  return scale;
+};
+provide('getMap', getMap);
+provide('getScale', getScale);
+defineExpose({ addMarker, clearMarker });
 </script>
 
 <style scoped>
@@ -193,47 +157,6 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   position: relative;
-  .zoom-text {
-    position: absolute;
-    bottom: 52px;
-    right: 80px;
-    color: #eaf3fc;
-    font-size: 14px;
-  }
-  .right-tool {
-    position: absolute;
-    bottom: 50px;
-    right: 5px;
-  }
-  .mask-btn {
-    background-color: #04327c;
-    font-size: 12px;
-    border: 1px solid #91cfff;
-    color: #eaf3fc;
-    cursor: pointer;
-    padding: 3px 3px;
-    border-radius: 5px;
-    //margin-right: 5px;
-    cursor: pointer;
-  }
-  .model-btn {
-    background-color: #04327c;
-    font-size: 12px;
-    font-family: 'SourceHanSansCN';
-    border: 1px solid #91cfff;
-    color: #eaf3fc;
-    cursor: pointer;
-    padding: 3px 3px;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  .ruler-icon {
-    width: 14px;
-    height: 14px;
-    background: url('@/assets/images/map/ruler.png') no-repeat;
-    background-size: 100% 100%;
-    cursor: pointer;
-  }
   :deep(.ol-scale-line) {
     left: unset;
     bottom: 51px;

src/components/Map/index.vue

@@ -1,22 +1,12 @@
 <template>
   <div ref="containerRef" class="map-container">
     <div id="aMap" class="map-container2" :style="{ width: width, height: height }"></div>
-    <!-- 右下工具  -->
-    <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
-    <div class="right-tool">
-      <!-- 快捷缩放 -->
-      <QuickZoom v-model:zoom="mapState.zoom" @change-step="setMapZoom" />
-      <div class="flex" style="margin-top: 5px">
-        <div class="mask-btn" @click="handleShowMask">{{ showMask ? '显' : '隐' }}</div>
-        <div class="model-btn" @click="switchThreeDimensional">{{ mapState.isThreeDimensional ? '3D' : '2D' }}</div>
-        <div class="ruler-icon" style="margin-left: 5px" @click="changeScaleControl"></div>
-      </div>
-    </div>
+    <rightTool :mapState="mapState" type="AMap" :showMask="showMask" @changeShowMask="changeShowMask" />
   </div>
 </template>
 
 <script setup lang="ts" name="Map">
-import QuickZoom from './quickZoom.vue';
+import rightTool from './rightTool.vue';
 import ScaleLine from 'ol/control/ScaleLine';
 import { useAMap } from '@/hooks/AMap/useAMap';
 import { useDrawTool } from '@/hooks/AMap/useDrawTool';
@@ -84,7 +74,7 @@ const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
 
-const mapState = reactive({
+const mapState = reactive<MapState>({
   center: [110.925175, 21.678955],
   zoom: 8.5,
   minZoom: 6,
@@ -441,41 +431,6 @@ const zoomChangeHandler = () => {
   mapState.zoom = map.getZoom();
 };
 
-// 切换比例尺
-const changeScaleControl = () => {
-  mapState.showScale = !mapState.showScale;
-  if (mapState.showScale) {
-    map.addControl(new ScaleLine());
-  } else {
-    map.removeControl(new ScaleLine());
-  }
-};
-
-// 设置地图层级
-const setMapZoom = (value) => {
-  if (!map) return;
-  if (value === 1) {
-    map.setCenter([110.925175, 21.678955]);
-    map.setZoom(7.9);
-  } else if (value === 2) {
-    map.setCenter([110.925175, 21.6789558]);
-    map.setZoom(9.21);
-  } else if (value === 3) {
-    map.setCenter([110.925175, 21.678955]);
-    map.setZoom(11.38);
-  } else if (value === 4) {
-    map.setCenter([110.925175, 21.678955]);
-    map.setZoom(12.83);
-  }
-};
-
-// 切换2D、3D
-const switchThreeDimensional = () => {
-  mapState.isThreeDimensional = !mapState.isThreeDimensional;
-  const pitch = mapState.isThreeDimensional ? 45 : 0;
-  map.setPitch(pitch);
-};
-
 const setCenter = (item) => {
   map.setCenter([item.longitude, item.latitude]);
 };
@@ -486,10 +441,6 @@ const getMapUtils = () => {
 const getPlaceSearch = () => {
   return placeSearch;
 };
-const handleShowMask = () => {
-  emits('update:showMask', !props.showMask);
-};
-defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, getMap, drawTool, handleHover, trackPlayback, getMapUtils, getPlaceSearch });
 const handleResize = () => {
   const containerWidth = !!containerScale ? containerRef.value.clientWidth * containerScale().scaleX : 1;
   const containerHeight = !!containerScale ? containerRef.value.clientHeight * containerScale().scaleY : 1;
@@ -497,6 +448,9 @@ const handleResize = () => {
   height.value = containerHeight + 'px';
   map.resize();
 };
+const changeShowMask = () => {
+  emits('update:showMask', !props.showMask);
+};
 watch(
   () => appStore.showLeftSection,
   () => {
@@ -523,6 +477,22 @@ onUnmounted(() => {
   }
   window.removeEventListener('resize', handleResize);
 });
+
+provide('getMap', getMap);
+provide('getScale', getScale);
+defineExpose({
+  addMarker,
+  addSearchMarker,
+  setCenter,
+  getMarkers,
+  clearMarker,
+  getMap,
+  drawTool,
+  handleHover,
+  trackPlayback,
+  getMapUtils,
+  getPlaceSearch
+});
 </script>
 
 <style lang="scss" scoped>
@@ -536,48 +506,6 @@ onUnmounted(() => {
 .map-container {
   width: 100%;
   height: 100%;
-  .zoom-text {
-    position: absolute;
-    bottom: 52px;
-    right: 80px;
-    color: #eaf3fc;
-    font-size: 14px;
-  }
-  .right-tool {
-    position: absolute;
-    bottom: 90px;
-    right: 0px;
-    z-index: 2;
-  }
-  .mask-btn {
-    background-color: #04327c;
-    font-size: 12px;
-    border: 1px solid #91cfff;
-    color: #eaf3fc;
-    cursor: pointer;
-    padding: 3px 3px;
-    border-radius: 5px;
-    margin-right: 5px;
-    cursor: pointer;
-  }
-  .model-btn {
-    background-color: #04327c;
-    font-size: 12px;
-    font-family: 'SourceHanSansCN';
-    border: 1px solid #91cfff;
-    color: #eaf3fc;
-    cursor: pointer;
-    padding: 3px 3px;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  .ruler-icon {
-    width: 14px;
-    height: 14px;
-    background: url('@/assets/images/map/ruler.png') no-repeat;
-    background-size: 100% 100%;
-    cursor: pointer;
-  }
   :deep(.amap-scalecontrol) {
     left: unset !important;
     background-color: unset !important;

src/components/Map/rightTool.vue

@@ -0,0 +1,116 @@
+<template>
+  <!-- 右下工具  -->
+  <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
+  <div class="right-tool">
+    <!-- 快捷缩放 -->
+    <QuickZoom v-model:zoom="mapState.zoom" @change-step="setMapZoom" />
+    <div class="flex" style="margin-top: 5px">
+      <div class="mask-btn" @click="handleShowMask">{{ showMask ? '显' : '隐' }}</div>
+      <div v-if="type !== 'YztMap'" class="model-btn" @click="switchThreeDimensional">{{ mapState.isThreeDimensional ? '3D' : '2D' }}</div>
+      <div class="ruler-icon" style="margin-left: 5px" @click="changeScaleControl"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import QuickZoom from './quickZoom.vue';
+interface Props {
+  mapState: MapState;
+  type: string;
+  showMask: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'AMap'
+});
+const emits = defineEmits(['changeShowMask']);
+const getMap = inject('getMap');
+const getScale = inject('getScale');
+// 设置地图层级
+const setMapZoom = (value) => {
+  const map = props.type === 'AMap' ? getMap() : getMap().getView();
+  if (!map) return;
+  if (value === 1) {
+    map.setCenter([110.925175, 21.678955]);
+    map.setZoom(7.9);
+  } else if (value === 2) {
+    map.setCenter([110.925175, 21.6789558]);
+    map.setZoom(9.21);
+  } else if (value === 3) {
+    map.setCenter([110.925175, 21.678955]);
+    map.setZoom(11.38);
+  } else if (value === 4) {
+    map.setCenter([110.925175, 21.678955]);
+    map.setZoom(12.83);
+  }
+};
+
+// 切换2D、3D
+const switchThreeDimensional = () => {
+  const map = props.type === 'AMap' ? getMap() : getMap().getView();
+  props.mapState.isThreeDimensional = !props.mapState.isThreeDimensional;
+  const pitch = props.mapState.isThreeDimensional ? 45 : 0;
+  map.setPitch(pitch);
+};
+// 显隐遮罩层
+const handleShowMask = () => {
+  emits('changeShowMask');
+};
+
+// 切换比例尺
+const changeScaleControl = () => {
+  const map = getMap();
+  const scale = getScale();
+  props.mapState.showScale = !props.mapState.showScale;
+  if (props.mapState.showScale) {
+    map.addControl(scale);
+  } else {
+    map.removeControl(scale);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.zoom-text {
+  position: absolute;
+  bottom: 52px;
+  right: 80px;
+  color: #eaf3fc;
+  font-size: 14px;
+}
+.right-tool {
+  position: absolute;
+  bottom: 90px;
+  right: 0px;
+  z-index: 2;
+}
+.mask-btn {
+  background-color: #04327c;
+  font-size: 12px;
+  border: 1px solid #91cfff;
+  color: #eaf3fc;
+  cursor: pointer;
+  padding: 3px 3px;
+  border-radius: 5px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+.model-btn {
+  background-color: #04327c;
+  font-size: 12px;
+  font-family: 'SourceHanSansCN';
+  border: 1px solid #91cfff;
+  color: #eaf3fc;
+  cursor: pointer;
+  padding: 3px 3px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.ruler-icon {
+  width: 14px;
+  height: 14px;
+  background: url('@/assets/images/map/ruler.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+</style>

src/types/components.d.ts

@@ -114,6 +114,7 @@ declare module 'vue' {
     ParentView: typeof import('./../components/ParentView/index.vue')['default']
     QuickZoom: typeof import('./../components/Map/quickZoom.vue')['default']
     Render: typeof import('./../components/BuildCode/render.vue')['default']
+    RightTool: typeof import('./../components/Map/rightTool.vue')['default']
     RightToolbar: typeof import('./../components/RightToolbar/index.vue')['default']
     RoleSelect: typeof import('./../components/RoleSelect/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/types/map.d.ts

@@ -0,0 +1,22 @@
+interface MouseTool {
+  color?: string;
+  lineWidth?: string;
+  drawType?: string;
+  graphicsType: string;
+  text?: string;
+  fontSize?: string;
+  fontColor?: string;
+  lnglat?: string[];
+  title?: string;
+  icon?: string;
+  size?: number[];
+}
+
+interface MapState {
+  center: number[];
+  zoom: number;
+  minZoom: number;
+  maxZoom: number;
+  isThreeDimensional: boolean;
+  showScale: boolean;
+}

src/views/emergencyCommandMap/RightSection/StartPlan.vue

@@ -16,7 +16,7 @@
       </el-select>
       <div class="common-btn-primary2" @click="onStartPlan" v-show="planId === ''">启动预案</div>
       <div class="common-btn-primary2" @click="onCancelPlan" v-show="planId != ''">取消响应</div>
-      <div class="common-btn-primary2" @click="onTaskDelivery" v-show="planId === ''">预案任务下发</div>
+      <div class="common-btn-primary2" @click="onTaskDelivery">预案任务下发</div>
     </div>
     <div class="common-title-box">{{ planTitle }}</div>