Dessiner des objets sur des cartes – DZone

MapLibre GL JS est une bibliothèque open source que vous pouvez utiliser pour afficher des cartes sur une page. Il a été conçu comme un fork du projet mapbox-gl-js (MapLibre GL JS v1 est compatible avec Mapbox GL JS v1). Il est basé sur le langage de programmation TypeScript et utilise le rendu de tuiles vectorielles accéléré par GPU, ce qui signifie qu’il offre de bonnes performances (il peut afficher des cartes assez rapidement).

MapLibre GL JS est la bibliothèque utilisée par Map Region, le composant cartographique par défaut proposé par Oracle APEX.

Dessiner avec MapLibre

Pour dessiner un objet sur la région Carte dans l’application APEX, nous devons passer par plusieurs étapes. Regardons-les plus en détail.

1. Ajout de la bibliothèque

Tout d’abord, nous devons coller l’URL suivante dans le URL de fichier champ dans le Attributs de page paramètres dans le Javascript section.

Nous devrons également coller cette URL dans le URL de fichier champ dans le Attributs de page de la CSS section.

2. Création de la région de la carte

L’étape suivante consiste à créer une région cartographique à laquelle nous ajouterons la fonctionnalité de dessin d’objets. Collez le map_id valeur dans le ID statique domaine de la Avancé section.

3. Créer une action dynamique

Nous devons maintenant créer une action dynamique qui nous permettra d’ajouter la fonctionnalité de dessin d’entités à notre carte. Pour ce faire, cliquez avec le bouton droit sur la région de la carte précédemment créée dans Concepteur de pages (Arborescence). Dans le Événement champ, sélectionnez une option : Carte initialisée [Map]. Dans le Région , sélectionnez la région Carte précédemment créée. Créez ensuite un Exécuter le code JavaScript action. Dans le Paramètres rubrique, dans la Code champ, collez le code suivant :

//Get MapLibre GL JS map object
var map = apex.region('map_id').getMapObject();

//Add Draw plug-in.
var draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
        point: true,
        line_string: true,
        polygon: true,
        trash: true
    }
});

//Add Control to map
map.addControl(draw, 'top-left');

//Fix Mapbox - MapLibre issue
$('.mapboxgl-ctrl-group.mapboxgl-ctrl').addClass('maplibregl-ctrl maplibregl-ctrl-group');

Comme vous pouvez le voir dans les captures d’écran ci-dessous, de nouvelles icônes sont apparues dans le coin supérieur gauche de notre région cartographique. Vous pouvez les utiliser pour dessiner des objets sur la carte.

Nous pouvons aussi facilement dessiner des objets sur la carte.

Bien sûr, vous pouvez facilement vérifier les coordonnées de l’objet dessiné. Pour ce faire, utilisez le code suivant dans l’action dynamique. Vous verrez les résultats dans une console de navigateur :

map.on('draw.create', function(e) {
    console.log(JSON.stringify(e.features[0].geometry));
});

Et c’est à peu près tout. Maintenant, regardons l’exemple OpenLayers.

OpenLayers est une puissante bibliothèque open-source qui est une bonne alternative à MapLibre GL JS. Il est basé sur JavaScript et est développé sous la licence BSD à 2 clauses, autrement connue sous le nom de FreeBSD. Vous pouvez l’utiliser pour créer des cartes dynamiques sur n’importe quelle page, avec des données vectorielles et des marqueurs chargés à partir de pratiquement n’importe quelle source.

Dessiner avec OpenLayers

Nous utiliserons OpenLayers pour implémenter la fonctionnalité permettant de dessiner des objets sur la carte – similaire à celle que nous avons ajoutée à l’aide de MapLibre. Cependant, ce cas est un peu plus compliqué car nous n’utiliserons pas la région APEX Map proposée par Oracle. Au lieu de cela, nous allons créer notre carte entière à l’aide de la bibliothèque OpenLayers.

Pour créer une carte et lui ajouter une fonctionnalité de dessin d’objet avec OpenLayers dans Oracle APEX, nous devons suivre les étapes suivantes.

1. Ajout de la bibliothèque

