Utilisation du WFS comme source de données
Cette section à pour but de montrer l'utilisation d'un datalayer avec un WFS comme source
- Visible à partir du niveau de zoom 16 afin de ne pas surchager le serveur IGN
- Utilise un wfs fourni par l'IGN
- Charge des données via un "tuilage" wfs
- Affiche le libellé a partir des infos retournées par le service
- On peut sélectionner la feature
- Ouvrir la console pour voir le contenu de l'event
- On affiche un tooltip au survol
- Masqué lors de la sélection d'une parcelle
- Pseudo thème crée sur une des propriétés
Calque data avec source WFS
{
"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;" />
// 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,
interactions: {
hover: {}
}
}))
.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({stopEvent:false})) // charge le plugin de gestion des tooltips, stopEvents: false le tooltip n'intercepte pas les events souris/tap
// 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
// on fait un pseudo thème en changeant la couleur de fond des parcelles dont le numéro termine par 5
if(!selected) {
if (feature.get("numero").toString().slice(-1) === "5") {
styleToReturn.getFill().setColor('rgba(250,120,120,0.5)')
} else {
styleToReturn.getFill().setColor('rgba(250,200,120,0.5)')
}
}
// pour chaque feature on set le text a afficher
styleToReturn.getText().setText(
[
`${feature.get('section')} ${feature.get('numero')}`,
'italic 11px Calibri,sans-serif',
]
)
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,
minZoom: 15.99,
style: getStyle,
wfs: {
//url:'https://wxs.ign.fr/parcellaire/geoportail/wfs?SERVICE=WFS',
url:'https://data.geopf.fr/wfs/ows?SERVICE=WFS',
// on peut définir un filter CQL qui sera prioritaire sur filter
//cqlFilter : "numero in ('0087','1946','1278', '1178','0373')",
geometryName:'geom',
filters: {
//numero: [0087,1946,1278, 1178],
section:['0D','AW'],
code_dep: '29'
},
//bboxStrategy: true,
//tileStrategy: {tileSize:512}, // default 256
params: {
// voir les specs du WFS
//version: '2.0.0', // 1.1.0 si rien n'est demandé
//request: 'GetFeature', // GetFeature si rien n'est demandé
typename:'CADASTRALPARCELS.PARCELLAIRE_EXPRESS:parcelle' // obligatoire
}
}
})
// 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",
//"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"
}]
// ajout de l'outil a la barre du bas
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,
})
// On va écouter les évenements générés par le viewer
kmapvInstance.on('change:selection', (evt) => {
kmapvInstance.tooltips.deleteTooltip()
//console.log("Evènement généré chaque changement de sélection:",evt)
console.log("quel outil à déclenché la sélection?", evt.toolId)
console.log("ajouté dans la sélection:", evt.selected)
console.log("retiré de la sélection:", evt.deselected)
console.log("selection courante: ")
const consoleInfos = evt.selection.map((selectedFeature) => {
// on retire les infos qui nous interessent pas pour le console.table
const {geometry,bbox, ...properties} = selectedFeature.getProperties()
properties.surfaceCalculee = kmapv.Services.Calc.getArea(geometry)
return properties
})
console.table(consoleInfos)
})
// On va écouter les évenements générés par le viewer
kmapvInstance.on('hover-enter', (evt) => {
showTooltip(evt.feature)
})
kmapvInstance.on('hover-leave', (evt) => {
kmapvInstance.tooltips.deleteTooltip()
})
function showTooltip(feature) {
// affiche un tooltip au centre de la géométrie
const properties = feature.getProperties()
const tooltip = `<div class="tooltip">
<span>${properties.nom_com}</span>
<span><label>${properties.idu}</label></span>
</div>`
kmapvInstance.tooltips.createTooltip(tooltip,kmapv.Services.getCentroid(feature.getGeometry()))
}
.tooltip {
display:flex;
flex-direction:column;
align-items: center;
}
.tooltip label {
font-weight: bold;
display:inline-block;
}
/** on rend les tooltips transparents **/
#MapViewerTooltip {
background-color:rgba(255,255,255,0.5);
}
#MapViewerTooltip:after {
border-top-color:rgba(255,255,255,0.5);
}