Affichage des couches Géoportail sous OL, besoin d'un (sérieux) coup de main.

**wikimaginot** · 24/03/2019, 16h28

Bonjour à toutes et tous

Peu doué en javascript, je ne parviens pas à afficher les couches WMTS IGN sous OpenLayer. Une page test est disponible en ligne ici montrant le peu de résultat auquel je suis parvenu pour le moment. Le code de cette page est donné ci dessous.

La couche GEOGRAPHICALGRIDSYSTEMS.MAPS semble ne s'afficher qu'aux niveaux de zoom les plus faibles, les autres couches (ORTHOIMAGERY.ORTHOPHOTOS , CADASTRALPARCELS.PARCELS et KML ) n'apparaissent pas .

Toute aide sera bienvenue afin de permettre de remettre en route la cartographie sur wikimaginot.eu, disparue depuis février .L'objectif est de disposer d'une carte en WGS84 avec un layer kml .

Merci d'avance, Pascal

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
   	<!-- Bibliothéque OpenLayers -->
    <script type="text/javascript" src="_OL/ol.js"></script>
    <link rel="stylesheet" type="text/css" href="_OL/ol.css">
    
    <!-- Extension Géoportail pour OpenLayers -->
	<script src="_geoportail/GpPluginOpenLayers.js"></script>
	<link rel="stylesheet" href="_geoportail/GpPluginOpenLayers.css" />


    <style>
		/* Div carte */
		  .map {height: 600px;width: 100%px;}

	   /* CSS adapté pour placer le zoomslider entre les deux boutons Zoom+ et Zoom- */

		  #viewerDiv .ol-zoom .ol-zoom-out {margin-top: 204px; }
		  #viewerDiv .ol-zoomslider {background-color: transparent;top: 2.3em;}
		  #viewerDiv .ol-touch .ol-zoom .ol-zoom-out {margin-top: 212px; }
		  #viewerDiv .ol-touch .ol-zoomslider {top: 2.75em; }
		  #viewerDiv .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
		  #viewerDiv .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {top: 3px;}
		  #viewerDiv .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
		  #viewerDiv .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {top: 232px; }
    </style>

    <title>OL Test</title>
    
  </head>
  
  <body>

    <div id="viewerDiv" class="map"></div>
    OSM <input type="range" min="1" max="100" value="100" id="OsmOpacity" title="Transparence de la couche cartographique Open Street Map" > -    
    Cadastre <input type="checkbox" id="IgnCadastreToggle" checked title="Afficher les parcelles cadastrales">  - 
           
  </body>
  
</html>
    
                    
<script type="text/javascript">
	
	
    window.onload=function(){	
		// connexion geoportail
		Gp.Services.getConfig({
			apiKey: "qqanmxflnuyxcy8u1ydczvsb",
			onSuccess: go
		});
    }

	function go() {
		
	// CHARGEMENT COUCHES //////////////////////////////////////////////////

		// COUCHE CARTO OPENSTREETMAP
			var OsmCarto = new ol.layer.Tile({
				source: new ol.source.OSM(),
				projection:'EPSG:4326',
				olParams: {
					opacity: 0.5
				}	
			});

		// COUCHES CARTO IGN	
			var IgnCarto = new ol.layer.GeoportalWMTS({
				layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
				//projection:'EPSG:4326',
				olParams: {
					opacity: 0.5
				}
			});

		// COUCHE PHOTOS IGN
			var IgnPhotos =	new ol.layer.GeoportalWMTS({
				layer: "ORTHOIMAGERY.ORTHOPHOTOS",
				//projection:'EPSG:4326',
				olParams: {
					opacity: 1
				}
			});

		// COUCHE CADASTRE IGN
			var IgnCadastre =	new ol.layer.GeoportalWMTS({
				layer: "CADASTRALPARCELS.PARCELS",
				//projection:'EPSG:4326',
				olParams: {
					opacity: 0.5
				}
			});

		// COUCHES KML 
			var WikiKML = new ol.layer.Vector("Wikimaginot", {
				source: new ol.source.Vector({
					url: '_kml_files/WIKI_SFV.kml',
					format: new ol.format.KML({
						extractStyles: false, 
						extractAttributes: true,
						maxDepth: 2
					})
				})
			});
		  

	// CARTE ///////////////////////////////////////////////////////////////////////////
		
		var map = new ol.Map({
			target: 'viewerDiv',
				
			// bouton fullscreen
			controls: ol.control.defaults().extend([new ol.control.FullScreen()]),
			
			// couches 
			layers: [OsmCarto,IgnPhotos,IgnCarto,WikiKML],// dernier layer au dessus
			
			// vue a afficher
			view: new ol.View({
				projection:'EPSG:4326', // projection WGS84
				center: [7.796,48.9949], // coordonnées en WGS 84
				//center: ol.proj.transform([7.796,48.9949], 'EPSG:4326', 'EPSG:3857'),
				zoom: 14,
				minZoom :1, // echelle maximum (7=100 KM/64px)
				maxZoom: 22, // agrandissement maxi (19 = 20m/64px)
			})
		});
	
		
	// CONTROLES SUPPLEMENTAIRES v//////////////////////////////////////////////////////
		
		map.addControl(new ol.control.ScaleLine({units: 'metric'})); // Echelle
		map.addControl(new ol.control.ZoomSlider());// barre zoom à gauvhe

		// opacité couche OSM
		document.getElementById('OsmOpacity').addEventListener('change', function() {
			var value = document.getElementById('OsmOpacity').value / 100;
			OsmCarto.setOpacity(value);
			map.renderSync();
		});

		// Affichage cadastre ON OFF
		document.getElementById('IgnCadastreToggle').addEventListener('change', function() {
			if (document.getElementById('IgnCadastreToggle').checked == true) {
				IgnCadastre.setOpacity(0.50);
			} else {
				IgnCadastre.setOpacity(0);
			};
			map.renderSync();
		});
	
	}


