diff --git a/DRAFT_CHANGELOG.md b/DRAFT_CHANGELOG.md index 595383892..d4be872bb 100644 --- a/DRAFT_CHANGELOG.md +++ b/DRAFT_CHANGELOG.md @@ -6,14 +6,21 @@ ## Summary -Mise à jour du package des extensions OpenLayers : [3.3.13](https://github.com/IGNF/geoportal-extensions/releases/tag/ol-3.2.13) +Mise à jour d'iTowns en version 2.38.2 et ajout d'un widget d'affichage des bâtiments en boite à chaussures sur le SDK 3D. ## Changelog * [Added] + - Widget d'affichage des bâtiments en 3D (#96) + - Généralisation des options "x" et "y" pour positionner les widget sur la div du Globe (58ec7c9ddc1fc4b4aeb06de56afca913029a978d) + * [Changed] + - ajout du tag de la version sdk dans les requetes image d'itowns du SDK 3D (#97) + - Mise à jour des extensions géoportail pour iTowns (#96) + - Mise à jour d'iTowns en version 2.38.2 (#96) + * [Removed] * [Fixed] diff --git a/README-SDK-2D.md b/README-SDK-2D.md index 5954a68fa..496572b53 100644 --- a/README-SDK-2D.md +++ b/README-SDK-2D.md @@ -77,7 +77,7 @@ L'archive téléchargée (GpSDK.zip) comprend l'arborescence décrite ci-dessus. #### Récupération avec NPM -Le Kit de Développement Géoportail est aussi disponible dans les dépôts [NPM](https://www.npmjs.com/package/geoportal-sdk). +Le Kit de Développement Géoportail est aussi disponible dans les dépôts [NPM](https://www.npmjs.com/package/@ignf-geoportal/sdk-2d). Prérequis : [NodeJS](https://nodejs.org/en/) et [npm](https://www.npmjs.com/) installés. @@ -125,13 +125,13 @@ var map = Gp.Map.load("myDivId",{ ### Interfaces de programmation -Le chargement du SDK vous donne accès à son [interface de programmation](https://ignf.github.io/geoportal-sdk/latest/jsdoc/index.html) en plus des interfaces de programmation de [la bibliothèque d'accès](http://ignf.github.io/geoportal-access-lib/latest/jsdoc/index.html) ; d'[OpenLayers](https://openlayers.org/en/v4.0.1/apidoc/) et de son [extension géoportail dédiée](http://ignf.github.io/geoportal-extensions/current/jsdoc/openlayers/). +Le chargement du SDK vous donne accès à son [interface de programmation](https://ignf.github.io/geoportal-sdk/latest/jsdoc/index.html) en plus des interfaces de programmation de [la bibliothèque d'accès](http://ignf.github.io/geoportal-access-lib/latest/jsdoc/index.html) ; d'[OpenLayers](https://openlayers.org/en/latest/apidoc/) et de son [extension géoportail dédiée](http://ignf.github.io/geoportal-extensions/current/jsdoc/openlayers/). ### Création et affichage d'une carte -La création et l'affichage d'une carte se fait à l'aide de la fonction [Gp.Map.load()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/module-Map.html). Elle prend deux paramètres en entrée : +La création et l'affichage d'une carte se fait à l'aide de la fonction [Gp.Map.load()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/module-Utils_MapLoader.html). Elle prend deux paramètres en entrée : * l'identifiant du container HTML (typiquement un élément ```
```) dans lequel on veut qu'elle s'affiche. @@ -148,7 +148,7 @@ var map = Gp.Map.load( // options d'affichage de la carte (Gp.MapOptions) { // clef(s) d'accès à la plateforme - apiKey: "APIKEY-1,APIKEY-2", + apiKey: "cartes,essentiels", // centrage de la carte center : { location : "73 avenue de Paris, Saint-Mandé" @@ -157,7 +157,7 @@ var map = Gp.Map.load( zoom : 17, // Couches à afficher layersOptions : { - "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD" : { + "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2" : { } }, // Outils additionnels à proposer sur la carte @@ -181,7 +181,7 @@ Permet, d'afficher une carte avec les options suivantes : * **centrage** sur l'adresse *"73 avenue de Paris, Saint-Mandé"* (en utilisant le service de géocodage du Géoportail) zoomée au niveau 17 ; ([Plus d'infos sur les possibilités de centrage...](#center)) -* **fonds de carte** : ressource *Cartes SCAN Express Standard (GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD*). [Plus d'infos sur le paramétrage des couches...](#layers); +* **fonds de carte** : ressource *Cartes SCAN Express Standard (GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2*). [Plus d'infos sur le paramétrage des couches...](#layers); * **outils additionnels** : barre de recherche (*controlsOptions*). [Plus d'infos sur le paramétrage des outils additionnels...](#controls) ; @@ -244,7 +244,7 @@ var map = Gp.Map.load( ### Configuration du centrage de la carte -Le paramétrage du cente de la carte se fait à l'aide de la propriété **[center](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Center.html)** de l'objet [mapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html). +Le paramétrage du centre de la carte se fait à l'aide de la propriété **[center](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Center.html)** de l'objet [mapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html). On peut centrer la carte de differentes façons : @@ -280,7 +280,7 @@ La propriété **location** permet de préciser le lieu à géocoder et la propr * "StreetAddress" : géocodage par adresses -* "CadastralParcels" : géocodage d'indentifants de parcelles cadastrales +* "CadastralParcels" : géocodage d'indentifiants de parcelles cadastrales **Exemple :** @@ -299,12 +299,12 @@ var map = Gp.Map.load( ) ; ``` -*NB* : Cette possibilité de centrage ne fonctionne que si au moins [une clef d'accès à la plateforme Géoportail utilisée pour paramétrer le SDK](#config) possède les droits nécessaires sur les ressources utilisées pour le Géocodage. +*NB* : Cette possibilité de centrage ne fonctionne que si au moins [une clef d'accès à la plateforme Géoportail utilisée pour paramétrer le SDK](#config) possède les droits nécessaires sur les ressources utilisées pour le Géocodage, par exemple la clé "essentiels". #### Centrage par géolocalisation du terminal utilisé -La propriété **geolocate**, si elle est positionée à **true**, permet de déclencher - sous réserve d'acceptation de l'internaute - une géolocalisation du terminal consultant la page et d'utiliser les coordonnées obtenues pour centrer la carte. +La propriété **geolocate**, si elle est positionnée à **true**, permet de déclencher - sous réserve d'acceptation de l'internaute - une géolocalisation du terminal consultant la page et d'utiliser les coordonnées obtenues pour centrer la carte. **Exemple :** @@ -321,7 +321,7 @@ var map = Gp.Map.load( ) ; ``` -*NB* : on peut modifier le centre de la carte à tout moment après son chargement initial à l'aide de la méthode [setCenter()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#setCenter), de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie "Interaction avec la carte"](#interact) +*NB* : on peut modifier le centre de la carte à tout moment après son chargement initial à l'aide de la méthode [setCenter()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.setCenter), de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie "Interaction avec la carte"](#interact) @@ -330,7 +330,7 @@ var map = Gp.Map.load( Le paramétrage des couches qui vont composer la carte se fait à l'aide de la propriété **layersOptions** de l'objet [mapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html). -C'est un objet javascript dont chaque propriété va représenter une couche composant la carte : la clef est un identifiant associé à la couche ; la valeur un objet de type [Gp.LayerOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html) permettant de préciser les caractéristiques de la couche à afficher. +C'est un objet javascript dont chaque propriété va représenter une couche composant la carte : la clef est un identifiant associé à la couche ; la valeur d'un objet de type [Gp.LayerOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html) permettant de préciser les caractéristiques de la couche à afficher. Si cette propriété n'est pas renseignée, l'affichage se fera par défaut avec la couche des Photographies aériennes ("ORTHOIMAGERY.ORTHOPHOTOS") servie en images tuilées (WMTS) si la [clef d'accès utilisée pour initialiser la carte](#config) en possède les droits. @@ -354,7 +354,7 @@ var map = Gp.Map.load( // Couche photographies aériennes "ORTHOIMAGERY.ORTHOPHOTOS" : {}, // Couche photographies aériennes - "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD" : { + "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2" : { opacity : 0.3 } } @@ -430,7 +430,7 @@ var map = Gp.Map.load( **Voir l'exemple complet sur [jsFiddle](http://jsfiddle.net/ignfgeoportail/pLcebctq/embedded/result,js,css,html/)** -*NB* : on peut ajouter, modifier ou retirer les couches de la carte à tout moment après son chargement initial à l'aide des méthodes [addLayers()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#addLayers), [modifyLayers()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#modifyLayers) ou [removeLayers()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#removeLayers) de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie "Interaction avec la carte"](#interact) +*NB* : on peut ajouter, modifier ou retirer les couches de la carte à tout moment après son chargement initial à l'aide des méthodes [addLayers()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.addLayers), [modifyLayers()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.modifyLayers) ou [removeLayers()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.removeLayers) de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie "Interaction avec la carte"](#interact) @@ -464,7 +464,7 @@ var map = Gp.Map.load( ### Configuration des outils additionnels à proposer sur la carte -Par défaut la carte se présente avec les boutons de zoom et l'affichage des attributions. Le SDK vous permet de rajouter des outils sur la carte qui vont permettre à l'internaute d'intéragir avec la celle-ci. +Par défaut la carte se présente avec les boutons de zoom et l'affichage des attributions. Le SDK vous permet de rajouter des outils sur la carte qui vont permettre à l'internaute d'interagir avec celle-ci. L'ajout d'outils se fait à l'aide de la propriété **controlsOptions** de l'objet [mapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html). Il s'agit d'un objet javascript dont chaque propriété a le nom de l'outil à rajouter et chaque valeur de propriété permet de préciser - si besoin - le paramétrage de l'outil. Ce paramétrage se fait à l'aide d'un objet javascript de type [Gp.ControlOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html), dont les propriétés vont varier selon l'outil. @@ -506,14 +506,14 @@ Les outils disponibles sont les suivants : * calcul de profil altimétrique (["elevationpath"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#elevationpath)) -*NB* : on peut ajouter, modifier ou retirer les outils de la carte à tout moment après son chargement initial à l'aide des méthodes [addControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#addControls), [modifyControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#modifyControls) ou [removeControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#removeControls) de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie "Interaction avec la carte"](#interact) +*NB* : on peut ajouter, modifier ou retirer les outils de la carte à tout moment après son chargement initial à l'aide des méthodes [addControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.addControls), [modifyControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.modifyControls) ou [removeControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.removeControls) de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie "Interaction avec la carte"](#interact) -### Abonnement aux intéractions des utilisateurs avec la carte +### Abonnement aux interactions des utilisateurs avec la carte -Le SDK permet d'écouter certains événements qui se produisent lorsque les internautes intéragissent avec la carte et de définir des comportements à appliquer lorsque ces événements se produisent. +Le SDK permet d'écouter certains événements qui se produisent lorsque les internautes interagissent avec la carte et de définir des comportements à appliquer lorsque ces événements se produisent. Cela se fait à l'aide de la propriété **mapEventsOptions** de l'objet [mapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html). @@ -548,14 +548,14 @@ var map = Gp.Map.load( **Voir l'exemple complet sur [jsFiddle](http://jsfiddle.net/ignfgeoportail/gwxLbrdd/embedded/result,js,html,css/)** -*NB* : on peut s'abonner aux événements à tout moment après le chargement initial de la carte à l'aide de la méthode [listen()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#listen) de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie "Interaction avec la carte"](#interact) +*NB* : on peut s'abonner aux événements à tout moment après le chargement initial de la carte à l'aide de la méthode [listen()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.listen) de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie "Interaction avec la carte"](#interact) ### Autres possibilités de paramétrage -L'objet [Gp.MapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html) permet de jouer sur d'autres paramètres de la carte lors de son initialisation avec la fonction [Gp.Map.load()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/module-Map.html). Entre autres : +L'objet [Gp.MapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html) permet de jouer sur d'autres paramètres de la carte lors de son initialisation avec la fonction [Gp.Map.load()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/module-Utils_MapLoader.html). Entre autres : * la projection @@ -575,7 +575,7 @@ L'objet [Gp.MapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map ### Interaction avec la carte créée -La fonction [Gp.Map.load()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/module-Map.html) retourne un objet de type [Gp.Map](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html) avec lequel il sera possible d'intéragir programmatiquement **à partir du moment où l'événement "mapLoaded" sera émis**. +La fonction [Gp.Map.load()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/module-Utils_MapLoader.html) retourne un objet de type [Gp.Map](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html) avec lequel il sera possible d'intéragir programmatiquement **à partir du moment où l'événement "mapLoaded" sera émis**. Pour un bon fonctionnement, il faut donc conditionner les traitements ultérieurs au chargement de la carte à la réception de cet événement à l'aide de la propriété mapEventsOptions [comme décrit précédemment](#events). Un script javascript utilisant le SDK Géoportail aura donc l'allure générale suivante : diff --git a/README-SDK-3D.md b/README-SDK-3D.md index 1d8e5400e..5edf056ee 100644 --- a/README-SDK-3D.md +++ b/README-SDK-3D.md @@ -63,8 +63,6 @@ Il contient l'arborescence suivante : (version source map du code javascript pour une utilisation en développement) GpSDK3D-map.css (version source map des css pour une utilisation en développement) - itowns.js - (version minifiée de la librairie iTowns compatible avec le SDK 3D) @@ -80,7 +78,7 @@ L'archive téléchargée (GpSDK.zip) comprend l'arborescence décrite ci-dessus. #### Récupération avec NPM -Le Kit de Développement Géoportail est aussi disponible dans les dépôts [NPM](https://www.npmjs.com/package/geoportal-sdk). +Le Kit de Développement Géoportail est aussi disponible dans les dépôts [NPM](https://www.npmjs.com/package/@ignf-geoportal/sdk-3d). Prérequis : [NodeJS](https://nodejs.org/en/) et [npm](https://www.npmjs.com/) installés. @@ -97,6 +95,10 @@ Par exemple sur Github Pages : ``` https://ignf.github.io/geoportal-sdk/latest/dist/3d/GpSDK3D.js https://ignf.github.io/geoportal-sdk/latest/dist/3d/GpSDK3D.css +``` +OU + +``` https://ignf.github.io/geoportal-sdk/latest/dist/3d/GpSDK3D-src.js https://ignf.github.io/geoportal-sdk/latest/dist/3d/GpSDK3D-src.css ``` @@ -165,7 +167,7 @@ var map = Gp.Map.load( zoom : 17, // Couches à afficher layersOptions : { - "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD" : { + "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2" : { } }, // Outils additionnels à proposer sur la carte @@ -362,7 +364,7 @@ var map = Gp.Map.load( // Couche photographies aériennes "ORTHOIMAGERY.ORTHOPHOTOS" : {}, // Couche photographies aériennes - "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD" : { + "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2" : { opacity : 0.3 } } @@ -543,16 +545,17 @@ Les outils disponibles en 2D uniquement sont les suivants : * calcul de profil altimétrique (["elevationpath"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#elevationpath)) -L'outil disponible en 3D uniquement est le suivant : +Les outils disponibles en 3D uniquement sont les suivants : * exagération du relief (["boostrelief"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#boostrelief)) +* affichage des bâtiments 3D (["buildings"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#buildings)) *NB* : on peut ajouter, modifier ou retirer les outils de la carte à tout moment après son chargement initial à l'aide des méthodes [addControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#addControls), [modifyControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#modifyControls) ou [removeControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#removeControls) de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie "Interaction avec la carte"](#interact) -*NB* : lors d'une [bascule d'une visualisation 2D vers 3D](#switchToLib) à l'aide de la fonction [switch2D3D()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#switch2D3D) , les outils non disponibles en 3D disparaitront de l'interface cartographique. Ils réapparaitront en cas de nouvelle bascule d'une visualisation 3D vers 2D. +*NB* : lors d'une [bascule d'une visualisation 2D vers 3D](#switchToLib) à l'aide de la fonction [switch2D3D()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.switch2D3D) , les outils non disponibles en 3D disparaitront de l'interface cartographique. Ils réapparaitront en cas de nouvelle bascule d'une visualisation 3D vers 2D. @@ -599,7 +602,7 @@ var map = Gp.Map.load( ### Bascule entre 2D et 3D -Le SDK 3D permet de basculer d'une vue 2D à une vue 3D, et vice-versa. Pour cela, utiliser la fonction [Gp.Map.switch2D3D()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#switch2D3D). Les couches, la position de la caméra, et les outils présents sur l'interface cartographique sont conservés lors de la bascule (hormis les outils disponibles qu'en 2D, [plus d'infos](#switch_tools)). +Le SDK 3D permet de basculer d'une vue 2D à une vue 3D, et vice-versa. Pour cela, utiliser la fonction [Gp.Map.switch2D3D()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.switch2D3D). Les couches, la position de la caméra, et les outils présents sur l'interface cartographique sont conservés lors de la bascule (hormis les outils disponibles qu'en 2D, [plus d'infos](#switch_tools)). **Voir un exemple de bascule sur [jsFiddle](http://jsfiddle.net/ignfgeoportail/fsgxk3ov/embedded/result,js,html,css/)** diff --git a/package.json b/package.json index 49f211e61..e28eef065 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "geoportal-sdk", - "version": "3.3.15", - "date": "11/05/2022", - "SDK2DVersion": "3.3.15", - "SDK3DVersion": "3.3.15", + "version": "3.3.16", + "date": "01/08/2022", + "SDK2DVersion": "3.3.16", + "SDK3DVersion": "3.3.16", "description": "French Geoportal SDK based on OpenLayers (2D) and iTowns (3D) libraries", "main": "dist/2d/GpSDK2D-src.js, dist/3d/GpSDK3d-src.js", "module": "src/SDK2D.js, src/SDK3D.js", @@ -72,12 +72,12 @@ "exports-loader": "^0.7.0", "expose-loader": "^0.7.5", "fs-extra": "^9.0.0", - "geoportal-extensions-itowns": "2.3.6", + "geoportal-extensions-itowns": "2.3.7", "geoportal-extensions-openlayers": "3.2.13", "handlebars": "^4.7.5", "handlebars-layouts": "^3.1.4", "html-webpack-plugin": "^4.0.4", - "itowns": "2.37.0", + "itowns": "2.38.2", "jsdoc-webpack-plugin": "^0.3.0", "loglevel": "1.6.6", "mini-css-extract-plugin": "^0.9.0", @@ -97,7 +97,7 @@ "string-template": "^1.0.0", "style-loader": "^1.1.3", "terser-webpack-plugin": "^2.0.0", - "three": "0.135.0", + "three": "0.137.5", "three.meshline": "1.2.0", "url-loader": "^4.0.0", "webpack": "^4.41.5", diff --git a/samples-src/pages/3d/page-buildings-bundle.html b/samples-src/pages/3d/page-buildings-bundle.html new file mode 100644 index 000000000..b1ed48c87 --- /dev/null +++ b/samples-src/pages/3d/page-buildings-bundle.html @@ -0,0 +1,52 @@ +{{#extend "sample-bundle-layout-3d"}} + +{{#content "head"}} + Sample SDK 3D Buildings +{{/content}} + +{{#content "style"}} + +{{/content}} + +{{#content "body"}} +

Test de l'ajout du control Buildings

+
+
+
+
+{{/content}} + +{{#content "js"}} + +{{/content}} +{{/extend}} diff --git a/samples-src/pages/3d/page-controls-bundle.html b/samples-src/pages/3d/page-controls-bundle.html index 264f4b131..e20f36bde 100644 --- a/samples-src/pages/3d/page-controls-bundle.html +++ b/samples-src/pages/3d/page-controls-bundle.html @@ -238,7 +238,20 @@

Carte 3D.

}, attributions : { maximised : false - } + }, + buildings : { + x : 8, + y : 500 + }, + graphicscale : { + x : 950, + y : 50 + }, + overview : { + x : 8, + y : 370 + }, + boostrelief : {} } }); diff --git a/src/Interface/IMapBase.js b/src/Interface/IMapBase.js index f2f315486..dfce392ad 100644 --- a/src/Interface/IMapBase.js +++ b/src/Interface/IMapBase.js @@ -8,7 +8,7 @@ import { MapLoader } from "../Utils/MapLoader"; * Reloads the map with a new cartographic library. The current view options (camera position, layers, controls) will be conserved. * This function only works with the GpSDK3D bundle (run the "build:3d" npm task to generate it) * - * @param {Integer} viewMode - The cartographic view mode. "2d" (for a 2D map) or "3d" (for a 3D map). + * @param {String} viewMode - The cartographic view mode. "2d" (for a 2D map) or "3d" (for a 3D map). * * @return {Object} the new map * @static diff --git a/src/Interface/IMapControls.js b/src/Interface/IMapControls.js index 777847424..420d72c12 100644 --- a/src/Interface/IMapControls.js +++ b/src/Interface/IMapControls.js @@ -203,6 +203,9 @@ IMap.prototype.addControls = function (controlsOptions) { case "boostrelief": controlObj = this.addBoostReliefControl(controlOpts); break; + case "buildings": + controlObj = this.addBuildingsControl(controlOpts); + break; case "mouseposition": controlObj = this.addMousePositionControl(controlOpts); break; @@ -585,6 +588,24 @@ IMap.prototype.addAttributionsControl = function (controlOpts) {}; */ IMap.prototype.addBoostReliefControl = function (controlOpts) {}; +/** + * Adds the buildings control to the globe + * + * @param {Object} controlOpts - control options + * @param {Boolean} controlOpts.maximised - Display or not the control + * @param {Number} [controlOpts.x] - The position of the buildings button from the left of the container div + * @param {Number} [controlOpts.y] - The position of the buildings button from the bottom of the container div + * @param {HTMLElement} controlOpts.div - The HTML Element where the scalebar is put + * @param {String} [controlOpts.key = "essentiels"] - Defines the apiKey used to add the buildings layer + * @param {Boolean} [controlOpts.MNT = true] - adds the MNT to the globe (ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES) + * @param {Boolean} [controlOpts.buildingsOnGround = false] - If true, put the buildings without elevation + * @param {Number} [controlOpts.defaultVisibility = true] - Display the building when the globe is initialized + * @param {Number} [controlOpts.minZoom = 15] - Minimum zoom level to display the buildings. + * @private + * + */ + IMap.prototype.addBuildingsControl = function (controlOpts) {}; + /** * Adds camera orientation control to the map. * diff --git a/src/Itowns/ItMapControls.js b/src/Itowns/ItMapControls.js index 4286b758c..b35d7ccd7 100644 --- a/src/Itowns/ItMapControls.js +++ b/src/Itowns/ItMapControls.js @@ -14,7 +14,8 @@ ItMap.CONTROLSCLASSES = { attributions : "itowns.control.Attributions", overview : "itowns.control.MiniGlobe", graphicscale : "itowns.control.Scale", - boostrelief : "itowns.control.BoostRelief" + boostrelief : "itowns.control.BoostRelief", + buildings : "itowns.control.Buildings" }; /** @@ -77,6 +78,14 @@ ItMap.prototype.addMousePositionControl = function (controlOpts) { } var control = new itownsExtended.control.MousePosition(mpOpts); this.libMap.addWidget(control); + if (!isNaN(controlOpts.x)) { + control.getElement().style.left = Number(controlOpts.x) + "px"; + control.getElement().style.right = "unset"; + } + if (!isNaN(controlOpts.y)) { + control.getElement().style.bottom = Number(controlOpts.y) + "px"; + control.getElement().style.top = "unset"; + } return control; }; @@ -141,6 +150,15 @@ ItMap.prototype.addLayerSwitcherControl = function (controlOpts) { this.logger.trace("[ItMap] : layerSwitcher Opts : ... "); var control = new itownsExtended.control.LayerSwitcher(lsOpts); this.libMap.addWidget(control); + // modify the position of the layerswitcher button if x or y is given as option + if (controlOpts && !isNaN(controlOpts.x)) { + control.getElement().style.left = Number(controlOpts.x) + "px"; + control.getElement().style.right = "unset"; + } + if (controlOpts && !isNaN(controlOpts.y)) { + control.getElement().style.bottom = Number(controlOpts.y) + "px"; + control.getElement().style.top = "unset"; + } return control; }; @@ -225,9 +243,11 @@ ItMap.prototype.addOverviewControl = function (controlOpts) { if (!isNaN(controlOpts.x)) { control.getElement().style.left = Number(controlOpts.x) + "px"; + control.getElement().style.right = "unset"; } if (!isNaN(controlOpts.y)) { control.getElement().style.bottom = Number(controlOpts.y) + "px"; + control.getElement().style.top = "unset"; } // update the canvas to fit with the overview element size @@ -274,9 +294,11 @@ ItMap.prototype.addGraphicScaleControl = function (controlOpts) { // modify the position of the scaleBar if x or y is given as option if (!isNaN(controlOpts.x)) { control.getElement().style.left = Number(controlOpts.x) + "px"; + control.getElement().style.right = "unset"; } if (!isNaN(controlOpts.y)) { control.getElement().style.bottom = Number(controlOpts.y) + "px"; + control.getElement().style.top = "unset"; } } return control; @@ -305,8 +327,10 @@ ItMap.prototype.addAttributionsControl = function (controlOpts) { * Adds the boostRelief control to the map * * @param {Object} controlOpts - control options - * @param {HTMLElement} controlOpts.div - The HTML Element where the scalebar is put + * @param {HTMLElement} controlOpts.div - The HTML Element where the boostrelief control is put * @param {Boolean} controlOpts.maximised - Display or not the control + * @param {Number} [controlOpts.x] - The position of the boostRelief button from the left of the container div + * @param {Number} [controlOpts.y] - The position of the boostRelief button from the bottom of the container div * @param {Object} [controlOpts.scale] - Defines the scale used to boost the relief * @param {Number} [controlOpts.scale.min] - Minimum of the scale - 1 by default * @param {Number} [controlOpts.scale.max] - Maximum of the scale - 50 by default @@ -341,12 +365,55 @@ ItMap.prototype.addBoostReliefControl = function (controlOpts) { } else { control.getElement().style.display = "inline"; } - // modify the position of the scaleBar if x or y is given as option + // modify the position of the boostRelief button if x or y is given as option + if (!isNaN(controlOpts.x)) { + control.getElement().style.left = Number(controlOpts.x) + "px"; + control.getElement().style.right = "unset"; + } + if (!isNaN(controlOpts.y)) { + control.getElement().style.bottom = Number(controlOpts.y) + "px"; + control.getElement().style.top = "unset"; + } + } + return control; +}; + +/** + * Adds the buildings control to the globe + * + * @param {Object} controlOpts - control options + * @param {Boolean} controlOpts.maximised - Display or not the control + * @param {Number} [controlOpts.x] - The position of the buildings button from the left of the container div + * @param {Number} [controlOpts.y] - The position of the buildings button from the bottom of the container div + * @param {HTMLElement} controlOpts.div - The HTML Element where the scalebar is put + * @param {String} [controlOpts.key = "essentiels"] - Defines the apiKey used to add the buildings layer + * @param {Boolean} [controlOpts.MNT = true] - adds the MNT to the globe (ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES) + * @param {Boolean} [controlOpts.buildingsOnGround = false] - If true, put the buildings without elevation + * @param {Number} [controlOpts.defaultVisibility = true] - Display the building when the globe is initialized + * @param {Number} [controlOpts.minZoom = 15] - Minimum zoom level to display the buildings. + * + * @returns {Object} control - buildings Control + */ + ItMap.prototype.addBuildingsControl = function (controlOpts) { + this.logger.trace("[ItMap] addBuildingsControl..."); + var buildingsControlOptions = controlOpts; + var control = new itownsExtended.control.Buildings(buildingsControlOptions); + this.libMap.addWidget(control); + if (control.getElement()) { + // hide the div if maximised option = false + if (buildingsControlOptions.maximised === false) { + control.getElement().style.display = "none"; + } else { + control.getElement().style.display = "inline"; + } + // modify the position of the buildings button if x or y is given as option if (!isNaN(controlOpts.x)) { control.getElement().style.left = Number(controlOpts.x) + "px"; + control.getElement().style.right = "unset"; } if (!isNaN(controlOpts.y)) { control.getElement().style.bottom = Number(controlOpts.y) + "px"; + control.getElement().style.top = "unset"; } } return control; diff --git a/src/Itowns/ItMapLayers.js b/src/Itowns/ItMapLayers.js index 6964aee6c..22e06ba9d 100644 --- a/src/Itowns/ItMapLayers.js +++ b/src/Itowns/ItMapLayers.js @@ -13,6 +13,7 @@ import { GeoJsonParser, GpxParser } from "itowns"; +import { Helper } from "geoportal-extensions-itowns"; /** * Proprietes observables des couches pour le SDK @@ -800,6 +801,10 @@ ItMap.prototype._addRasterLayer = function (layerObj) { default : } if (layer) { + // ajout de la version du sdk dans les requêtes image + layer.source.url = Helper.normalyzeUrl(layer.source.url, { + "gp-sdk" : Gp.sdkVersion + }, false); // le controle geoportalAttribution exploite la propriete options.originators if (layerOpts.hasOwnProperty("originators")) { layer.source.attribution = layerOpts.originators; @@ -1054,29 +1059,33 @@ ItMap.prototype._addMarkers = function (markersOptions) { /** * set default layerOpts for visibility if none specified * + * @param {Object} opts - visibility options + * @returns {Object} opts - visibility options * @private */ -ItMap.prototype._setDefaultVisibilityOptions = function(opts) { - // Dans le cas où aucune visibilité n'est spécifiée - if (!opts.hasOwnProperty("visibility") || typeof opts.visibility === "undefined") { - // on la règle à "true" par défaut - opts.visibility = true; - } - return opts; +ItMap.prototype._setDefaultVisibilityOptions = function (opts) { + // Dans le cas où aucune visibilité n'est spécifiée + if (!opts.hasOwnProperty("visibility") || typeof opts.visibility === "undefined") { + // on la règle à "true" par défaut + opts.visibility = true; + } + return opts; }; /** * set default layerOpts for opacity if none specified * + * @param {Object} opts - opacity options + * @returns {Object} opts - opacity options * @private */ ItMap.prototype._setDefaultOpacityOptions = function(opts) { - // Dans le cas où aucune opacité n'est spécifiée - if (!opts.hasOwnProperty("opacity") || typeof opts.opacity === "undefined") { - // on la règle à 1 par défaut - opts.opacity = 1; - } - return opts; + // Dans le cas où aucune opacité n'est spécifiée + if (!opts.hasOwnProperty("opacity") || typeof opts.opacity === "undefined") { + // on la règle à 1 par défaut + opts.opacity = 1; + } + return opts; }; /** diff --git a/src/Map.js b/src/Map.js index 3abf863d2..07a633d2b 100644 --- a/src/Map.js +++ b/src/Map.js @@ -548,6 +548,12 @@ var layerOptions = { * | positionMarker.offset | Array(Number) | Offsets in pixels used when positioning the marker towards targeted point. The *first element* in the array is the horizontal offset. A positive value shifts the marker right. The *second element* in the array is the vertical offset. A positive value shifts the marker down. [0,0] value positions the top-left corner of the marker image to the targeted point. Default is offset associated to default marker image. | * | positionMarker.hide | Boolean | If true, marker is not displayed, otherwise displayed (False by default.) | * + * **Specific 3D options** + * + * | property | Type | Description | + * | - | - | - | + * | x | Number | The position of the mouseposition button from the left of the container div | + * | y | Number | The position of the mouseposition button from the bottom of the container div | * * * @@ -617,6 +623,13 @@ var layerOptions = { * | - | - | - | * | div | String / DOMElement | Target HTML element container or its id. Default is chosen by map implementation. * | maximised | Boolean | if the control has to be opened or not. | + * + * **Specific 3D options** + * + * | property | Type | Description | + * | - | - | - | + * | x | Number | The position of the layerswitcher button from the left of the container div | + * | y | Number | The position of the layerswitcher button from the bottom of the container div | * * * @@ -790,7 +803,7 @@ var layerOptions = { * | displayProfileOptions.apply | Function | function to display profile if you want to cutomise it. By default, built-in [DISPLAY_PROFILE_BY_DEFAULT()](http://ignf.github.io/geoportal-extensions/openlayers-latest/jsdoc/ol.control.ElevationPath.html#.DISPLAY_PROFILE_BY_DEFAULT) is used. You may also provide your own function using the same signature. | * | displayProfileOptions.target | Object | DOM container to use to display the profile. | * - * * + * * * ### Options for "boostrelief" control * @@ -800,12 +813,34 @@ var layerOptions = { * | - | - | - | * | div | String / DOMElement | Target HTML element container or its id. Default is chosen by map implementation. * | maximised | Boolean | Display or not the control | + * | x | Number | The position of the boostrelief button from the left of the container div | + * | y | Number | The position of the boostrelief button from the bottom of the container div | * | scale | Number | Defines the scale used to boost the relief | * | scale.min | Number | Minimum of the scale - 1 by default | * | scale.max | Number | Maximum of the scale - 50 by default | * | scale.step | Number | Step of the scale - 1 by default | * | defaultBoost | Number | Default boost value applied to the widget and the elevation layers when loaded | * + * + * + * ### Options for "buildings" control + * + * **Specific 3D options** + * + * | property | Type | Description | + * | - | - | - | + * | div | String / DOMElement | Target HTML element container or its id. Default is chosen by map implementation. + * | maximised | Boolean | Display or not the control | + * | x | Number | The position of the buildings button from the left of the container div | + * | y | Number | The position of the buildings button from the bottom of the container div | + * | key | String | Defines the apiKey used to add the buildings layer - "essentiels" by default | + * | MNT | Boolean | adds the MNT to the globe (ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES) - true by default | + * | buildingsOnGround | Boolean | If true, put the buildings without elevation - false by default | + * | defaultVisibility | Boolean | Display the building when the globe is initialized - true by default | + * | minZoom | Number | Minimum zoom level to display the buildings - 15 by default | + * + * + * * * * ### Options for "search" control diff --git a/test/spec/ItMap.test.js b/test/spec/ItMap.test.js index 7cd58f230..a034e4edc 100644 --- a/test/spec/ItMap.test.js +++ b/test/spec/ItMap.test.js @@ -150,6 +150,26 @@ describe("-- Test ItMap --", function () { return Utils.cleanContextOnRenderingOverPromise(map); }); }); + + it('Should correctly add the boostrelief control to the map', async () => { + return Utils.initContext().then((map) => { + var control = map.addBoostReliefControl({}); + var addedControl = map.getLibMapControl("boostrelief"); + + expect(control).to.equal(addedControl); + return Utils.cleanContextOnRenderingOverPromise(map); + }); + }); + + it('Should correctly add the buildings control to the map', async () => { + return Utils.initContext().then((map) => { + var control = map.addBuildingsControl({}); + var addedControl = map.getLibMapControl("buildings"); + + expect(control).to.equal(addedControl); + return Utils.cleanContextOnRenderingOverPromise(map); + }); + }); }); describe("-- Remove controls --", function() {