Question

0

123

Vistas

mover un círculo de un punto a otro

Soy nuevo en los folletos y estoy tratando de rodear el mapa cuando se hace clic. Quiero condiciones como las siguientes:

El círculo se mueve de un punto a otro cuando se hace clic en el mapa (si el círculo ya existe y solo hay un círculo)
Zoom directo en donde se hace el círculo

Sin embargo tengo el siguiente problema:

Círculo aumenta
Al presionar otro punto, el círculo desaparece primero y luego aparecerá en el punto anterior y en el punto más reciente
No acerques donde se hace el círculo

¿Hay una solución a este problema?

 <!DOCTYPE html> <html> <head> <title>Leaflet Polygons</title> <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> </head> <body> <div id = "map" style = "width: 900px; height: 580px"></div> <script> // Creating map options var mapOptions = { center: [16.506174, 80.648015], zoom: 11 } var groupCircle = L.featureGroup(); var map = new L.map('map', mapOptions); // Creating a map object // Creating a Layer object var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'); map.addLayer(layer); // Adding layer to the map map.on("click", function(e){ if(map.hasLayer(groupCircle)){ map.removeLayer(groupCircle) }else{ new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle); map.addLayer(groupCircle) } }) </script> </body> </html>

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-30T01:40:08.613Z

El círculo aumentará porque elimina solo la capa del grupo de características, no el contenido del grupo de características. El reinicio se puede hacer de la siguiente manera:

 map.removeLayer(groupCircle) groupCircle = L.featureGroup();

Se puede agregar directamente después del reinicio

 if(map.hasLayer(groupCircle)){ //Start map.removeLayer(groupCircle) groupCircle = L.featureGroup(); new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle); map.addLayer(groupCircle) //End }else{ new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle); map.addLayer(groupCircle) }

Puede agregar el comando "setView":

 map.setView([e.latlng.lat, e.latlng.lng], 11); //11 = zoom level

Aquí está el código completo:

 <!DOCTYPE html> <html> <head> <title>Leaflet Polygons</title> <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> </head> <body> <div id = "map" style = "width: 900px; height: 580px"></div> <script> // Creating map options var mapOptions = { center: [16.506174, 80.648015], zoom: 11 } var groupCircle = L.featureGroup(); var map = new L.map('map', mapOptions); // Creating a map object // Creating a Layer object var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'); map.addLayer(layer); // Adding layer to the map map.on("click", function(e){ map.setView([e.latlng.lat, e.latlng.lng], 11); //11 = zoom level if(map.hasLayer(groupCircle)){ //Start map.removeLayer(groupCircle) groupCircle = L.featureGroup(); new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle); map.addLayer(groupCircle) //End }else{ new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle); map.addLayer(groupCircle) } }) </script> </body> </html>

0

123

mover un círculo de un punto a otro

1 Respuestas

0

Encuentra empleos remotos

Andres GPT