</script>

**sfabry** · 25/03/2019, 11h11

Bonjour,

1. L'affichage des couches geoportail: La projection de la carte est fixé en WGS84. Cela force une reprojection des données, qui introduit de fortes latences dans le rendu visuel. En fixant la projection en WebMarcator, projection généralement utilisé en webmapping, cela resout les problèmes de rendu visuel. Le code est déjà présent il suffit de décommenter!

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
  var map = new ol.Map({
    target: 'viewerDiv',

    // bouton fullscreen
    controls: ol.control.defaults().extend([new ol.control.FullScreen()]),

    // couches
    layers: [OsmCarto,IgnPhotos,IgnCarto,WikiKML],// dernier layer au dessus

    // vue a afficher
    view: new ol.View({
      projection: 'EPSG:3857', // projection WGS84
      // center: [7.796, 48.9949], // coordonnées en WGS 84
      center: ol.proj.transform([7.796,48.9949], 'EPSG:4326', 'EPSG:3857'),
      zoom: 14,
      minZoom: 1, // echelle maximum (7=100 KM/64px)
      maxZoom: 22, // agrandissement maxi (19 = 20m/64px)
    })
  });

2. L'affichage du KML => La classe ol.layer.Vector n'admet qu'un parametre, un objet qui contient l'ensemble des attibuts de la couche. Dans le code fourni, il y en a deux: une String et un objet avec l'objet.

Une solution:

Code :

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

1
2
3
4
5
6
7
8
9
10
  var WikiKML = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: '_kml_files/WIKI_SFV.kml',
      format: new ol.format.KML({
        extractStyles: false,
        extractAttributes: true,
        maxDepth: 2
      })
    })
  });

**wikimaginot** · 25/03/2019, 13h28

Bonjour Sfabry

Un grand merci pour votre réponse. J'ai modifié le code (il est en ligne) et le résultat commence à ressembler à quelque chose

J'aurais souhaité pouvoir extraire les coordonnées de la souris au format WGS 84 qui est celui de la base de données sous jacente et je pensai que une vue dans cette projection serait la solution. Quelle a été mon (mes) erreur(s) ?

Quoiqu'il en soit, il va falloir que je comprenne la notion de projection et approfondisse mes maigres connaissances OpenLayer, l'un de vous saurait-il m'indiquer un site ou trouver des informations pertinentes et assimilables pour le néophyte que je suis ?

Chose étrange, le rendu du fichier KML est incorrect, alors que cela fonctionnait parfaitement en utilisant l'API Géoportail auparavant. Une idée ????

Encore merci pour votre aide précieuse et bonne journée.

Cordialement, Pascal

Affichage des couches Géoportail sous OL, besoin d'un (sérieux) coup de main.

IGN API Géoportail

Discussions similaires

Partager

Partager