Skip to content

Commit

Permalink
Merge pull request #69 from PDOK/PDOK-15802-Webmercator-is-not-workin…
Browse files Browse the repository at this point in the history 
…g-correct

PDOK-15802 Webmercator is not working correct, only show zoom +/- whe…
  • Loading branch information
@rkettelerij
rkettelerij authored Nov 2, 2023
2 parents cc81f24 + cf8c545 commit a96dbe9
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 86 deletions.
35 changes: 17 additions & 18 deletions webcomponents/vectortile-view-component/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ type ExcludeFunctions<T extends object> = Pick<T, ExcludeFunctionPropertyNames<T
export class AppComponent implements OnChanges {
title = 'vectortile-view-component';
map = new Map({});
selector = '/{z}/{y}/{x}?f=mvt';
xyzselector = '/{z}/{y}/{x}?f=mvt';
private _showGrid = false;
private _showObjectInfo = false;
vectorTileLayer: VectorTileLayer | undefined;
Expand Down Expand Up @@ -153,9 +153,11 @@ export class AppComponent implements OnChanges {
const linkurl = this.FindMatrixUrl(tile.links);
if (linkurl) {
matrixurl = linkurl;
} else {
console.log('tileurl :' + this.tileUrl + 'not found');
}
this.drawFromMatrixUrl(tile, matrixurl);
this.SetZoom(tile);
this.SetZoomLevel(tile);
this.cdf.detectChanges();
},
error: msg => {
Expand All @@ -164,19 +166,11 @@ export class AppComponent implements OnChanges {
});
}

