Forráskód Böngészése

子区蒙层中心显示子区名称,水印风格自适应区域大小

  - drawSubAreaCircle 新增 label 参数,在凸包重心用 AMap.Text 显示子区名称
  - 字号以区域横向像素宽度为基准,按文字长度均分,限制 12~48px,确保不超出区域
  - 水印风格:白色半透明(0.25)、无背景边框、pointer-events:none 不遮挡交互
  - handleFolderClick 传入 nodeData.label 作为子区名称
画安 1 hete%!(EXTRA string=óta)
szülő
commit
57b8ff7fde
2 módosított fájl, 36 hozzáadás és 2 törlés
  1. 35 1
      src/components/TongzhouTrafficMap.vue
  2. 1 1
      src/views/StatusMonitoring.vue

+ 35 - 1
src/components/TongzhouTrafficMap.vue

@@ -1360,7 +1360,7 @@ export default {
      * 对外暴露:为指定子区路口列表绘制凸包多边形蒙层,点击不同子区时自动替换上一个
      * @param {Array<{lng: number, lat: number}>} leaves - 子区内所有叶子路口节点
      */
-    drawSubAreaCircle(leaves) {
+    drawSubAreaCircle(leaves, label) {
       if (!this.isMapReady() || !leaves || leaves.length === 0) return;
 
       this.clearSubAreaOverlays();
@@ -1394,6 +1394,40 @@ export default {
 
       this.subAreaOverlays.push(polygon);
       this.map.add(polygon);
+
+      // 在凸包重心位置显示子区名称(水印风格,字号随区域大小缩放)
+      if (label) {
+        // 用地图坐标转像素,精确计算区域在屏幕上的实际大小
+        const lngs = paddedHull.map(p => p[0]);
+        const lats = paddedHull.map(p => p[1]);
+        const topLeft = this.map.lngLatToContainer([Math.min(...lngs), Math.max(...lats)]);
+        const bottomRight = this.map.lngLatToContainer([Math.max(...lngs), Math.min(...lats)]);
+        const pixelW = Math.abs(bottomRight.x - topLeft.x);
+        const pixelH = Math.abs(bottomRight.y - topLeft.y);
+        // 字号以横向宽度为基准,按文字长度均分,确保不超出区域
+        const charCount = label.length || 1;
+        const fontSize = Math.min(Math.max(12, Math.round(pixelW / (charCount + 1))), 48);
+
+        const text = new this.AMap.Text({
+          text: label,
+          position: [cx, cy],
+          anchor: 'center',
+          zIndex: 11,
+          style: {
+            'background': 'transparent',
+            'border': 'none',
+            'color': 'rgba(255, 255, 255, 0.25)',
+            'font-size': `${fontSize}px`,
+            'font-weight': 'bold',
+            'padding': '0',
+            'letter-spacing': '2px',
+            'white-space': 'nowrap',
+            'pointer-events': 'none',
+          },
+        });
+        this.subAreaOverlays.push(text);
+        this.map.add(text);
+      }
     },
 
     /**

+ 1 - 1
src/views/StatusMonitoring.vue

@@ -356,7 +356,7 @@ export default {
             const map = this.$refs.trafficMapRef.map;
             if (map) map.setZoomAndCenter(zoom, [avgLng, avgLat], false, 500);
             // 绘制该子区的圆形蒙层(自动替换上一个)
-            this.$refs.trafficMapRef.drawSubAreaCircle(leaves);
+            this.$refs.trafficMapRef.drawSubAreaCircle(leaves, nodeData.label);
         },
         // 处理菜单点击
         handleMenuClick(nodeData) {