openlayers afficher une couche CartoWeb.be

**ubunoe** · 20/11/2022, 10h19

Bonjour,
comment pourrais je afficher la couche TOPO de Cartoweb.be avec l'api ign openlayers ?

https://www.ngi.be/website/fr/offre/...cartoweb-be-2/

Le service web CartoWeb.be peut être utilisé comme :
WMS: https://cartoweb.wms.ngi.be/service?...&version=1.3.0
WMTS: https://cartoweb.wmts.ngi.be/1.0.0/WMTSCapabilities.xml

Cordialement,

Pierre

**saxrub** · 20/11/2022, 10h52

Comme pour une couche OSM peut-être ?

**ubunoe** · 20/11/2022, 11h55

Il faut sans doute utiliser une TyleLayer comme dans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import View from 'ol/View';

const layers = [
  new TileLayer({
    source: new OSM(),
  }),
  new TileLayer({
    extent: [-13884991, 2870341, -7455066, 6338219],
    source: new TileWMS({
      url: 'https://ahocevar.com/geoserver/wms',
      params: {'LAYERS': 'topp:states', 'TILED': true},
      serverType: 'geoserver',
      // Countries have transparency, so do not fade tiles:
      transition: 0,
    }),
  }),
];
const map = new Map({
  layers: layers,
  target: 'map',
  view: new View({
    center: [-10997148, 4569099],
    zoom: 4,
  }),
});

source :
https://openlayers.org/en/v6.15.1/ap...TileLayer.html

**ubunoe** · 20/11/2022, 18h28

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
window.onload = function() {
  const mapcenter = [5.0674, 49.7902];
  const map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults({
      attribution: false
    }),
    view: new ol.View({
      center: ol.proj.fromLonLat(mapcenter),
      zoom: 19
    })
  });
  const layersMap = map.getLayers();
  const osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });
  layersMap.insertAt(0, osmLayer);

  const beLayerURL = 'https://cartoweb.wmts.ngi.be/1.0.0';
  const beLayer = new ol.layer.Tile({
    source: new ol.source.TileWMS({
      url: beLayerURL,
      // projection: 'EPSG:3857',
      params: {
        // projection: 'EPSG:3857',
        layers: 'topo',
        // tiled: true,
        serverType: 'geoserver',
        format: 'png'
      }
    })
  });
  layersMap.insertAt(0, beLayer);
  
  const layerSwitcher = new ol.control.LayerSwitcher();
  map.addControl(layerSwitcher);

  layerSwitcher.addLayer(osmLayer, {
    title: 'OpenStreetMap',
    description: 'Carte OpenStreetMap'
  });

  layerSwitcher.addLayer(beLayer, {
    title: 'Belgique',
    description: 'Carte Belgique',
    legends: [{ url: 'https://cartoweb.wmts.ngi.be/legend/topo/default/legende_fr.png' }]
  });

};

La carte OSM s'affiche bien sur la belgique mais pas la carte cartoweb.be.

**ubunoe** · 21/11/2022, 14h46

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
  const beLayerURL = 'https://cartoweb.wmts.ngi.be/1.0.0/topo/default/3857/{z}/{y}/{x}.png';
  const beLayer = new ol.layer.Tile({
    // extent: [2.51141671277, 49.4542277635, 6.57174320725, 51.5056073315],
    source: new ol.source.XYZ({
      url: beLayerURL,
      params: {
        layers: 'topo',
        serverType: 'geoserver',
        format: 'png'
      }
    })
  });
  layersMap.insertAt(0, beLayer);

c'était sans doute indiqué dans https://cartoweb.wmts.ngi.be/1.0.0/WMTSCapabilities.xml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<ResourceURL resourceType="tile" template="https://cartoweb.wmts.ngi.be/1.0.0/topo/default/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" format="image/png"/>

Si j'active

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 extent: [2.51141671277, 49.4542277635, 6.57174320725, 51.5056073315]

alors plus rien ne s'affiche. Bizarre !

**xavlight** · 21/11/2022, 15h31

Salut Pierre,

merci pour ta recherche, ça peut toujours servir.

T'avais fait le plus dur ;-)

Sinon, pour ton extent, il suffit que tu convertisses les coordonnées géographiques en coordonnées EPSG:3857 (Web Mercator), car ta carte est dans ce format, et c'est bon.
Tu es les informations effectivement dans le xml

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<ows:WGS84BoundingBox>
<ows:LowerCorner>2.51141671277 49.4542277635</ows:LowerCorner>
<ows:UpperCorner>6.57174320725 51.5056073315</ows:UpperCorner>
</ows:WGS84BoundingBox>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var belgiumExtent = [ 279569.630, 6352288.757, 731563.107, 6711221.861 ];
var beLayer = new ol.layer.Tile({
	extent: belgiumExtent,
	source: new ol.source.XYZ({
		url: 'https://cartoweb.wmts.ngi.be/1.0.0/topo/default/3857/{z}/{y}/{x}.png',
	}),
	opacity: 1,
	visible: true
});

params n'est pas utile, car en mode XYZ, on met tout dans l'url.

Xav

**ubunoe** · 22/11/2022, 15h32

Hello,
merci Xav j'ai apporté tes améliorations et ça fonctionne super !

J'ai trouvé aussi des orthophotos pour la Belgique :
https://geoservices.wallonie.be/INSP...es&service=WMS
https://geoportail.wallonie.be/catal...0232e8785.html

soit pour openlayers :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
		// Belgique Wallonie SPW couche ortho (1)
		const beOrthoURL = "https://geoservices.wallonie.be/INSPIRE/WMS/OI/MapServer/WmsServer?";
		const beOrthoLayer = new ol.layer.Tile({
			extent: belgiumExtent,
			source: new ol.source.TileWMS({
				url: beOrthoURL,
				params: {
					layers: '1'
				}
			})
		});
		layersMap.insertAt(0, beOrthoLayer);

Pierre.

**xavlight** · 22/11/2022, 15h47

Re Pierre,

visiblement tu t'intéresses grandement à la Belgique. ;-)

J'avais trouvé ce site dans mes recherches.

https://wmts.michelstuyts.be/?lang=fr

Si ça peut te servir.

Xav