Style de flèche

Retour

Cette section à pour but de montrer l'exemple d'utilisation du style de flèches :

• dans cette exemple on superpose un style orange et un rouge

style flèche

{
  "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;" />
<select id="fleche_options" onchange="updateStyle()">
    <option value="0">flèches écartées de 100px</option>
    <option value="1">flèches écartées de 100px, avec une flêche au bout</option>
    <option value="2">flèches écartées de 50px</option>
    <option value="3">flèches uniquement au bout</option>
    <option value="4">flèches au milieu des segments, avec une flêche au bout</option>
    <option value="5">flèches au bout des segments</option>
</select>

<br/><label><input type="checkbox" id="fleche_hide_small_segment" checked onchange="updateStyle()">Masquer les flèches sur les segments courts</label>
<br/><label>angle des flèches : </label><input type="number" id="angArrow" value="60" min="10" style="width:50px"  onchange="updateStyle()">
<label>longueur des flèches: </label><input type="number" id="lenArrow" value="15" min="10" style="width:50px"  onchange="updateStyle()">

// données au format geojson
const features = [
{
    id: 3,
    type:'Feature',
    geometry: {
        type:'LineString',
        coordinates: [

            [-444850, 6094520],
            [-444800, 6094520],
            [-444750, 6094495],
            [-444800, 6094470],
            [-444850, 6094470],

    ]
    },
    properties: {
        type:'Je suis une ligne',
        valeur: 'grande'
    }
}
,
{
    id: 4,
    type:'Feature',
    geometry: {
        type:'LineString',
        coordinates: [
            [-444950, 6094450],
            [-444940, 6094480],
            [-444920, 6094520],
            [-444850, 6094555],
            [-444800, 6094550],
    ]
    },
    properties: {
        type:'Je suis une ligne',
        valeur: 'grande'
    }
}
]


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

function updateStyle() {

  const id = document.querySelector("#fleche_options").value
  const hideArrowOnSmallSegment = document.querySelector("#fleche_hide_small_segment").checked
  const angArrow = document.querySelector("#angArrow").value
  const lenArrow = document.querySelector("#lenArrow").value

  let mode = "betweenDistance"
  let betweenStartFrom = "start"
  let arrowAtEnd = false
  let distanceBetween = 100

  switch (id) {
    case "1":
        betweenStartFrom = "end"
        arrowAtEnd = true
        break;
    case "2":
        distanceBetween = 50
        break;
    case "3":
        mode = "none"
        arrowAtEnd = true
        break;
    case "4":
        mode = "middle"
        arrowAtEnd = true
        break;
    case "5":
        mode = "end"
        break;
    default:

  }

  styles = kmapv.Services.createStyle([
    {
        arrows: {
            map: kmapvInstance.Map,
            mode,
            arrowAtEnd,
            betweenStartFrom,
            distanceBetween,
            lenArrow,
            angArrow,
            hideArrowOnSmallSegment,
            minZoom: 18,
            stroke: {
                width: 5,
                color: '#F00',
            },
        }
    },
    {
        arrows: {
            map: kmapvInstance.Map,
            mode,
            arrowAtEnd,
            betweenStartFrom,
            distanceBetween,
            lenArrow,
            angArrow,
            hideArrowOnSmallSegment,
            minZoom: 18,
            stroke: {
                width: 3,
                color: '#F80',
            },
        }
    }
  ])
  kmapvInstance.refreshMap()
  return
}

updateStyle()

function getStyle() {
    return 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,
    hoverable: true,
    style: getStyle
})


// ajout des données dans le calque
kmapvInstance.dataLayer.addGeojsonFeatures({
    type: 'FeatureCollection',
    features,
}, 'identifiant-du-calque')