From 78fa4c84fc9bae53e1685615323572e35f9725b5 Mon Sep 17 00:00:00 2001
From: JIANG <huarch97@gmail.com>
Date: Thu, 16 Oct 2025 17:57:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20TextLayer=20=E7=9A=84?=
 =?UTF-8?q?=E7=A2=B0=E6=92=9E=E6=A3=80=E6=B5=8B=EF=BC=8C=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E5=A0=86=E5=8F=A0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/OlMap/MapComponent.tsx | 37 ++++++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx
index ad462dc..c8d6b22 100644
--- a/src/app/OlMap/MapComponent.tsx
+++ b/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,
-        // --- 修改以下属性 ---
-        // characterSet: "auto",
-        // outlineWidth: 4,
-        // outlineColor: [255, 255, 255, 255], // 设置为白色轮廓
+        extensions: [new CollisionFilterExtension()],
+        collisionTestProps: {
+          sizeScale: 2, // 增加碰撞检测的尺寸以提供更大间距
+        },
+        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,
-        // --- 修改以下属性 ---
-        // characterSet: "auto",
-        // outlineWidth: 5,
-        // outlineColor: [255, 255, 255, 255], // 设置为白色轮廓
+        extensions: [new CollisionFilterExtension()],
+        collisionTestProps: {
+          sizeScale: 2, // 增加碰撞检测的尺寸以提供更大间距
+        },
+        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 });