From e7c9d0e7cb461b851412806ea69adee7037b3549 Mon Sep 17 00:00:00 2001 From: evlist Date: Mon, 30 Jan 2023 21:07:23 +0100 Subject: [PATCH] Relying on server side vector tile filtering --- src/components/gpx/styles.ts | 38 +++++---- src/components/overlays/Overlays.tsx | 116 ++++++++++++++------------- 2 files changed, 82 insertions(+), 72 deletions(-) diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index 3600b1c..b2ef8fb 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -320,18 +320,18 @@ const styles = { }), }, getParameters: (feature: Feature) => { - let tags = {}; - try { - tags = JSON.parse(feature.get('tags')); - } catch (error) { - tags = { error }; - console.error({ - caller: 'style / JSON.parse', - tags: feature.get('tags'), - error, - feature, - }); - } + let tags = feature.get('tags'); + // try { + // tags = JSON.parse(feature.get('tags')); + // } catch (error) { + // tags = { error }; + // console.error({ + // caller: 'style / JSON.parse', + // tags: feature.get('tags'), + // error, + // feature, + // }); + // } if (getZoomInteger() < 12 && !['iwn', 'nwn'].includes(tags.network)) { return null; } @@ -464,9 +464,7 @@ const styles = { }; export const style = (feature: Feature, resolution: number) => { - // if (feature.get('osm_id') === '990113898') { - // console.log({ caller: 'style', message: 'Found feature 990113898' }); - // } +// console.log({ caller: 'style', feature, values: feature.values_ }); const type = ( feature.get('type') !== undefined ? feature.get('type') @@ -474,11 +472,19 @@ export const style = (feature: Feature, resolution: number) => { ) as keyof typeof styles; const styleForType = styles[type]; if (!styleForType) { - // console.log({ caller: 'style / default', type, feature, resolution }); + console.log({ caller: 'style / default', type, feature, resolution }); // return createDefaultStyle(feature, resolution)[0]; return null; } const params = styles[type].getParameters(feature); + // console.log({ + // caller: 'style', + // type, + // styleForType, + // params, + // feature, + // resolution, + // }); if (params === null || params?.isHidden) { return null; } diff --git a/src/components/overlays/Overlays.tsx b/src/components/overlays/Overlays.tsx index 883b0b4..60656d1 100644 --- a/src/components/overlays/Overlays.tsx +++ b/src/components/overlays/Overlays.tsx @@ -20,6 +20,8 @@ import { getMap, getZoomInteger } from '../map/Map'; import { getCenter } from 'ol/extent'; import { Projection } from 'ol/proj'; import { getVectorTileFeatureType } from './overlay-definitions'; +import GeoJSON from 'ol/format/GeoJSON.js'; +import TopoJSON from 'ol/format/TopoJSON.js'; interface Props { map: () => OlMap | null; @@ -53,70 +55,72 @@ export const Overlays: Component = ({ map }) => { const format = 'application/vnd.mapbox-vector-tile'; const infoFormat = 'text/html'; const layerName = 'dyomedea'; - const projection = new Projection({ - code: 'EPSG:900913', - units: 'm', - axisOrientation: 'neu', - }); - const resolutions = [ - 156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, - 9783.939619140625, 4891.9698095703125, 2445.9849047851562, - 1222.9924523925781, 611.4962261962891, 305.74811309814453, - 152.87405654907226, 76.43702827453613, 38.218514137268066, - 19.109257068634033, 9.554628534317017, - ]; + // const projection = new Projection({ + // code: 'EPSG:900913', + // units: 'm', + // axisOrientation: 'neu', + // }); + // const resolutions = [ + // 156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, + // 9783.939619140625, 4891.9698095703125, 2445.9849047851562, + // 1222.9924523925781, 611.4962261962891, 305.74811309814453, + // 152.87405654907226, 76.43702827453613, 38.218514137268066, + // 19.109257068634033, 9.554628534317017, + // ]; - const params = { - REQUEST: 'GetTile', - SERVICE: 'WMTS', - VERSION: '1.0.0', - LAYER: layerName, - STYLE: geoServerStyle, - TILEMATRIX: gridsetName + ':{z}', - TILEMATRIXSET: gridsetName, - FORMAT: format, - TILECOL: '{x}', - TILEROW: '{y}', - }; + // const params = { + // REQUEST: 'GetTile', + // SERVICE: 'WMTS', + // VERSION: '1.0.0', + // LAYER: layerName, + // STYLE: geoServerStyle, + // TILEMATRIX: gridsetName + ':{z}', + // TILEMATRIXSET: gridsetName, + // FORMAT: format, + // TILECOL: '{x}', + // TILEROW: '{y}', + // }; - function constructSource() { - let url = baseUrl + '?'; - for (const param in params) { - url = url + param + '=' + params[param] + '&'; - } - url = url.slice(0, -1); + // function constructSource() { + // let url = baseUrl + '?'; + // for (const param in params) { + // url = url + param + '=' + params[param] + '&'; + // } + // url = url.slice(0, -1); - const source = new VectorTileSource({ - url: url, - format: new MVT({ featureClass: Feature }), - projection: projection, - // minZoom: 8, - // maxZoom: 14, - tileGrid: new WMTSTileGrid({ - tileSize: [256, 256], - origin: [-2.003750834e7, 2.003750834e7], - resolutions: resolutions, - matrixIds: gridNames, - minZoom: 10, - }), - wrapX: true, - }); - return source; - } + // const source = new VectorTileSource({ + // url: url, + // format: new MVT({ featureClass: Feature }), + // projection: projection, + // // minZoom: 8, + // // maxZoom: 14, + // tileGrid: new WMTSTileGrid({ + // tileSize: [256, 256], + // origin: [-2.003750834e7, 2.003750834e7], + // resolutions: resolutions, + // matrixIds: gridNames, + // minZoom: 10, + // }), + // wrapX: true, + // }); + // return source; + // } // http://localhost:8081/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=dyomedea&STYLE=&TILEMATRIX=EPSG:900913:14&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL=8262&TILEROW=6048 // http://localhost:8081/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=dyomedea&STYLE=&TILEMATRIX=EPSG:900913:14&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL=8265&TILEROW=6046 - const vectorTileSource = constructSource(); + // const vectorTileSource = constructSource(); - // const vectorTileSource = new VectorTileSource({ - // url: 'http://localhost:8081/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=test&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={-y}', - // // url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3Atransportation@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf', - // // url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf', - // format: new MVT({ featureClass: Feature }), - // maxZoom: 14, - // tileSize: 256, - // }); + const vectorTileSource = new VectorTileSource({ + url: 'https://geo.dyomedea.com/geoserver/gwc/service/wmts/rest/hiking/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=application/json;type=geojson', + // url: 'https://geo.dyomedea.com/geoserver/gwc/service/wmts/rest/hiking/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile', + // url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3Atransportation@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf', + // url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf', + format: new GeoJSON({ dataProjection: 'EPSG:900913' }), + // format: new MVT({ featureClass: Feature }), + maxZoom: 15, + tileSize: 256, + }); vectorTileLayer = new VectorTileLayer({ source: vectorTileSource,