creation de feature sur navigateur de bureau

Retour

Cette section à pour but de montrer quelques exemples de création d'objet lancé par une api externe:

• Le viewer a été démarré avec l'option isDesktop = true afin d'avoir une IHM de création au clic
• Type de géométrie possible:
  • Point
  • LineString
  • Polygon
  • GeometryCollection
  • MultiPoint
  • MultiLineString
  • MultiPolygon
• Dans cet exemple on a utilisé ces options:
  • showConstructionPoint: true
  • maxPoints : 5
  • showConstructionLine : true

style

{
  "jsLib": [
    "https://karteis.sct.saas-gfi.eu/dist/mapviewer/latest/karteis-mapviewer-var.js"
  ]
}

<!-- Ne pas utiliser dans votre code -->
<!-- La déclaration du css n'est utile que pour l'affichage sur le site d'exemples -->
<link rel="stylesheet" href="/mapviewer/mapviewer.css">
<!-- Ne pas utiliser dans votre code -->

<!-- Dans nos exemple on utilise font-awesome pour afficher les icones de boutons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Le div qui sera utilisé pour injecter la carte -->
<div id="kmap" style="height:300px;" />
<button onclick="startCreate('Point')">Créer Point</button>
<button onclick="startCreate('LineString')">Créer Ligne</button>
<button onclick="startCreate('Polygon')">Créer Polygon</button>
<button onclick="startCreate('GeometryCollection')">Créer Multigéométrie</button>

// Initialisation de la carte avec ses plugins
const kmapvInstance = (new kmapv.Mapviewer({
    mapdiv: document.getElementById('kmap'), // Il est aussi possible d'utiliser directement l'id du div contenant la carte
    projection: 'EPSG:3857',
    defaultCenter: [-444800, 6094400],
    defaultZoom: 17,
    minZoom: 5,
    maxZoom: 22,
    isDesktop: true,
}))
 .use(kmapv.CommonLayer({})) // charge le plugin générique des calques
 .use(kmapv.BackgroundLayer({})) // charge le plugin de prise en charge des fond de plans
 .use(kmapv.DataLayer({})) // chage le plugin de prise en charge des couche de données

// Ajout du fond de plan OSM
kmapvInstance.backgroundLayer.addOSM('background', { title: 'open street map', zIndex: 0 })

// styles des données
const styles = kmapv.Services.createStyle(
{
    // remplissage des polygones
    fill: {
        color: 'rgba(200,200,200,0.5)',
    },
    // style les lignes
    stroke: {
        color: '#333',
        width: 2,
    },
    // style des points
    circle: {
        radius: 10,
        fill: {
            color: '#aaa',
        },
        stroke: {
            color: '#333',
            width: 2,
        }
    }
})

// Ajout d'un calque de données
kmapvInstance.dataLayer.addDataLayer({
    title: "Calque de donnée",
    idGroup: 'data',
    zIndex: 1,
    layerId: 'identifiant-du-calque',
    selectable: true,
    hoverable: true,
    style: styles,
})

// soit on récupère la création via un event
kmapvInstance.on('createfeature:create',(evt) => {
    console.log("feature créée:", evt.createdFeature)
    // la geometrie est renvoyée avec les propriétés d'une feature, on destructure
    const {geometry, ...properties} = evt.createdFeature.getProperties()

    properties.id = evt.createdFeature.getId()

    console.table([properties])
})

// ajout des données au format geojson dans le calque
// !!!! Dans CODEPEN remplacer ../../../../datas/features-base.json par https://karteis.sct.saas-gfi.eu/documentation/datas/features-base.json
fetch('../../../../datas/features-base.json').then(function (response) {
    return response.json();
  }).then((data) => {
    kmapvInstance.dataLayer.addGeojsonFeatures({
        type: 'FeatureCollection',
        features: data.features,
    }, 'identifiant-du-calque')
})

// génère l'idFeature pour la creation (obligatoire)
function getIdFeature() {
  return 'id-' + Math.floor(Math.random() * 10000)
}

function startCreate(type) {

    const idFeature = getIdFeature()

    // soit on récupère la feature avec une promesse
    kmapvInstance.dataLayer.createFeature( {
        "geometryType":type, // type de geometrie a créer (type geojson)
        "idLayer": "identifiant-du-calque", // calque ou créer la geométrie
        "idFeature" : idFeature, // identifiant de la nouvelle feature
        "properties" : {prop1:1, prop2: "propriétée texte"}, // propriété a remplir dans la feature OL
        "toolId": "create-EQU", // sera renvoyé lors de la levé de l'event createfeature:create
        "digitalizeOptions": { // options de l'outil de digitalisation
            "showConstructionPoint": true,
            "maxPoints" : 5,
            "showConstructionLine" : true,
        }
    }).then((result) => {
        console.log("created",result)
    })

    // soit await, mais notre outil de doc ne permet pas de déclarer une fonction async
    //const result = await kmapvInstance.dataLayer.createFeature( {...})

}