Testing with geoserver

src/components/gpx/styles.ts

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

src/components/overlays/Overlays.tsx

@@ -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({
+    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,
       });
+      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;