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.js"></script>
        <script src="lib/geojson.js"></script>
    </head>
    <body>
        ...
    </body>
</html>    

GeoJSON à MapML

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

astuce

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

Paramètres

Paramètre	Description
<String \| Object> json	Chaî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.

Option	Type	Default	Description
`label`	<String>	`json.name`, `json.title` ou "Layer"	Définit la label de la couche de sortie.
`projection`	<String>	`OSMTILE`	Dé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 `label`	Fonction 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

label
projection
caption
properties
geometryFunction

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

geojson2mapml projection option
geojson2mapml(json, {projection: "CBMTILE"});

option de légende geojson2mapml – valeur contenant une fonction
// fonction de légende
geojson2mapml(json, {caption: function(feature) {
    return feature.properties.desc + ", not a Polygon";
    }
});
// valeur de la chaîne de l’option de légende qui renvoie à un nom de propriété
geojson2mapml(json, {caption: "desc"});

geojson2mapml properties option - function-valued
// fonction de propriétés
geojson2mapml(json, {properties: function(feature) {
    let parser = new DOMParser();
    return parser.parseFromString("<h1>" + feature.properties.desc + "propriété de</h1>", "text/html").body.firstChild;
    }
});
// option de propriétés – valeur contenant une chaîne – assurez-vous de nettoyer les chaînes fournies par les utilisateurs
geojson2mapml(json, {properties: "<p>Cette propriété a été ajoutée à l’aide d’une chaîne de propriétés </p>"});

geojson2mapml geometryFunction option
let options = {
                geometryFunction: function (g, f) {
                  g.setAttribute("class", f.properties.class);
                  return g;}
              };
geojson2mapml(json, options);

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

<map-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>
</map-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

<map-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>
</map-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

<map-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>
</map-layer>

MapML à GeoJSON

Fonction	Retours	Description
`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 `<map-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.

attention

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

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

Paramètres

Paramètre	Description
Élément <HTMLLayerElement>	Élément `<map-layer>`
<Object> options	Vous 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.

Option	Type	Défaut	Description
`propertyFunction`	<Function>	n/a	Fonction 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>	`true`	Transforme 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.

<map-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>
</map-layer>
<script>
window.onload = (event) => {
   let output = mapml2geojson(document.querySelector('map-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"
     }
 }]
}

Introduction​

GeoJSON à MapML​

Paramètres​

Options​

Exemples​

Utilisation des options de base​

Chaîne d’options​

Fonction d’options​

Options par défaut​

MapML à GeoJSON​

Paramètres​

Options​

Remarques​

Exemples​

Options par défaut​

Introduction

GeoJSON à MapML

Paramètres

Options

Exemples

Utilisation des options de base

Chaîne d’options

Fonction d’options

Options par défaut

MapML à GeoJSON

Paramètres

Options

Remarques

Exemples

Options par défaut