Utilisation du tagging de feature
Cette section à pour but de montrer quelques exemples d'utilisation du tag sur les features:
- Permet de marquer une feature avec un ou plusieurs tag (type string)
- Ces tags sont fourni a la fonction de style
Dans cet exemple on peut
- Ajouter tag A ou B sur feature sélectionnée
- Supprimer tag A ou B sur feature selectionnée
- Montre comment utiliser l'api hasTag
- Exemples de style sans tag, avec tag A, avec tag B ou avec tag A+B
Démo de tag
{
"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:300px;" />
<div style="display:flex;flex-direction:row;justify-content:space-around;">
<div>
<button id="tag_a" onclick=manageTags(this)>+/- Tag A</button>
</div>
<div>
<button id="tag_b" onclick=manageTags(this)>+/- Tag B</button>
</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,
interactions: {
hover: {
handleCancelHover:function() {
return 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
.use(kmapv.Tooltips({})) // charge le plugin de gestion des tooltips
// 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,
}
}
})
// styles des données
const styleA= kmapv.Services.createStyle(
{
// remplissage des polygones
fill: {
color: "red",
},
// style les lignes
stroke: {
color: "red",
width: 2,
},
// style des points
circle: {
radius: 10,
fill: {
color: "red",
},
stroke: {
color: "red",
width: 2,
}
}
})
const styleB= kmapv.Services.createStyle(
{
// remplissage des polygones
fill: {
color: "Orange",
},
// style les lignes
stroke: {
color: "Orange",
width: 2,
},
// style des points
circle: {
radius: 10,
fill: {
color: "Orange",
},
stroke: {
color: "Orange",
width: 2,
}
}
})
const styleAB= kmapv.Services.createStyle(
{
// remplissage des polygones
fill: {
color: "yellow",
},
// style les lignes
stroke: {
color: "yellow",
width: 2,
},
// style des points
circle: {
radius: 10,
fill: {
color: "yellow",
},
stroke: {
color: "yellow",
width: 2,
}
}
})
const getStyle = function ({ feature, selected, tags }) {
const styleToApply = []
if (tags.tag_a && tags.tag_b) {
styleToApply.push(styleAB)
}
else if (tags.tag_b) {
styleToApply.push(styleB)
}
else if (tags.tag_a) {
styleToApply.push(styleA)
} else {
styleToApply.push(styles)
}
if (selected){
styleToApply.push(stylesSelected)
}
return styleToApply
}
// 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,
})
// 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')
})
// on ajoute dans la carte des boutons pour changer de mode sélection (par défaut on est dans le mode "select-single"):
// la barre de sélection est paramétrable, on ajoute les outils qui nous interressent :
// les icones peuvent venir de n'importe quel framework css
const createSelectBarOptions = [
{
"type": "select",
"toolId": "select-single",
"html": "<i class=\"fa-solid fa-hand-pointer\"></i>",
"title": "Sélection simple",
"selectMode": "replace"
}
]
// ajout de l'outil a la barre du bas
kmapvInstance.horizontalToolbar.addSelectCreateBar({
className: 'app-edit-bar',
clearButton: {
title: 'Effacer la sélection',
},
tools:createSelectBarOptions,
})
let selectedFeature = null
// On va écouter les évenements générés par le viewer
kmapvInstance.on('change:selection', (evt) => {
selectedFeature = evt.selection
evt.selection.forEach((selectedFeature) => {
const properties = selectedFeature.getProperties()
console.log(`id: ${selectedFeature.getId()},`, `tags:`, properties[kmapvInstance.dataLayer.propertiesName.TAG_FEATURE])
console.log('hasTagA:',kmapvInstance.dataLayer.hasTag(selectedFeature, 'tag_a'))
console.log('hasTagB:',kmapvInstance.dataLayer.hasTag(selectedFeature, 'tag_b'))
})
})
function manageTags(elm) {
selectedFeature.forEach(feature => {
kmapvInstance.dataLayer.hasTag(feature, elm.id) ? kmapvInstance.dataLayer.removeTagToFeature (feature.id_, "identifiant-du-calque", elm.id) : kmapvInstance.dataLayer.addTagToFeature (feature.id_, "identifiant-du-calque", elm.id)
})
}
table {
margin-top: 3px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.row.hover {
background-color: #F00;
color:white;
}
.tooltip {
display:flex;
flex-direction:column;
}
.tooltip label {
font-weight: bold;
display:inline-block;
width: 60px
}