Aller au contenu principal

API GeoJSON

Introduction

L’interface de programmation d’applications (API) GeoJSON est fournie sous forme de bibliothèque pour convertir MapML en GeoJSON et vice versa. L’API GeoJSON peut être ajoutée à n’importe quel document, à condition qu’elle soit précédée du module mampl-viewer, comme suit :

<!doctype html>
<html lang="en">
<head>
<script type="module" src="mapml-viewer.js"></script>
<script src="lib/geojson.js"></script>
</head>
<body>
...
</body>
</html>

GeoJSON à MapML

FonctionRetoursDescription
geojson2mapml(<Object | String> json, <Object> options)Élément MapML <layer->.Convertit une caractéristique GeoJSON ou une chaîne ou un objet de collection de caractéristiques en élément MapML <layer-> contenant un ou plusieurs éléments <map-feature>.

:::Conseil

Jetez un coup d’œil à cette application au moyen de l’API geojson2mapml!

:::

Paramètres

ParamètreDescription
<String | Object> jsonChaîne ou objet GeoJSON
Options <Object>Ensemble de paires de clés ou de valeurs qui personnalise la couche de sortie MapML. Toutes les options sont facultatives et décrites ci-après.

Options

<Object> Ensemble de paires de clés ou de valeurs qui personnalise la couche de sortie MapML. Toutes les options sont facultatives et décrites ci-après.

OptionTypeDefaultDescription
label<String>json.name, json.title ou "Layer"Définit la label de la couche de sortie.
projection<String>OSMTILEDéfinit la [projection] (https://maps4html.org/web-map-doc/docs/elements/mapml-viewer/#projection) de la couche de sortie. Les valeurs définies incluent : OSMTILE, CBMTILE, WGS84, and APSTILE.
caption<String | Function>Utilise la valeur labelFonction qui accepte la caractéristique JSON et retourne une chaîne, OU une chaîne qui est le nom d’une propriété à mapper sur featurecaption. Si aucune propriété associée n’est trouvée, la chaîne fournie sert de valeur de la légende de la caractéristique. Voir la section Utilisation des options de base pour un exemple.
properties<Function | String | HTMLElement>Les propriétés seront mappées à un table HTML.Précise la façon dont les propriétés sont mappées. <Function> - Fonction qui accepte un argument – l’objet GeoJSON feature – et qui doit retourner un HTMLElement qui devient l’unique élément-enfant de <properties>. <String> - Chaîne qui sera analysée syntaxiquement et utilisée comme unique élément-enfant de <properties> avec toutes les caractéristiques. <HTMLElement> - Élément qui servira d’unique élément- enfant de <properties> avec toutes les caractéristiques. Voir la section utilisation des options de base pour un exemple.
geometryFunction<Function>La géométrie MapML reproduit la valeur géométrique GeoJSON<Function> Fonction pour modifier les [descendants] générés (https://maps4html.org/web-map-doc/docs/elements/geometry/#child-elements) de <map-geometry> qui peut ajouter des classes, hyperlinks et des spans à l’instance. Un élément <map-geometry> simple est créé par défaut. La fonction accepte deux arguments : l’[élément-enfant] généré (https://maps4html.org/web-map-doc/docs/elements/geometry/#child-elements) de <map-geometry> et l’objet de la caractéristique JSON pour retourner un élément-enfant modifié de <map-geometry>. Voir la section Utilisation des options de base pour un exemple.

Exemples

Utilisation des options de base

Utilisation de chaque option en contexte

option d’étiquette geojson2mapml
geojson2mapml(json, {label: "Centre-ville d’Ottawa"});

Chaîne d’options

Exemple montrant comment utiliser des chaînes pour définir les options label, projection, caption et properties.

let json = {
"name": "Nom par défaut",
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-75.6916809,45.4186964]
},
"properties": {"desc": "Ceci est un point"}
};

// GeoJSON à MapML
let output = geojson2mapml(json, {label: "Exemple 1", projection: "CBMTILE", caption: "desc", properties: "<h3>Ceci est un en-tête de propriété</h3>"});
Cliquez pour afficher la sortie HTMLElement
<layer- label="Example 1" checked="">
<map-meta name="projection" content="CBMTILE"></map-meta>
<map-meta name="cs" content="gcrs"></map-meta>
<map-feature>
<map-featurecaption>Ceci est un point</map-featurecaption>
<map-geometry>
<map-point>
<map-coordinates>-75.6916809 45.4186964</map-coordinates>
</map-point>
</map-geometry>
<map-properties>
<h3>Ceci est un en-tête de propriété</h3>
</map-properties>
</map-feature>
</layer->

Fonction d’options

Exemple montrant comment les fonctions peuvent servir à définir les options caption et properties.

let json = {
"name": "Nom par défaut",
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-75.6916809,45.4186964]
},
"properties": {"desc": "Ceci est un point"}
};

// function to set caption
let cap = function c(j) {
let str = "Ce point se trouve à : (" + j.geometry.coordinates[0] + ", " + j.geometry.coordinates[1] + ").";
return str;
}

// fonction pour définir des propriétés
let prop = function f(p) {
let parser = new DOMParser();
return parser.parseFromString("<h1>" + p.properties.desc + "'s property</h1>", "text/html").body.firstChild;
}

