地图对话

wujingjing

2025-02-26 08c6ecf506bfc7003894775fe57d98d9b11f3d9e

 src/model/map/OLMap.ts

@@ -30,6 +30,10 @@
import { Logger } from '../logger/Logger';
import { MarkerOverlay } from './overlay/marker';
import { getCurrentPosition } from '/@/utils/brower';
import { travelTree } from '/@/utils/util';
import { ElLoadingService } from 'element-plus';
import { switchMapTheme } from '/@/api/map';
import { formatDate } from '/@/utils/formatTime';

export type LangType = 'zh_cn' | 'en';
export const enum GaoDeSourceType {
@@ -88,6 +92,9 @@

   /** @description 图层控制信息 */
   layerInfo = ref([] as any[]);

   /** @description 图层控制信息 */
   legendList = ref([] as any[]);

   drawStyles = ref([] as any[]);

@@ -813,7 +820,6 @@
            // 合并范围
            return extend(extent, layerExtent);
         }, extent);

      }

      // 聚焦到合并后的范围
@@ -833,6 +839,189 @@
      }, []);
   }

   setLayerVisible(layerId: string, visible: boolean) {
      const layer = this.getAllLayers().find((item) => item.id === layerId);
      if (layer) {
         layer.isVisible = visible;
      }
   }

   setThemeById(themeId: string) {
      let group;
      let theme;
      travelTree(this.themeInfo.value, (item,index,array,parent) => {
         if (item.type === 'theme' && item.id === themeId) {
            group = parent;
            theme = item;
            return true;
         }
      });
      if (group) {
         group.activeTheme = themeId;
         this.handleThemeChange(themeId, group);
      }
   }

   async changeTheme(ids: string) {
      const loadingInstance = ElLoadingService({
         text: '加载主题中...',
         target: '.layout-parent',
      });
      const res = await switchMapTheme({
         theme_id: ids,
         time: formatDate(new Date()),
      }).finally(() => {
         loadingInstance.close();
      });

      // 加入主题之后的样式函数
      const themeLayerStyleFunc = (feature, resolution) => {
         const otype = feature.get('otype');
         const oname = feature.get('oname');
         // oname 映射样式
         const onameStyleMap = res?.[`O_${otype}`] ?? {};
         const themeStyles = res?.styles ?? [];
         const styleIndex = onameStyleMap[oname]?.style_id;
         const themeStyle = styleIndex == null ? null : themeStyles[styleIndex];
         // if(themeStyle){
         // }
         const shape = feature.getGeometry().getType();
         const styles = [];
         switch (shape) {
            case 'Point':
               const pSize = themeStyle?.PSIZE ?? feature.get('psize');

               const pcolor = themeStyle?.PCOLOR ?? feature.get('pcolor');

               const pStyle = themeStyle?.PSTYLE ?? feature.get('pstyle');

               const pointStyle = this.getPointStyles({
                  size: pSize,
                  color: pcolor,
                  style: pStyle,
               });
               pointStyle && styles.push(pointStyle);
               break;
            case 'LineString':
               const lSize = themeStyle?.LSIZE ?? feature.get('lsize');
               const lColor = themeStyle?.LCOLOR ?? feature.get('lcolor');
               const lStyle = themeStyle?.LSTYLE ?? feature.get('lstyle');

               const pSize1 = themeStyle?.PSIZE ?? feature.get('psize');
               const pcolor1 = themeStyle?.PCOLOR ?? feature.get('pcolor');
               const pStyle1 = themeStyle?.PSTYLE ?? feature.get('pstyle');

               const lineStyle = this.getLineStyles({
                  lsize: lSize,
                  lcolor: lColor,
                  lstyle: lStyle,
                  psize: pSize1,
                  pcolor: pcolor1,
                  pstyle: pStyle1,
               });
               lineStyle && styles.push(...lineStyle);

               break;
            case 'Polygon':
               const pColor = themeStyle?.PCOLOR ?? feature.get('pcolor');
               const lSize1 = themeStyle?.LSIZE ?? feature.get('lsize');
               const lColor1 = themeStyle?.LCOLOR ?? feature.get('lcolor');
               const lstyle1 = themeStyle?.LSTYLE ?? feature.get('lstyle');
               const polygonStyle = this.getPolygonStyles({
                  pcolor: pColor,
                  lsize: lSize1,
                  lcolor: lColor1,
                  lstyle: lstyle1,
               });
               polygonStyle && styles.push(...polygonStyle);

               break;
            default:
               break;
         }

         // switch (otype) {
         //    case 'WDM_JUNCTIONS':
         //       const textStyle = createTextStyle(feature, resolution);
         //       styles.push(textStyle);

         //    case 'WDM_PIPES':
         //       break;
         // }
         //#region ====================== 添加标注 ======================
         const tString = themeStyle?.TSTRING ?? feature.get('tstring');
         const tStringStyle = this.getLabelStyles({
            textContent: tString,
            resolution,
         });
         tStringStyle && styles.push(tStringStyle);
         //#endregion

         return styles;
      };
      const allLayers = this.getAllLayers();
      for (const item of allLayers) {
         if (this.unsupportedLayers.includes(item.id)) {
            continue;
         }
         item.model.setStyle(themeLayerStyleFunc);
      }
      return res?.legends ?? [];
   }

   async handleThemeChange(val?, themeGroup?) {
      const allIds = [];
      for (const item of this.themeInfo.value) {
         if (item.activeTheme) {
            allIds.push(item.activeTheme);
         }
      }
      const ids = allIds.join(',');

      if (!ids) {
         const allLayers = this.getAllLayerModels();
         for (const item of allLayers) {
            const originStyle = item.get('originStyle');
            originStyle && item.setStyle(originStyle);
         }
         return;
      }
      const legends = await this.changeTheme(ids);
      this.legendList.value = this.parseLegends(legends);
   }

   parseLegends(legends) {
      const result = legends.map((item) => {
         const isEqual = item.operate === '=';
         const result = {
            ...item,
            legend: item.legend.map((legendItem, index, array) => {
               const preItem = array[index - 1];
               let label = '';
               if (isEqual) {
                  label = legendItem.value;
               } else if (preItem) {
                  label = `>${preItem.value}且${item.operate}${legendItem.value}`;
               } else {
                  label = `${item.operate}${legendItem.value}`;
               }
               return {
                  ...legendItem,
                  label: label,
               };
            }),
         };

         result.legend.push({
            style: item.default,
            value: '',
            label: result.legend.length == 0 ? '默认' : `>${item.legend[item.legend.length - 1].value}`,
         });
         return result;
      });
      return result;
   }

   /** @description 记录所有图层 */
   setAllLayers(layerModels: Layer[], layers: any[], layerGroup: any[]) {
      this.layerInfo.value = layerGroup.reduce((preVal, curVal) => {