création, modification de feature via la toolbar
Cette section à pour but de montrer le paaramétrage de la toolbar de sélection/création:
- 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
- Créer une ligne
- Bouton qui apparait lors de sélection d'un objet et permet de modifier l'objet sélectionné
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:350px;" />
// 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,
}
}
})
// style de point et polygone sélectionnés
const stylesSelected = kmapv.Services.createStyle(
{
// remplissage des polygones
fill: {
color: 'rgba(0,0,255,0.1)',
},
// style les lignes
stroke: {
color: '#00F',
width: 2,
},
// style des points
circle: {
radius: 10,
fill: {
color: 'rgba(0,0,255,0.3)',
},
stroke: {
color: '#00F',
width: 2,
}
}
})
// le calque va utiliser en entrée une fonction de style
// en entrée la feature Openlayer, la résolution de la carte ("son zoom") et est-ce que la feature est considéré sélectionnée par le viewer
const getStyle = function ({ feature, resolution, selected }) {
return selected ? stylesSelected : styles
}
// 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: getStyle,
})
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()
console.table([properties])
})
kmapvInstance.on('modifyfeature:modify',(evt) => {
console.log("feature mise a jour:", evt)
// la geometrie est renvoyée avec les propriétés d'une feature, on destructure
const {geometry, ...properties} = evt.modifiedFeature.getProperties()
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.random() * 10000
}
// si on veut ajouter des propriétés a la création (elles peuvent être ajoutées après)
function getProperties() {
return { libelle:"test creation" }
}
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",
"html": "+P",
"options": {
"geometryType": "Point",
"projection": "EPSG:3948",
"idLayer": "identifiant-du-calque",
"idFeature" : getIdFeature,
"properties" : {
"libelle": "eqt point",
},
"digitalizeOptions": {
"showConstructionPoint": true,
"snapOptions": {
"snapGroups": [
"KMAPV",
],
"pixelTolerance": 20
}
},
}
},
{
"toolId": "create-EQU",
"title": "Créer un Equipement Ligne",
"type": "create",
"html": "+L",
"options": {
"geometryType": "LineString",
"projection": "EPSG:3948",
"idLayer": "identifiant-du-calque",
"idFeature" : getIdFeature,
"properties" : {
"libelle": "eqt point",
},
"digitalizeOptions": {
"showConstructionPoint": true,
"snapOptions": {
"snapGroups": [
"KMAPV",
],
"pixelTolerance": 20
}
},
}
},
]
kmapvInstance.horizontalToolbar.addSelectCreateBar({
className: 'app-edit-bar',
clearButton: {
title: 'Effacer la sélection',
},
tools:createSelectBarOptions,
})
const addModifyButton = async function () {
const control = kmapvInstance.horizontalToolbar.addButton({
type: 'button',
name: 'karteis-core-modify-geometry',
title: 'Modifier la géométrie sélectionnée',
icon: 'fas fa-edit',
onClick: async () => {
if (kmapvInstance.dataLayer.getCurrentSelection().length === 0) {
return
}
if (kmapvInstance.dataLayer.getCurrentSelection().length > 1) {
return
}
const feature = kmapvInstance.dataLayer.getCurrentSelection()[0]
const mapFeature = await kmapvInstance.dataLayer.modifyFeature({
feature,
// idFeature: featureMapId,
// idLayer: layerId,
// digitalizeOptions,
// createTemplates,
title: "Modifier un équipement",
})
},
})
control.setVisible(false)
// Si la carte change de selection, on affiche ou masque le bouton
kmapvInstance.on('change:selection', (e) => {
control.setVisible(kmapvInstance.dataLayer.getCurrentSelection().length === 1)
})
}
addModifyButton()