Dela via


Händelser för ritverktyg

När du använder ritverktyg på en karta är det bra att reagera på vissa händelser när användaren ritar på kartan. I den här tabellen visas alla händelser som stöds av DrawingManager klassen.

Händelse beskrivning
drawingchanged Utlöses när en koordinat i en form har lagts till eller ändrats.
drawingchanging Utlöses när en förhandsgranskningskoordinat för en form visas. Den här händelsen utlöses till exempel flera gånger när en koordinat dras.
drawingcomplete Utlöses när en form har ritats eller tagits ur redigeringsläget.
drawingerased Utlöses när en form raderas från ritningshanteraren när den är i erase-geometry läge.
drawingmodechanged Utlöses när ritningsläget har ändrats. Det nya ritningsläget skickas till händelsehanteraren.
drawingstarted Utlöses när användaren börjar rita en form eller placerar en form i redigeringsläge.

Ett fullständigt arbetsexempel på hur du visar data från en vektorpanelkälla på kartan finns i Ritverktygshändelser i Azure Maps-exempel. I det här exemplet kan du rita former på kartan och se när händelserna utlöses. Källkoden för det här exemplet finns i Exempelkod för ritverktygshändelser.

Följande bild visar en skärmbild av det fullständiga arbetsexemplet som visar hur händelserna i modulen Ritverktyg fungerar.

Skärmbild som visar en karta som visar data från en vektorpanelkälla.

Exempel

Nu ska vi se några vanliga scenarier som använder ritverktygshändelserna.

Välj punkter i polygonområdet

Den här koden visar hur du övervakar en händelse av en användarritningsformer. I det här exemplet övervakar koden former av polygoner, rektanglar och cirklar. Sedan avgör den vilka datapunkter på kartan som finns inom det ritade området. Händelsen drawingcomplete används för att utlösa select-logiken. I den valda logiken loopar koden igenom alla datapunkter på kartan. Den kontrollerar om det finns en skärningspunkt mellan punkten och området för den ritade formen. I det här exemplet används Turf.js bibliotek med öppen källkod för att utföra en beräkning av rumslig skärningspunkt.

Ett fullständigt arbetsexempel på hur du använder ritverktygen för att rita polygonområden på kartan med punkter inom dem som kan väljas finns i Välj data i ritat polygonområde i Azure Maps-exempel. Källkoden för det här exemplet finns i Select data in drawn polygon area sample code (Välj data i ritad polygonområdesexempelkod).

Skärmbild som visar en karta som visar punkter inom polygonområden.

Rita och sök i polygonområdet

Den här koden söker efter intressepunkter i området för en form när användaren har ritat formen. Händelsen drawingcomplete används för att utlösa söklogik. Om användaren ritar en rektangel eller polygon utförs en sökning inuti geometrin. Om en cirkel ritas används radie- och mittpositionen för att utföra en intressepunktssökning. Händelsen drawingmodechanged används för att avgöra när användaren växlar till ritningsläget och den här händelsen rensar arbetsytan.

Ett fullständigt arbetsexempel på hur du använder ritverktygen för att söka efter intressepunkter inom ritade områden finns i Rita och sök i polygonområdet i Azure Maps-exempel. Källkoden för det här exemplet finns i [Rita och sök efter exempelkod för polygonområdet].

Skärmbild som visar en karta som visar exemplet Rita och sök i polygonområdet.

Skapa ett mätverktyg

Följande kod visar hur ritningshändelserna kan användas för att skapa ett mätverktyg. drawingchanging Används för att övervaka formen när den ritas. När användaren flyttar musen beräknas formens dimensioner. Händelsen drawingcomplete används för att göra en slutlig beräkning av formen efter att den har ritats. Händelsen drawingmodechanged används för att avgöra när användaren växlar till ett ritningsläge. Dessutom rensar händelsen drawingmodechanged ritningsarbetsytan och rensar gammal måttinformation.

Ett fullständigt arbetsexempel på hur du använder ritverktygen för att mäta avstånd och områden finns i Skapa ett mätverktyg i Azure Maps-exempel. Källkoden för det här exemplet finns i Skapa en exempelkod för mätverktyget.

Skärmbild som visar en karta som visar mätverktygets exempel.

Nästa steg

Lär dig hur du använder andra funktioner i ritverktygsmodulen:

Läs mer om tjänstmodulen:

Kolla in fler kodexempel: