Système de projection
Cette section à pour but de montrer quelques exemples d'utilisation de différents systèmes de projection avec la carte
- Injecter le système de projection avant de charger la carte
- Ici EPSG:4471 (EPSG.io)
- Déclare la carte avec ce CRS
- Ajout des fonds de plans dans ce CRS
- Ajout d'un fond de plan OpenStreetMap
- Ajout de données GPS (EPSG:4326)
- Possibilité de créer des données
- Les données sont créées dans le système de projection courant
- L'exemple montre comment les reprojeter dans un système connu de Mapviewer
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:350px;" />
<button onclick="startCreate('Point')">Créer Point</button>
<button onclick="startCreate('LineString')">Créer Ligne</button>
<button onclick="startCreate('Polygon')">Créer Polygon</button>
<button onclick="startCreate('GeometryCollection')">Créer Multigéométrie</button>
// commence par injecter les systèmes de projections utile:
/*kmapv.Services.loadProjections([{
name:'EPSG:4471',
projection:'+proj=utm +zone=38 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs'
}])*/
// ou on set les projections au chargement du viewer
// 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:4471',
//projection: 'EPSG:3857',
projections: [{
name:'EPSG:4471',
projection:'+proj=utm +zone=38 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs'
}],
defaultCenter: [516302,8582297], // EPSG:4471
//defaultCenter: [5034902.651, -1434482.949], // 3857
defaultZoom:10,
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 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
})
kmapvInstance.commonLayer.addGroup("data",{
title: "Données",
zIndex: 1
})
kmapvInstance.backgroundLayer.addBackgroundLayer('mayotte_communes', 'wmstiled', {
title: "Mayotte communes",
idGroup: "FondDePlan", // groupe ou ajouter le calque
projection: 'EPSG:4471',
zIndex: 1,
// transparent par défaut
opacity: 1,
//maxZoom: 13,
//maxZoom: 17,
// non visible par défaut
visible: true,
url: 'https://datacarto.observatoire-de-mayotte.fr/wms',
crossOrigin: 'anonymous',
params: { 'LAYERS': 'commune_s_976' },
projectionPriority:1,
baseLayer: true // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois),
});
// // Ajout du fond de plan OSM
kmapvInstance.backgroundLayer.addBackgroundLayer(
'background-osm', // identifiant
'osm', // type
{
idGroup: "FondDePlan", // groupe ou ajouter le calque
//projection:'EPSG:3857',
title: 'open street map', // libellé
zIndex: 0, // z-order
visible: false,
baseLayer: true // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois)
})
// styles des données
const styles = kmapv.Services.createStyle(
{
// remplissage des polygones
fill: {
color: 'rgba(200,200,100,0.5)',
},
// style les lignes
stroke: {
color: '#333',
width: 2,
},
// style des points
circle: {
radius: 10,
fill: {
color: 'rgba(200,200,100,0.5)',
},
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',
//projection: 'EPSG:3857',
zIndex: 1,
layerId: 'identifiant-du-calque',
selectable: true,
hoverable: true,
style: getStyle,
//cluster:true,
})
// ajout des données au format geojson dans le calque
// si le format est différent de celui de la carte il faut l'indiquer (ou sera lu depuis geojsonObject.crs.properties.name)
// !!!! Dans CODEPEN remplacer ../../../../datas/features-base.json par https://karteis.sct.saas-gfi.eu/documentation/datas/features-mayotte-epsg4326.json
fetch('../../../../datas/features-mayotte-epsg4326.json').then(function (response) {
return response.json();
}).then((data) => {
kmapvInstance.dataLayer.addGeojsonFeatures({
type: 'FeatureCollection',
features: data.features,
}, 'identifiant-du-calque','EPSG:4326')
})
// génère l'idFeature pour la creation (obligatoire)
function getIdFeature() {
return 'id-' + Math.floor(Math.random() * 10000)
}
function startCreate(type) {
const idFeature = getIdFeature()
// 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
"digitalizeOptions": { // options de l'outil de digitalisation
"showConstructionPoint": true,
"maxPoints" : 5,
"showConstructionLine" : true,
}
}).then((result) => {
console.log("created",result)
console.log("avant reprojection:", result.createdFeature.getGeometry().getExtent())
const [featureIn3857] = kmapv.Services.convertFeatures([result.createdFeature],kmapvInstance.getViewProjection(),'EPSG:3857')
console.log("après reprojection:",featureIn3857.getGeometry().getExtent())
})
// soit await, mais notre outil de doc ne permet pas de déclarer une fonction async
//const result = await kmapvInstance.dataLayer.createFeature( {...})
}
kmapvInstance.verticalToolbar.addBookMark({
title: 'Geosignets',
placeholder: 'Ajouter un geosignet',
namespace: 'demo1',
marks: {
"Paris": {pos:[2.351828, 48.856578], projection:'EPSG:4326', zoom:11, permanent: true },
"London": {pos:[-0.1275,51.507222], projection:'EPSG:4326', zoom:12}
}
})