Testing with geoserver
This commit is contained in:
parent
b85c82b70e
commit
1b4e170690
|
|
@ -437,6 +437,10 @@ 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' });
|
||||
}
|
||||
const type = (
|
||||
feature.get('type') !== undefined ? feature.get('type') : feature.type_
|
||||
) as keyof typeof styles;
|
||||
|
|
|
|||
|
|
@ -12,11 +12,13 @@ import { Point } from 'ol/geom';
|
|||
import VectorLayer from 'ol/layer/Vector';
|
||||
import VectorTileLayer from 'ol/layer/VectorTile';
|
||||
import VectorTileSource from 'ol/source/VectorTile.js';
|
||||
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
|
||||
import Cluster from 'ol/source/Cluster';
|
||||
import { style } from '../gpx/styles';
|
||||
import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
|
||||
import { getMap, getZoomInteger } from '../map/Map';
|
||||
import { getCenter } from 'ol/extent';
|
||||
import { Projection } from 'ol/proj';
|
||||
|
||||
interface Props {
|
||||
map: () => OlMap | null;
|
||||
|
|
@ -27,11 +29,112 @@ let vectorTileLayer: VectorTileLayer;
|
|||
|
||||
export const Overlays: Component<Props> = ({ map }) => {
|
||||
onMount(() => {
|
||||
const vectorTileSource = new VectorTileSource({
|
||||
url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
|
||||
format: new MVT({ featureClass: Feature }),
|
||||
maxZoom: 14,
|
||||
const gridsetName = 'EPSG:900913';
|
||||
const gridNames = [
|
||||
'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,
|
||||
});
|
||||
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({
|
||||
source: vectorTileSource,
|
||||
|
|
@ -48,15 +151,15 @@ export const Overlays: Component<Props> = ({ map }) => {
|
|||
distance: 30,
|
||||
minDistance: 10,
|
||||
geometryFunction: (feature: Feature) => {
|
||||
console.log({
|
||||
caller: 'Map / Cluster / geometryFunction ',
|
||||
feature,
|
||||
});
|
||||
if (
|
||||
getZoomInteger() < 14 &&
|
||||
feature.get('type') === 'poi' &&
|
||||
isHighlighted(feature)
|
||||
) {
|
||||
// console.log({
|
||||
// caller: 'Map / Cluster / geometryFunction / true',
|
||||
// feature,
|
||||
// });
|
||||
return new Point(getCenter(feature.getGeometry().getExtent()));
|
||||
}
|
||||
return null;
|
||||
|
|
|
|||
Loading…
Reference in New Issue