revisit
/
DSDSWeb
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

更新矢量图层设置逻辑

This commit is contained in:
hym 2026-04-01 20:49:38 +08:00
parent e565cce907
commit 6f674873cf
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/utils/vector-layer-utils.js
View File

@ -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 });
}