Testing with geoserver

This commit is contained in:
Eric van der Vlist 2023-01-25 22:13:34 +01:00
parent b85c82b70e
commit 1b4e170690
2 changed files with 115 additions and 8 deletions

View File

@ -437,6 +437,10 @@ const styles = {
}; };
export const style = (feature: Feature, resolution: number) => { 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' });
}
const type = ( const type = (
feature.get('type') !== undefined ? feature.get('type') : feature.type_ feature.get('type') !== undefined ? feature.get('type') : feature.type_
) as keyof typeof styles; ) as keyof typeof styles;

View File

@ -12,11 +12,13 @@ import { Point } from 'ol/geom';
import VectorLayer from 'ol/layer/Vector'; import VectorLayer from 'ol/layer/Vector';
import VectorTileLayer from 'ol/layer/VectorTile'; import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile.js'; import VectorTileSource from 'ol/source/VectorTile.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import Cluster from 'ol/source/Cluster'; import Cluster from 'ol/source/Cluster';
import { style } from '../gpx/styles'; import { style } from '../gpx/styles';
import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy'; import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
import { getMap, getZoomInteger } from '../map/Map'; import { getMap, getZoomInteger } from '../map/Map';
import { getCenter } from 'ol/extent'; import { getCenter } from 'ol/extent';
import { Projection } from 'ol/proj';
interface Props { interface Props {
map: () => OlMap | null; map: () => OlMap | null;
@ -27,11 +29,112 @@ let vectorTileLayer: VectorTileLayer;
export const Overlays: Component<Props> = ({ map }) => { export const Overlays: Component<Props> = ({ map }) => {
onMount(() => { onMount(() => {
const vectorTileSource = new VectorTileSource({ const gridsetName = 'EPSG:900913';
url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf', const gridNames = [
format: new MVT({ featureClass: Feature }), 'EPSG:900913:0',
'EPSG:900913:1',
'EPSG:900913:2',
'EPSG:900913:3',
'EPSG:900913:4',
'EPSG:900913:5',
'EPSG:900913:6',
'EPSG:900913:7',
'EPSG:900913:8',
'EPSG:900913:9',
'EPSG:900913:10',
'EPSG:900913:11',
'EPSG:900913:12',
'EPSG:900913:13',
'EPSG:900913:14',
'EPSG:900913:15',
'EPSG:900913:16',
'EPSG:900913:17',
'EPSG:900913:18',
'EPSG:900913:19',
'EPSG:900913:20',
'EPSG:900913:21',
'EPSG:900913:22',
'EPSG:900913:23',
'EPSG:900913:24',
'EPSG:900913:25',
'EPSG:900913:26',
'EPSG:900913:27',
'EPSG:900913:28',
'EPSG:900913:29',
'EPSG:900913:30',
];
const baseUrl = 'http://localhost:8081/geoserver/gwc/service/wmts';
const style = '';
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, 4.777314267158508,
2.388657133579254, 1.194328566789627, 0.5971642833948135,
0.29858214169740677, 0.14929107084870338, 0.07464553542435169,
0.037322767712175846, 0.018661383856087923, 0.009330691928043961,
0.004665345964021981, 0.0023326729820109904, 0.0011663364910054952,
5.831682455027476e-4, 2.915841227513738e-4, 1.457920613756869e-4,
];
const params = {
REQUEST: 'GetTile',
SERVICE: 'WMTS',
VERSION: '1.0.0',
LAYER: layerName,
STYLE: style,
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);
const source = new VectorTileSource({
url: url,
format: new MVT({}),
projection: projection,
tileGrid: new WMTSTileGrid({
tileSize: [256, 256],
origin: [-2.003750834e7, 2.003750834e7],
resolutions: resolutions,
matrixIds: gridNames,
}),
wrapX: true,
maxZoom: 14, maxZoom: 14,
}); });
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 = 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,
// });
vectorTileLayer = new VectorTileLayer({ vectorTileLayer = new VectorTileLayer({
source: vectorTileSource, source: vectorTileSource,
@ -48,15 +151,15 @@ export const Overlays: Component<Props> = ({ map }) => {
distance: 30, distance: 30,
minDistance: 10, minDistance: 10,
geometryFunction: (feature: Feature) => { geometryFunction: (feature: Feature) => {
console.log({
caller: 'Map / Cluster / geometryFunction ',
feature,
});
if ( if (
getZoomInteger() < 14 && getZoomInteger() < 14 &&
feature.get('type') === 'poi' && feature.get('type') === 'poi' &&
isHighlighted(feature) isHighlighted(feature)
) { ) {
// console.log({
// caller: 'Map / Cluster / geometryFunction / true',
// feature,
// });
return new Point(getCenter(feature.getGeometry().getExtent())); return new Point(getCenter(feature.getGeometry().getExtent()));
} }
return null; return null;