private SetZoom(tile: Matrix) {
private SetZoomLevel(tile: Matrix) {
tile.tileMatrixSetLimits.forEach(limit => {
if (this.tileUrl.includes('WebMercatorQuad')) {
//the matrix is not correct on server? size of vector 512px, 256px in tile grid correct?
if (!this.minZoom) {
this.minZoom = parseFloat(limit.tileMatrix) + 1;
}
}
if (this.zoom === -1) {
this.zoom = parseFloat(limit.tileMatrix);
}
if (!this.minZoom) {
this.minZoom = parseFloat(limit.tileMatrix) + 1;
this.minZoom = parseFloat(limit.tileMatrix) + 0.01;
this.zoom = this.minZoom;
}
this.maxZoom = parseFloat(limit.tileMatrix) + 1;
});
Expand Down Expand Up @@ -247,7 +241,6 @@ export class AppComponent implements OnChanges {
if (feature) {
if (this._showObjectInfo) {
this.curFeature = feature;
// this.cdf.checkNoChanges()
this.cdf.detectChanges();
}
this.activeFeature.emit(feature);
Expand All @@ -259,13 +252,14 @@ export class AppComponent implements OnChanges {

map.getView().on('change:resolution', () => {
const zoom = this.map.getView().getZoom();
console.log('zoom' + zoom);
if (zoom) {
this._zoom = zoom;
this.currentZoomLevel.next(zoom);
}
});

this.SetZoom(tile);
this.SetZoomLevel(tile);
const mapdiv: HTMLElement = this.elementRef.nativeElement.querySelector("[id='map']");
this.mapWidth = this.elementRef.nativeElement.offsetWidth;
this.mapHeight = this.elementRef.nativeElement.offsetWidth * 0.75; // height = 0.75 * width creates 4:3 aspect ratio
Expand Down Expand Up @@ -296,8 +290,12 @@ export class AppComponent implements OnChanges {
const layers = l.layers;
const acenter: Coordinate = [this.centerX, this.centerY];
this.vectorTileLayer = l.vectorTileLayer;

const contr = defaultControls({
zoom: this.maxZoom! - this.minZoom! > 1,

Check warning on line 295 in webcomponents/vectortile-view-component/src/app/app.component.ts

View workflow job for this annotation

GitHub Actions / lint-ts (18.x) 

Forbidden non-null assertion

Check warning on line 295 in webcomponents/vectortile-view-component/src/app/app.component.ts

View workflow job for this annotation

GitHub Actions / lint-ts (18.x) 

Forbidden non-null assertion
}).extend([new FullScreen()]);
this.map = new Map({
controls: defaultControls().extend([new FullScreen()]),
controls: contr,
layers: layers,
view: new View({
center: acenter,
Expand Down Expand Up @@ -340,11 +338,12 @@ export class AppComponent implements OnChanges {

private setStyle(vectorTileLayer: VectorTileLayer) {
if (this.styleUrl) {
const projection = vectorTileLayer.getSource()?.getProjection();
applyStyle(vectorTileLayer, this.styleUrl)
.then(() => {
//overrule source url and zoom from style
if (this.tileUrl !== NetherlandsRDNewQuadDefault) {
vectorTileLayer.getSource()?.setUrl(this.tileUrl + this.selector);
vectorTileLayer.setSource(this.getVectorTileSource(projection!, this.tileUrl));

Check warning on line 346 in webcomponents/vectortile-view-component/src/app/app.component.ts

View workflow job for this annotation

GitHub Actions / lint-ts (18.x) 

Forbidden non-null assertion
}
})
.catch(err => console.error('error loading: ' + this.id + ' ' + this.styleUrl + ' ' + err));
Expand Down Expand Up @@ -386,7 +385,7 @@ export class AppComponent implements OnChanges {
format: new MVT(),
projection: projection,
tileGrid: this.tileGrid,
url: url + this.selector,
url: url + this.xyzselector,
cacheSize: 0,
});
source.on(['tileloadend'], e => {
Expand Down
8 changes: 4 additions & 4 deletions webcomponents/vectortile-view-component/src/app/mapprojection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@ export class MapProjection {

if (this._tileUrl.includes(NetherlandsRDNewQuadDefault)) {
return rDprojection;
} else {
if (this._tileUrl.includes(EuropeanETRS89_LAEAQuad)) {
return ETRS89projection;
} else return mercator;
}
if (this._tileUrl.includes(EuropeanETRS89_LAEAQuad)) {
return ETRS89projection;
}
return mercator;
}
}
155 changes: 91 additions & 64 deletions webcomponents/vectortile-view-component/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
}
</style>
</head>

<body onload="load()">
<H1>Web component "app-vectortile-view" usage samples:</H1>

Expand Down Expand Up @@ -114,6 +115,91 @@ <H2>2. LD proxy <a href="https://demo.ldproxy.net/daraa/">Dalaraa</a> </H2>
});
</script>

<H1>Select vector tile </H1>

<select id="url-selector">
<option value="https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/">administrative Units</option>
<option value="https://api.pdok.nl/lv/bag/ogc/v1_0/">Buildings (BAG)</option>
<option value="https://api.pdok.nl/lv/bgt/ogc/v1_0/">Large-scale Topography (BGT)</option>
</select>

<select id="projection-selector">
<option value="NetherlandsRDNewQuad">NetherlandsRDNewQuad</option>
<option value="WebMercatorQuad">WebMercatorQuad</option>
<option value="EuropeanETRS89_LAEAQuad">EuropeanETRS89_LAEAQuad</option>
</select>

<div class="showarea">
<div class="showbox">
<div id="zoomlevel"></div>
<div id="current-url"></div>

<div>Projection:</div>
<div id="thisprojection">NetherlandsRDNewQuad</div>
<div>Url:</div>
<div id="thisurl">https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/</div>
<div id="totalurl"></div>
</div>

<div class="showbox">
<app-vectortile-view
id="vectortile"
tile-url="https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/"
center-x="5.3896944"
center-y="52.1562499"
show-grid="true"
show-object-info="true">
</app-vectortile-view>

<script>
vectortile.addEventListener('currentZoomLevel', a1 => {
console.log('zoomlevel: ');
console.log(JSON.stringify(a1.detail));
const zooml = document.getElementById('zoomlevel');
zooml.innerHTML = 'openlayers zoomlevel ' + a1.detail.toFixed(2);
});

vectortile.addEventListener('activeTileUrl', activeurl => {
console.log(JSON.stringify(activeurl.detail));

const cururl = document.getElementById('current-url');
cururl.innerHTML = 'url ' + activeurl.detail;
});

seturl();

document.addEventListener(
'input',
function (event) {
console.log(event);
if (event.target.id == 'projection-selector') {
const p = document.getElementById('thisprojection');
p.innerHTML = event.target.value;
}

if (event.target.id == 'url-selector') {
const u = document.getElementById('thisurl');
u.innerHTML = event.target.value;
}

seturl();
},
false
);

function seturl() {
const p = document.getElementById('thisprojection');
const u = document.getElementById('thisurl');
const view = document.getElementById('vectortile');
const url = u.innerHTML + 'tiles/' + p.innerHTML;
view.setAttribute('tile-url', url);
const link = document.getElementById('totalurl');
link.innerHTML = "<a href='" + url + "'> " + url + '</a>';
}
</script>
</div>
</div>

<H2>3. <a href="https://api.pdok.nl/lv/bag/ogc/v1_0/tiles/WebMercatorQuad"> BAG WebMercato with grid </a></H2>
<app-vectortile-view
id="sample3a"
Expand All @@ -129,11 +215,12 @@ <H2>3. <a href="https://api.pdok.nl/lv/bag/ogc/v1_0/tiles/WebMercatorQuad"> BAG
<div id="sample4viewlink"></div>
</H2>

<select id="sample4-select" style="width: 15%">
<select id="sample4select" style="width: 15%">
<option value="NetherlandsRDNewQuad">NetherlandsRDNewQuad</option>
<option value="WebMercatorQuad">WebMercatorQuad</option>
<option value="EuropeanETRS89_LAEAQuad">EuropeanETRS89_LAEAQuad</option>
</select>

<app-vectortile-view
id="sample4view"
tile-url="https://api.pdok.nl/lv/bag/ogc/v1_0/tiles/NetherlandsRDNewQuad"
Expand Down Expand Up @@ -163,9 +250,11 @@ <H2>4. BAG WebMercato with style</H2>
'input',
function (event) {
// only operate on srs dropdown
if (event.target.id !== 'sample4-select') return;
if (event.target.id !== 'sample4select') return;
var projection = event.target.value;

const view = document.getElementById('sample4view');

view.setAttribute('tile-url', 'https://api.pdok.nl/lv/bag/ogc/v1_0/tiles/' + projection);
const link = document.getElementById('sample4viewlink');
const url = 'https://api.pdok.nl/lv/bag/ogc/v1_0/tiles/' + projection;
Expand All @@ -187,68 +276,6 @@ <H2>5. BAG EU grid with style </H2>
show-grid
show-object-info></app-vectortile-view>

<H1>administrative unit NL </H1>
<div class="showarea">
<div class="showbox">
<div id="sample1viewlink"></div>
<div id="zoomlevel"></div>
<div id="current-url"></div>

<select id="admin-selector" style="width: 15%">
<option value="NetherlandsRDNewQuad">NetherlandsRDNewQuad</option>
<option value="WebMercatorQuad">WebMercatorQuad</option>
<option value="EuropeanETRS89_LAEAQuad">EuropeanETRS89_LAEAQuad</option>
</select>
</div>

<div class="showbox">
<app-vectortile-view
id="adminunit"
style-url="https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/styles/bestuurlijkegebieden_standaardvisualisatie?f=mapbox"
center-x="5.3896944"
center-y="52.1562499"
show-grid="true"
show-object-info="true">
</app-vectortile-view>

<script>
adminunit.addEventListener('currentZoomLevel', a1 => {
console.log('zoomlevel: ');
console.log(JSON.stringify(a1.detail));
const zooml = document.getElementById('zoomlevel');
zooml.innerHTML = 'openlayers zoomlevel ' + a1.detail.toFixed(2);
});

adminunit.addEventListener('activeTileUrl', activeurl => {
console.log(JSON.stringify(activeurl.detail));

const cururl = document.getElementById('current-url');
cururl.innerHTML = 'url ' + activeurl.detail;
});

seturl('NetherlandsRDNewQuad');

document.addEventListener(
'input',
function (event) {
// only operate on srs dropdown
if (event.target.id !== 'admin-selector') return;
var projection = event.target.value;
seturl(projection);
},
false
);

function seturl(projection) {
const view = document.getElementById('adminunit');
const url = 'https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/tiles/' + projection;
view.setAttribute('tile-url', url);
const link = document.getElementById('sample1viewlink');
link.innerHTML = "<a href='" + url + "'> " + url + '</a>';
}
</script>
</div>
</div>

<H2>Admin unit legend</H2>
<app-legend-view
Expand Down

0 comments on commit a96dbe9

Please sign in to comment.