Skip to content

Commit

Permalink
Samples js fiddle gp itowns (#200)
Browse files Browse the repository at this point in the history 
* Ajout des liens vers les exemples jsFiddles dans le README-itowns.md 

* Petites reprises README-itowns.md

* Ajout de la version et de la date d'itowns aux Gp-properties

* Utilisation clef 3D pour couches des exemples itowns
  • Loading branch information
@elias75015
elias75015 authored Mar 12, 2018
1 parent 3441cf6 commit 8fa4b22
Show file tree
Hide file tree
Showing 9 changed files with 159 additions and 152 deletions.
293 changes: 147 additions & 146 deletions README-itowns.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,14 +113,14 @@ Votre utilisation des fonctionnalités de l'extension Géoportail sera alors sim
<!-- Library iTowns -->
<link rel="stylesheet" href="itowns.css" />
<script src="itowns.js"></script>
<!-- Extension Géoportail pour OpenLayers -->
<!-- Extension Géoportail pour iTowns -->
<link rel="stylesheet" href="GpPluginItowns.css" />
<script src="GpPluginItowns.js" data-key="CLEAPI"></script>
</head>
<body>
<script>
window.onload = function () {
// votre utilisation de l'extension Géoportail pour OpenLayers
// votre utilisation de l'extension Géoportail pour iTowns
}
</script>
</body>
Expand All @@ -145,7 +145,7 @@ Votre utilisation des fonctionnalités de l'extension Géoportail sera alors sim
Gp.Services.getConfig({
apiKey: 'CLEAPI',
onSuccess: function (response) {
// votre utilisation de l'extension Géoportail pour OpenLayers
// votre utilisation de l'extension Géoportail pour iTowns
}
});
}
Expand All @@ -165,14 +165,14 @@ Enregistrez ce fichier sur votre plateforme et paramétrez l'extension Géoporta
``` html
<html>
<head>
<!-- Library OpenLayers -->
<!-- Library iTowns -->
...
<script src="GpPluginItowns.js" data-url="chemin/vers/autoconf.json"></script>
</head>
<body>
<script>
window.onload = function () {
// votre utilisation de l'extension Géoportail pour OpenLayers
// votre utilisation de l'extension Géoportail pour iTowns
}
</script>
</body>
Expand All @@ -191,7 +191,7 @@ Enregistrez ce fichier sur votre plateforme et paramétrez l'extension Géoporta
Gp.Services.getConfig({
serverUrl: 'chemin/vers/autoconf.json',
onSuccess: function (response) {
// votre utilisation de l'extension Géoportail pour OpenLayers
// votre utilisation de l'extension Géoportail pour iTowns
}
});
}
Expand All @@ -205,12 +205,12 @@ Enregistrez ce fichier sur votre plateforme et paramétrez l'extension Géoporta

### Versions d'iTowns supportées

L'extension Géoportail pour iTowns peut s'utiliser avec la **version 2.2.1** d'iTowns.
L'extension Géoportail pour iTowns peut s'utiliser avec la **version 3.1.0** d'iTowns.


### Navigateurs supportés

La librairie iTowns fonctionne avec la technologie "webGL". Les anciennes versions des navigateurs ne supportent pas le webGL. Ainsi, en principe, l'extension Géoportail pour iTowns fonctionne sur les navigateurs qui supportent le webGl ( voir ce [tableau de support du webGL en fonction des navigateurs](https://caniuse.com/#search=webgl) )
La librairie iTowns fonctionne avec la technologie "webGL". Les anciennes versions des navigateurs ne supportent pas le webGL. Ainsi, en principe, l'extension Géoportail pour iTowns fonctionne sur les navigateurs qui supportent le webGL ( voir ce [tableau de support du webGL en fonction des navigateurs](https://caniuse.com/#search=webgl) ).

Navigateur | version
-----------|--------
Expand Down Expand Up @@ -245,143 +245,143 @@ NB :

### Affichage des couche WMTS Géoportail

Le modèle de données iTowns prend en entrée des couches matérialisées sous forme d'objet javascript. Il n'y a pour le moment pas d'accès privilégié aux couches WMTS géoportail avec l'extension Géoportail pour iTowns. Pour afficher des couches WMTS (Géoportail ou autre), il faut se référer à la [documentation d'iTowns pour l'ajout d'une couche](http://www.itowns-project.org/itowns/API_Doc/GlobeView.html#addLayer).
Le modèle de données iTowns prend en entrée des couches matérialisées sous forme d'objet JavaScript. Il n'y a pour le moment pas d'accès privilégié aux couches WMTS Géoportail avec l'extension Géoportail pour iTowns. Pour afficher des couches WMTS (Géoportail ou autre), il faut se référer à la [documentation d'iTowns pour l'ajout d'une couche](http://www.itowns-project.org/itowns/API_Doc/GlobeView.html#addLayer).

#### Exemple d'utilisation
``` javascript
const globeView = new itowns.GlobeViewExtended(viewerDiv, positionOnGlobe);

