creation de feature via la toolbar
Cette section à pour but de montrer le paramé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 multigéométrie en utilisant un set prédéfini de templates
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:400px;" />
// 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)
})
// 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",
//"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": [
"KMAPV",
],
"pixelTolerance": 20
}
},
}
},
{
"toolId": "create-EQU",
"title": "Créer un Equipement multigeometry",
"type": "create",
//"iconId": "map-create-icon-create-EQU",
//"icon": "mdi-network",
"html": "+M",
"options": {
"geometryType": "GeometryCollection",
"projection": "EPSG:3948",
"idLayer": "identifiant-du-calque",
"idFeature" : getIdFeature,
"properties" : getProperties,
"digitalizeOptions": {
"showConstructionPoint": true,
"snapOptions": {
"snapGroups": [
"KMAPV",
],
"pixelTolerance": 20
}
},
"createTemplates": {
"features":
[{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
5,
3.8000000081956395
],
[
1.1999999999534299,
0
],
[
0,
0
],
[
5,
5
],
[
5,
3.8000000081956395
]
]
],
[
[
[
4.8999999999068695,
5
],
[
0,
0.10000000707805001
],
[
0,
1.20000000111759
],
[
3.69999999995343,
5
],
[
4.8999999999068695,
5
]
]
],
[
[
[
5,
2.5
],
[
2.5,
0
],
[
1.3000000000465701,
0
],
[
5,
3.7000000011175898
],
[
5,
2.5
]
]
],
[
[
[
3.5999999998603,
5
],
[
0,
1.30000000819564
],
[
0,
2.5
],
[
2.5,
5
],
[
3.5999999998603,
5
]
]
],
[
[
[
2.39999999990687,
5
],
[
0,
2.60000000707805
],
[
0,
3.7000000011175898
],
[
1.1999999999534299,
5
],
[
2.39999999990687,
5
]
]
],
[
[
[
5,
1.30000000819564
],
[
3.69999999995343,
0
],
[
2.60000000009313,
0
],
[
5,
2.40000000223517
],
[
5,
1.30000000819564
]
]
],
[
[
[
5,
0
],
[
3.80000000004657,
0
],
[
5,
1.20000000111759
],
[
5,
0
]
]
],
[
[
[
1.0999999998602998,
5
],
[
0,
3.8000000081956395
],
[
0,
5
],
[
1.0999999998602998,
5
]
]
]
]
},
"properties": {
"name": "Assainissement - Regard de collecte / répartition"
},
"meta": {
"type": "GEOMTEMPLATE",
"id": "Assainissement - Regard de collecte / répartition",
"infosCount": 0,
"infos": false,
"warningsCount": 0,
"warnings": false
},
"display": {
"label": "Assainissement - Regard de collecte / répartition"
}
}, {
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
0,
20
],
[
20,
20
],
[
20,
0
],
[
0,
0
],
[
0,
20
]
],
[
[
16.8000000005122,
7.00000000186265
],
[
17.0000000006985,
7.600000007078051
],
[
17.1999999997206,
8.20000000298023
],
[
17.2999999998137,
8.80000000819564
],
[
17.3999999999069,
9.400000004097821
],
[
17.3999999999069,
10.100000007078101
],
[
17.3999999999069,
10.700000002980198
],
[
17.2999999998137,
11.300000008195601
],
[
17.0999999996275,
11.9000000040978
],
[
16.9000000006054,
12.5
],
[
16.7000000004191,
13.1000000052154
],
[
16.400000000139702,
13.700000001117601
],
[
16.099999999860298,
14.200000008568201
],
[
15.7000000006519,
14.800000004470299
],
[
15.300000000279399,
15.200000004842899
],
[
8.00000000046566,
7.8000000026077
],
[
5,
4.80000000447035
],
[
5.40000000037253,
4.40000000409782
],
[
5.99999999976717,
4.000000003725289
],
[
6.50000000023283,
3.7000000011175898
],
[
7.09999999962747,
3.40000000782311
],
[
7.70000000018626,
3.10000000521541
],
[
8.299999999580901,
2.90000000037253
],
[
8.9000000001397,
2.8000000026076997
],
[
9.50000000069849,
2.70000000484288
],
[
10.2000000001863,
2.70000000484288
],
[
10.799999999580901,
2.70000000484288
],
[
11.4000000001397,
2.8000000026076997
],
[
12.0000000006985,
3.00000000745058
],
[
12.600000000093099,
3.20000000298023
],
[
13.2000000006519,
3.40000000782311
],
[
13.8000000000466,
3.7000000011175898
],
[
14.3000000005122,
4.10000000149012
],
[
14.7999999998137,
4.40000000409782
],
[
15.300000000279399,
4.90000000223517
],
[
15.7000000006519,
5.3000000026077
],
[
16.099999999860298,
5.90000000782311
],
[
16.400000000139702,
6.40000000596046
],
[
16.8000000005122,
7.00000000186265
]
],
[
[
15.2000000001863,
15.300000002607701
],
[
14.7999999998137,
15.6000000052154
],
[
14.200000000419099,
16.0000000055879
],
[
13.6999999999534,
16.3000000081956
],
[
13.1000000005588,
16.600000001490102
],
[
12.5,
16.900000004097798
],
[
11.900000000605399,
17.1000000089407
],
[
11.3000000000466,
17.2000000067055
],
[
10.7000000006519,
17.3000000044703
],
[
10,
17.3000000044703
],
[
9.40000000060536,
17.3000000044703
],
[
8.80000000004657,
17.2000000067055
],
[
8.20000000065193,
17.000000001862603
],
[
7.6000000000931305,
16.800000006333
],
[
7.00000000069849,
16.600000001490102
],
[
6.400000000139699,
16.3000000081956
],
[
5.899999999674041,
16.0000000055879
],
[
5.40000000037253,
15.6000000052154
],
[
4.8999999999068695,
15.100000007078101
],
[
4.50000000069849,
14.700000006705501
],
[
4.10000000032596,
14.1000000014901
],
[
3.80000000004657,
13.600000003352799
],
[
3.49999999976717,
13.0000000074506
],
[
3.2000000006519302,
12.4000000022352
],
[
3.0000000004656604,
11.800000006333
],
[
2.90000000037253,
11.200000001117601
],
[
2.8000000002794003,
10.6000000052154
],
[
2.8000000002794003,
9.90000000223517
],
[
2.8000000002794003,
9.30000000633299
],
[
2.90000000037253,
8.70000000111759
],
[
3.10000000055879,
8.10000000521541
],
[
3.2999999995809,
7.5
],
[
3.49999999976717,
6.90000000409782
],
[
3.80000000004657,
6.3000000081956395
],
[
4.10000000032596,
5.80000000074506
],
[
4.50000000069849,
5.3000000026077
],
[
4.8999999999068695,
4.90000000223517
],
[
7.90000000037253,
7.90000000037253
],
[
15.2000000001863,
15.300000002607701
]
]
]
]
},
"properties": {
"name": "Assainissement - Relevage"
},
"meta": {
"type": "GEOMTEMPLATE",
"id": "Assainissement - Relevage",
"infosCount": 0,
"infos": false,
"warningsCount": 0,
"warnings": false
},
"display": {
"label": "Assainissement - Relevage"
}
},
]
}
}
}
]
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,
})