Pour répondre aux exigences des utilisateurs et être la plus polyvalente
possible, l'ArcGIS API for JavaScript est capable de lire de plus en plus de
type de données, y compris pour les développeurs qui ne sont pas clients Esri.
Le format GeoJSON a été ajouté dans l’API lors de la mise à
jour de Mars.
Nous allons voir dans cet article quel est ce format, pourquoi il est utile
et comment l'ajouter à une application web en jouant sur sa symbologie. Nous verrons également qu'on peut utiliser le format CSV, format
également très répandu.
Le format GeoJSON
Le format GeoJSON a été introduit en 2008 par une communauté de développeurs.
Il vient de l'anglais Geographic JSON et permet de décrire selon le formalisme
JSON des données géométriques de type point, ligne, chaîne de caractères, polygone, ainsi que des
ensembles et sous-ensembles de ces types de données et d'y ajouter des
attributs d'informations qui ne sont pas spatiales des
entités d'une couche.
Vous pouvez consulter le tableau ci-dessous pour connaître les objets de
géométrie pris en charge par le GeoJSON et leurs types de géométrie
correspondants:
GeoJSON Geometry Object | API Geometry Type |
---|---|
Point | Point |
MultiPoint | Multipoint |
LineString/MultiLineString | Polyligne |
Polygon/MultiPolygon | Polygone |
Type | Exemples | |
---|---|---|
Point | ![]() | { "type": "Point",
"coordinates": [30, 10]
}
|
Segments | ![]() | { "type": "LineString",
"coordinates": [
[30, 10], [10, 30], [40, 40]
]
}
|
Polygones | ![]() | { "type": "Polygon",
"coordinates": [
[[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
]
}
|
![]() | { "type": "Polygon",
"coordinates": [
[[35, 10], [45, 45], [15, 40], [10, 20], [35, 10]],
[[20, 30], [35, 35], [30, 20], [20, 30]]
]
}
|
Ce
format est devenu un standard de fait, bien qu'il ne soit pas un standard
officiel, en permettant à de nombreux développeurs d'étendre leurs APIs et
leurs services avec des capacités géographiques.
Pour en savoir plus sur le format GeoJSON : https://tools.ietf.org/html/rfc7946
Avantage du GeoJSON
L'avantage de ce format c'est que tout est dans un seul fichier et il est
lisible par un humain avec un éditeur de texte par exemple.
Il standardise cette façon de transmettre l'information. Plusieurs
fournisseurs l'adoptent et nous obtenons ainsi des API sur le Web qui
fonctionnent de la même manière.
Le
JSON présente l'avantage d'être peu verbeux, en opposition au XML, ce qui est
un avantage dans la mesure ou les données géographiques sont souvent très
denses et demanderaient alors beaucoup de balise pour être représentées en XML
De manière plus claire, le GeoJSON est une manière de représenter des
données géolocalisées, que ce soit des points, des traces ou des zones. Ces
données peuvent être par exemple des parcelles agricoles ou urbaines. Une fois
ces données en votre possession il ne vous restent plus qu'à les associer à un
fond de carte pour obtenir une carte complète.
Son gros avantage est donc d'être un format
ouvert, et donc gratuit et compatible avec de très nombreuses ressources et logiciels.
Utilisation dans l'ArcGIS API for JavaScript
La classe GeoJSONLayer est utilisée pour créer une couche
basée sur le format GeoJSON, on la charge donc dans le require. Les
données GeoJSON doivent être conformes à la spécification RFC 7946 qui stipule
que les coordonnées sont en SpatialReference.WGS84.
GeoJSONLayer vous permet d'ajouter des fonctionnalités à partir d'un fichier
GeoJSON (.geojson). Le fichier est référencé en tant que fichier
hébergé sur le Web. Pour cette raison, le fichier doit être accessible au
public.
Cet exemple montre comment ajouter une instance de GeoJSONLayer à
une carte dans un MapView. Les entités ponctuelles résultantes
peuvent être interrogées via l'API, puis utilisées comme entrée pour d'autres
opérations. Si les fichiers GeoJSON ne se trouvent pas sur le même domaine que
votre site Web, un serveur compatible CORS est requis (ou un
proxy).
Pour utiliser ce type de données, comme d’habitude on importe la classe
dans le require et on définit
l’instance dans la fonction qui suit. On peut alors créer un objet GeoJSONLayer et
définir les propriétés dans son constructeur. Pour les connaitre on va sur
le site développeur. Il est nécessaire
d'utiliser la propriété url du fichier GeoJSON.
Dans cet exemple spécifique, l'URL du flux en direct des tremblements de
terre USGS est ajouté.
var geojsonLayer = new GeoJSONLayer({
url: https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson,
});
Les Popups pour transmettre de l'information
Les fenêtres contextuelles améliorent les applications Web en fournissant aux utilisateurs un moyen simple d'interagir avec les attributs d'une couche et de les afficher. Ils jouent un rôle important dans la transmission d'informations à l'utilisateur, ce qui améliore les capacités de narration de l'application.
Les couches CSVLayer, GeoJSONLayer, ImageryLayer et FeatureLayer possèdent une propriété popupTemplate pour configurer la popup.
On configure alors les propriétés comme un objet JSON :
const template = {
title: "Info séisme",
content: "Magnitude {mag} {type} a frappé {place} le {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
]
};
Faisons varier la taille des points dans le Renderer
On l'a vu dans l'article précédent, pour éditer la symbologie, il faut configurer la propriété renderer qui sera affectée à notre couche GeoJSON. On souhaite que la taille des épicentres représentés sur la carte dépendent de la magnitude du séisme. Pour qu'un attribut dépend de la taille, d'après la documentation, je peux choisir SimpleRenderer ou UniqueValueRenderer. Il suffira d'indiquer simple ou unique-value sans charger des modules via le require grâce à l'autocasting.
layer.renderer = {
type: "simple", // autocasts as new SimpleRenderer()
}
On définit ensuite qu'on souhaite une variation de taille et les bornes de pixels pour la taille des éléments grâce à la propriété visualVariables de renderer où on y définit :
- le type de symbologie qui sera ici size
- pour quel champ du geojson on l'applique : mag
- les stops correspondant aux bornes
Le code est disponible sur mon github.
Le format CSVLayer
CSVLayer vous permet d'ajouter des fonctionnalités à partir d'un fichier
texte (.csv) ou délimité (.txt) contenant des informations séparées par des
virgules, comprenant des informations de latitude et de longitude. Le fichier
est référencé en tant que fichier hébergé sur le Web. Pour cette raison, le
fichier doit être accessible au public. Le fichier doit inclure au moins une
paire de champs de coordonnées, ces derniers étant utilisés pour localiser les
entités sur la carte. En règle générale, la coordonnée de latitude est la
valeur Y et la coordonnée de longitude est la valeur X. Les fonctionnalités du
fichier CSV sont accessibles via l'API afin que vous puissiez les interroger et
les utiliser en tant qu'entrée pour les services de géométrie ou de
géotraitement.
Si les fichiers CSV ne se trouvent pas sur le même domaine que votre site
Web, un serveur
compatible CORS ou un proxy est requis.
Le code suivant vous montre comment ajouter une nouvelle instance CSVLayer
à une carte :
Il faut charger la classe CSVLayer dans le require et définir les propriétés dans son
constructeur. Dans cet exemple spécifique, l'URL du fichier csv de tremblements
de terre USGS est ajouté
var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv";
var csvLayer = new CSVLayer({
url: url,
});
map.add(csvLayer); // adds the layer to the map
Sur le même principe que précédemment, on peut créer une Scène 3D avec les séismes.
Le Renderer en 3D
Le principe est le même que en 2D, il suffit cette fois de spécifier des
points en 3D. Il existe une classe PointSymbol3D() que nous n’avons pas besoin
de charger dans le require (tout comme on n’a pas besoin de charger le
SimpleRenderer()) grâce à l’autocasting :
csvLayer.renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [
{
type: "icon", // autocasts as new IconSymbol3DLayer()
material: { color: [238, 69, 0, 0.75] },
outline: {
width: 0.5,
color: "white"
},
size: "12px"
}
]
}
};
Le code est disponible sur mon github.
Vous savez comment ajouter deux nouveaux types de données fortement
utilisés par la communauté de développeurs, car accessible facilement sur
internet : les couches GeoJSON et CSV.
Pour accéder directement à cette application, cliquez ici.
Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.
Pour accéder directement à cette application, cliquez ici.
Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.
je comprend rien je veux
RépondreSupprimermes reponse