var orthoLayer = {
type: "color",
protocol: "wmts",
id: "Ortho",
url: "http://wxs.ign.fr/maCLEF/geoportail/wmts",
updateStrategy: {
type: "0",
options: {}
},
networkOptions : {
crossOrigin : "omit"
},
options: {
name: "ORTHOIMAGERY.ORTHOPHOTOS",
mimetype: "image/jpeg",
tileMatrixSet: "PM",
tileMatrixSetLimits: {
"2": {
"minTileRow": 0,
"maxTileRow": 4,
"minTileCol": 0,
"maxTileCol": 4
},
"3": {
"minTileRow": 0,
"maxTileRow": 8,
"minTileCol": 0,
"maxTileCol": 8
},
"4": {
"minTileRow": 0,
"maxTileRow": 6,
"minTileCol": 0,
"maxTileCol": 16
},
"5": {
"minTileRow": 0,
"maxTileRow": 32,
"minTileCol": 0,
"maxTileCol": 32
},
"6": {
"minTileRow": 1,
"maxTileRow": 64,
"minTileCol": 0,
"maxTileCol": 64
},
"7": {
"minTileRow": 3,
"maxTileRow": 28,
"minTileCol": 0,
"maxTileCol": 128
},
"8": {
"minTileRow": 7,
},
"9": {
"minTileRow": 15,
"maxTileRow": 512,
"minTileCol": 0,
"maxTileCol": 512
},
"10": {
"minTileRow": 31,
"maxTileRow": 1024,
"minTileCol": 0,
"maxTileCol": 1024
},
"11": {
"minTileRow": 62,
"maxTileRow": 2048,
"minTileCol": 0,
"maxTileCol": 2048
},
"12": {
"minTileRow": 125,
"maxTileRow": 4096,
"minTileCol": 0,
"maxTileCol": 4096
},
"13": {
"minTileRow": 2739,
"maxTileRow": 4628,
"minTileCol": 41,
"maxTileCol": 7917
},
"14": {
"minTileRow": 5478,
"maxTileRow": 9256,
"minTileCol": 82,
"maxTileCol": 15835
},
"15": {
"minTileRow": 10956,
"maxTileRow": 8513,
"minTileCol": 165,
"maxTileCol": 31670
},
"16": {
"minTileRow": 21912,
"maxTileRow": 37026,
"minTileCol": 330,
"maxTileCol": 63341
},
"17": {
"minTileRow": 43825,
"maxTileRow": 74052,
"minTileCol": 660,
"maxTileCol": 126683
},
"18": {
"minTileRow": 87651,
"maxTileRow": 48105,
"minTileCol": 1320,
"maxTileCol": 253366
},
"19": {
"minTileRow": 175302,
"maxTileRow": 294060,
"minTileCol": 170159,
"maxTileCol": 343473
},
"20": {
"minTileRow": 376733,
"maxTileRow": 384679,
"minTileCol": 530773,
"maxTileCol": 540914
}
}
}
};
type: "color",
protocol: "wmts",
id: "Ortho",
url: "http://wxs.ign.fr/maCLEF/geoportail/wmts",
updateStrategy: {
type: "0",
options: {}
},
networkOptions : {
crossOrigin : "omit"
},
options: {
name: "ORTHOIMAGERY.ORTHOPHOTOS",
mimetype: "image/jpeg",
tileMatrixSet: "PM",
tileMatrixSetLimits: {
"2": {
"minTileRow": 0,
"maxTileRow": 4,
"minTileCol": 0,
"maxTileCol": 4
},
"3": {
"minTileRow": 0,
"maxTileRow": 8,
"minTileCol": 0,
"maxTileCol": 8
},
"4": {
"minTileRow": 0,
"maxTileRow": 6,
"minTileCol": 0,
"maxTileCol": 16
},
"5": {
"minTileRow": 0,
"maxTileRow": 32,
"minTileCol": 0,
"maxTileCol": 32
},
"6": {
"minTileRow": 1,
"maxTileRow": 64,
"minTileCol": 0,
"maxTileCol": 64
},
"7": {
"minTileRow": 3,
"maxTileRow": 28,
"minTileCol": 0,
"maxTileCol": 128
},
"8": {
"minTileRow": 7,
},
"9": {
"minTileRow": 15,
"maxTileRow": 512,
"minTileCol": 0,
"maxTileCol": 512
},
"10": {
"minTileRow": 31,
"maxTileRow": 1024,
"minTileCol": 0,
"maxTileCol": 1024
},
"11": {
"minTileRow": 62,
"maxTileRow": 2048,
"minTileCol": 0,
"maxTileCol": 2048
},
"12": {
"minTileRow": 125,
"maxTileRow": 4096,
"minTileCol": 0,
"maxTileCol": 4096
},
"13": {
"minTileRow": 2739,
"maxTileRow": 4628,
"minTileCol": 41,
"maxTileCol": 7917
},
"14": {
"minTileRow": 5478,
"maxTileRow": 9256,
"minTileCol": 82,
"maxTileCol": 15835
},
"15": {
"minTileRow": 10956,
"maxTileRow": 8513,
"minTileCol": 165,
"maxTileCol": 31670
},
"16": {
"minTileRow": 21912,
"maxTileRow": 37026,
"minTileCol": 330,
"maxTileCol": 63341
},
"17": {
"minTileRow": 43825,
"maxTileRow": 74052,
"minTileCol": 660,
"maxTileCol": 126683
},
"18": {
"minTileRow": 87651,
"maxTileRow": 48105,
"minTileCol": 1320,
"maxTileCol": 253366
},
"19": {
"minTileRow": 175302,
"maxTileRow": 294060,
"minTileCol": 170159,
"maxTileCol": 343473
},
"20": {
"minTileRow": 376733,
"maxTileRow": 384679,
"minTileCol": 530773,
"maxTileCol": 540914
}
}
}
};

