options diverses de création et modification
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
- Présentation des options d'affichage de l'ihm de création
- cocher les options avant de lancer un outil
- Code exemple pour annuler une création ou modification en cours via la touche echap
- Pour que cela fonctionne il faut ajouter un tabIndex="0" sur l'élement portant la gestion d'evenement sur clavier
- le css [tabindex] permet d'éviter un bord noir autour de la carte lorsque l'on utilise le clavier
options création
{
"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">
<div id="app">
<!-- Le div qui sera utilisé pour injecter la carte -->
<div id="kmap" style="height:300px;" tabIndex="0"></div>
<button onclick="setSelectMode()">annuler (mode sel)</button>
<button onclick="startCreate('Point')">+ Point</button>
<button onclick="startCreate('LineString')">+ Ligne</button>
<button onclick="startCreate('Polygon')">+ Polygon</button>
<button onclick="startCreate('GeometryCollection')">+ Multigéométrie</button>
<button onclick="modifySelectedFeature()">Modifier feat sélectionnée</button>
<div style="display:flex;flex-direction:column">
<label><input type="checkbox" id="auto_validate">Validation automatique (implicite si boite outil masquée)</label>
<label><input type="checkbox" id="hide_toolbox">Masquer la boite à outil (impossible pour multigéométrie)</label>
<label><input type="checkbox" id="hide_GPS">Masquer l'option GPS</label>
<label>- Modifications disponibles</label>
<label><input type="checkbox" id="move">Déplacer</label>
<label><input type="checkbox" id="rotate">Rotation</label>
<label><input type="checkbox" id="scale">Redimensionner</label>
<label><input type="checkbox" id="modifyVertex">Déplacer/Ajouter sommet</label>
<label><input type="checkbox" id="removeVertex">Supprimer sommet</label>
</div>
</div>
// 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,
})
// 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()
// on veut annuler si on tape sur echap
const app = document.getElementById("app")
app.addEventListener("keydown", handleKeyDown)
// 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
hideToolbox: document.querySelector("#hide_toolbox").checked, // on masque l'ihm (quand c'est possible)
title: "Titre",
digitalizeOptions: { // options de l'outil de digitalisation
showConstructionPoint: true,
//maxPoints : 5,
showConstructionLine : true,
},
hideGPS: document.querySelector("#hide_GPS").checked, // Masquer l'option GPS
}).then((result) => {
console.log("created",result)
}).finally(() => {
// que cela marche ou plante on retire la gestion du clavier
app.removeEventListener("keydown", handleKeyDown)
});
}
function modifySelectedFeature() {
if (kmapvInstance.dataLayer.getCurrentSelection().length === 0) {
return
}
if (kmapvInstance.dataLayer.getCurrentSelection().length > 1) {
return
}
const feature = kmapvInstance.dataLayer.getCurrentSelection()[0]
// différents outils de modification disponibles:
const modifyTools = ['move','rotate','scale','modifyVertex','removeVertex'].filter(tool => document.querySelector(`#${tool}`).checked)
// on veut annuler si on tape sur echap
const app = document.getElementById("app")
app.addEventListener("keydown", handleKeyDown)
kmapvInstance.dataLayer.modifyFeature({
feature,
// idFeature: featureMapId,
// idLayer: layerId,
// digitalizeOptions,
// createTemplates,
hideToolbox: document.querySelector("#hide_toolbox").checked, // on masque l'ihm (quand c'est possible)
autoValidate: document.querySelector("#auto_validate").checked, // on valide dés la première modification (actif aussi si hidetoolbox est actif)
hideGPS: document.querySelector("#hide_GPS").checked, // Masquer l'option GPS
modifyTools: modifyTools,
title: "Modifier un équipement",
}).then((result) => {
console.log("modified",result)
}).finally(() => {
// que cela marche ou plante on retire la gestion du clavier
app.removeEventListener("keydown", handleKeyDown)
});
}
function handleKeyDown(event) {
// console.log(event.keyCode)
if (event.keyCode === 27) {
setSelectMode()
}
}
function setSelectMode() {
kmapvInstance.dataLayer.changeMapMode('select','select-single')
}
[tabindex] {
outline: none !important;
}