Relying on server side vector tile filtering
This commit is contained in:
parent
c17f47bb67
commit
e7c9d0e7cb
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<Props> = ({ 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',
|
||||
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: 14,
|
||||
// tileSize: 256,
|
||||
// });
|
||||
maxZoom: 15,
|
||||
tileSize: 256,
|
||||
});
|
||||
|
||||
vectorTileLayer = new VectorTileLayer({
|
||||
source: vectorTileSource,
|
||||
|
|
|
|||
Loading…
Reference in New Issue