Ajout d'un controle d'echelle

Retour

Cette section à pour but de montrer comment ajouter un sélecteur de niveau de Zoom basé sur l'échelle

• @displayMpde : Le mode d'affichage. A definir si list n'est pas defini. Obligatoire

displayMpde :  'scale' | 'zoom', | 'resolution'

• @animate : Animer ou non le l'action zoom

animate : true | false

• @displayLabel : Un libéllé au choix à afficher avant la valeur.

displayLabel : 'Niveau de zoom :' | 'Echelle :' |  'Résolution' | etc

• @list : Option pour saisir ses propre niveau d'echelle. Si non rensegner, la liste est construite avec les niveau d'echelles d'Openlayers

list: {
  mode:'scale', // Si pas defini, la valeur du displayMode est prise
  range:[100,250,500,1000,2500,5000,10000,20000,25000,50000,100000,250000,500000,1000000,1500000,5000000,10000000] // liste des echelles
  }

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: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: 17,
    minZoom: 5,
    maxZoom: 22,
    horizontalBarPosition: 'bottom',
    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,
})

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

kmapvInstance.verticalToolbar.addMeasureTool()

kmapvInstance.verticalToolbar.addBookMark({
  title: 'Geosignets',
  placeholder: 'Ajouter un geosignet',
  namespace: 'demo',
  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}
  }
})

// displayMode : Valeurs possibles: 'scale', 'zoom', 'resolution'
// Construit sa liste par defaut sur les niveaux de scaled'openLayers
// kmapvInstance.horizontalToolbar.addScaleManagerTool({animate:true, displayMode:'zoom', displayLabel:'Zoom : '})
// kmapvInstance.horizontalToolbar.addScaleManagerTool({animate:true, displayMode:'resolution', displayLabel:'Résolution : '})

// Prend la liste fourni en option
kmapvInstance.horizontalToolbar.addScaleManagerTool({animate:true, displayMode:'zoom', displayLabel:'Echelle : ', list: {
  mode:'scale', // 'zoom' | 'resolution'
  range:[100,250,500,1000,2500,5000,10000,20000,25000,50000,100000,250000,500000,1000000,1500000,5000000,10000000]
  }
})

// kmapvInstance.horizontalToolbar.addScaleManagerTool({animate:true, displayMode:'scale', displayLabel:'Echelle : ', list: {
//   mode:'scale',
//   range:[{zoom:0, value:50000},{zoom:1, value:25000},{zoom:2, value:15000},{zoom:3, value:10000},{zoom:4, value:5000},{zoom:5, value:1500},{zoom:6, value:500},{zoom:7, value:250},{zoom:8, value:150}]
//   }
// })