Mapviewer

Export Shapefile

Retour

Cette section a pour but de montrer l'utilisation du service d'export Shapefile :

  • Créer une couche de données avec des features (points, lignes, polygones)
  • Ajouter un bouton d'export dans la barre d'outils
  • Exporter les données en format Shapefile avec normalisation des attributs
  • Regrouper automatiquement par type de géométrie lors de l'export
Export de données en Shapefile
{
  "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;" />


// Import du service d'export Shapefile
// import { exportLayersToShapefile } from '../../../../src/js/tools/services/export-shp-services.js'

// 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: [278299, 5860840],
    defaultZoom: 5,
    minZoom: 1,
    maxZoom: 22,
    horizontalBarPosition: 'top',
    verticalBarPosition: 'top-right',
}))
 .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 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(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,
        }
    }
})

// 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',
    zIndex: 1,
    layerId: 'identifiant-du-calque',
    selectable: true,
    style: getStyle,
})

kmapvInstance.dataLayer.addDataLayer({
    title: "Departement Français",
    idGroup: 'data',
    zIndex: 1,
    layerId: 'depart_français',
    selectable: 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')
})

fetch('../../../../datas/departement.geojson').then(function (response) {
    return response.json();
  }).then((data) => {
    kmapvInstance.dataLayer.addGeojsonFeatures({
        type: 'FeatureCollection',
        features: data.features,
    }, 'depart_français','EPSG:4326')
})


// const  dataLayer = kmapvInstance.dataLayer.getLayer('identifiant-du-calque')
// const  dept_Franc = kmapvInstance.dataLayer.getLayer('depart_français')

kmapvInstance.verticalToolbar.addMeasureTool()

function exportShp(layersConfigs, options={}) {
    kmapvInstance.dataLayer.exportShapefile(layersConfigs, options)
}

// Ajout du bouton d'export dans la barre d'outils
kmapvInstance.verticalToolbar.addButton({
    type: 'button',
    name: 'export-shp',
    title: 'export-shp',
    icon: 'fa-solid fa-file-export',
    onClick: async () =>  {
        this.exportShp([
            // {
            //     id: dataLayer,
            //     name: 'export_donnees',
            // },
            // {
            //     id: dept_Franc,
            //     name: 'departement_français_full',
            //     filter: f => ['75','93', '94', '91','77'].includes(f.getProperties().code_departement),
            //     attributeMap: {
            //         code_departement: "code_dept"
            //     }
            // }
        ],
        {
            featureProjection : 'EPSG:3857',
            dataProjection : 'EPSG:4326',
        })
    }
})

// Export de toute les couches vectorilles de la carte si layerConfigs = []
kmapvInstance.verticalToolbar.addExportSHP({
  button: {
    // icon: 'fa-solid fa-file-export',
    title: 'Exporter en Shapefile',
  },
  layerConfigs: [
            // {
            //     id: dataLayer,
            //     name: 'export_donnees',
            // },
            {
                id: 'depart_français',
                name: 'departement_français_full',
                filter: f => ['75','93', '94', '91','77'].includes(f.getProperties().code_departement),
                attributeMap: {
                    code_departement: "code_dept"
                }
            }
        ],
exportOptions: {
            featureProjection : 'EPSG:3857',
            dataProjection : 'EPSG:4326',
        }
})


console.log('Cliquez sur le bouton "Exporter en Shapefile" pour télécharger les données')

Configuration (par appel de la fonction directement)

Paramètres de exportLayersToShapefile

PropriétéTypeRequisDescription
idstringOuiIdentifiant de la couche
namestringOuiNom du fichier a exporter
filterFunctionNonFonction de filtrage des features
attributeMapObjectNonMap optionnelle pour renommer les champs d'attributs
optionsObjectNonMap optionnelle pour renommer les champs d'attributs

Exemple avec filtrage

function exportShp(layersConfigs, options={}) {
    kmapvInstance.dataLayer.exportShapefile(layersConfigs, options)
}

// Ajout du bouton d'export dans la barre d'outils
kmapvInstance.verticalToolbar.addButton({
    type: 'button',
    name: 'export-shp',
    title: 'export-shp',
    icon: 'fa-solid fa-file-export',
    onClick: async () =>  {
        this.exportShp([
            // {
            //     id: dataLayer,
            //     name: 'export_donnees',
            // },
            // {
            //     id: dept_Franc,
            //     name: 'departement_français_full',
            //     filter: f => ['75','93', '94', '91','77'].includes(f.getProperties().code_departement),
            //     attributeMap: {
            //         code_departement: "code_dept"
            //     }
            // }
        ],
        {
            featureProjection : 'EPSG:3857',
            dataProjection : 'EPSG:4326',
        })
    }
})

Configuration (par ajout d'un bouton addExportSHP)

Paramètres de addExportSHP

PropriétéTypeRequisDescription
buttonObjectnonparametre du buton
layerConfigsObjectNonTableau de couhes a exporter. par defaut toutes les couches
exportOptionsObjectNonOptions d'export

Exemple

// Export de toute les couches vectorilles de la carte si layerConfigs = []
kmapvInstance.verticalToolbar.addExportSHP({
  button: {
    // icon: 'fa-solid fa-file-export',
    title: 'Exporter en Shapefile',
  },
  layerConfigs: [
            // {
            //     id: dataLayer,
            //     name: 'export_donnees',
            // },
            {
                id: 'depart_français',
                name: 'departement_français_full',
                filter: f => ['75','93', '94', '91','77'].includes(f.getProperties().code_departement),
                attributeMap: {
                    code_departement: "code_dept"
                }
            }
        ],
exportOptions: {
            featureProjection : 'EPSG:3857',
            dataProjection : 'EPSG:4326',
        }
})

Format de sortie

Les données sont regroupées par type de géométrie et téléchargées en ZIP :

  • export_donnees_points.zip : Toutes les géométries point
  • export_donnees_lines.zip : Toutes les géométries ligne
  • export_donnees_polygons.zip : Toutes les géométries polygone

Notes importantes

  • Les noms de champs sont automatiquement limités à 10 caractères (limite DBF)
  • Les doublons après normalisation sont suffixés avec un chiffre
  • Seules les couches Vector avec une source Vector sont supportées
Dernière mise à jour:
Contributors: Mamady Samassa