Skip to content

Commit

Permalink
Merge pull request #84 from camptocamp/improve-wmts-example
Browse files Browse the repository at this point in the history
Better WMTS layer creation
  • Loading branch information
jahow authored Nov 11, 2024
2 parents d21fe18 + 519d5cf commit ea20885
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 32 deletions.
8 changes: 8 additions & 0 deletions app/src/Docs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,7 @@ async function getFirstTenRecords() {
<pre>
import TileLayer from 'ol/layer/Tile';
import WMTS from 'ol/source/WMTS';
import { transformExtent } from 'ol/proj';
import { WmtsEndpoint } from '@camptocamp/ogc-client';

// create the OpenLayers map
Expand Down Expand Up @@ -226,6 +227,13 @@ async function addWmtsLayer() {
projection: matrixSet.crs,
dimensions,
}),
// this will limit the rendering to the actual range where data is available
maxResolution: tileGrid.getResolutions()[0],
extent: transformExtent(
layer.latLonBoundingBox,
'EPSG:4326',
openLayersMap.getView().getProjection()
);
});
openLayersMap.addLayer(layer);
}</pre
Expand Down
37 changes: 10 additions & 27 deletions app/src/components/wmts/WmtsLayerInfo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,37 +44,11 @@ import TileLayer from 'ol/layer/Tile';
import WMTS from 'ol/source/WMTS';
import proj4 from 'proj4';
import { register } from 'ol/proj/proj4';
import { transformExtent } from 'ol/proj';
// this is necessary for tile reprojection to work
register(proj4);
async function addWmtsLayer(olMap) {
const endpoint = await new WmtsEndpoint(
'https://my.server.org/wmts'
).isReady();
const layer = endpoint.getLayers()[0];
const matrixSetLink = layer.matrixSets[0];
const tileGrid = await endpoint.getOpenLayersTileGrid(
layer.name,
matrixSetLink.identifier
);
const resourceLink = layer.resourceLinks[0];
const dimensions = endpoint.getDefaultDimensions(layer.name);
const olLayer = new TileLayer({
source: new WMTS({
layer: this.layer.name,
matrixSet: matrixSetLink.identifier,
format: resourceLink.format,
url: resourceLink.url,
requestEncoding: resourceLink.encoding,
tileGrid,
projection: matrixSetLink.crs,
dimensions,
}),
});
olMap.addLayer(olLayer);
}
export default {
name: 'WmtsLayerInfo',
components: { InfoList },
Expand Down Expand Up @@ -136,7 +110,16 @@ export default {
projection: matrixSetLink.crs,
dimensions,
}),
maxResolution: tileGrid.getResolutions()[0],
});
if (this.layer.latLonBoundingBox) {
const extent = transformExtent(
this.layer.latLonBoundingBox,
'EPSG:4326',
'EPSG:3857'
);
layer.setExtent(extent);
}
this.olMap.addLayer(layer);
},
},
Expand Down
14 changes: 9 additions & 5 deletions src/wmts/endpoint.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { setQueryParams } from '../shared/http-utils.js';
import { useCache } from '../shared/cache.js';
import { parseWmtsCapabilities } from '../worker/index.js';
import {
WmtsLayerDimensionValue,
WmtsLayerResourceLink,
WmtsEndpointInfo,
WmtsLayer,
WmtsLayerDimensionValue,
WmtsLayerResourceLink,
WmtsMatrixSet,
} from './model.js';
import { generateGetTileUrl } from './url.js';
Expand Down Expand Up @@ -209,8 +209,12 @@ export default class WmtsEndpoint {
(matrixSet) => matrixSet.identifier === matrixSetIdentifier
) ?? layer.matrixSets[0];
const matrixSet = this.getMatrixSetByIdentifier(matrixSetLink.identifier);
return this.tileGridModule.then(({ buildOpenLayersTileGrid }) =>
buildOpenLayersTileGrid(matrixSet, matrixSetLink.limits)
);
return this.tileGridModule.then((olTileGridModule) => {
if (!olTileGridModule) return null;
return olTileGridModule.buildOpenLayersTileGrid(
matrixSet,
matrixSetLink.limits
);
});
}
}

0 comments on commit ea20885

Please sign in to comment.