Fusion de features
Cette section à pour but de montrer comment fusionner des features
- Ajoute un bouton dédié a l'union à la toolbar
- Ce bouton est conditionnée par la sélection
- Passe la carte directement en mode sélection multiple (changeMapMode)
- Ajoute un bouton d'undo à la toolbar
Démo
{
"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;" />
<label>Max de features à fusionner : </label><input type="number" id="max_feature" value="2" min="2" style="width:50px">
// 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: 16,
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 })
const styles = kmapv.Services.createStyle(
{
// remplissage des polygones
fill: {
color: 'rgba(250,200,120,0.5)',
},
// style les lignes
stroke: {
color: '#333',
width: 1,
},
text: {
// si on veut que le style dépasse du polygone
//overflow:true,
font: '13px Calibri,sans-serif',
// "boite" autour du texte
/* backgroundFill: {
color:"#FFF"
},*/
// contour du texte
stroke: {
color: '#aaa',
width: 1,
},
// couleur du texte
fill: {
color: '#333',
},
},
})
// 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: 3,
},
text: {
font: '13px Calibri,sans-serif',
// contour du texte
stroke: {
color: '#aaa',
width: 1,
},
// couleur du texte
fill: {
color: '#333',
},
},
})
// 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 }) {
const styleToReturn = selected ? stylesSelected : styles
const properties = feature.getProperties()
if( properties.merged) {
styleToReturn.getFill().setColor('rgba(250,120,20,0.5)')
} else {
styleToReturn.getFill().setColor('rgba(250,200,120,0.5)')
}
// pour chaque feature on set le text a afficher
const text = properties.merged
? 'Fusionnées'
: [
`${feature.get('section')} ${feature.get('numero')}`,
'italic 11px Calibri,sans-serif',
]
styleToReturn.getText().setText(text)
return styleToReturn
}
// 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)
})
kmapvInstance.on('createfeature:union',(evt) => {
console.log("feature créée par fusion:", evt.createdFeature)
console.log("feature supprimées par fusion:", evt.deletedFeatures)
})
kmapvInstance.on('deletefeature:delete',(evt) => {
console.log("feature supprimée:", evt.deletedFeature)
})
// ajout des données dans le calque
// !!!! Dans CODEPEN remplacer ../../../../datas/features-parcelles.json par https://karteis.sct.saas-gfi.eu/documentation/datas/features-parcelles.json
fetch('../../../../datas/features-parcelles.json').then(function (response) {
return response.json();
}).then((data) => {
kmapvInstance.dataLayer.addGeojsonFeatures({
type: 'FeatureCollection',
features: data.features,
}, 'identifiant-du-calque')
})
// on met le mode sélection multiple par défaut
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": "multiselect",
"toolId": "multiselect",
"icon": "fa-solid fa-star-half-stroke",
"title": "Sélection Multiple",
"selectMode": "toggle"
},
{
"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
}
]
kmapvInstance.horizontalToolbar.addSelectCreateBar({
className: 'app-edit-bar',
clearButton: {
title: 'Effacer la sélection',
},
tools:createSelectBarOptions,
})
const addUnionButton = async function () {
let lastResult
const control = kmapvInstance.horizontalToolbar.addButton({
type: 'button',
name: 'karteis-core-modify-geometry',
title: 'Fusionner les géométries sélectionnées',
icon: 'fa fa-object-group',
onClick: async () => {
lastResult= await kmapvInstance.dataLayer.unionFeature({
features:kmapvInstance.dataLayer.getCurrentSelection(),
contiguonsPolygon: true,
// updateLayer: true,
// toolId: 'tool-union',
// copyProperties :false,
// idFeature: featureMapId,
// idLayer: layerId,
})
console.log('fin de fusion :', lastResult)
// on sait qu'on l'on a fusionnée des feature sur la même section cadastrale, on se sert du retour pour maj la feature créée
lastResult.createdFeature.set('section',lastResult.deletedFeatures[0].get('section'))
controlUndo.setVisible(true)
},
})
control.setVisible(false)
// Si la carte change de selection, on affiche ou masque le bouton
kmapvInstance.on('change:selection', (e) => {
const selection = kmapvInstance.dataLayer.getCurrentSelection()
// on affiche le bouton de fusion si seulement deux features sélectionnées
const isUnionPossible = selection.length <= document.querySelector("#max_feature").value
// et sur la même couche
&& selection.every(feature => kmapvInstance.dataLayer.getFeatureLinkedLayers(selection[0])[0] === kmapvInstance.dataLayer.getFeatureLinkedLayers(feature)[0])
// et l'api nous dit qu'elle sont contingues
&& kmapv.Services.FeatureUnion.isUnionPossible(kmapvInstance.dataLayer.getCurrentSelection(),true)
// et dans ce test on veut qu'elles soient sur la même section cadastrale
&& selection.every(feature => selection[0].get('section') === feature.get('section'))
control.setVisible(isUnionPossible)
})
const controlUndo = kmapvInstance.horizontalToolbar.addButton({
type: 'button',
name: 'karteis-core-undo',
title: 'Annuler',
icon: 'fa-solid fa-rotate-left',
onClick: async () => {
kmapvInstance.dataLayer.removeFeatures([lastResult.createdFeature],'identifiant-du-calque')
kmapvInstance.dataLayer.addFeatures(lastResult.deletedFeatures,'identifiant-du-calque')
lastResult = null
controlUndo.setVisible(false)
},
})
controlUndo.setVisible(false)
}
addUnionButton()
kmapvInstance.dataLayer.changeMapMode('multiselect','multiselect')