Fonds de plan GeoJSON | Shapefile | WFS
Cette section à pour but de montrer quelques exemples d'utilisation des fonds de plan à partir de données vectorielles:
Les entrées sont :
- Une source de données vecteur (GeoJSON | SHP | WFS)
- Le style
- Soit en ficher servi par url au format (SLD | Mapbox (json) | QGS | OL )
- Soit au format texte ou encodée en base64 (SLD | Mapbox (json) | QGS | OL )
Pramètrages :
- Definir le type données et le format du fichier de style
- Les urls vers les données et le ficher de style
- La projection des données sources
- Voir le code de l'exemple pour les paramètres specifiques pour chaque tyle de donnée source
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: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: [250000,5950000],
defaultZoom: 6,
minZoom: 5,
maxZoom: 22,
}))
.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 layermanager :
kmapvInstance.horizontalToolbar.addLayerManagerTool({
reordering: false // on ne veut pas réorganiser les calques
})
// création de groupe
kmapvInstance.commonLayer.addGroup("FondDePlan",{
title: "Fonds de plan",
zIndex: 0
})
// Ajout du fond de plan OSM
kmapvInstance.backgroundLayer.addBackgroundLayer(
'background-osm', // identifiant
'osm', // type
{
idGroup: "FondDePlan", // groupe ou ajouter le calque
title: 'OSM', // libellé
zIndex: 0, // z-order
visible: true,
baseLayer: false // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois)
})
// !!!! Dans CODEPEN remplacer ../../../../datas/sample.kml par https://karteis.sct.saas-gfi.eu/documentation/datas/
kmapvInstance.backgroundLayer.addBackgroundLayer(
'background-geojson', // identifiant
'vector', // type
{
idGroup: "FondDePlan", // groupe ou ajouter le calque
title: 'GeoJSON (style mapbox)', // libellé
zIndex: 1, // z-order
baseLayer: true, // les calques avec baseLayer = false on affiche pas le radiobutton
file: {
url:'../../../../datas/departement.geojson', // url du fichier
type:'geojson', // type de fichier
projection:'EPSG:4326' // projection des données
},
style: {
type: 'mapbox', // type de style
// url : '../../../../datas/style/dept_sld_v.sld' // url du style
url : '../../../../datas/style/dept_mapbox.json' // url du style
}
}
)
kmapvInstance.backgroundLayer.addBackgroundLayer(
'background-shp', // identifiant
'vector', // type
{
idGroup: "FondDePlan", // groupe ou ajouter le calque
title: 'SHP (style QML QGIS <= 3.26)', // libellé
zIndex: 1, // z-order
baseLayer: true, // les calques avec baseLayer = false on affiche pas le radiobutton
visible: false,
file: {
url:'../../../../datas/departement.zip', // url du fichier
type:'shp', // type de fichier
projection:'EPSG:4326' // projection des données
},
style: {
type: 'qml', // type de style
url : '../../../../datas/style/dept_qgis_3_26.qml' // url du style
}
}
)
kmapvInstance.backgroundLayer.addBackgroundLayer(
'background-shp2', // identifiant
'vector', // type
{
idGroup: "FondDePlan", // groupe ou ajouter le calque
title: 'SHP (style QML QGIS 3.28)', // libellé
zIndex: 1, // z-order
baseLayer: true, // les calques avec baseLayer = false on affiche pas le radiobutton
visible: false,
file: {
url:'../../../../datas/departement.zip', // url du fichier
type:'shp', // type de fichier
projection:'EPSG:4326' // projection des données
},
style: {
type: 'qml', // type de style
url : '../../../../datas/style/dept_qgis_3_28.qml' // url du style
}
}
)
kmapvInstance.backgroundLayer.addBackgroundLayer(
'background-wfs', // identifiant
'vector', // type
{
idGroup: "FondDePlan", // groupe ou ajouter le calque
title: 'WFS (style SLD)', // libellé
zIndex: 1, // z-order
baseLayer: true, // les calques avec baseLayer = false on affiche pas le radiobutton
visible: false,
file: {
// url:'https://geobretagne.fr/geoserver/ign/wfs', // url du fichier
url:'https://data.geopf.fr/wfs/ows?SERVICE=WFS', // url du fichier
type:'wfs', // type de la source des données
projection:'EPSG:3857', // projection des données
wfs: {
geometryName:'geometrie',
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:'ADMINEXPRESS-COG.LATEST:departement' // obligatoire
},
// on peut définir un filter CQL qui sera prioritaire sur filter
//cqlFilter : "insee_dep in ('93','94','75')",
filters: {
code_insee: ['93','94','75', '61'],
//insee_reg: '11'
},
}
},
style: {
type: 'sld', // type de style
url : '../../../../datas/style/dept_insee_sld.sld' // url du style
}
}
)
kmapvInstance.backgroundLayer.addBackgroundLayer(
'background-wfs-b64', // identifiant
'vector', // type
{
idGroup: "FondDePlan", // groupe ou ajouter le calque
title: 'WFS (style SLD encodé en base 64)', // libellé
zIndex: 1, // z-order
baseLayer: true, // les calques avec baseLayer = false on affiche pas le radiobutton
visible: false,
file: {
// url:'https://geobretagne.fr/geoserver/ign/wfs', // url du fichier
url:'https://data.geopf.fr/wfs/ows?SERVICE=WFS', // url du fichier
type:'wfs', // type de la source des données
projection:'EPSG:3857', // projection des données
wfs: {
geometryName:'geometrie',
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:'ADMINEXPRESS-COG.LATEST:departement' // obligatoire
},
// on peut définir un filter CQL qui sera prioritaire sur filter
//cqlFilter : "insee_dep in ('93','94','75')",
filters: {
code_insee: ['93','94','75', '61'],
//insee_reg: '11'
},
}
},
style: {
type: 'sld', // type de style
encoded: true, // indique que le style est encodé en base64
data: 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPFN0eWxlZExheWVyRGVzY3JpcHRvciB4bWxucz0iaHR0cDovL3d3dy5vcGVuZ2lzLm5ldC9zbGQiIHhzaTpzY2hlbWFMb2NhdGlvbj0iaHR0cDovL3d3dy5vcGVuZ2lzLm5ldC9zbGQgaHR0cDovL3NjaGVtYXMub3Blbmdpcy5uZXQvc2xkLzEuMS4wL1N0eWxlZExheWVyRGVzY3JpcHRvci54c2QiIHhtbG5zOnNlPSJodHRwOi8vd3d3Lm9wZW5naXMubmV0L3NlIiB4bWxuczpvZ2M9Imh0dHA6Ly93d3cub3Blbmdpcy5uZXQvb2djIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6eHNpPSJodHRwOi8vd3d3LnczLm9yZy8yMDAxL1hNTFNjaGVtYS1pbnN0YW5jZSIgdmVyc2lvbj0iMS4xLjAiPgogIDxOYW1lZExheWVyPgogICAgPHNlOk5hbWU+RMOpcGFydGVtZW50cyBGcmFuY2UgTcOpdHJvcG9sZTwvc2U6TmFtZT4KICAgIDxVc2VyU3R5bGU+CiAgICAgIDxzZTpOYW1lPkTDqXBhcnRlbWVudHMgRnJhbmNlIE3DqXRyb3BvbGU8L3NlOk5hbWU+CiAgICAgIDxzZTpGZWF0dXJlVHlwZVN0eWxlPgogICAgICAgIDxzZTpSdWxlPgogICAgICAgICAgPHNlOk5hbWU+cjE8L3NlOk5hbWU+CiAgICAgICAgICA8c2U6RGVzY3JpcHRpb24+CiAgICAgICAgICAgIDxzZTpUaXRsZT5yMTwvc2U6VGl0bGU+CiAgICAgICAgICA8L3NlOkRlc2NyaXB0aW9uPgogICAgICAgICAgPG9nYzpGaWx0ZXIgeG1sbnM6b2djPSJodHRwOi8vd3d3Lm9wZW5naXMubmV0L29nYyI+CiAgICAgICAgICAgIDxvZ2M6UHJvcGVydHlJc0xlc3NUaGFuT3JFcXVhbFRvPgogICAgICAgICAgICAgIDxvZ2M6UHJvcGVydHlOYW1lPmNvZGVfaW5zZWU8L29nYzpQcm9wZXJ0eU5hbWU+CiAgICAgICAgICAgICAgPG9nYzpMaXRlcmFsPjQwPC9vZ2M6TGl0ZXJhbD4KICAgICAgICAgICAgPC9vZ2M6UHJvcGVydHlJc0xlc3NUaGFuT3JFcXVhbFRvPgogICAgICAgICAgPC9vZ2M6RmlsdGVyPgogICAgICAgICAgPHNlOlBvbHlnb25TeW1ib2xpemVyPgogICAgICAgICAgICA8c2U6RmlsbD4KICAgICAgICAgICAgICA8c2U6U3ZnUGFyYW1ldGVyIG5hbWU9ImZpbGwiPiNjY2E1MzA8L3NlOlN2Z1BhcmFtZXRlcj4KICAgICAgICAgICAgPC9zZTpGaWxsPgogICAgICAgICAgPC9zZTpQb2x5Z29uU3ltYm9saXplcj4KICAgICAgICA8L3NlOlJ1bGU+CiAgICAgICAgPHNlOlJ1bGU+CiAgICAgICAgICA8c2U6TmFtZT5yMjwvc2U6TmFtZT4KICAgICAgICAgIDxzZTpEZXNjcmlwdGlvbj4KICAgICAgICAgICAgPHNlOlRpdGxlPnIyPC9zZTpUaXRsZT4KICAgICAgICAgIDwvc2U6RGVzY3JpcHRpb24+CiAgICAgICAgICA8b2djOkZpbHRlciB4bWxuczpvZ2M9Imh0dHA6Ly93d3cub3Blbmdpcy5uZXQvb2djIj4KICAgICAgICAgICAgPG9nYzpBbmQ+CiAgICAgICAgICAgICAgPG9nYzpQcm9wZXJ0eUlzR3JlYXRlclRoYW4+CiAgICAgICAgICAgICAgICA8b2djOlByb3BlcnR5TmFtZT5jb2RlX2luc2VlPC9vZ2M6UHJvcGVydHlOYW1lPgogICAgICAgICAgICAgICAgPG9nYzpMaXRlcmFsPjQwPC9vZ2M6TGl0ZXJhbD4KICAgICAgICAgICAgICA8L29nYzpQcm9wZXJ0eUlzR3JlYXRlclRoYW4+CiAgICAgICAgICAgICAgPG9nYzpQcm9wZXJ0eUlzTGVzc1RoYW5PckVxdWFsVG8+CiAgICAgICAgICAgICAgICA8b2djOlByb3BlcnR5TmFtZT5jb2RlX2luc2VlPC9vZ2M6UHJvcGVydHlOYW1lPgogICAgICAgICAgICAgICAgPG9nYzpMaXRlcmFsPjgwPC9vZ2M6TGl0ZXJhbD4KICAgICAgICAgICAgICA8L29nYzpQcm9wZXJ0eUlzTGVzc1RoYW5PckVxdWFsVG8+CiAgICAgICAgICAgIDwvb2djOkFuZD4KICAgICAgICAgIDwvb2djOkZpbHRlcj4KICAgICAgICAgIDxzZTpQb2x5Z29uU3ltYm9saXplcj4KICAgICAgICAgICAgPHNlOkZpbGw+CiAgICAgICAgICAgICAgPHNlOlN2Z1BhcmFtZXRlciBuYW1lPSJmaWxsIj4jZDM2NjQ1PC9zZTpTdmdQYXJhbWV0ZXI+CiAgICAgICAgICAgIDwvc2U6RmlsbD4KICAgICAgICAgIDwvc2U6UG9seWdvblN5bWJvbGl6ZXI+CiAgICAgICAgPC9zZTpSdWxlPgogICAgICAgIDxzZTpSdWxlPgogICAgICAgICAgPHNlOk5hbWU+cjM8L3NlOk5hbWU+CiAgICAgICAgICA8c2U6RGVzY3JpcHRpb24+CiAgICAgICAgICAgIDxzZTpUaXRsZT5yMzwvc2U6VGl0bGU+CiAgICAgICAgICA8L3NlOkRlc2NyaXB0aW9uPgogICAgICAgICAgPG9nYzpGaWx0ZXIgeG1sbnM6b2djPSJodHRwOi8vd3d3Lm9wZW5naXMubmV0L29nYyI+CiAgICAgICAgICAgIDxvZ2M6UHJvcGVydHlJc0dyZWF0ZXJUaGFuPgogICAgICAgICAgICAgIDxvZ2M6UHJvcGVydHlOYW1lPmNvZGVfaW5zZWU8L29nYzpQcm9wZXJ0eU5hbWU+CiAgICAgICAgICAgICAgPG9nYzpMaXRlcmFsPjgwPC9vZ2M6TGl0ZXJhbD4KICAgICAgICAgICAgPC9vZ2M6UHJvcGVydHlJc0dyZWF0ZXJUaGFuPgogICAgICAgICAgPC9vZ2M6RmlsdGVyPgogICAgICAgICAgPHNlOlBvbHlnb25TeW1ib2xpemVyPgogICAgICAgICAgICA8c2U6RmlsbD4KICAgICAgICAgICAgICA8c2U6U3ZnUGFyYW1ldGVyIG5hbWU9ImZpbGwiPiNmZjVjNmY8L3NlOlN2Z1BhcmFtZXRlcj4KICAgICAgICAgICAgPC9zZTpGaWxsPgogICAgICAgICAgPC9zZTpQb2x5Z29uU3ltYm9saXplcj4KICAgICAgICA8L3NlOlJ1bGU+CiAgICAgIDwvc2U6RmVhdHVyZVR5cGVTdHlsZT4KICAgIDwvVXNlclN0eWxlPgogIDwvTmFtZWRMYXllcj4KPC9TdHlsZWRMYXllckRlc2NyaXB0b3I+Cg=='
}
}
)
kmapvInstance.commonLayer.getLayers().forEach((layer) => {
layer.on("change:visible",(evt) => {
console.log(kmapvInstance.getMap().getView().getZoom(),kmapvInstance.getMap().getView().getCenter())
console.log("Evenement",evt)
console.log("LayerId",evt.target.get(kmapvInstance.commonLayer.propertiesName.ID_LAYER))
console.log("Visibilité",evt.target.get(evt.key))
})
})