Skip to content

Commit

Permalink
Handle baselayers reprojection
Browse files Browse the repository at this point in the history
  • Loading branch information
@nboisteault
nboisteault committed Jun 6, 2023
1 parent 90daf2b commit 7e5379b
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 108 deletions.
6 changes: 3 additions & 3 deletions assets/src/components/BaseLayers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ export default class BaseLayers extends HTMLElement {
connectedCallback() {

this._template = () => html`
<select @change=${(event) => { mainLizmap.baseLayersMap.setLayerVisibilityByTitle(event.target.value) }}>
${mainLizmap.baseLayersMap.getAllLayers().map((layer) =>
html`<option .selected="${layer.getVisible()}" value="${layer.get('title')}">${layer.get('title')}</option>`)}
<select @change=${(event) => { mainLizmap.baseLayersMap.changeBaseLayer(event.target.value) }}>
${mainLizmap.baseLayersMap.baseLayersGroup.getLayers().getArray().map((layer) =>
html`<option .selected="${layer.getVisible()}" value="${layer.get('name')}">${layer.get('name')}</option>`)}
</select>`;

render(this._template(), this);
Expand Down
174 changes: 69 additions & 105 deletions assets/src/modules/BaseLayersMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import { mainLizmap, mainEventDispatcher } from '../modules/Globals.js';
import Utils from '../modules/Utils.js';
import olMap from 'ol/Map';
import View from 'ol/View';
import { transformExtent, Projection } from 'ol/proj';
import { transformExtent, get as getProjection } from 'ol/proj';
import { register } from 'ol/proj/proj4';
import proj4 from 'proj4';
import ImageWMS from 'ol/source/ImageWMS.js';
import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS.js';
import WMTSCapabilities from 'ol/format/WMTSCapabilities.js';
import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer.js';
import OSM from 'ol/source/OSM';
import Stamen from 'ol/source/Stamen';
import XYZ from 'ol/source/XYZ';
import BingMaps from 'ol/source/BingMaps';
import LayerGroup from 'ol/layer/Group';
Expand All @@ -23,11 +23,7 @@ export default class BaseLayersMap extends olMap {

constructor() {
const qgisProjectProjection = mainLizmap.projection;
let mapProjection = new Projection({code: qgisProjectProjection});

if(!['EPSG:3857', 'EPSG:4326'].includes(qgisProjectProjection)){
mapProjection.setExtent(mainLizmap.lizmap3.map.restrictedExtent.toArray());
}
const mapProjection = getProjection(qgisProjectProjection);

super({
controls: [], // disable default controls
Expand All @@ -51,106 +47,46 @@ export default class BaseLayersMap extends olMap {
target: 'baseLayersOlMap'
});

if (mainLizmap.config.options?.['osmMapnik']) {
this.addLayer(
new TileLayer({
title: 'OpenStreetMap',
source: new OSM()
})
);
}

if (mainLizmap.config.options?.['osmStamenToner']) {
this.addLayer(
new TileLayer({
source: new Stamen({
title: 'OSM Stamen Toner',
layer: 'toner-lite',
}),
}),
);
}

if (mainLizmap.config.options?.['openTopoMap']) {
this.addLayer(
new TileLayer({
title: 'OpenTopoMap',
source: new XYZ({
url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png'
})
})
);
}

if(mainLizmap.config.options?.['osmCyclemap'] && mainLizmap.config.options?.['OCMKey']){
this.addLayer(
new TileLayer({
name: 'osm-cycle',
title: 'OSM CycleMap',
source: new XYZ({
url : 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=' + mainLizmap.config.options?.['OCMKey']
})
})
);
}


// Bing
if(Object.keys(mainLizmap.config.options).some( option => option.startsWith('bing'))){
const bingConfigs = {
bingStreets : {
title: 'Bing Road',
imagerySet: 'RoadOnDemand'
},
bingSatellite : {
title: 'Bing Aerial',
imagerySet: 'Aerial'
},
bingHybrid : {
title: 'Bing Hybrid',
imagerySet: 'AerialWithLabelsOnDemand'
}
};

for (const key in bingConfigs) {
if(mainLizmap.config.options?.[key]){

const bingConfig = bingConfigs[key];

this.addLayer(
new TileLayer({
title: bingConfig.title,
preload: Infinity,
source: new BingMaps({
key: mainLizmap.config.options.bingKey,
imagerySet: bingConfig.imagerySet,
culture: navigator.language
}),
})
);
}
}
}

const baseLayers = [];
let firstBaseLayer = true;
let cfgBaseLayers = [];
if(mainLizmap.config?.baseLayers){
cfgBaseLayers = Object.entries(mainLizmap.config.baseLayers);
}
for (const [title, params] of cfgBaseLayers) {
if(params.type = 'xyz'){
baseLayers.push(
new TileLayer({
title: title,
visible: firstBaseLayer,
source: new XYZ({
url: params.url,
minZoom: params?.zmin,
maxZoom: params?.zmax,
})
for (const [name, params] of cfgBaseLayers) {
let baseLayer;
if (params.type === 'xyz') {
baseLayer = new TileLayer({
visible: firstBaseLayer,
source: new XYZ({
url: params.url,
projection: params.crs,
minZoom: params?.zmin,
maxZoom: params?.zmax,
})
});
} else if (params.type === 'wms') {
baseLayer = new ImageLayer({
visible: firstBaseLayer,
source: new ImageWMS({
url: params.url,
projection: params.crs,
params: {
LAYERS: params.layer,
FORMAT: params.format
},
})
);
});
}

baseLayer.setProperties({
name: name
});

baseLayers.push(baseLayer);

if (firstBaseLayer && params.crs !== qgisProjectProjection) {
this.getView().getProjection().setExtent(mainLizmap.lizmap3.map.restrictedExtent.toArray());
}

firstBaseLayer = false;
Expand Down Expand Up @@ -197,7 +133,7 @@ export default class BaseLayersMap extends olMap {
} else {
let layer;
// Keep only layers with a geometry
if(layerCfg.type !== 'layer'){
if(layerCfg?.type !== 'layer'){
return;
}
if(["", "none", "unknown"].includes(layerCfg.geometryType)){
Expand Down Expand Up @@ -287,8 +223,13 @@ export default class BaseLayersMap extends olMap {
}
}

this._overlayLayersGroup = createNode(mainLizmap.config.layersTree);
this._overlayLayersGroup = new LayerGroup();

if(mainLizmap.config.layersTree.children.length){
this._overlayLayersGroup = createNode(mainLizmap.config.layersTree);
}

// Add base and overlay layers to the map's main LayerGroup
this.setLayerGroup(new LayerGroup({
layers: [this._baseLayersGroup, this._overlayLayersGroup]
}));
Expand All @@ -304,6 +245,10 @@ export default class BaseLayersMap extends olMap {
this.syncNewOLwithOL2View();
}

get baseLayersGroup(){
return this._baseLayersGroup;
}

get overlayLayersAndGroups(){
return this._overlayLayersAndGroups;
}
Expand All @@ -329,8 +274,27 @@ export default class BaseLayersMap extends olMap {
});
}

setLayerVisibilityByTitle(title){
this.getAllLayers().map( baseLayer => baseLayer.setVisible(baseLayer.get('title') == title));
changeBaseLayer(name){
let selectedBaseLayer;
// Choosen base layer is visible, others not
this.baseLayersGroup.getLayers().forEach( baseLayer => {
if (baseLayer.get('name') == name) {
selectedBaseLayer = baseLayer;
baseLayer.set("visible", true, true);
} else {
baseLayer.set("visible", false, true);
}
});

this._baseLayersGroup.changed();

// If base layer projection is different from project projection
// We must set the project extent to the View to reproject nicely
if (selectedBaseLayer.getSource().getProjection().getCode() !== mainLizmap.projection) {
this.getView().getProjection().setExtent(mainLizmap.lizmap3.map.restrictedExtent.toArray());
} else {
this.getView().getProjection().setExtent(getProjection(mainLizmap.projection).getExtent());
}
}

/**
Expand Down

0 comments on commit 7e5379b

Please sign in to comment.