qy-vue-plugins 1.0.2-beta → 1.0.2

package/package/mapboxV2/utils.ts

@@ -17,6 +17,7 @@ import type {
 } from "../types/map"; // 导入地图相关的类型定义
 import { defaultPointLayerPaintConfig, defaultStyleConfig } from "./constant"; // 导入默认的点图层绘制配置和默认样式配置
 import { GeoTIFFImage } from "geotiff";
+import type { PointAssetOption } from "./types/map-layer";
 
 /**
  * 获取图例线条样式
@@ -96,6 +97,9 @@ export function parseLayerPaintConfig<T>(
       return JSON.parse(layerPaintConfig || "{}") as T;
     case "shape": // 形状图层
     case "shp": // SHP 文件图层
+    case "kml": // KML 文件图层
+    case "kmz": // KMZ 文件图层
+    case "tif": // TIF 文件图层
       // 对于symbol和shape类型，可能没有特定的配置
       // 如果没有提供配置，则返回默认样式配置
       if (!layerPaintConfig) {
@@ -156,14 +160,100 @@ export function getSourceId(layer: GeographicLayerEntity): string {
  */
 export function parseStyleConfig(layer: GeographicLayerEntity): MapStyleConfig {
   try {
-    return layer.layerPaintConfig
+    const styleConfig = layer.layerPaintConfig
       ? JSON.parse(layer.layerPaintConfig)
       : defaultStyleConfig;
+
+    if (styleConfig && typeof styleConfig === "object") {
+      const config = styleConfig as any;
+      const mergedConfig: any = {
+        ...defaultStyleConfig,
+        ...config,
+      };
+      const symbolConfigList = Array.isArray(config.symbolConfigList)
+        ? config.symbolConfigList
+        : [];
+      const circleConfigList = Array.isArray(config.circleConfigList)
+        ? config.circleConfigList
+        : [];
+
+      // 兼容新老字段：读取时双向兜底，避免任一链路缺字段导致渲染中断
+      if (!symbolConfigList.length && circleConfigList.length) {
+        mergedConfig.symbolConfigList = JSON.parse(
+          JSON.stringify(circleConfigList),
+        );
+      }
+      if (!circleConfigList.length && symbolConfigList.length) {
+        mergedConfig.circleConfigList = JSON.parse(
+          JSON.stringify(symbolConfigList),
+        );
+      }
+
+      if (
+        !Array.isArray(mergedConfig.fillColorList) ||
+        mergedConfig.fillColorList.length === 0
+      ) {
+        mergedConfig.fillColorList = JSON.parse(
+          JSON.stringify(defaultStyleConfig.fillColorList || []),
+        );
+      }
+      if (
+        !Array.isArray(mergedConfig.outlineConfigList) ||
+        mergedConfig.outlineConfigList.length === 0
+      ) {
+        mergedConfig.outlineConfigList = JSON.parse(
+          JSON.stringify(defaultStyleConfig.outlineConfigList || []),
+        );
+      }
+      if (
+        !Array.isArray(mergedConfig.symbolConfigList) ||
+        mergedConfig.symbolConfigList.length === 0
+      ) {
+        mergedConfig.symbolConfigList = JSON.parse(
+          JSON.stringify(defaultStyleConfig.symbolConfigList || []),
+        );
+      }
+      if (
+        !Array.isArray(mergedConfig.circleConfigList) ||
+        mergedConfig.circleConfigList.length === 0
+      ) {
+        mergedConfig.circleConfigList = JSON.parse(
+          JSON.stringify(defaultStyleConfig.circleConfigList || []),
+        );
+      }
+      if (
+        !mergedConfig.fillOpacityConfig ||
+        typeof mergedConfig.fillOpacityConfig.value !== "number"
+      ) {
+        mergedConfig.fillOpacityConfig = JSON.parse(
+          JSON.stringify(defaultStyleConfig.fillOpacityConfig || { value: 1 }),
+        );
+      }
+
+      return mergedConfig as MapStyleConfig;
+    }
+
+    return defaultStyleConfig;
   } catch (e) {
     return defaultStyleConfig;
   }
 }
 
