Openlayers / Carte IGN

**sans_deconner** · 10/10/2018, 13h31

Bonjour,
J'ai une page utilisant openlayers.
Si j'ai bien compris, je peux y utiliser un fond de carte IGN.
A quel endroit faire appel à ce fond carte?
Je suppose que je dois remplacer "Thunderforest" par le nom du fond de carte. Mais comment savoir le nom du fond de carte?
Merci d'avance.

Mon code actuel

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
<!DOCTYPE html>
<html>
  <head>
    <title>PARIS</title>

<link rel="stylesheet" href="http://openlayers.org/en/v3.19.0/css/ol.css" type="text/css" />
 <style type="text/css">
.ol-scale-line-inner{color:black; border-color:black;font-size: 12px;}
.ol-scale-line {background:khaki;display: block; position: absolute;;bottom:20px;left:8px;}
</style>

    <script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"> </div>
    <script>
  var
    gpx = { 
           'PARIS': 'documents/carte.gpx'
          } ,
  gpxfile= gpx ['PARIS'],  zoomlevel=8,center = [48.9847374523299,2.0],radius={'0':2,'1':0,'2':7,'3':7,'5':10},

  mapimage='Thunderforest', xoffset=0, textalign='center',
    css = {
    'S': {'type':'S', 'imgcolor':'Blue', 'textcolor': 'black', 'radius':2, 'strokewidth':4 
          ,'pointfont':'10px Omnia'}
}; 

var raster = new ol.layer.Tile({ source: new ol.source.OSM({imagerySet: mapimage, key: '' }) });
var vector = new ol.layer.Vector({source:new ol.source.Vector({url:gpxfile,format:new ol.format.GPX()}),
  style: function(feature) {
  var properties = feature.getProperties(),name = properties['name'],desc = properties ['desc'],
  parameters = css [desc],
  textcolor = parameters ['textcolor'],
  imgcolor = parameters ['imgcolor'],
  displayradius = parameters ['radius'],
  displaystrokewidth = parameters ['strokewidth'],
  pointfont = parameters ['pointfont'],
  displaylabel = name;

  style = {
    'Point': new ol.style.Style({
       text: new ol.style.Text ({ text:displaylabel, font:pointfont, textAlign:textalign, offsetX:xoffset
                                 ,fill: new ol.style.Fill({color: textcolor}), }),
       image: new ol.style.Circle({fill: null, radius: displayradius,
            stroke: new ol.style.Stroke({ color: imgcolor, width: displaystrokewidth})
          }) }) };
        return style[feature.getGeometry().getType()] } });

var scaleLineControl = new ol.control.ScaleLine({});

var map=new ol.Map({
  controls: ol.control.defaults({attributionOptions: ({collapsible: false})}).extend([scaleLineControl]),
  layers:[raster,vector],target:document.getElementById('map'),view: new ol.View({})});

var y = center [0];
var x = center [1];
map.getView().setCenter(ol.proj.transform([x, y], 'EPSG:4326', 'EPSG:3857'));
map.getView().setZoom(zoomlevel);

    </script>
  </body>
</html>

**IGNC_XT** · 10/10/2018, 15h35

Bonjour,
Je vous invite à consulter le site http://geoservices.ign.fr pour bien démarrer.
Pour plusieurs raisons :
1- il vous faut utiliser une clé géoservices et les URL associées pour l'intégrer dans votre code et éventuellement envisager d'utiliser les extensions proposées sur ce site pour vous faciliter l'utilisation desdits géoservices.
2 - Le simple fait de remplacer thunderforest ne vous permettra de répondre à vos attentes,d'où l'intérêt d'envisager d'utiliser les extensions proposées documentées sur ledit site.
3 - il vous faudra contacter spécifiquement contact.geoservices@ign.fr en indiquant votre clé ainsi que votre souhait de ressources sur Cassini car cette donnée est la propriété d'un partenaire de l'IGN.

**sans_deconner** · 10/10/2018, 16h20

Envoyé par IGNC_XT

Bonjour,
Je vous invite à consulter le site http://geoservices.ign.fr pour bien démarrer.
Pour plusieurs raisons :
1- il vous faut utiliser une clé géoservices et les URL associées pour l'intégrer dans votre code et éventuellement envisager d'utiliser les extensions proposées sur ce site pour vous faciliter l'utilisation desdits géoservices.
2 - Le simple fait de remplacer thunderforest ne vous permettra de répondre à vos attentes,d'où l'intérêt d'envisager d'utiliser les extensions proposées documentées sur ledit site.
3 - il vous faudra contacter spécifiquement contact.geoservices@ign.fr en indiquant votre clé ainsi que votre souhait de ressources sur Cassini car cette donnée est la propriété d'un partenaire de l'IGN.

Oui j'ai une clé.

Dans la documentation, si j'ai bien compris, il s'agit de cette page
https://geoservices.ign.fr/documenta...vices/wfs.html
Est-ce bien celà?

On y lit l'adresse du service
Le service WFS du Géoportail est accessible à l’adresse suivante :
https://wxs.ign.fr/CLEF/geoportail/wfs

OK mais où dois-je mettre l'appel à ce service?
Je ne vois aucun exemple.

On y parle de
Les requêtes qui sont adressées au serveur WFS sont les suivantes :
GetCapabilities : renvoie les paramètres du service et les couches disponibles

Mais bon, avec quel langage? javascript? Sous quelle forme?
Je ne vois aucun exemple.

**sans_deconner** · 10/10/2018, 17h00

Envoyé par IGNC_XT

Bonjour,
Je vous invite à consulter le site http://geoservices.ign.fr pour bien démarrer.
Pour plusieurs raisons :
1- il vous faut utiliser une clé géoservices et les URL associées pour l'intégrer dans votre code et éventuellement envisager d'utiliser les extensions proposées sur ce site pour vous faciliter l'utilisation desdits géoservices.
2 - Le simple fait de remplacer thunderforest ne vous permettra de répondre à vos attentes,d'où l'intérêt d'envisager d'utiliser les extensions proposées documentées sur ledit site.
3 - il vous faudra contacter spécifiquement contact.geoservices@ign.fr en indiquant votre clé ainsi que votre souhait de ressources sur Cassini car cette donnée est la propriété d'un partenaire de l'IGN.

Si j'ai bien compris, je dois utiliser ceci
https://geoservices.ign.fr/documenta...ension-ol.html

J'ai indiqué les référence js et css (de test) et copié un exemple.

Mais l'adresse de chemin/vers/autoconf.json n'est pas founie.

J'ai ajouté les mentions test

Code :

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

1
2
3
4
5
6
7
<link rel="stylesheet" href="http://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers.css" />
<script src="http://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers.js"></script>

<link rel="stylesheet" href="http://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers-src.css" />
<script src="http://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers-src.js"></script>

<script data-key="***" src="http://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers-src.js"></script>

A quoi de plus ai-je accès?
Puis-je utiliser d'autres fonds de cartes?

Openlayers / Carte IGN

IGN API Géoportail

Discussions similaires

Partager

Partager