新增 TextLayer 的碰撞检测，解决文字堆叠的问题

src/app/OlMap/MapComponent.tsx

@@ -23,6 +23,7 @@ import { bearing } from "@turf/turf";
 import { Deck } from "@deck.gl/core";
 import { TextLayer } from "@deck.gl/layers";
 import { TripsLayer } from "@deck.gl/geo-layers";
+import { CollisionFilterExtension } from "@deck.gl/extensions";
 
 interface MapComponentProps {
   children?: React.ReactNode;
@@ -425,10 +426,20 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         getPixelOffset: [0, -10],
         visible:
           showJunctionTextLayer && currentZoom >= 15 && currentZoom <= 24,
-        // --- 修改以下属性 ---
+        extensions: [new CollisionFilterExtension()],
-        // characterSet: "auto",
+        collisionTestProps: {
-        // outlineWidth: 4,
+          sizeScale: 2, // 增加碰撞检测的尺寸以提供更大间距
-        // outlineColor: [255, 255, 255, 255], // 设置为白色轮廓
+        },
+        fontSettings: {
+          sdf: true,
+          fontSize: 64, // 字体图集大小,默认 64
+          buffer: 6, // 字符间距缓冲,默认 4
+          radius: 12, // SDF 半径,默认 12
+          cutoff: 0.25, // 控制字符粗细,默认 0.25
+          smoothing: 0.1, // 边缘平滑度,默认 0.1
+        },
+        outlineWidth: 10,
+        outlineColor: [255, 255, 255, 255],
       }),
       new TextLayer({
         id: "pipeTextLayer",
@@ -445,10 +456,20 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         getTextAnchor: "middle",
         getAlignmentBaseline: "bottom",
         visible: showPipeTextLayer && currentZoom >= 15 && currentZoom <= 24,
-        // --- 修改以下属性 ---
+        extensions: [new CollisionFilterExtension()],
-        // characterSet: "auto",
+        collisionTestProps: {
-        // outlineWidth: 5,
+          sizeScale: 2, // 增加碰撞检测的尺寸以提供更大间距
-        // outlineColor: [255, 255, 255, 255], // 设置为白色轮廓
+        },
+        fontSettings: {
+          sdf: true,
+          fontSize: 64, // 字体图集大小,默认 64
+          buffer: 6, // 字符间距缓冲,默认 4
+          radius: 12, // SDF 半径,默认 12
+          cutoff: 0.25, // 控制字符粗细,默认 0.25
+          smoothing: 0.1, // 边缘平滑度,默认 0.1
+        },
+        outlineWidth: 10,
+        outlineColor: [255, 255, 255, 255],
       }),
     ];
     deck.setProps({ layers: newLayers });