// GeoJSON à MapML
let output = geojson2mapml(json, {label: "Exemple 2", caption: cap, properties: prop});
Cliquez pour afficher la sortie HTMLElement
<layer- label="Example 2" checked="">
<map-meta name="projection" content="OSMTILE"></map-meta>
<map-meta name="cs" content="gcrs"></map-meta>
<map-feature>
<map-featurecaption>Ce point se trouve à : (-75.6916809, 45.4186964).</map-featurecaption>
<map-geometry>
<map-point>
<map-coordinates>-75.6916809 45.4186964</map-coordinates>
</map-point>
</map-geometry>
<map-properties>
<h1>Ceci est une propriété du point</h1>
</map-properties>
</map-feature>
</layer->

Options par défaut

Exemple montrant la sortie par défaut lorsqu’aucune option n’est fournie.

let json = {
"title": "Géométrie du point",
"bbox": [-75.916809, 45.886964, -75.516809, 45.26964],
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-75.6916809, 45.4186964]
},
"properties": {
"prop0": "Ceci est un point"
}
}]
};

// GeoJSON à MapML
let output = geojson2mapml(json);
Cliquez pour afficher la sortie HTMLElement
<layer- label="Géométrie du point" checked="">
<map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta>
<map-meta name="projection" content="OSMTILE"></map-meta>
<map-meta name="cs" content="gcrs"></map-meta>
<map-feature>
<map-featurecaption>Géométrie du point</map-featurecaption>
<map-geometry>
<map-point>
<map-coordinates>-75.6916809 45.4186964</map-coordinates>
</map-point>
</map-geometry>
<map-properties>
<table>
<thead>
<tr>
<th role="columnheader" scope="col">Property name</th>
<th role="columnheader" scope="col">Property value</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">prop0</th>
<td itemprop="prop0">This is a Point</td>
</tr>
</tbody>
</table>
</map-properties>
</map-feature>
</layer->

MapML à GeoJSON

FonctionRetoursDescription
mapml2geojson(<HTMLLayerElement> element, <Object> options)Objet de collection de caractéristiques JavaScript (GeoJSON)Cette fonction transforme l’élément- enfant <feature> d’un élément <layer-> en un objet GeoJSON FeatureCollection. Vous fournissez les options pour contrôler la transformation. Cette fonction doit servir dans un événement windows.onload.

:::Mise en garde

mapml2geojson doit être appelé dans un événement windows.onload pour fonctionner correctement, comme suit :

window.onload = (event) => {
mapml2geojson(json);
};

:::

Paramètres

ParamètreDescription
Élément <HTMLLayerElement>Élément <layer->
<Object> optionsVous fournissez des paramètres au moyen d’un objet d’options avec des noms d’option prédéfinis.

Options

<Object> Ensemble de paires de clés ou de valeurs qui personnalise l’objet de sortie GeoJSON. Toutes les options sont facultatives et décrites ci-après.

OptionTypeDéfautDescription
propertyFunction<Function>n/aFonction que vous fournissez et qui mappe l’élément <map-properties> de la caractéristique à un membre GeoJSON "properties", puisque qu’il n’y a que vous qui connaît la conception du balisage dans votre valeur <map-properties>. Si vous ne fournissez pas cette option, une fonction par défaut essaiera de renverser un élément-enfant <table> de <map-properties>, comme si ce tableau était généré par la fonction d’option de propriétés par défaut de geojson2mapml.
transform<Boolean>trueTransforme des valeurs <map-coordinates> en valeurs gcrs (longitude, latitude), si elles ne le sont pas déjà. GeoJSON recommande d’utiliser les coordonnées de longitude et de latitude WGS 84, il s’agit donc là du comportement par défaut.
Remarques

Au besoin, mapml2geojson transforme des coordonnées en gcrs par défaut avant la sérialisation. Prenez note que toutes les projections géographiques CRS (système de référence des coordonnées) ne sont pas équivalentes, et que l’interprétation de telles coordonnées n’est pas garantie conforme aux coordonnées WGS 84 ou GPS, et que, par conséquent, elles ne suivent pas nécessairement la recommandation GeoJSON, qui requiert des coordonnées de longitude et de latitude codées conformément au système géodésique WGS 84. Le moteur de projection utilisé pour mettre en œuvre cette conversion est incapable de transformer des coordonnées d’un ellipsoïde à un autre. Par conséquent, le JSON résultant DOIT (d’une manière qui reste à déterminer) être étiqueté avec la donnée qu’utilise la projection de la couche.


Exemples

Options par défaut

Exemple montrant la sortie GeoJSON par défaut lorsqu’aucune option n’est fournie.

<layer- label="Géometrie du point" checked="">
<map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta>
<map-meta name="projection" content="OSMTILE"></map-meta>
<map-meta name="cs" content="gcrs"></map-meta>
<map-feature>
<map-featurecaption>Géometrie du point</map-featurecaption>
<map-geometry>
<map-point>
<map-coordinates>-75.6916809 45.4186964</map-coordinates>
</map-point>
</map-geometry>
<map-properties>
<table>
<thead>
<tr>
<th role="columnheader" scope="col">Nom de la propriété </th>
<th role="columnheader" scope="col">Nom de la propriété</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">prop0</th>
<td itemprop="prop0">Ceci est un point</td>
</tr>
</tbody>
</table>
</map-properties>
</map-feature>
</layer->
<script>
window.onload = (event) => {
let output = mapml2geojson(document.querySelector('layer-'))
};
</script>
Cliquez pour afficher la sortie GeoJSON
{
"title": "Géométrie du point",
"bbox": [-75.916809, 45.886964, -75.516809, 45.26964],
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-75.6916809, 45.4186964]
},
"properties": {
"prop0": "Ceci est un point"
}
}]
}