@wenle_2523097/agri-map 2.0.2 → 2.0.4

package/README.md

@@ -648,6 +648,29 @@ interface PathOptions {
 }
 ```
 
+## 更新日志
+
+### v2.0.4 (2026-05-19)
+#### 新增
+- **3D 标签功能**：Marker 组件支持 3D 立体字标签，可显示在图标上方
+- **12 种动画效果**：pulse、gradient、scale、flip、flicker、rotate、wobble、bounce、float、neon、rainbow、shadow
+- **标签偏移控制**：支持 X/Y 轴偏移量调整
+
+#### 优化
+- **文字宽度动态计算**：根据字符数和字体大小自动计算容器宽度
+- **居中对齐**：图标锚点对准文字中心，精确居中于图标上方
+- **空格宽度处理**：中文字符和空格分别计算宽度，提升估算精度
+
+#### 修复
+- 移除 `show` 属性，`label` 存在即代表显示标签
+
+### v2.0.3 (2026-05-18)
+#### 新增
+- 新增 3D 标签动画效果（pulse、gradient、scale、flip、flicker、rotate、wobble、bounce、float、neon、rainbow、shadow）
+
+### v2.0.2
+- 修复 Road/Irrigation 组件重绘模式下的双道路/渠道显示问题
+
 ## 开发
 
 ```bash

package/dist/components/marker.esm.js

@@ -5090,6 +5090,148 @@ var ClusterView = function ClusterView(_ref) {
 };
 var ClusterView$1 = /*#__PURE__*/React.memo(ClusterView);
 
