Vector Tiles in EPSG:2056 #165
Replies: 2 comments 26 replies
-
|
Hi @FabianRechsteiner In Line 1845 in 80a86a9 You have multiple choice for customization, but first you'll need to create a TileMatrixSet JSON document following the specs found in the geoserver docs (https://ogc.heig-vd.ch/geoserver/ogc/tiles/tileMatrixSets/EPSG%3A2056?f=application%2Fjson should work) Then you need to tell the endpoints that your TMS is available:
If you place you json file in a directory and then set or
This will require more work but also enable more customization from contextlib import asynccontextmanager
from typing import Any, List
import jinja2
from tipg.collections import register_collection_catalog
from tipg.database import close_db_connection, connect_to_db
from tipg.errors import DEFAULT_STATUS_CODES, add_exception_handlers
from tipg.factory import Endpoints
from tipg.middleware import CacheControlMiddleware, CatalogUpdateMiddleware
from tipg.settings import (
APISettings,
CustomSQLSettings,
DatabaseSettings,
PostgresSettings,
)
from fastapi import FastAPI, Request
from starlette.middleware.cors import CORSMiddleware
from starlette.templating import Jinja2Templates
from starlette_cramjam.middleware import CompressionMiddleware
import morecantile
settings = APISettings()
postgres_settings = PostgresSettings()
db_settings = DatabaseSettings()
custom_sql_settings = CustomSQLSettings()
default_tms = morecantile.tms.register({"MyCustomTmsEPSG2056": "path to the TMS file"})
@asynccontextmanager
async def lifespan(app: FastAPI):
"""FastAPI Lifespan."""
# Create Connection Pool
await connect_to_db(
app,
settings=postgres_settings,
schemas=db_settings.schemas,
user_sql_files=custom_sql_settings.sql_files,
)
# Register Collection Catalog
await register_collection_catalog(
app,
schemas=db_settings.schemas,
tables=db_settings.tables,
exclude_tables=db_settings.exclude_tables,
exclude_table_schemas=db_settings.exclude_table_schemas,
functions=db_settings.functions,
exclude_functions=db_settings.exclude_functions,
exclude_function_schemas=db_settings.exclude_function_schemas,
spatial=db_settings.only_spatial_tables,
spatial_extent=db_settings.spatial_extent,
datetime_extent=db_settings.datetime_extent,
)
yield
# Close the Connection Pool
await close_db_connection(app)
app = FastAPI(
title=settings.name,
openapi_url="/api",
docs_url="/api.html",
lifespan=lifespan,
)
ogc_api = Endpoints(
title=settings.name,
supported_tms=default_tms,
with_tiles_viewer=settings.add_tiles_viewer,
)
app.include_router(ogc_api.router)
app.add_middleware(CacheControlMiddleware, cachecontrol=settings.cachecontrol)
app.add_middleware(CompressionMiddleware)
add_exception_handlers(app, DEFAULT_STATUS_CODES) |
Beta Was this translation helpful? Give feedback.
-
|
as far as I know MapLibre do not support other TMS than WebMercator (maplibre/maplibre-gl-js#168) I usually use Leaflet <!doctype html>
<html lang="en">
<head>
<style>
body { margin:0; padding: 0; width:100%; height:100%;}
.map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/lib/proj4-compressed.js"></script>
<script src="https://unpkg.com/[email protected]/src/proj4leaflet.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var crs = new L.Proj.CRS(
'http://www.opengis.net/def/crs/EPSG/0/2056',
'+proj=somerc +lat_0=46.9524055555556 +lon_0=7.43958333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +units=m +no_defs +type=crs', {
origin: [2419995.75, 1350004.29],
bounds: L.bounds(
L.Point(2419995.75, 326004.29000000004),
L.Point(3443995.75, 1350004.29)
),
resolutions: [4000.0, 2000.0, 1000.0, 500.0, 250.0, 100.0, 50.0, 20.0, 10.0, 5.0, 2.5, 1.0, 0.5, 0.25, 0.1, 0.05],
}
);
var map = L.map('map', {
center: [47, 10],
zoom: 3,
maxZoom: 10,
crs: crs
});
// L.tileLayer(
// "http://127.0.0.1:8080/cog/tiles/SwissLV95CellSizes/{z}/{x}/{y}@1x?url=world.tif",
// {
// minZoom: 0,
// maxZoom: 8,
// bounds: L.latLngBounds([-90, -180], [90, 180]),
// }
// ).addTo(map);
L.vectorGrid.protobuf(
"http://127.0.0.1:8000/collections/public.gg_gemeindegrenze_mv/tiles/SwissLV95CellSizes/{z}/{x}/{y}",
).addTo(map)
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
<!DOCTYPE html>
<html>
<head>
<title>LV95 Grid</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/ol.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/proj4.min.js"></script>
<style>
body {
font-family: sans, "Helvetica";
}
.map {
height: 600px;
top: 3em;
width: 100%;
background: #f8f4f0;
}
</style>
</head>
<body>
<h2>Custom User Grid (Swiss LV95)</h2>
<div id="map" class="map"></div>
<script>
/* Custom resolutions, from Swiss norm eCH-0056 (https://www.ech.ch/fr/ech/ech-0056/3.0) */
const RESOLUTIONS = [
4000, 3750, 3500, 3250, 3000, 2750, 2500, 2250, 2000, 1750, 1500, 1250,
1000, 750, 650, 500, 250, 100, 50, 20, 10, 5, 2.5, 2, 1.5, 1, 0.5
];
/* Registering and setting a new custom projection */
proj4.defs("EPSG:2056", "+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs");
ol.proj.proj4.register(proj4);
var extent = [2420000, 1030000, 2900000, 1350000];
var projection = ol.proj.get("EPSG:2056");
projection.setExtent(extent);
/* Convenience methods for trying new layers */
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const layername = urlParams.get('layer') || 'g1k18'
const debug = urlParams.get('debug') || false;
const servername = urlParams.get('server') || location.origin;
/* Setting up the custom grid */
var matrixIds = [];
for (var i = 0; i < RESOLUTIONS.length; i++) {
matrixIds.push(i);
}
var tileGrid = new ol.tilegrid.WMTS({
origin: [extent[0], extent[3]],
resolutions: RESOLUTIONS,
matrixIds: matrixIds
});
/* Trusted WMTS raster layer */
var wmtsLayer = new ol.layer.Tile({
source: new ol.source.WMTS(({
url: 'https://wmts.geo.admin.ch/1.0.0/{Layer}/default/current/2056/{TileMatrix}/{TileCol}/{TileRow}.jpeg',
tileGrid: tileGrid,
projection: projection,
layer: "ch.swisstopo.swissimage",
requestEncoding: 'REST'
}))
});
/* Vector layer of interest */
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#FFFF33',
width: 3
})
});
var vtLayer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
tileGrid: tileGrid,
tilePixelRatio: 16,
url: 'http://localhost:8080/collections/avprodukt.gg_gemeindegrenze_mv/tiles/SwissLV95CellSizes/{z}/{x}/{y}',
projection: projection
}),
style: style
});
/* Displaying the tiles names, for debugging */
const tileDebug = new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: vtLayer.getSource().getProjection(),
tileGrid: vtLayer.getSource().getTileGrid(),
})
});
/* View and vector projection have to match, no reprojection like for raster layers */
var map = new ol.Map({
layers: [wmtsLayer, vtLayer],
target: 'map',
view: new ol.View({
center: [2660000, 1190000],
projection: projection,
resolution: 500
})
});
if (debug) {
map.addLayer(tileDebug);
}
</script>
</body>
</html>I used this map for the test. |
Beta Was this translation helpful? Give feedback.
-
|
Yes I've seen this as well, this must comes from Lines 386 to 405 in 1edfab5 I'm not quite sure why At the same time, I've saw you're also looking at Tegola, are you able to make it work with this TMS? have you also looked at other Tile server (just so we can compare and find where we have a bug) |
Beta Was this translation helpful? Give feedback.
-
|
🤔 the JS code looks also a bit weird to me you have while looking at the TMS the resolution should be: The CRS is also a bit different from what pyproj gives us |
Beta Was this translation helpful? Give feedback.
-
|
So, I've looked at https://wmts.geo.admin.ch/EPSG/2056/1.0.0/WMTSCapabilities.xml and the TMS definition for When I then use this TMS with <!doctype html>
<html lang="en">
<head>
<style>
body { margin:0; padding: 0; width:100%; height:100%;}
.map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/lib/proj4-compressed.js"></script>
<script src="https://unpkg.com/[email protected]/src/proj4leaflet.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var crs = new L.Proj.CRS(
'http://www.opengis.net/def/crs/EPSG/0/2056',
'+proj=somerc +lat_0=46.9524055555556 +lon_0=7.43958333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +units=m +no_defs +type=crs', {
origin: [2420000.0, 1350000.0],
bounds: L.bounds(
L.Point(2420000.0, 326000.0),
L.Point(3444000.0, 1350000.0)
),
resolutions: [4000.0, 3750.0, 3500.0, 3250.0, 3000.0, 2750.0, 2500.0, 2250.0, 2000.0, 1750.0, 1500.0, 1250.0, 1000.0, 750.0, 650.0, 250.0, 100.0, 50.0, 20.0, 20.0, 10.0, 5.0, 2.5, 2.0, 1.5, 1.0, 0.5],
}
);
var map = L.map('map', {
center: [47, 10],
zoom: 3,
maxZoom: 24,
crs: crs
});
L.tileLayer(
"https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.swissimage/default/current/2056/{z}/{x}/{y}.jpeg",
).addTo(map);
L.vectorGrid.protobuf(
"http://127.0.0.1:8000/collections/public.gg_gemeindegrenze_mv/tiles/2056_26/{z}/{x}/{y}",
).addTo(map)
</script>
</body>
</html>I get something that looks ok 
I've tried with OpenLayer but without success 🤷 |
Beta Was this translation helpful? Give feedback.
-
|
Just FYI, last year we were able to run a service providing VT in CRS:2056 with t-rex https://github.com/t-rex-tileserver/t-rex. PS: the example are based on resolutions available in wmts.geo.admin.ch (2056) which are non exactly those of SwissLV95CellSizes |
Beta Was this translation helpful? Give feedback.
-
|
... and here https://github.com/p1d1d1/p1d1d1.github.io/tree/master/vt a quickly modified version of the 2 files. Using SwissLV95CellSizes as TMS for the VT and a WMS layer as background. It seems to work |
Beta Was this translation helpful? Give feedback.
-
I would like to make my geospatial data available as Vector Tiles in the national coordinate system of Switzerland, EPSG:2056. Is it possible to support this as well?
Example: Geoserver
Beta Was this translation helpful? Give feedback.
All reactions