Adaptation to geoserver

This commit is contained in:
Eric van der Vlist 2023-01-26 16:48:59 +01:00
parent 1b4e170690
commit c7852ad727
3 changed files with 52 additions and 17 deletions

View File

@ -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;

View File

@ -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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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()));

View File

@ -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,