Division de features
Cette section à pour but de montrer comment découper les features:
- Ajoute un bouton dédié a l'union à la toolbar
- Ce bouton est conditionnée par la sélection
- Affichage d'un thème spécifique
- 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;" />
// 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.splitted) {
styleToReturn.getFill().setColor(properties.index === 0 ? 'rgba(120,250,120,0.5)' : 'rgba(50,120,255,0.5)')
} else {
styleToReturn.getFill().setColor('rgba(250,200,120,0.5)')
}
// pour chaque feature on set le text a afficher
const text = [
`${properties.section} ${properties.numero}`,
'italic 11px Calibri,sans-serif',
]
if (properties.splitted ) {
text.push(
'\n',
'',
`coupe ${properties.index}`,
'')
}
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:split',(evt) => {
console.log("features créées par découpage:", evt.createdFeatures)
console.log("feature supprimée par découpage:", evt.deletedFeature)
})
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 addSplitButton = async function () {
let lastResult = null
const control = kmapvInstance.horizontalToolbar.addButton({
type: 'button',
name: 'karteis-core-modify-geometry',
title: 'Découper la géométrie sélectionnée',
icon: 'fa-solid fa-scissors',
onClick: async () => {
const selection = kmapvInstance.dataLayer.getCurrentSelection()
try {
lastResult = await kmapvInstance.dataLayer.splitFeature({
feature:selection[0],
// updateLayer: true,
// toolId: 'tool-union',
copyProperties :true,
// idLayer: layerId,
})
console.log('fin de découpage :', lastResult)
controlUndo.setVisible(true)
} catch(e) {
console.error(e)
}
// ou kmapvInstance.dataLayer.splitFeature({...}).then((res)=>{ lastResult = res }).fail(()=>{});
},
})
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()
const isSplitPossible = selection.length === 1 && kmapv.Services.FeatureSplit.isSplitPossible(selection[0])
control.setVisible(isSplitPossible)
})
const controlUndo = kmapvInstance.horizontalToolbar.addButton({
type: 'button',
name: 'karteis-core-undo',
title: 'Annuler',
icon: 'fa-solid fa-rotate-left',
onClick: async () => {
console.log('wowo')
kmapvInstance.dataLayer.removeFeatures(lastResult.createdFeatures,'identifiant-du-calque')
kmapvInstance.dataLayer.addFeatures([lastResult.deletedFeature],'identifiant-du-calque')
lastResult = null
controlUndo.setVisible(false)
},
})
controlUndo.setVisible(false)
}
addSplitButton()