Collez l’URL suivante dans le URL de fichier champ dans le Attributs de page paramètres dans le Javascript section.

Ajoutez également cette URL dans le URL de fichier champ dans le Attributs de page de la CSS section.

2. Création de contenu statique

La prochaine étape consiste à créer du contenu statique dans lequel nous allons « intégrer » notre carte. Dans le Source rubrique, dans la Code HTML champ, ajoutez ce qui suit :

<div id="map_id" class="map"></div>.

Ce sera la div pour notre carte.

3. Ajout du CSS

Dans le En ligne champ dans le Attributs de page de la CSS section, vous pouvez ajouter des CSS qui amélioreront l’affichage de votre carte, par exemple :

.map {height: 500px; width: 100%;}

4. Créer une nouvelle action dynamique

Maintenant, nous devons ajouter une action dynamique qui nous permettra de créer notre carte. Pour cela, faites un clic droit sur le contenu statique créé précédemment dans Concepteur de pages (Arborescence). Dans le Événement champ, sélectionnez le Chargement de la page option. Créez ensuite un Exécuter le code JavaScript action. Dans le Paramètres rubrique, dans la Code champ, collez le code suivant :

//Create Raster Source
const sourceRaster = new ol.source.OSM();

//Create new layer - Open Street Maps
const raster = new ol.layer.Tile({
  source: sourceRaster
});

//Create Vector Source
const source = new ol.source.Vector({wrapX: false});

//Create new layer - Vector Source
const vector = new ol.layer.Vector ({
  source: source,
});

//Create map
const map = new ol.Map({
    //set layer(s)
    layers: [raster, vector],
    //set container
    target: 'map_id',
    //set view
    view: new ol.View({
        center: ol.proj.fromLonLat([12.48, 41.85]),
        zoom: 8 
    })
});

//Add Interaction (Draw object functionality)
var draw = new ol.interaction.Draw({
    source: source,
    type: 'Polygon', //you can use 'Point' or 'LineString'
});

map.addInteraction(draw);

La carte devrait maintenant ressembler à celle que vous voyez ci-dessous.

Vous pouvez aussi facilement dessiner des objets avec le curseur de votre souris.

Vous pouvez également récupérer facilement les coordonnées des objets dessinés à l’aide du code suivant :

var geojson = new ol.format.GeoJSON().writeFeatures(vector.getSource().getFeatures(), { 
        dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:3857'
});

Conclusion

Comme vous pouvez le voir, dessiner des objets sur des cartes dans Oracle APEX n’est pas très compliqué, et il existe plusieurs bons outils que vous pouvez utiliser à cette fin. L’implémentation de cette fonctionnalité à l’aide de MapLibre et OpenLayers est très similaire.

Il est à noter que dans le premier cas, nous modifions le composant APEX natif. La région de la carte ne consiste pas seulement à dessiner des objets, mais également à afficher différentes couches, à créer des clusters, à mesurer la distance entre des points ou à obtenir l’emplacement à partir du navigateur. Et nous obtenons ces fonctionnalités prêtes à l’emploi. J’ai écrit plus à ce sujet dans ma récente introduction aux cartes dans Oracle APEX.

Cependant, la région Carte est un élément relativement nouveau. Dans les anciennes versions d’APEX, nous devions nous en passer, c’est pourquoi nous avons cherché des bibliothèques externes. C’est là qu’OpenLayers entre en jeu. Il vous permet de créer facilement une carte, de dessiner des objets et de télécharger des coordonnées. En outre, vous pouvez trouver de nombreux exemples de fonctionnalités SIG sur le site Web OpenLayers et vous pouvez facilement les ajouter à votre application APEX.

Alors, quelle solution est la meilleure ? Il n’y a pas de réponse claire. Cela dépend principalement de la version d’APEX que vous utilisez actuellement et aussi des fonctionnalités que vous souhaitez implémenter. Cependant, je peux dire une chose. J’aime la direction que prend APEX en matière de cartes. Nous avons déjà une région de carte, un élément d’adresse géocodée et quelques fonctionnalités intéressantes qui améliorent de plus en plus nos applications APEX.