Système de projection

Retour

Cette section à pour but de montrer quelques exemples d'utilisation de système de projection personnalisé:

• 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 de données GPS (EPSG:4326)

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;" />

// 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'
}])

// 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',
    defaultCenter: [516302,8582297],
    defaultZoom:10,
    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
})
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' }
});
kmapvInstance.backgroundLayer.addBackgroundLayer('mayotte_villages', 'wmstiled', {
    title: "Mayotte villages",
    idGroup: "FondDePlan", // groupe ou ajouter le calque
    projection: 'EPSG:4471',
    zIndex: 2,
    // transparent par défaut
    opacity: 1,
    // non visible par défaut
    //minZoom:5,
    minZoom: 13,
    visible: true,
    url: 'https://datacarto.observatoire-de-mayotte.fr/wms',
    crossOrigin: 'anonymous',
    params: { 'LAYERS': 'village_s_976' }
});


// // Ajout du fond de plan OSM
// kmapvInstance.backgroundLayer.addBackgroundLayer(
//     'background-osm', // identifiant
//     'osm', // type
//     {
//     idGroup: "FondDePlan", // groupe ou ajouter le calque
//     title: 'open street map', // libellé
//     zIndex: 0, // z-order
//     baseLayer: true // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois)
// })

// // calque dans le groupe fond de plan
// kmapvInstance.backgroundLayer.addBackgroundLayer('background-ign','ign', {
//     title: "IGN",
//     idGroup: "FondDePlan",
//     // propose un radio button pour ne choisir qu'un seule fond de plan
//     baseLayer: true,
//     // non visible par défaut
//     visible: false,
//     url: 'https://wxs.ign.fr/essentiels/geoportail/wmts?SERVICE=WMTS',
//     layer: 'ORTHOIMAGERY.ORTHOPHOTOS',
//     zIndex: 0
// });

// // calque dans le groupe fond de plan
// kmapvInstance.backgroundLayer.addBackgroundLayer('background-here','here', {
//     title: "Here Map",
//     idGroup: "FondDePlan",
//     // propose un radio button pour ne choisir qu'un seule fond de plan
//     baseLayer: true,
//     // non visible par défaut
//     visible: false,
//     apiKey: 'j4L8Bz2iyG1iS1wNeXzuaA4gPFZVlDlD7eaxpXiqj9g',
// });


// // calque sans groupe
// kmapvInstance.backgroundLayer.addBackgroundLayer('cadastre', 'wmstiled', {
//     title: "Cadastre",
//     zIndex: 1,
//     // transparent par défaut
//     opacity: 0.8,
//     // non visible par défaut
//     visible: false,
//     url: 'https://inspire.cadastre.gouv.fr/scpc/29058.wms',
//     crossOrigin: 'anonymous',
//     params: { 'LAYERS': 'HYDRO,BU.Building,CP.CadastralParcel' }
// });

// 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,
        }
    }
})

// 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: styles,
})


// 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) => {
console.log('dhe')
    kmapvInstance.dataLayer.addGeojsonFeatures({
        type: 'FeatureCollection',
        features: data.features,
    }, 'identifiant-du-calque','EPSG:4326')
})