From 6f674873cf6a11d62a6a6ad74aa3be897657b67c Mon Sep 17 00:00:00 2001
From: hym <hym@idsse.ac.cn>
Date: Wed, 1 Apr 2026 20:49:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=9F=A2=E9=87=8F=E5=9B=BE?=
 =?UTF-8?q?=E5=B1=82=E8=AE=BE=E7=BD=AE=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/vector-layer-utils.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/utils/vector-layer-utils.js b/src/utils/vector-layer-utils.js
index 3efc311..0411470 100644
--- a/src/utils/vector-layer-utils.js
+++ b/src/utils/vector-layer-utils.js
@@ -11,13 +11,15 @@ export function loadVectorLayer(layerId, features = ["line", "symbol"], colors =
     const sourceId = `vector-${layerId}`;
     let source = Vue.config.maps[mapId].getSource(sourceId);
     if (!source) {
+        // request vector tiles with extra buffer to avoid geometry clipping at tile edges
+        const tilesUrl = `${Vue.config.baseUrl}/geoserver/gwc/service/tms/1.0.0/${workspace}:${layerId}@EPSG:900913@pbf/{z}/{x}/{y}.pbf?buffer=64`;
         let bb = Vue.config.boundsInfoList.find(x => x.layerName.toLowerCase() == `${workspace}:${layerId}`.toLocaleLowerCase());
         let bounds = bb ? bb.bounds : null;
         if (bounds) {
             Vue.config.maps[mapId].addSource(sourceId, {
                 type: 'vector',
                 scheme: 'tms',
-                tiles: [`${Vue.config.baseUrl}/geoserver/gwc/service/tms/1.0.0/${workspace}:${layerId}@EPSG:900913@pbf/{z}/{x}/{y}.pbf`],
+                tiles: [tilesUrl],
                 minzoom: 0,
                 maxzoom: 30,
                 bounds: bounds,
@@ -28,7 +30,7 @@ export function loadVectorLayer(layerId, features = ["line", "symbol"], colors =
             Vue.config.maps[mapId].addSource(sourceId, {
                 type: 'vector',
                 scheme: 'tms',
-                tiles: [`${Vue.config.baseUrl}/geoserver/gwc/service/tms/1.0.0/${workspace}:${layerId}@EPSG:900913@pbf/{z}/{x}/{y}.pbf`],
+                tiles: [tilesUrl],
                 minzoom: 0,
                 maxzoom: 30,
                 generateId: true
@@ -86,7 +88,9 @@ export async function loadVectorFeature(layerId, feature, color, visibility, map
     if (feature === "line") {
         slot = "top";
         layout = {
-            "visibility": visibility
+            "visibility": visibility,
+            // "line-join": "round",
+            // "line-cap": "round"
         };
         paint = {
             "line-opacity": 1,
@@ -443,7 +447,9 @@ export async function loadJsonLineFeature(layerId, color, geojson, mapId) {
             'type': 'line',
             'source': layerId,
             'layout': {
-                'visibility': 'visible'
+                'visibility': 'visible',
+                'line-join': 'round',
+                'line-cap': 'round'
             },
             'paint': {
                 'line-color': color,
@@ -512,13 +518,13 @@ export async function loadJsonPointFeature(layerId, color, geojson, mapId) {
 export async function highlightFeaturesByProperty(mapId, sourceId, layerId, propertyName = "sample_name", targetValue = "TARGET_VALUE") {
     // 清空所有高亮状态（可选）
     Vue.config.maps[mapId].querySourceFeatures(sourceId).forEach(f => {
-        console.log("AAAAA: ",f);
+        console.log("AAAAA: ", f);
         Vue.config.maps[mapId].setFeatureState({ source: sourceId, id: f.id }, { highlight: false });
     });
 
     // 标记匹配要素
     Vue.config.maps[mapId].querySourceFeatures(sourceId).forEach(f => {
-        console.log("BBBBB: ",f);
+        console.log("BBBBB: ", f);
         if (f.properties && f.properties[propertyName] === targetValue) {
             Vue.config.maps[mapId].setFeatureState({ source: sourceId, id: f.id }, { highlight: true });
         }