How to draw polygon dynamically in Leaflet
This article mainly introduces how to dynamically outline polygon in Leaflet. It is very detailed and has a certain reference value. Friends who are interested must finish it!
Leaflet is an open source JavaScript class library for interactive maps on the desktop and mobile. The size of the JS library is about 38k after compression, and it has all the map functions that developers need.
Leaflet maintains the design idea of simplicity, performance and practicality. It works efficiently on all major desktop and mobile platforms and can extend plug-ins. It has a beautiful, easy-to-use and well-documented API, and a simple, easy-to-read source code.
The following is a brief list of how to dynamically plot polygon on a map according to the code:
The mode is to click the button to start drawing polygon, left-click each time, dynamically change the polygon, double-click on the map to end the plotting.
$(document) .ready (function () {/ / set startup plotting $("# _ createBtn") .click (function (e) {/ / add the left button on the map, mouse double-click event map.on ('click', MapLeftClick); map.on ("dblclick", MapDoubleClick) / / define the polygon object of the map, initialize the empty array, and set the attribute _ polygon = L.polygon (_ pointArr, {color: 'red', fillColor:' # f03, fillOpacity: 0.5}) / / add polygon to the map _ polygon.addTo (map);});}); var _ polygon = null; var _ pointArr = new Array (); / / double-click to end mapping function MapDoubleClick (e) {/ / turn off the mouse click event map.off ('click', MapLeftClick) of the map Map.off ("dblclick", MapDoubleClick); alert ("doubleClick");} / start the map left button event function MapLeftClick (e) {/ / draw a small red dot L.circleMarker (e.latlng, {radius: 2, color: 'red'}) .addTo (map) on the map with each click / / dynamically add a point on polygon _ polygon.addLatLng (e.latlng);} these are all the contents of the article "how to dynamically outline polygon in Leaflet". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
