Outil de creation: accrochage

Retour

Cette section à pour but de montrer l'accrochage objet

• Le viewer a été démarré avec l'option isDesktop = true afin d'avoir une IHM de création au clic
• Paramétrage de la toolbar de création pour:
  • Créer un point
• Les données du calque principale sont indexés pour accrochage objet
• L'outil de dessin est paramétré pour s'accrocher aux objet indexés: DATAS

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;" />

// 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,
})

// indexation de la source
const source = kmapvInstance.dataLayer.getSourceLayer('identifiant-du-calque')

// la source peut être indexées dans plusieurs groupes
kmapvInstance.addSourceToFeatureSnapper({
    source: source,
    groups: [{
        name:"DATAS",
        edge:true,
        vertex:true,
        },
    ],
})

// 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.random() * 10000
}

const createSelectBarOptions = [
    {
        "type": "select",
        "toolId": "select-single",
        //"icon": "fa-solid fa-hand-pointer",
        // est équivalent a :
        "html": "<i class=\"fa-solid fa-hand-pointer\"></i>",
        "title": "Sélection simple",
        "selectMode": "replace"
    },
    {
        "type": "rectangular",
        "toolId": "select-rectangular",
        "icon": "fa-regular fa-square-full",
        "title": "Sélection rectangle",
        "selectOnce": true
    },
    {
        "toolId": "select-polygon",
        "title": "Sélection par polygone",
        "icon": "fa-solid fa-draw-polygon",
        "type": "polygon",
        "selectOnce": true
    },
    {
        "type": "multiselect",
        "toolId": "multiselect",
        "icon": "fa-solid fa-star-half-stroke",
        "title": "Sélection Multiple",
        "selectMode": "toggle"
    },
    {
        "type": "separator"
    },
    {
        "toolId": "create-EQU",
        "title": "Créer un Equipement Point",
        "type": "create",
        //"iconId": "map-create-icon-create-EQU",
        //"icon": "mdi-network",
        "html": "+P",
        "options": {
            "geometryType": "Point",
            "projection": "EPSG:3948",
            "idLayer": "identifiant-du-calque",
            "idFeature" : getIdFeature,
            "properties" : {
                "libelle": "eqt point",
            },
            "digitalizeOptions": {
                "showConstructionPoint": true,
                "snapOptions": {
                    "snapGroups": [
                        "DATAS",
                    ],
                    "pixelTolerance": 20,
                    //"filterFn": (feature) => { return true } // fonction pour exclure des features du snap
                }
            },

        }
    }
]

kmapvInstance.horizontalToolbar.addSelectCreateBar({
    className: 'app-edit-bar',
    clearButton: {
        // icon: null,
        // html: '<i class="q-icon map-tool-icon material-icons">not_interested</i>',
        title: 'Effacer la sélection',
    },
    tools:createSelectBarOptions,
})