主题设置问题

gerson

2025-02-09 8572e2e0c1655f1cf2a71da6b80ce132cbf545e6

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue

@@ -69,6 +69,7 @@
import LayerControl from './LayerControl.vue';
import PanelTool from './panelTool/index.vue';
import {
   getMapDrawStyles,
   getMapLayerGroupList,
   getMapLayersByPost,
   getMapThemeList,
@@ -99,31 +100,6 @@
   }
);

const changeTheme = async (themeId: string) => {
   const res = await switchMapTheme({
      theme_id: themeId,
      time: formatDate(new Date()),
   });
   const styles = (res?.styles ?? []).map((item) =>
      item.PSIZE
         ? new Style({
               image: new Circle({
                  radius: item.PSIZE,
                  fill: new Fill({ color: `#${item.PCOLOR}` }),
               }),
           })
         : null
   );
   const junctionsStyle = res?.['O_WDM_JUNCTIONS'] ?? {};
   junctionLayer?.setStyle((feature) => {
      const oname = feature.get('oname');
      if (!oname) return null;
      const styleIndex = junctionsStyle[oname]?.style_id;
      if (styleIndex == null) return null;
      const style = styles[styleIndex];
      return style;
   });
};
const colsArray = computed(() => {
   return props.data.cols ?? [];
});
@@ -297,9 +273,8 @@

const maxResolution = 1;

const getText = function (feature, resolution) {
   const oname = feature.get('oname');
   let text = `first-${oname[0]}`;
const getText = function (textContent, resolution) {
   let text = `${textContent}`;
   if (resolution > maxResolution) {
      text = '';
   }
@@ -314,10 +289,10 @@

   return text;
};
const createTextStyle = (feature, resolution) => {
const createTextStyle = (textContent, resolution) => {
   return new Style({
      text: new Text({
         text: getText(feature, resolution),
         text: getText(textContent, resolution),
         font: '14px Arial',
         fill: new Fill({ color: '#000' }),
         stroke: new Stroke({ color: '#fff', width: 2 }),
@@ -326,65 +301,99 @@
      }),
   });
};
const getLayerStyles = (layerId: string) => {
   switch (layerId) {
      case 'junction':
         const styleMap: Record<string, Style> = {};

         return function (feature, resolution) {
            const size = feature.get('psize');
            const pcolor = feature.get('pcolor');
            const otype = feature.get('otype');
            if (!size) return null;
            const key = `${size}_${pcolor}`;
            if (!styleMap[key]) {
               styleMap[key] = new Style({
                  image: new Circle({
                     radius: size,
                     fill: new Fill({ color: `#${pcolor}` }),
                  }),
               });
            }

            const textStyle = createTextStyle(feature, resolution);

            return [styleMap[key], textStyle];
         };
      case 'pipes':
         const styleMap2 = {};

         return function (feature, resolution) {
            const size = feature.get('lsize');
            const lcolor = feature.get('lcolor');
            const otype = feature.get('otype');
            if (!size) return null;
            const key = `${size}_${lcolor}`;
            if (!styleMap2[key]) {
               styleMap2[key] = new Style({
                  // image: new Circle({
                  //    radius: size,
                  //    fill: new Fill({ color: `#${color}` }),
                  // }),
                  stroke: new Stroke({
                     color: `#${lcolor}`,
                     width: size,
                  }),
               });
            }

            return styleMap2[key];
         };
      default:
         return undefined;
   }
const styleMap: Record<string, Record<string, Style>> = {
   point: {},
   line: {},
   polygon: {},
};

let junctionLayer: VectorTileLayer = null;
const unsupportedLayers = ['dma1', 'dma2', 'dma3'];
const layerStyleFunc = function (feature, resolution) {
   const shape = feature.getGeometry().getType();
   const styles = [];
   switch (shape) {
      case 'Point':
         const pSize = feature.get('psize');

         const pcolor = feature.get('pcolor');
         const pstyle = feature.get('pstyle');
         const pointStyle = olMap.value.getPointStyles({
            size: pSize,
            color: pcolor,
            style: pstyle,
         });

         styles.push(pointStyle);
         break;
      case 'LineString':
         const lSize = feature.get('lsize');
         const lColor = feature.get('lcolor');
         const lstyle = feature.get('lstyle');
         const pSize1 = feature.get('psize');
         const pcolor1 = feature.get('pcolor');
         const pStyle1 = feature.get('pstyle');
         const lineStyle = olMap.value.getLineStyles({
            lsize: lSize,
            lcolor: lColor,
            lstyle: lstyle,
            psize: pSize1,
            pcolor: pcolor1,
            pstyle: pStyle1,
         });
         styles.push(...lineStyle);
         break;
      case 'Polygon':
         const pColor = feature.get('pcolor');
         const lSize1 = feature.get('lsize');
         const lColor1 = feature.get('lcolor');
         const lstyle1 = feature.get('lstyle');
         const polygonStyle = olMap.value.getPolygonStyles({
            pcolor: pColor,
            lsize: lSize1,
            lcolor: lColor1,
            lstyle: lstyle1,
         });
         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 = feature.get('tstring');

   const tStringStyle = olMap.value.getLabelStyles({
      textContent: tString,
      resolution,
   });
   if (tStringStyle) {
      styles.push(tStringStyle);
   }
   //#endregion

   return styles;
};

const getGroupList = async () => {
   const res = await getMapLayerGroupList();
   const groupList = res?.values ?? [];
   return groupList;
};

const getDrawStyles = async () => {
   const res = await getMapDrawStyles();
   const styleList = res?.values ?? [];
   // console.log("🚀 ~ styleList:", styleList)
   olMap.value.setDrawStyles(styleList);
};

const getThemeList = async () => {
@@ -406,45 +415,26 @@
         id,
         title: curVal.title,
         type: 'theme',
         _isSet: false,
         get isSet() {
            return this._isSet;
         },
         set isSet(val) {
            this._isSet = val;
            if(val){
               const style = junctionLayer.getStyleFunction();
               junctionLayer.set('originStyle',style);
               changeTheme(this.id)

            }else{
               const originStyle = junctionLayer.get('originStyle');
               console.log("🚀 ~ originStyle:", originStyle)
               junctionLayer.setStyle(originStyle);
            }
         },
         activeTheme: null,
         legends: null,
      };
      mapGroupItem.children.push(data);
      return preVal;
   }, []);
   olMap.value.setAllThemes(themeTreeData);
   console.log('🚀 ~ themeTreeData:', themeTreeData);
};

const initVectorTileLayer = async () => {
   await getDrawStyles();
   const res = await getMapLayersByPost();
   const layers = reverse(res?.layers ?? []);
   if (layers.length === 0) return;
   const layerModels = [];
   for (const item of layers) {
      const layer = olMap.value.addCustomLayer(
         `${MAIN_URL}map/get_vector_tile?x={x}&y={y}&z={z}&layer_id=${item.id}`,
         getLayerStyles(item.id)
      );
      const styleFunc = olMap.value.unsupportedLayers.includes(item.id) ? undefined : layerStyleFunc;
      const layer = olMap.value.addCustomLayer(`${MAIN_URL}map/get_vector_tile?x={x}&y={y}&z={z}&layer_id=${item.id}`, styleFunc);

      layer.set('originStyle', styleFunc);
      layerModels.push(layer);
      if (item.id === 'junction') {
         junctionLayer = layer;
      }
   }
   getGroupList().then((groupList) => {
      olMap.value.setAllLayers(layerModels, layers, groupList);