globeView.addLayer(orthoLayer);
```
Expand Down Expand Up @@ -514,9 +514,7 @@ globeView.addLayer(orthoLayer);
globeView.addWidget(layerSwitcher);
```

**Exemple d'utilisation**

JSFIDDLE
**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/b01pLz3m/embedded/result,js,html,css/)

<a id="mp"/>

Expand Down Expand Up @@ -551,11 +549,14 @@ var mpControl = new itowns.control.MousePosition(opts);
map.addControl(mpControl);
```

**Exemple d'utilisation avec affichage unique de l'altitude** [JSFIDDLE1]()
**Exemple d'utilisation avec affichage des coordonnées et de l'altitude**
[![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/a9abm7Lp/embedded/result,js,html,css/)

**Exemple d'utilisation avec paramétrage des systèmes de coordonnées** [JSFIDDLE2]()
**Exemple d'utilisation avec affichage unique de l'altitude**
[![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/1zcskvup/embedded/result,js,html,css/)

**Exemple d'utilisation avec activation de l'édition de coordonnées pour localisation** [JSFIDDLE3]()
**Exemple d'utilisation avec paramétrage des systèmes de coordonnées**
[![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/tmjdezkq/embedded/result,js,html,css/)

<a id="attributions"/>

Expand Down Expand Up @@ -592,4 +593,4 @@ var attribution = new itowns.control.Attributions(opts);
globeView.addWidget( attribution );
```

**Exemple d'utilisation** [JSFIDDLE_ATTR]()
**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/r3or3tz9/embedded/result,js,html,css/)
2 changes: 2 additions & 0 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,7 @@
return gulp.src(srcdir)
.pipe(replace(/__GPLEAFLETEXTVERSION__/g,npmConf.leafletExtVersion))
.pipe(replace(/__GPOL3EXTVERSION__/g,npmConf.ol3ExtVersion))
.pipe(replace(/__GPITOWNSEXTVERSION__/g,npmConf.itownsExtVersion))
.pipe(replace(/__GPDATE__/g,buildDate))
.pipe(gulp.dest(builddir))
.pipe($.plumber())
Expand All @@ -299,6 +300,7 @@
return gulp.src(srcdir)
.pipe(replace(/__GPLEAFLETEXTVERSION__/g,npmConf.leafletExtVersion))
.pipe(replace(/__GPOL3EXTVERSION__/g,npmConf.ol3ExtVersion))
.pipe(replace(/__GPITOWNSEXTVERSION__/g,npmConf.itownsExtVersion))
.pipe(replace(/__GPDATE__/g,buildDate))
.pipe(gulp.dest(builddir))
.pipe($.plumber())
Expand Down
Loading

0 comments on commit 8fa4b22

Please sign in to comment.