Søg i Septima Widget K
Mål afstand og areal
Tilføj et måleværktøj til kortet, så det er muligt at måle afstande og arealer.
Med dette værktøj giver du brugeren mulighed for at måle afstande og arealer ved at tegne linjer eller flader i kortet. Du kan selv styre hvordan resultatet skal vises via en template. Det er muligt at benytte "escape" til at afbryde, "enter" til at afslutte (svarer til at dobbeltklikker i kortet) eller "ctrl+z" til at fortryde sidste klik i kortet.
Options
Herunder findes en beskrivelse af de enkelte egenskaber, der kan angiver til denne funktion.
disable
- Type:
boolean
- Default:
false
Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol.
detach
- Type:
string
Angiv en reference til et alternativ html-element, som denne kontrol skal vises i. Det kan benyttes til at placere indholdet af en kontrol et andet sted på sin side. Hvis detach har værdien "abc"
, så skal der tlføjes et element til HTML'en på denne form: <div data-widget-detach="abc"/>
. Hvis elementet ikke findes, så fungerer kontrollen, som hvis detach ikke var angivet.
css
- Type:
string | string[]
Angiv en sti til en css-fil, der skal loades efter denne kontrol. Herved vil det være muligt at lave en brugertilpasset style af kontrollen.
className
- Type:
string
Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden.
template
- Type:
string | object
Her angives en html-skabelon for, hvorledes målene skal præsenteres for brugere. Målene kan ses ved at tilføje "debug": true
i konfigurationen og kan angives i html-skabelonen med følgende notation <%= formatted.html %>
. Læs mere om templates generelt her.
Fælgende parametre kan benyttes i templaten:
json
{
"vertices": 4,
"area": 108178.75732421875,
"last": 1231.1360836260728,
"length": 2966.6013881474846,
"formatted": {
"distance": "2,97",
"distanceUnit": "km",
"area": "108179",
"areaUnit": "m<sup>2</sup>",
"html": "Areal: 108179 m<sup>2</sup>"
}
}
modify
- Type:
boolean
- Default:
false
debug
kan bruges i forbindelse med opsætningen og gør det muligt at se hvad man har adgang til i sin template
. Når debug er sat til true, så kommer alle tilgængelige informationer ud i konsollen i browseren.
debug
- Type:
boolean
- Default:
false
debug
kan bruges i forbindelse med opsætningen og gør det muligt at se hvad man har adgang til i sin template
. Når debug er sat til true, så kommer alle tilgængelige informationer ud i konsollen i browseren.
features_style
- Type:
object
Kan angives hvis man gerne vil have at det tegnede i kortet skal se anderledes ud. Læs mere om features_style her.
Hvis man gerne vil have mål vist i kortet, kan dette gøres vha. measurements.
buttons
- Type:
array
Angiv én eller to knapper, der aktivere måleværktøjet. Den ene knap er til at måle afstande med mens den anden er til at måle arealer med.
Til hver knap angives hvilken geometritype knappen skal aktivere. Brug LineString
for at måle afstande eller polygon
for at måle arealer. Derudover er det muligt at angive en tekst, der vises som tooltip på knappen. Hvis der er behov for at skifte ikoner, så kan det gøres med CSS, ved at angive et className
. Hvis className ikke angives benyttes der et default ikon:
json
"buttons": [
{
"text": "Mål afstand",
"type": "LineString",
"className": "mdi mdi-vector-line",
"buttonIndex": 1
},
{
"text": "Mål areal",
"type": "Polygon",
"className": "mdi mdi-vector-square",
"buttonIndex": 0
}
]
Eksempler
Eksempler, der bruger denne komponent: