0
365
Vistasel complemento de imagen del folleto genera una imagen vacía desde el mapa del folleto
Estoy tratando de convertir el mapa del folleto en una imagen:
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>Creé un mapa de folleto:
var map = L.map('map').setView([startup_latitude, startup_longitude], 14);y luego generé una imagen del mapa:
leafletImage(map, function (err, canvas) { var img = document.createElement('img'); var dimensions = map.getSize(); img.width = dimensions.x; img.height = dimensions.y; console.log(canvas.toDataURL()) img.src = canvas.toDataURL(); document.getElementById('images').innerHTML = ''; document.getElementById('images').appendChild(img); });El mapa se muestra correctamente pero la imagen generada está vacía:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Solucioné el problema después de mover el código:
var map = L.map('map').setView([startup_latitude, startup_longitude], 14); map.touchZoom.disable(); //map.doubleClickZoom.disable(); map.scrollWheelZoom.disable(); map.boxZoom.disable(); map.keyboard.disable(); L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1Ijoia2hhbGVkYnNmIiwiYSI6ImNreDh4am56eTAyNmoyb213Mnl2bzg4NzAifQ.I-xlHMqKPZy7TijmHZ6SRA' }).addTo(map); var marker = L.marker([startup_latitude, startup_longitude]).addTo(map); leafletImage(map, function (err, canvas) { // now you have canvas // example thing to do with that canvas: var img = document.createElement('img'); var dimensions = map.getSize(); img.width = dimensions.x; img.height = dimensions.y; img.src = canvas.toDataURL(); document.getElementById('images').innerHTML = ''; document.getElementById('images').appendChild(img); });Actualmente estoy usando esta versión de leaflet-image
https://github.com/mapbox/leaflet-image/edit/gh-pages/leaflet-image.js
·
Juan Pablo Isaza
Denunciar
Responde la pregunta