+var DEFAULT_LABEL_CONFIG = {
+  show: false,
+  field: 'title',
+  color: '#2c3e50',
+  fontSize: 14,
+  fontWeight: 'bold',
+  offset: [0, 40],
+  className: '',
+  animation: false,
+  animationDuration: 2
+};
+/**
+ * Label3D - 3D 立体文字标签组件
+ * 使用原生 Leaflet SVG 渲染，支持竖排立体字效果
+ */
+var Label3D = function Label3D(_ref) {
+  var labelConfig = _ref.labelConfig,
+    _ref$labelField = _ref.labelField,
+    labelField = _ref$labelField === void 0 ? 'title' : _ref$labelField,
+    data = _ref.data;
+  var map = useMap();
+  var markersRef = useRef([]);
+  var retryRafRef = useRef(null);
+  // 合并配置
+  var config = useMemo(function () {
+    return _objectSpread2(_objectSpread2({}, DEFAULT_LABEL_CONFIG), labelConfig);
+  }, [labelConfig]);
+  // 获取标签文本
+  var getLabelText = useCallback(function (item) {
+    var field = config.field || labelField;
+    var value = item[field];
+    if (!value && value !== 0) return null;
+    return String(value);
+  }, [config.field, labelField]);
+  // 创建标签
+  var createLabels = useCallback(function () {
+    // 清理旧的标签
+    markersRef.current.forEach(function (marker) {
+      return marker.remove();
+    });
+    markersRef.current = [];
+    if (!map || !config.show || !(data !== null && data !== void 0 && data.length)) return;
+    // 过滤有效数据并获取标签文本
+    var labelsToCreate = data.map(function (item) {
+      return {
+        item: item,
+        text: getLabelText(item)
+      };
+    }).filter(function (label) {
+      return label.text;
+    });
+    if (labelsToCreate.length === 0) return;
+    // 创建标签
+    labelsToCreate.forEach(function (_ref2) {
+      var item = _ref2.item,
+        text = _ref2.text;
+      var _config$offset = _slicedToArray(config.offset, 2),
+        offsetX = _config$offset[0],
+        offsetY = _config$offset[1];
+      // 处理颜色（支持单色或渐变数组）
+      var isGradient = Array.isArray(config.color);
+      var gradientColors = isGradient ? config.color : [config.color];
+      var firstColor = gradientColors[0];
+      // 动画样式
+      var getAnimationClass = function getAnimationClass() {
+        if (config.animation === 'pulse') return 'label-animated-pulse';
+        if (config.animation === 'gradient') return 'label-animated-gradient';
+        if (config.animation === 'scale') return 'label-animated-scale';
+        if (config.animation === 'flip') return 'label-animated-flip';
+        if (config.animation === 'flicker') return 'label-animated-flicker';
+        if (config.animation === 'rotate') return 'label-animated-rotate';
+        if (config.animation === 'wobble') return 'label-animated-wobble';
+        if (config.animation === 'bounce') return 'label-animated-bounce';
+        if (config.animation === 'float') return 'label-animated-float';
+        if (config.animation === 'neon') return 'label-animated-neon';
+        if (config.animation === 'rainbow') return 'label-animated-rainbow';
+        if (config.animation === 'shadow') return 'label-animated-shadow';
+        return '';
+      };
+      var isShadow = config.animation === 'shadow';
+      var animationDurationVar = config.animation ? "--label-animation-duration: ".concat(config.animationDuration, "s;") : '';
+      // 渐变颜色 CSS 变量
+      var gradientColorsVar = isGradient && config.animation === 'gradient' ? "--label-gradient-colors: ".concat(gradientColors.join(', '), ";") : '';
+      // 竖起立体字样式 - 参照 CSND 示例的 transform 效果
+      var labelHtml = "\n        <div class=\"marker-label-3d ".concat(config.className, " ").concat(getAnimationClass(), "\" style=\"\n          position: relative;\n          display: inline-block;\n          transform: translate(-50%, 0);\n          font-size: ").concat(config.fontSize, "px;\n          font-weight: bold;\n          color: ").concat(firstColor, ";\n          letter-spacing: 3px;\n          margin: 0;\n          ").concat(animationDurationVar, "\n          ").concat(gradientColorsVar, "\n          ").concat(isShadow ? '' : "\n          text-shadow:\n            -1px 0 0 #000,\n            -2px 0 0 #000,\n            -3px 0 0 #000,\n            -4px 0 0 #000,\n            -5px 0 0 #000;\n          ", "\n        \">").concat(text, "\n          <span class=\"").concat(isShadow ? 'label-shadow-anim' : '', "\" style=\"\n            position: absolute;\n            top: 0;\n            left: 0;\n            color: #000;\n            font-weight: bolder;\n            transform: translateX(-15px) translateY(4px) scaleY(.5) skew(55deg);\n            z-index: -1;\n            filter: blur(1px);\n            mask: linear-gradient(transparent, #000);\n            pointer-events: none;\n            ").concat(isShadow ? "animation: label-shadow-move var(--label-animation-duration, 2s) ease-in-out infinite;" : '', "\n          \">").concat(text, "</span>\n        </div>\n      ");
+      var labelIcon = L.divIcon({
+        className: 'marker-label-container',
+        html: labelHtml,
+        iconSize: [100, 100],
+        iconAnchor: [50 + offsetX, offsetY]
+      });
+      // item.position 格式为 [lat, lng]
+      var marker = L.marker(item.position, {
+        icon: labelIcon,
+        interactive: false,
+        zIndexOffset: 1000
+      }).addTo(map);
+      markersRef.current.push(marker);
+    });
+  }, [map, config, data, getLabelText]);
+  // 初始化创建标签（带 RAF 重试）
+  useEffect(function () {
+    if (!map) {
+      // 地图未准备好，延迟重试
+      retryRafRef.current = requestAnimationFrame(function () {
+        createLabels();
+      });
+      return;
+    }
+    createLabels();
+    return function () {
+      if (retryRafRef.current) {
+        cancelAnimationFrame(retryRafRef.current);
+        retryRafRef.current = null;
+      }
+    };
+  }, [map, createLabels]);
+  // 清理
+  useEffect(function () {
+    return function () {
+      markersRef.current.forEach(function (marker) {
+        return marker.remove();
+      });
+      markersRef.current = [];
+    };
+  }, []);
+  // 地图移动/缩放时重建标签
+  useEffect(function () {
+    if (!map || !config.show) return;
+    var handleMapChange = function handleMapChange() {
+      createLabels();
+    };
+    map.on('moveend', handleMapChange);
+    map.on('zoomend', handleMapChange);
+    return function () {
+      map.off('moveend', handleMapChange);
+      map.off('zoomend', handleMapChange);
+    };
+  }, [map, config.show, createLabels]);
+  return null;
+};
+
 /**
  * 保持 ref 始终指向最新值的 Hook
  * @description 用于在回调中访问最新值，避免闭包陷阱
@@ -8837,6 +8979,7 @@ var Marker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     displayMode = _ref2.displayMode,
     onClusterClick = _ref2.onClusterClick,
     onRow = _ref2.onRow,
+    label = _ref2.label,
     _ref2$loading = _ref2.loading,
     loading = _ref2$loading === void 0 ? false : _ref2$loading,
     loadingMask = _ref2.loadingMask,
@@ -9339,6 +9482,10 @@ var Marker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       onCancel: edit.handleCancel,
       onSave: edit.handleSave,
       children: customToolbar
+    }), jsx(Label3D, {
+      labelConfig: label,
+      data: normalizedData,
+      selectedId: value
     }), loadingOverlay]
   });
 });