+const getPointStyleList = (styleConfig: MapStyleConfig): CircleConfig[] => {
+  const symbolConfigList = (styleConfig as any).symbolConfigList as
+    | CircleConfig[]
+    | undefined;
+  const circleConfigList = styleConfig.circleConfigList;
+
+  if (Array.isArray(symbolConfigList) && symbolConfigList.length > 0) {
+    return JSON.parse(JSON.stringify(symbolConfigList));
+  }
+  if (Array.isArray(circleConfigList) && circleConfigList.length > 0) {
+    return JSON.parse(JSON.stringify(circleConfigList));
+  }
+  return JSON.parse(JSON.stringify(defaultStyleConfig.circleConfigList || []));
+};
+
 /**
  * 获取图层类型
  * @param layer 地理数据图层实体
@@ -175,9 +265,13 @@ export function getLayerType(layer: GeographicLayerEntity): MapBoxLayerType {
   let result: MapBoxLayerType = "fill";
   switch (layer.layerType) {
     case "shp":
+    case "kml":
+    case "kmz":
       // 根据 layerShapes 判断几何类型
       if (layer.layerShapes) {
-        const shapes = layer.layerShapes.split(",");
+        const shapes = layer.layerShapes
+          .split(",")
+          .map((s) => s.trim().toLowerCase());
         // 优先返回 polygon，其次是 line，最后是 point
         // 但当只有单一类型时返回对应类型
         if (shapes.length === 1) {
@@ -204,8 +298,9 @@ export function getLayerType(layer: GeographicLayerEntity): MapBoxLayerType {
       result = "circle";
       if (layer.layerPaintConfig) {
         const config = JSON.parse(layer.layerPaintConfig);
-        if (config.circleConfigList && config.circleConfigList?.length > 0) {
-          if (config.circleConfigList[0].circleType == "symbol") {
+        const pointStyleList = config.symbolConfigList || config.circleConfigList;
+        if (pointStyleList && pointStyleList?.length > 0) {
+          if (pointStyleList[0].circleType == "symbol") {
             result = "symbol";
           }
         }
@@ -217,21 +312,6 @@ export function getLayerType(layer: GeographicLayerEntity): MapBoxLayerType {
   return result;
 }
 
-/**
- * 过滤填充颜色列表
- * @param list 填充颜色列表
- * @returns 过滤后的填充颜色列表，只保留key为字符串且value有值的项
- * @description 用于清理无效的填充颜色配置项
- */
-function filterFillColorList(list: FillColor[]) {
-  if (list) {
-    return list.filter((ele) => {
-      return typeof ele.key == "string" && ele.value;
-    });
-  } else {
-    return [];
-  }
-}
 /**
  * 获取填充样式
  * @param styleConfig 地图样式配置
@@ -240,33 +320,48 @@ function filterFillColorList(list: FillColor[]) {
  */
 export function getFillStyle(styleConfig: MapStyleConfig) {
   try {
-    // 深拷贝并过滤填充颜色列表
-    let fillColorList = [
-      ...filterFillColorList(
-        JSON.parse(JSON.stringify(styleConfig.fillColorList)),
-      ),
-    ];
     let fillStyle: Record<string, any> = {};
-    const originFillColorList = JSON.parse(
+
+    // 先重新排序，确保默认配置在最后
+    let sortedFillColorList = JSON.parse(
       JSON.stringify(styleConfig.fillColorList),
     );
-    // 获取默认颜色配置（列表中的最后一项）
-    const defaultColorConfig =
-      originFillColorList[originFillColorList.length - 1];
-    // 设置默认的填充颜色、透明度和轮廓颜色
-    fillStyle["fill-color"] = [defaultColorConfig.color];
-    fillStyle["fill-opacity"] = defaultColorConfig.opacity;
-    fillStyle["fill-outline-color"] = defaultColorConfig.color;
+    const defaultConfig = sortedFillColorList.find(
+      (c: FillColor) => c.type === "default",
+    );
+    const customConfigs = sortedFillColorList.filter(
+      (c: FillColor) => c.type === "custom",
+    );
+    if (defaultConfig) {
+      sortedFillColorList = [...customConfigs, defaultConfig];
+    }
+
+    console.log("[getFillStyle] 排序后的 fillColorList:", sortedFillColorList);
+
+    // 过滤掉无效的自定义配置（必须有 key 和 value）
+    let fillColorList = sortedFillColorList.filter((c: FillColor) => {
+      if (c.type === "custom") {
+        return c.key && c.value;
+      }
+      return true; // 保留默认配置
+    });
+
+    // 获取默认颜色配置（现在一定在最后一项）
+    const defaultColorConfig = fillColorList[fillColorList.length - 1];
+
+    if (!defaultColorConfig || defaultColorConfig.type !== "default") {
+      console.warn("[getFillStyle] 未找到默认配置，使用系统默认颜色");
+      fillStyle["fill-color"] = "rgba(103, 194, 58, 0.6)";
+      fillStyle["fill-outline-color"] = "rgba(103, 194, 58, 1)";
+      return fillStyle;
+    }
+
+    console.log("[getFillStyle] 默认颜色配置:", defaultColorConfig);
+
     // 用于分组处理相同key的颜色配置
     let fillColorGroupList: { list: FillColor[]; key: string }[] = [];
-    // 如果存在透明度配置，则覆盖默认透明度
-    if (
-      styleConfig.fillOpacityConfig &&
-      styleConfig.fillOpacityConfig.value != null
-    ) {
-      fillStyle["fill-opacity"] = styleConfig.fillOpacityConfig.value;
-    }
-    fillColorList.forEach((colorConfig) => {
+
+    fillColorList.forEach((colorConfig: FillColor) => {
       if (colorConfig.type == "custom") {
         let findColorConfigGroupIndex = -1;
         fillColorGroupList.forEach((configGroup, configGroupIndex) => {
@@ -284,24 +379,46 @@ export function getFillStyle(styleConfig: MapStyleConfig) {
         }
       }
     });
-    // console.log("fillColorGroupList--->", fillColorGroupList)
-    if (fillColorGroupList.length) {
-      fillColorGroupList.forEach((colorConfigGroup) => {
+
+    console.log("[getFillStyle] fillColorGroupList:", fillColorGroupList);
+
+    // 构建填充颜色样式（支持条件渲染）
+    if (fillColorGroupList.length > 0) {
+      // 有条件配置，使用 match 表达式
+      let colorExpression: any = defaultColorConfig.color;
+
+      // 为每个分组构造嵌套 match，并统一按字符串比较，
+      // 避免表单值和 GeoJSON 属性值类型不一致时匹配失败。
+      [...fillColorGroupList].reverse().forEach((colorConfigGroup) => {
+        const groupExpression: any[] = [
+          "match",
+          ["to-string", ["get", colorConfigGroup.key]],
+        ];
+
         colorConfigGroup.list.forEach((colorConfig) => {
-          fillStyle["fill-color"].unshift(colorConfig.color);
-          fillStyle["fill-color"].unshift(colorConfig.value);
+          groupExpression.push(String(colorConfig.value));
+          groupExpression.push(colorConfig.color);
         });
-        fillStyle["fill-color"].unshift(["get", colorConfigGroup.key]);
-        fillStyle["fill-color"].unshift("match");
+
+        groupExpression.push(colorExpression);
+        colorExpression = groupExpression;
       });
+
+      fillStyle["fill-color"] = colorExpression;
+      console.log("[getFillStyle] 使用条件渲染，colorExpression:", colorExpression);
+    } else {
+      // 没有条件配置，使用单一颜色
+      fillStyle["fill-color"] = defaultColorConfig.color;
+      console.log("[getFillStyle] 使用单一颜色:", defaultColorConfig.color);
     }
-    if (fillStyle["fill-color"].length == 1) {
-      fillStyle["fill-color"] = fillStyle["fill-color"][0];
-    }
-    console.log("生成fillStyle成功---->", fillStyle);
+
+    fillStyle["fill-outline-color"] = defaultColorConfig.color;
+    fillStyle["fill-opacity"] = styleConfig?.fillOpacityConfig?.value ?? 1;
+
+    console.log("[getFillStyle] 生成 fillStyle 成功:", fillStyle);
     return fillStyle;
   } catch (e) {
-    console.log("生成fillStyle失败", e);
+    console.log("[getFillStyle] 生成 fillStyle 失败:", e);
   }
 }
 
@@ -349,30 +466,48 @@ export function getOutLineStyle(styleConfig: MapStyleConfig) {
   try {
     let { outlineConfigList } = styleConfig;
     if (!outlineConfigList || outlineConfigList.length === 0) {
-      console.warn("outlineConfigList 为空");
-      return {};
+      console.warn("[getOutLineStyle] outlineConfigList 为空，使用默认样式");
+      return {
+        "line-color": "rgba(103, 194, 58, 1)",
+        "line-width": 2,
+        "line-dasharray": ["literal", []],
+      };
     }
 
-    // 深拷贝配置列表
-    const originOutlineConfigList = JSON.parse(
-      JSON.stringify(outlineConfigList),
+    // 先重新排序，确保默认配置在最后
+    // 这样在处理 match 表达式时，default 配置会作为兜底值
+    let sortedOutlineConfigList = JSON.parse(JSON.stringify(outlineConfigList));
+    const defaultConfig = sortedOutlineConfigList.find(
+      (c: OutlineConfig) => c.type === "default",
+    );
+    const customConfigs = sortedOutlineConfigList.filter(
+      (c: OutlineConfig) => c.type === "custom",
     );
+    if (defaultConfig) {
+      sortedOutlineConfigList = [...customConfigs, defaultConfig];
+    }
 
-    // 找到默认配置（type === "default"）
-    const defaultConfig =
-      originOutlineConfigList.find(
-        (config: OutlineConfig) => config.type === "default",
-      ) || originOutlineConfigList[originOutlineConfigList.length - 1];
+    // 找到默认配置（现在一定在最后一项）
+    const defaultOutlineConfig =
+      sortedOutlineConfigList[sortedOutlineConfigList.length - 1];
 
-    // 初始化样式对象
+    if (!defaultOutlineConfig || defaultOutlineConfig.type !== "default") {
+      console.warn("[getOutLineStyle] 未找到默认配置，使用系统默认值");
+      return {
+        "line-color": "rgba(103, 194, 58, 1)",
+        "line-width": 1,
+      };
+    }
+
+    // 初始化样式对象（使用 default 配置）
     let outlineStyle: Record<string, any> = {
-      "line-color": defaultConfig.outlineColor || "rgba(103, 194, 58, 1)",
-      "line-opacity": defaultConfig.outlineOpacity ?? 1,
-      "line-width": defaultConfig.outlineWidth ?? 1,
+      "line-color":
+        defaultOutlineConfig.outlineColor || "rgba(103, 194, 58, 1)",
+      "line-width": defaultOutlineConfig.outlineWidth ?? 1,
     };
 
     // 设置线型（虚线/实线）
-    if (defaultConfig.lineStyle === "dash") {
+    if (defaultOutlineConfig.lineStyle === "dash") {
       outlineStyle["line-dasharray"] = [2, 2];
     } else {
       outlineStyle["line-dasharray"] = ["literal", []];
@@ -382,8 +517,8 @@ export function getOutLineStyle(styleConfig: MapStyleConfig) {
     let outlineGroupList: { list: OutlineConfig[]; key: string }[] = [];
 
     // 分组处理自定义配置
-    outlineConfigList.forEach((config) => {
-      if (config.type === "custom" && config.key) {
+    sortedOutlineConfigList.forEach((config: OutlineConfig) => {
+      if (config.type === "custom" && config.key && config.value) {
         let findGroupIndex = -1;
         outlineGroupList.forEach((group, groupIndex) => {
           if (group.key === config.key) {
@@ -401,17 +536,14 @@ export function getOutLineStyle(styleConfig: MapStyleConfig) {
       }
     });
 
-    // 如果有自定义配置，使用 match 表达式
+    // 如果有自定义配置，使用 Mapbox match 表达式实现数据驱动的样式
+    // 例如：根据 name 字段的值显示不同颜色的线
     if (outlineGroupList.length > 0) {
       // 为每个属性构建 match 表达式
-      ["line-color", "line-opacity", "line-width"].forEach((prop) => {
+      ["line-color", "line-width"].forEach((prop) => {
         // 获取配置的属性名
         const configKey =
-          prop === "line-color"
-            ? "outlineColor"
-            : prop === "line-opacity"
-              ? "outlineOpacity"
-              : "outlineWidth";
+          prop === "line-color" ? "outlineColor" : "outlineWidth";
 
         // 检查是否有自定义配置需要处理
         const hasCustomConfig = outlineGroupList.some((group) =>
@@ -419,7 +551,10 @@ export function getOutLineStyle(styleConfig: MapStyleConfig) {
         );
 
         if (hasCustomConfig) {
-          const expr: any[] = ["match", ["get", outlineGroupList[0].key]];
+          const expr: any[] = [
+            "match",
+            ["to-string", ["get", outlineGroupList[0].key]],
+          ];
 
           // 为每个组添加条件
           outlineGroupList.forEach((group) => {
@@ -428,13 +563,13 @@ export function getOutLineStyle(styleConfig: MapStyleConfig) {
                 config.value !== undefined &&
                 config[configKey] !== undefined
               ) {
-                expr.push(config.value);
+                expr.push(String(config.value));
                 expr.push(config[configKey]);
               }
             });
           });
 
-          // 添加默认值
+          // 添加默认值（使用 default 配置）
           expr.push(defaultConfig[configKey] ?? outlineStyle[prop]);
 
           outlineStyle[prop] = expr;
@@ -446,11 +581,14 @@ export function getOutLineStyle(styleConfig: MapStyleConfig) {
         group.list.some((c) => c.lineStyle !== undefined),
       );
       if (hasLineStyleConfig) {
-        const dashExpr: any[] = ["match", ["get", outlineGroupList[0].key]];
+        const dashExpr: any[] = [
+          "match",
+          ["to-string", ["get", outlineGroupList[0].key]],
+        ];
         outlineGroupList.forEach((group) => {
           group.list.forEach((config) => {
             if (config.value !== undefined && config.lineStyle) {
-              dashExpr.push(config.value);
+              dashExpr.push(String(config.value));
               dashExpr.push(
                 config.lineStyle === "dash" ? [2, 2] : ["literal", []],
               );
@@ -464,11 +602,15 @@ export function getOutLineStyle(styleConfig: MapStyleConfig) {
       }
     }
 
-    console.log("outlineStyle--->", outlineStyle);
     return outlineStyle;
   } catch (e) {
     console.log("生成outlineStyle失败", e);
-    return {};
+    // 返回默认样式而不是空对象，确保总是有有效的样式
+    return {
+      "line-color": "rgba(103, 194, 58, 1)",
+      "line-width": 2,
+      "line-dasharray": [],
+    };
   }
 }
 
@@ -480,21 +622,59 @@ export function getOutLineStyle(styleConfig: MapStyleConfig) {
  */
 export function getCircleStyle(styleConfig: MapStyleConfig) {
   // 获取圆点配置列表
-  let { circleConfigList } = styleConfig;
+  let circleConfigList = getPointStyleList(styleConfig);
 
-  // 检查默认配置是否使用了新格式
-  const defaultCircleConfig = circleConfigList[circleConfigList.length - 1];
+  // 先重新排序，确保默认配置在最后
+  let sortedCircleConfigList = JSON.parse(JSON.stringify(circleConfigList));
+  const defaultConfigTemp = sortedCircleConfigList.find(
+    (c: CircleConfig) => c.type === "default",
+  );
+  const customConfigs = sortedCircleConfigList.filter(
+    (c: CircleConfig) => c.type === "custom",
+  );
+  if (defaultConfigTemp) {
+    sortedCircleConfigList = [...customConfigs, defaultConfigTemp];
+  }
+
+  console.log(
+    "[getCircleStyle] 排序后的 circleConfigList:",
+    sortedCircleConfigList,
+  );
+
+  // 检查默认配置是否使用了新格式（现在一定在最后一项）
+  const defaultCircleConfig =
+    sortedCircleConfigList[sortedCircleConfigList.length - 1];
   const useNewFormat =
     defaultCircleConfig &&
     (defaultCircleConfig.renderMode === "color" ||
       defaultCircleConfig.renderMode === "icon");
 
+  if (!defaultCircleConfig || defaultCircleConfig.type !== "default") {
+    console.warn("[getCircleStyle] 未找到默认配置，使用系统默认值");
+      return {
+        _useNewFormat: true,
+        _circleConfigList: [
+          {
+            type: "default",
+            renderMode: "color",
+            pointStyle: "118",
+            pointTintColor: "rgba(103, 194, 58, 0.6)",
+            pointSize: 2,
+          },
+        ],
+        "icon-image": "custom-icon-default-118-1031945806",
+        "icon-size": 1,
+      };
+  }
+
+  console.log("[getCircleStyle] 默认配置:", defaultCircleConfig);
+
   // 如果使用新格式，生成新格式的样式配置
   if (useNewFormat) {
-    // 新格式：使用 renderMode, pointStyle, pointTintColor, pointSize, iconImageName
+    // 新格式：使用 renderMode, pointStyle, pointTintColor, pointSize, pointStyle
     const result: any = {
       _useNewFormat: true, // 标记使用了新格式
-      _circleConfigList: circleConfigList, // 保存完整配置列表供后续使用
+      _circleConfigList: sortedCircleConfigList, // 保存完整配置列表供后续使用
     };
 
     // 默认使用 symbol 图层，通过 icon-image 来显示
@@ -506,18 +686,18 @@ export function getCircleStyle(styleConfig: MapStyleConfig) {
     result["icon-size"] = [];
 
     // 处理自定义配置（过滤掉 value 为空的配置）
-    const customConfigs = circleConfigList.filter(
-      (config) =>
+    const customConfigsFiltered = sortedCircleConfigList.filter(
+      (config: CircleConfig) =>
         config.type === "custom" && config.value !== "" && config.value != null,
     );
 
-    if (customConfigs.length > 0) {
+    if (customConfigsFiltered.length > 0) {
       // 假设所有自定义配置使用同一个字段（这是当前的设计）
-      const fieldKey = customConfigs[0].key;
+      const fieldKey = customConfigsFiltered[0].key;
 
       // 找到第一个有效的 value 类型（优先使用数字类型）
       let firstValueType = "string";
-      for (const config of customConfigs) {
+      for (const config of customConfigsFiltered) {
         if (typeof config.value === "number") {
           firstValueType = "number";
           break;
@@ -534,18 +714,18 @@ export function getCircleStyle(styleConfig: MapStyleConfig) {
 
       // 构建 icon-image 的 match 表达式: ["match", ["get", "FID_"], 1, "icon1", 2, "icon2", "default"]
       const iconImageMatch: any[] = ["match", ["get", fieldKey]];
-      customConfigs.forEach((config) => {
+      customConfigsFiltered.forEach((config: CircleConfig) => {
         let iconName: string;
         if (config.renderMode === "color") {
           // 纯色点：生成带颜色的 SVG 图标名称（实际加载在 MapView 中）
-          const colorSuffix = (config.pointTintColor || "#67c23a").replace(
+          const colorSuffix = (config.pointTintColor || "rgba(103, 194, 58, 1)").replace(
             /[^a-zA-Z0-9]/g,
             "",
           );
-          iconName = `custom-icon-${config.key}-${(config.pointStyle || "地图点.svg").replace(".svg", "")}-${colorSuffix}`;
+          iconName = `custom-icon-${config.key}-${config.pointStyle || ""}-${colorSuffix}`;
         } else {
           // 图标模式：使用预置图标
-          iconName = config.iconImageName || "hiper-map-icon-1.png";
+          iconName = config.pointStyle || "";
         }
         iconImageMatch.push(normalizeValue(config.value));
         iconImageMatch.push(iconName);
@@ -557,17 +737,17 @@ export function getCircleStyle(styleConfig: MapStyleConfig) {
         const colorSuffix = (
           defaultCircleConfig.pointTintColor || "#67c23a"
         ).replace(/[^a-zA-Z0-9]/g, "");
-        defaultIconName = `custom-icon-default-${(defaultCircleConfig.pointStyle || "地图点.svg").replace(".svg", "")}-${colorSuffix}`;
+        defaultIconName = `custom-icon-default-${defaultCircleConfig.pointStyle || ""}-${colorSuffix}`;
       } else {
         defaultIconName =
-          defaultCircleConfig.iconImageName || "hiper-map-icon-1.png";
+          defaultCircleConfig.pointStyle || "";
       }
       iconImageMatch.push(defaultIconName);
       result["icon-image"] = iconImageMatch;
 
       // 构建 icon-size 的 match 表达式
       const iconSizeMatch: any[] = ["match", ["get", fieldKey]];
-      customConfigs.forEach((config) => {
+      customConfigsFiltered.forEach((config: CircleConfig) => {
         // 统一 value 的类型
         iconSizeMatch.push(normalizeValue(config.value));
         iconSizeMatch.push((config.pointSize || 10) / 20);
@@ -581,10 +761,10 @@ export function getCircleStyle(styleConfig: MapStyleConfig) {
         const colorSuffix = (
           defaultCircleConfig.pointTintColor || "#67c23a"
         ).replace(/[^a-zA-Z0-9]/g, "");
-        defaultIconName = `custom-icon-default-${(defaultCircleConfig.pointStyle || "地图点.svg").replace(".svg", "")}-${colorSuffix}`;
+        defaultIconName = `custom-icon-default-${defaultCircleConfig.pointStyle || ""}-${colorSuffix}`;
       } else {
         defaultIconName =
-          defaultCircleConfig.iconImageName || "hiper-map-icon-1.png";
+          defaultCircleConfig.pointStyle || "";
       }
       result["icon-image"] = defaultIconName;
       result["icon-size"] = (defaultCircleConfig.pointSize || 10) / 20;
@@ -594,22 +774,18 @@ export function getCircleStyle(styleConfig: MapStyleConfig) {
   }
 
   // 旧格式：继续使用原有逻辑
-  // 初始化圆点样式对象，包含半径、描边宽度、颜色、描边颜色、透明度等属性
+  // 初始化圆点样式对象，包含半径、描边宽度、颜色、描边颜色等属性
   const circleStyle: {
     "circle-radius": any[]; // 圆点半径
     "circle-stroke-width": any[]; // 圆点描边宽度
-    "circle-color": any[]; // 圆点填充颜色
-    "circle-stroke-color": any[]; // 圆点描边颜色
-    "circle-opacity": any[]; // 圆点透明度
-    "circle-stroke-opacity": any[]; // 圆点描边透明度
+    "circle-color": any[]; // 圆点填充颜色（rgba格式，包含透明度）
+    "circle-stroke-color": any[]; // 圆点描边颜色（rgba格式，包含透明度）
     "icon-image": any[]; // 图标图片
   } = {
     "circle-radius": [],
     "circle-stroke-width": [],
     "circle-color": [],
     "circle-stroke-color": [],
-    "circle-opacity": [],
-    "circle-stroke-opacity": [],
     "icon-image": [],
   };
 
@@ -622,10 +798,8 @@ export function getCircleStyle(styleConfig: MapStyleConfig) {
   circleStyle["circle-stroke-width"] = [defaultConfig.circleStrokeWidth!];
   circleStyle["circle-color"] = [defaultConfig.circleColor!];
   circleStyle["circle-stroke-color"] = [defaultConfig.circleStrokeColor!];
-  circleStyle["circle-opacity"] = [defaultConfig.circleOpacity];
-  circleStyle["circle-stroke-opacity"] = [defaultConfig.circleStrokeOpacity!];
   circleStyle["icon-image"] = [
-    defaultConfig.iconImageUrl || "hiper-map-icon-1.png",
+    defaultConfig.iconImageUrl || "",
   ]; // 图标图片
   let circleConfigGroupList: { list: CircleConfig[]; key: string }[] = [];
   circleConfigList.forEach((circleConfig) => {
@@ -687,31 +861,12 @@ export function getCircleStyle(styleConfig: MapStyleConfig) {
         circleConfigGroup.key,
       ]);
       circleStyle["circle-stroke-color"].unshift("match");
-      //
-      circleConfigGroup.list.forEach((circleConfig) => {
-        circleStyle["circle-opacity"].unshift(circleConfig.circleOpacity);
-        circleStyle["circle-opacity"].unshift(circleConfig.value);
-      });
-      circleStyle["circle-opacity"].unshift(["get", circleConfigGroup.key]);
-      circleStyle["circle-opacity"].unshift("match");
-      //
-      circleConfigGroup.list.forEach((circleConfig) => {
-        circleStyle["circle-stroke-opacity"].unshift(
-          circleConfig.circleStrokeOpacity,
-        );
-        circleStyle["circle-stroke-opacity"].unshift(circleConfig.value);
-      });
-      circleStyle["circle-stroke-opacity"].unshift([
-        "get",
-        circleConfigGroup.key,
-      ]);
-      circleStyle["circle-stroke-opacity"].unshift("match");
     }
     // 如果是图标类型的圆点样式，设置图标图片
     if (defaultConfig.circleType == "symbol") {
       circleConfigGroup.list.forEach((circleConfig) => {
         circleStyle["icon-image"].unshift(
-          circleConfig.iconImageUrl || "hiper-map-icon-1.png",
+          circleConfig.iconImageUrl || "",
         );
         circleStyle["icon-image"].unshift(circleConfig.value);
       });
@@ -724,9 +879,6 @@ export function getCircleStyle(styleConfig: MapStyleConfig) {
     circleStyle["circle-stroke-width"] = circleStyle["circle-stroke-width"][0];
     circleStyle["circle-color"] = circleStyle["circle-color"][0];
     circleStyle["circle-stroke-color"] = circleStyle["circle-stroke-color"][0];
-    circleStyle["circle-opacity"] = circleStyle["circle-opacity"][0];
-    circleStyle["circle-stroke-opacity"] =
-      circleStyle["circle-stroke-opacity"][0];
     circleStyle["icon-image"] = circleStyle["icon-image"][0];
   }
   return circleStyle;
@@ -739,7 +891,7 @@ export function getCircleStyle(styleConfig: MapStyleConfig) {
  */
 export function getSymbolStyle(styleConfig: MapStyleConfig) {
   // 获取圆点配置列表
-  let { circleConfigList } = styleConfig;
+  let circleConfigList = getPointStyleList(styleConfig);
   // 初始化圆点样式对象，包含半径、描边宽度、颜色、描边颜色、透明度等属性
   const circleStyle: {
     "icon-image": any[]; // 图标图片
@@ -747,9 +899,9 @@ export function getSymbolStyle(styleConfig: MapStyleConfig) {
     "icon-image": [],
   };
   const defaultCircleConfig = circleConfigList[circleConfigList.length - 1];
-  circleConfigList.splice(circleConfigList.length - 1, 1);
+  circleConfigList = circleConfigList.slice(0, -1);
   circleStyle["icon-image"] = [
-    defaultCircleConfig.iconImageUrl || "hiper-map-icon-1.png",
+    defaultCircleConfig.iconImageUrl || "",
   ]; // 图标图片
   let circleConfigGroupList: { list: CircleConfig[]; key: string }[] = [];
   circleConfigList.forEach((circleConfig) => {
@@ -777,7 +929,7 @@ export function getSymbolStyle(styleConfig: MapStyleConfig) {
     if (defaultCircleConfig.circleType == "symbol") {
       circleConfigGroup.list.forEach((circleConfig) => {
         circleStyle["icon-image"].unshift(
-          circleConfig.iconImageUrl || "hiper-map-icon-1.png",
+          circleConfig.iconImageUrl || "",
         );
         circleStyle["icon-image"].unshift(circleConfig.value);
       });
@@ -811,8 +963,8 @@ export function getLayerStyle(layer: GeographicLayerEntity) {
 
   // 默认线样式配置，用于线状要素
   const defaultLineStyle = {
-    "line-width": 1, // 默认线宽为1像素
-    "line-color": "rgba(103, 194, 58, 0.6)", // 默认线颜色为浅绿色，半透明
+    "line-width": 2, // 默认线宽为2像素（与 LayerStyleEditDialog 保持一致）
+    "line-color": "rgba(103, 194, 58, 1)", // 默认线颜色为绿色，不透明
   };
 
   // 默认圆点样式配置，用于点状要素
@@ -883,7 +1035,7 @@ export function getLayerStyle(layer: GeographicLayerEntity) {
         return symbolStyle;
       }
       return {
-        "icon-image": "hiper-map-icon-1.png", // 默认图标图片
+        "icon-image": "",
       };
     default:
       break;
@@ -1011,3 +1163,11 @@ export function hexToRgb(hex: string): [number, number, number] {
 export function clamp(value: number, min: number, max: number) {
   return Math.max(min, Math.min(max, value));
 }
+
+/**
+ * 通过 id 从资源列表中查找匹配项
+ */
+export function resolveAssetById(id: string, options: PointAssetOption[]): PointAssetOption | undefined {
+  if (!id) return undefined;
+  return options.find(item => item.id === id);
+}