地图优化2

src/components/Map/YztMap/index.vue

@@ -19,7 +19,6 @@
 import 'ol/ol.css';
 import mmJson from '@/assets/json/mm2.json';
 import { olMap } from '@/utils/olMap/olMap';
-import { ScaleLine } from 'ol/control';
 import { getPointInfoList } from '@/api/globalMap';
 import { getDictLabel } from '@/utils/dict';
 import { methodList, titleList } from '../data';
@@ -92,7 +91,6 @@ watch(
     }
   }
 );
-let scale;
 const init = () => {
   mapStore.setMapLoaded(false);
   mapUtils = new olMap({
@@ -102,29 +100,14 @@ const init = () => {
     zoom: mapStore.mapState.zoom,
     minZoom: mapStore.mapState.minZoom,
     maxZoom: mapStore.mapState.maxZoom,
+    showScale: true,
     drawTool: {
-      use: true,
-      // color: props.color,
-      // drawType: props.drawType,
-      // graphicsType: props.graphicsType,
-      // 绘制完成事件
-      onDrawCompleted: (data, overlaysData, obj) => {
-        emits('selectGraphics', data, overlaysData.length.toString());
-        // 点击空间分析
-        obj.on('click', function () {
-          // 没在编辑时
-          if (!props.drawing) {
-            emits('selectGraphics', data);
-          }
-        });
-      }
+      use: true
     },
     // 加载完成事件
     onLoadCompleted: (YztMap) => {
       map = YztMap;
       mapStore.setMapLoaded(true);
-      scale = new ScaleLine();
-      map.addControl(scale);
       map.getView().on('change:resolution', () => {
         mapStore.setZoom(map.getView().getZoom().toFixed(2));
       });
@@ -343,9 +326,6 @@ const handleResize = () => {
 const getMap = () => {
   return map;
 };
-const getScale = () => {
-  return scale;
-};
 const getMapUtils = () => {
   return mapUtils;
 };
@@ -361,7 +341,6 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize);
 });
-provide('getScale', getScale);
 defineExpose({ getMap, getMapUtils, getDrawTool, addMarker, clearMarker });
 </script>
 

src/components/Map/index.vue

@@ -43,7 +43,7 @@ const emits = defineEmits([
 const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
-let map, AMap, scale, placeSearch;
+let map, AMap, placeSearch;
 
 // 鼠标绘制工具
 const drawTool = useDrawTool();
@@ -66,7 +66,6 @@ const mapUtils = useAMap({
     AMap = getAMap();
     map = getMap();
     mapStore.setMapLoaded(true);
-    scale = getScale();
     if (!['logical', 'vectorgraph'].includes(mapStore.activeMap)) {
       switchMap(mapStore.activeMap);
     }
@@ -144,7 +143,6 @@ const {
   addMarker,
   addSearchMarker,
   clearMarker,
-  getScale,
   showInfo,
   hideInfo,
   handleHover,
@@ -358,7 +356,6 @@ onUnmounted(() => {
   window.removeEventListener('resize', handleResize);
 });
 
-provide('getScale', getScale);
 defineExpose({
   addMarker,
   addSearchMarker,

src/components/Map/rightTool.vue

@@ -20,13 +20,14 @@ import useMapStore from '@/store/modules/map';
 
 const mapStore = useMapStore();
 const getMap = inject('getMap');
-const getScale = inject('getScale');
-let map;
+const getMapUtils = inject('getMapUtils');
+let map, mapUtils;
 watch(
   () => mapStore.mapLoaded,
   (loaded) => {
     if (loaded) {
       map = getMap();
+      mapUtils = getMapUtils();
     }
   },
   {
@@ -35,29 +36,29 @@ watch(
 );
 // 设置地图层级
 const setMapZoom = (value) => {
-  const map = mapStore.AMapType.includes(mapStore.activeMap) ? map : map.getView();
-  if (!map) return;
+  const map2 = mapStore.AMapType.includes(mapStore.activeMap) ? map : map.getView();
+  if (!map2) return;
   if (value === 1) {
-    map.setCenter([110.925175, 21.678955]);
-    map.setZoom(7.9);
+    map2.setCenter([110.925175, 21.678955]);
+    map2.setZoom(7.9);
   } else if (value === 2) {
-    map.setCenter([110.925175, 21.6789558]);
-    map.setZoom(9.21);
+    map2.setCenter([110.925175, 21.6789558]);
+    map2.setZoom(9.21);
   } else if (value === 3) {
-    map.setCenter([110.925175, 21.678955]);
-    map.setZoom(11.38);
+    map2.setCenter([110.925175, 21.678955]);
+    map2.setZoom(11.38);
   } else if (value === 4) {
-    map.setCenter([110.925175, 21.678955]);
-    map.setZoom(12.83);
+    map2.setCenter([110.925175, 21.678955]);
+    map2.setZoom(12.83);
   }
 };
 
 // 切换2D、3D
 const switchThreeDimensional = () => {
-  const map = mapStore.AMapType.includes(mapStore.activeMap) ? map : map.getView();
+  const map2 = mapStore.AMapType.includes(mapStore.activeMap) ? map : map.getView();
   mapStore.mapState.isThreeDimensional = !mapStore.mapState.isThreeDimensional;
   const pitch = mapStore.mapState.isThreeDimensional ? 45 : 0;
-  map.setPitch(pitch);
+  map2.setPitch(pitch);
 };
 // 显隐遮罩层
 const handleShowMask = () => {
@@ -66,7 +67,7 @@ const handleShowMask = () => {
 
 // 切换比例尺
 const changeScaleControl = () => {
-  const scale = getScale();
+  const scale = mapUtils.getScale();
   mapStore.mapState.showScale = !mapStore.mapState.showScale;
   if (mapStore.mapState.showScale) {
     map.addControl(scale);

src/components/TimeAxis/index.vue

@@ -146,7 +146,6 @@ const initDataToPlay = (obj) => {
   });
   // 路线轨迹
   if (timeAxisState.type === 'track') {
-    map = map;
     if (mapStore.AMapType.includes(mapStore.activeMap)) {
       AMap = mapUtils.getAMap();
       trackPlayback1();

src/types/components.d.ts

@@ -20,28 +20,17 @@ declare module 'vue' {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
-    ElDrawer: typeof import('element-plus/es')['ElDrawer']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']

src/utils/olMap/olMap.ts

@@ -18,7 +18,7 @@ import WMTSCapabilities from 'ol/format/WMTSCapabilities';
 import { Fill, Stroke } from 'ol/style';
 import proj4 from 'proj4';
 import { register } from 'ol/proj/proj4';
-import { defaults } from 'ol/control';
+import { defaults, ScaleLine } from 'ol/control';
 import Vector from 'ol/layer/Vector';
 import SourceVector from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
@@ -99,6 +99,7 @@ export class olMap {
   private drawing;
   private path;
   private anyLine;
+  private scale;
 
   constructor(options) {
     this.options = options;
@@ -119,7 +120,8 @@ export class olMap {
     });
     // 初始化比例尺
     if (options.showScale) {
-      // this.map.addControl(new AMap.Scale());
+      this.scale = new ScaleLine();
+      this.map.addControl(this.scale);
     }
     if (options.drawTool?.use) {
       this.initMouseTool(options.drawTool);
@@ -1227,6 +1229,9 @@ export class olMap {
   getMap() {
     return this.map;
   }
+  getScale() {
+    return this.scale;
+  }
   getMouseTool() {
     return this.drawTool;
   }

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -903,7 +903,7 @@ const getWebSocketData = (data) => {
         data2.push(parseContent);
       }
     });
-    const res = mapStore.getMapUtils?.drawData(data2);
+    const res = mapUtils.drawData(data2);
     removeAllOverlay();
     res.forEach((item, index) => {
       item.on('rightclick', handleRightClick);

src/views/globalMap/RightMenu/PotentialFloodHazard.vue

@@ -60,16 +60,12 @@
       </div>
     </div>
   </div>
-  <NearbyVideos v-if="showNearbyVideos2" v-model="showNearbyVideos2" :getDataMethod="getDataMethod" />
+  <NearbyVideos v-if="showNearbyVideos2" v-model="showNearbyVideos2" :get-data-method="getDataMethod" />
 </template>
 
 <script lang="ts" setup>
 import { Search } from '@element-plus/icons-vue';
-import {
-  getWaterloggedAllVideoInfo,
-  getWaterloggedRoadsList,
-  getWaterloggedRoadsUpdateTime
-} from '@/api/globalMap/potentialFloodHazard';
+import { getWaterloggedAllVideoInfo, getWaterloggedRoadsList, getWaterloggedRoadsUpdateTime } from '@/api/globalMap/potentialFloodHazard';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type } = toRefs<any>(proxy?.useDict('district_type'));

src/views/globalMap/index.vue

@@ -371,7 +371,7 @@ watch(
   () => mapStore.trackState.show,
   (show) => {
     if (!!show) {
-      const dom = YMapType.includes(mapStore.activeMap) ? map2Ref.value : mapRef.value;
+      const dom = AMapType.includes(mapStore.activeMap) ? mapRef.value : map2Ref.value;
       dom?.addMarker(adjustPoint(mapStore.trackState.data));
       mapStore.trackState.data = [];
       mapStore.trackState.show = false;