From c7852ad7275fa48b7deabdc34565eee53b283062 Mon Sep 17 00:00:00 2001 From: evlist Date: Thu, 26 Jan 2023 16:48:59 +0100 Subject: [PATCH] Adaptation to geoserver --- src/components/gpx/styles.ts | 37 ++++++++++++++----- src/components/overlays/Overlays.tsx | 17 +++++---- .../overlays/overlay-definitions.ts | 15 ++++++++ 3 files changed, 52 insertions(+), 17 deletions(-) diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index a007948..e57e548 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -30,6 +30,7 @@ import { getTagValue, } from '../map-tile-provider/MapTileProvider'; import { getCenter } from 'ol/extent'; +import { getVectorTileFeatureType } from '../overlays/overlay-definitions'; interface StyleParameters { type: string; @@ -312,19 +313,34 @@ const styles = { width: 3, lineDash: [10, 10], }), + default: new Stroke({ + color: [174, 33, 219, 0.8], + width: 1, + lineDash: [10, 10], + }), }, getParameters: (feature: Feature) => { + const tags = JSON.parse(feature.get('tags')); + if (getZoomInteger() < 12 && !['iwn', 'nwn'].includes(tags.network)) { + return null; + } + if ( + getZoomInteger() < 14 && + !['iwn', 'nwn', 'lwn'].includes(tags.network) + ) { + return null; + } return { isSelected: feature.get('isSelected') ?? false, name: feature.get('name'), - network: feature.get('network'), + network: tags.network, }; }, getStyle: memoize((params: any) => { // console.log({ caller: 'getStyle', params }); const { isSelected, name, network } = params; return new Style({ - stroke: styles.way.strokes[network], + stroke: styles.way.strokes[network] || styles.way.strokes.default, text: new Text({ text: name, font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"', @@ -437,17 +453,19 @@ const styles = { }; export const style = (feature: Feature, resolution: number) => { - console.log({ caller: 'style', feature }); - if (feature.get('osm_id') === '990113898') { - console.log({ caller: 'style', message: 'Found feature 990113898' }); - } + // if (feature.get('osm_id') === '990113898') { + // console.log({ caller: 'style', message: 'Found feature 990113898' }); + // } const type = ( - feature.get('type') !== undefined ? feature.get('type') : feature.type_ + feature.get('type') !== undefined + ? feature.get('type') + : getVectorTileFeatureType(feature) ) as keyof typeof styles; const styleForType = styles[type]; if (!styleForType) { - // console.log({ caller: 'style / default', type, feature, resolution }); - return createDefaultStyle(feature, resolution)[0]; + // console.log({ caller: 'style / default', type, feature, resolution }); + // return createDefaultStyle(feature, resolution)[0]; + return null; } const params = styles[type].getParameters(feature); if (params === null || params?.isHidden) { @@ -460,6 +478,7 @@ export const style = (feature: Feature, resolution: number) => { const result = getStyle(params); // console.log({ caller: 'style', feature, type, params, style }); if (result === undefined) { + // console.log({ caller: 'style / unknown', feature }); return createDefaultStyle(feature, resolution)[0]; } return result; diff --git a/src/components/overlays/Overlays.tsx b/src/components/overlays/Overlays.tsx index 712a8ba..90008d0 100644 --- a/src/components/overlays/Overlays.tsx +++ b/src/components/overlays/Overlays.tsx @@ -19,6 +19,7 @@ import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSou import { getMap, getZoomInteger } from '../map/Map'; import { getCenter } from 'ol/extent'; import { Projection } from 'ol/proj'; +import { getVectorTileFeatureType } from './overlay-definitions'; interface Props { map: () => OlMap | null; @@ -64,7 +65,7 @@ export const Overlays: Component = ({ map }) => { 'EPSG:900913:30', ]; const baseUrl = 'http://localhost:8081/geoserver/gwc/service/wmts'; - const style = ''; + const geoServerStyle = ''; const format = 'application/vnd.mapbox-vector-tile'; const infoFormat = 'text/html'; const layerName = 'dyomedea'; @@ -91,7 +92,7 @@ export const Overlays: Component = ({ map }) => { SERVICE: 'WMTS', VERSION: '1.0.0', LAYER: layerName, - STYLE: style, + STYLE: geoServerStyle, TILEMATRIX: gridsetName + ':{z}', TILEMATRIXSET: gridsetName, FORMAT: format, @@ -108,7 +109,7 @@ export const Overlays: Component = ({ map }) => { const source = new VectorTileSource({ url: url, - format: new MVT({}), + format: new MVT({ featureClass: Feature }), projection: projection, tileGrid: new WMTSTileGrid({ tileSize: [256, 256], @@ -151,13 +152,13 @@ export const Overlays: Component = ({ map }) => { distance: 30, minDistance: 10, geometryFunction: (feature: Feature) => { - console.log({ - caller: 'Map / Cluster / geometryFunction ', - feature, - }); + // console.log({ + // caller: 'Map / Cluster / geometryFunction ', + // feature, + // }); if ( getZoomInteger() < 14 && - feature.get('type') === 'poi' && + getVectorTileFeatureType(feature) === 'poi' && isHighlighted(feature) ) { return new Point(getCenter(feature.getGeometry().getExtent())); diff --git a/src/components/overlays/overlay-definitions.ts b/src/components/overlays/overlay-definitions.ts index f2f22a2..ed45100 100644 --- a/src/components/overlays/overlay-definitions.ts +++ b/src/components/overlays/overlay-definitions.ts @@ -1,4 +1,5 @@ import { indexOf } from 'lodash'; +import { Feature } from 'ol'; export const overlayDefinitions = { amenity: { @@ -99,6 +100,20 @@ _flat.forEach((obj: any) => { }); }); +export const getVectorTileFeatureType = (feature: Feature) => { + if (!!feature.get('route') || feature.get('highway') === 'path') { + return 'way'; + } + if ( + Object.keys(overlayDefinitions).some((tagName) => { + const tagValue = feature.get(tagName); + return Object.keys(overlayDefinitions[tagName]).includes(tagValue); + }) + ) { + return 'poi'; + } +}; + console.log({ caller: 'overlay-definitions', overlayDefinitions,