fix(gis): wrap long marker labels

docs/design/2026-09-09-water-supply-gis-marker-style.md

@@ -12,7 +12,7 @@ accepted
 ### 坐标点
 
 - 使用百度地图官方 `T_MarkPoint_*` 图标素材和 `BMapGL.Marker + BMapGL.Icon` 渲染坐标点。
-- 点位名称使用独立 `BMapGL.Label`，显示在坐标点上方。
+- 点位名称使用独立 `BMapGL.Label`，显示在坐标点上方；名称框宽度固定为坐标点图标宽度的 2 倍（56px），单行最多 6 个中文字符，超长自动换行。
 - 点击点位或搜索结果时定位并放大到对应要素。
 - 管网 `LineString` 绘制管线，并在起点、终点显示坐标点。
 

src/components/GisMapCanvas.vue

@@ -127,7 +127,7 @@ function addPointMarker(BMapGL, point) {
   if (props.showMarkerName && name) {
     const label = new BMapGL.Label(`<div class="gis-marker-label-text">${escapeHtml(name)}</div>`, {
       position,
-      offset: new BMapGL.Size(-90, -props.markerSize - 8)
+      offset: new BMapGL.Size(-28, -props.markerSize - 8)
     })
     label.setStyle({ border: 'none', background: 'transparent', padding: '0' })
     label.addEventListener('click', (event) => {
@@ -178,7 +178,7 @@ function addLine(BMapGL, line) {
     if (!props.showMarkerName) return
     const label = new BMapGL.Label(`<div class="gis-marker-label-text">${escapeHtml(name)}</div>`, {
       position,
-      offset: new BMapGL.Size(-90, -props.markerSize - 8)
+      offset: new BMapGL.Size(-28, -props.markerSize - 8)
     })
     label.setStyle({ border: 'none', background: 'transparent', padding: '0' })
     label.addEventListener('click', (event) => {
@@ -277,20 +277,19 @@ defineExpose({
 
 .gis-marker-label-text {
   box-sizing: border-box;
-  width: 180px;
+  width: 56px;
   margin-bottom: 4px;
-  padding: 2px 6px;
+  padding: 2px 1px;
   overflow: hidden;
   color: #22405c;
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(118, 151, 181, 0.32);
   border-radius: 4px;
   box-shadow: 0 2px 6px rgba(31, 74, 121, 0.12);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: 9px;
+  line-height: 12px;
   font-weight: 600;
   text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 </style>

tests/gisMapCanvas.test.mjs

@@ -29,7 +29,10 @@ test('shared gis map canvas renders every point as an official icon with a label
   assert.match(source, /anchor: new BMapGL\.Size\(size \/ 2, size\)/u)
   assert.match(source, /const marker = new BMapGL\.Marker\(position, \{/u)
   assert.match(source, /new BMapGL\.Label\(`<div class="gis-marker-label-text">/u)
-  assert.match(source, /offset: new BMapGL\.Size\(-90, -props\.markerSize - 8\)/u)
+  assert.match(source, /offset: new BMapGL\.Size\(-28, -props\.markerSize - 8\)/u)
+  assert.match(source, /width: 56px/u)
+  assert.match(source, /overflow-wrap: anywhere/u)
+  assert.doesNotMatch(source, /white-space: nowrap/u)
   assert.doesNotMatch(source, /<img class="marker-icon"/u)
   assert.doesNotMatch(source, /class="marker-wrap"/u)
   assert.match(source, /供水管网.*起点/u)