Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Relying on server side vector tile filtering

This commit is contained in:
Eric van der Vlist 2023-01-30 21:07:23 +01:00
parent c17f47bb67
commit e7c9d0e7cb
2 changed files with 82 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/gpx/styles.ts
View File

@ -320,18 +320,18 @@ const styles = {
}), }),
}, },
getParameters: (feature: Feature) => { getParameters: (feature: Feature) => {
let tags = {}; let tags = feature.get('tags');
try { // try {
tags = JSON.parse(feature.get('tags')); // tags = JSON.parse(feature.get('tags'));
} catch (error) { // } catch (error) {
tags = { error }; // tags = { error };
console.error({ // console.error({
caller: 'style / JSON.parse', // caller: 'style / JSON.parse',
tags: feature.get('tags'), // tags: feature.get('tags'),
error, // error,
feature, // feature,
}); // });
} // }
if (getZoomInteger() < 12 && !['iwn', 'nwn'].includes(tags.network)) { if (getZoomInteger() < 12 && !['iwn', 'nwn'].includes(tags.network)) {
return null; return null;
} }
@ -464,9 +464,7 @@ const styles = {
}; };
export const style = (feature: Feature, resolution: number) => { export const style = (feature: Feature, resolution: number) => {
// if (feature.get('osm_id') === '990113898') { // console.log({ caller: 'style', feature, values: feature.values_ });
// console.log({ caller: 'style', message: 'Found feature 990113898' });
// }
const type = ( const type = (
feature.get('type') !== undefined feature.get('type') !== undefined
? feature.get('type') ? feature.get('type')
@ -474,11 +472,19 @@ export const style = (feature: Feature, resolution: number) => {
) as keyof typeof styles; ) as keyof typeof styles;
const styleForType = styles[type]; const styleForType = styles[type];
if (!styleForType) { if (!styleForType) {
// console.log({ caller: 'style / default', type, feature, resolution }); console.log({ caller: 'style / default', type, feature, resolution });
// return createDefaultStyle(feature, resolution)[0]; // return createDefaultStyle(feature, resolution)[0];
return null; return null;
} }
const params = styles[type].getParameters(feature); const params = styles[type].getParameters(feature);
// console.log({
// caller: 'style',
// type,
// styleForType,
// params,
// feature,
// resolution,
// });
if (params === null || params?.isHidden) { if (params === null || params?.isHidden) {
return null; return null;
} }

116
src/components/overlays/Overlays.tsx
View File

@ -20,6 +20,8 @@ import { getMap, getZoomInteger } from '../map/Map';
import { getCenter } from 'ol/extent'; import { getCenter } from 'ol/extent';
import { Projection } from 'ol/proj'; import { Projection } from 'ol/proj';
import { getVectorTileFeatureType } from './overlay-definitions'; import { getVectorTileFeatureType } from './overlay-definitions';
import GeoJSON from 'ol/format/GeoJSON.js';
import TopoJSON from 'ol/format/TopoJSON.js';
interface Props { interface Props {
map: () => OlMap | null; map: () => OlMap | null;
@ -53,70 +55,72 @@ export const Overlays: Component<Props> = ({ map }) => {
const format = 'application/vnd.mapbox-vector-tile'; const format = 'application/vnd.mapbox-vector-tile';
const infoFormat = 'text/html'; const infoFormat = 'text/html';
const layerName = 'dyomedea'; const layerName = 'dyomedea';
const projection = new Projection({ // const projection = new Projection({
code: 'EPSG:900913', // code: 'EPSG:900913',
units: 'm', // units: 'm',
axisOrientation: 'neu', // axisOrientation: 'neu',
}); // });
const resolutions = [ // const resolutions = [
156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, // 156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125,
9783.939619140625, 4891.9698095703125, 2445.9849047851562, // 9783.939619140625, 4891.9698095703125, 2445.9849047851562,
1222.9924523925781, 611.4962261962891, 305.74811309814453, // 1222.9924523925781, 611.4962261962891, 305.74811309814453,
152.87405654907226, 76.43702827453613, 38.218514137268066, // 152.87405654907226, 76.43702827453613, 38.218514137268066,
19.109257068634033, 9.554628534317017, // 19.109257068634033, 9.554628534317017,
]; // ];
const params = { // const params = {
REQUEST: 'GetTile', // REQUEST: 'GetTile',
SERVICE: 'WMTS', // SERVICE: 'WMTS',
VERSION: '1.0.0', // VERSION: '1.0.0',
LAYER: layerName, // LAYER: layerName,
STYLE: geoServerStyle, // STYLE: geoServerStyle,
TILEMATRIX: gridsetName + ':{z}', // TILEMATRIX: gridsetName + ':{z}',
TILEMATRIXSET: gridsetName, // TILEMATRIXSET: gridsetName,
FORMAT: format, // FORMAT: format,
TILECOL: '{x}', // TILECOL: '{x}',
TILEROW: '{y}', // TILEROW: '{y}',
}; // };
function constructSource() { // function constructSource() {
let url = baseUrl + '?'; // let url = baseUrl + '?';
for (const param in params) { // for (const param in params) {
url = url + param + '=' + params[param] + '&'; // url = url + param + '=' + params[param] + '&';
} // }
url = url.slice(0, -1); // url = url.slice(0, -1);
const source = new VectorTileSource({ // const source = new VectorTileSource({
url: url, // url: url,
format: new MVT({ featureClass: Feature }), // format: new MVT({ featureClass: Feature }),
projection: projection, // projection: projection,
// minZoom: 8, // // minZoom: 8,
// maxZoom: 14, // // maxZoom: 14,
tileGrid: new WMTSTileGrid({ // tileGrid: new WMTSTileGrid({
tileSize: [256, 256], // tileSize: [256, 256],
origin: [-2.003750834e7, 2.003750834e7], // origin: [-2.003750834e7, 2.003750834e7],
resolutions: resolutions, // resolutions: resolutions,
matrixIds: gridNames, // matrixIds: gridNames,
minZoom: 10, // minZoom: 10,
}), // }),
wrapX: true, // wrapX: true,
}); // });
return source; // 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=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 // 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({ 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: 'https://geo.dyomedea.com/geoserver/gwc/service/wmts/rest/hiking/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=application/json;type=geojson',
// // 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/geoserver/gwc/service/wmts/rest/hiking/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile',
// // url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf', // url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3Atransportation@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf',
// format: new MVT({ featureClass: Feature }), // url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
// maxZoom: 14, format: new GeoJSON({ dataProjection: 'EPSG:900913' }),
// tileSize: 256, // format: new MVT({ featureClass: Feature }),
// }); maxZoom: 15,
tileSize: 256,
});
vectorTileLayer = new VectorTileLayer({ vectorTileLayer = new VectorTileLayer({
source: vectorTileSource, source: vectorTileSource,