Este artículo, es decir, Mapa de impresión de folletos: leyendas, título, capa, color, explica cómo podemos tomar un hermoso mapa en papel de la web haciéndolo imprimible, con todos los elementos del mapa como título del mapa y leyendas, etc. Aquí usaremos la imagen del folleto. complemento de la biblioteca de JavaScript del folleto. Este complemento utiliza la etiqueta HTML de mapa y lienzo.
Mapa de impresión de folletos: leyendas, título, capa, color
Este complemento se puede descargar desde el enlace https://github.com/mapbox/leaflet-image/blob/gh-pages/leaflet-image.js . Para implementar este complemento en su sistema, primero debe crear un mapa, lo que se puede hacer siguiendo este artículo.
En primer lugar, agregue la biblioteca de folletos en su documento agregando estos scripts.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script scr="https://unpkg.com/[email protected]/dist/leaflet.js" ></ script>
A partir de entonces, cree una división utilizando
Después de agregar el complemento de imagen de folleto en el documento, puede llamar al método leafletimage () , que toma el mapa como entrada y llama a la función de devolución de llamada.
Esta función crea una etiqueta html de lienzo establece su ancho y alto. Que dibuja la capa en el mismo orden en que se dibujó en el mapa, es decir, mosaico, ruta y marcadores. Antes de llamar a esta función, debe crear una función para obtener la leyenda y el título del mapa con el folleto.
Aquí tenemos la función create getMapHeading () que toma el contexto y el lienzo como entrada. Entonces, ¿qué es el contenido?
var context = canvas.getContext(contextType);getContext () : el método devuelve un contexto de dibujo en el lienzo.
contextType: es un DOMString que contiene el identificador de contexto que define el contexto de dibujo asociado al lienzo. “2d”, que lleva a la creación de un objeto CanvasRenderingContext2D que representa un contexto de representación bidimensional.
lienzo : el elemento se utiliza para dibujar gráficos en una página web.
Título del mapa en el mapa del folleto
Tome el título del mapa en una variable y mida su ancho. si su ancho es menor que un cuarto del ancho del lienzo, establezca su ancho de acuerdo con el ancho del lienzo. de lo contrario, la baldosa es más grande y luego divídala.
function getMapHeading(context,canvas){
var mapheading = $("#mapTitle").html();
var pix = context.measureText(mapheading).width;
if(pix<(canvas.width/4))
{
var xval = (canvas.width-pix*4)/2;
context.font = "bold 35px proximanova-semibold-webfont";
context.fillText(mapheading,xval,40);
}
else
{
mapheading = mapheading.split(" ");
//console.log("mapheading",mapheading);
//mapheading = mapheading.toString();
pix = canvas.width/4;
var line = "",nextline = "";
for(var i=0; i<mapheading.length; i++)
{
if(context.measureText(line).width<pix)
{
line += mapheading[i] + " ";
}
else
{
nextline += mapheading[i] + " ";
}
}
context.font = "bold 35px proximanova-semibold-webfont";
context.fillText(line,25,40);
if(nextline.length>0)
{
context.fillText(nextline,25,80);
}
}
}Mapa de leyendas en folleto Mapa imprimible
De manera similar, se crea una función para la leyenda como getLegeds (). En esta función, hemos tomado el título de la leyenda, el icono, el rango y el div que contiene las variables. Verifique todo y vuelva a crear el contexto como desea que aparezca en la impresión.
function getLegends(context,canvas){
var legendheading = $("#legendTitle").html();
var paralegend = $('.paralegend');
var legendclr = $('.paralegend i');
var divlegend = $('.leaflet-control.leaflet-bottom.leaflet-left');
var width = divlegend.width(),height = divlegend.height();
var x =10,dx=20,dy=20;
var y = canvas.height-height+15;
var legendtext = [],legendcolor = [],rects = [];
for(var i=0; i<paralegend.length;i++)
{
legendtext.push(paralegend[i].innerText);
}
for(var j=0; j<legendclr.length; j++)
{
legendcolor.push(legendclr[j].style.background);
}
for(var l=0;l<legendcolor.length;l++)
{
rects.push(new shape(x,y,dx,dy,legendcolor[l],legendtext[l]));
y=y+25;
}
context.font = "bold 15px proximanova-semibold-webfont";
context.fillText(legendheading,x,canvas.height-height);
for(var k=0;k<rects.length;k++)
{
var sqr = rects[k];
context.fillStyle = sqr.fill;
context.fillRect(sqr.x,sqr.y,sqr.dx,sqr.dy);
context.strokeStyle='#000';
context.lineWidth=1;
context.strokeRect(sqr.x,sqr.y,sqr.dx,sqr.dy);
context.fillStyle = 'black';
context.font = "15px proximanova-semibold-webfont";
context.fillText(sqr.text,sqr.x+25,sqr.y+15);
}
}Complemento de imagen de folleto para imprimir mapa - Mapa de impresión de folleto - Leyendas, título, capa, color
Ahora llame a la función leafletImage () y proporcione el mapa de creación y llame a la función de devolución de llamada. En esta devolución de llamada, puede llamar a las funciones getMapHeading () y getLegends (). Para esta función, hemos tomado los datos de la imagen en la variable de datos utilizando el método getImageData (). Y el método getImageData () devuelve un objeto ImageData que copia los datos de píxeles para el rectángulo especificado en un lienzo .
Entonces el rectángulo se da como lienzo completo. A continuación, establezca globalCompositionOperation como destino final . La propiedad globalCompositeOperation establece o devuelve cómo se dibuja una imagen de origen (nueva) en una imagen de destino (existente). El putImageData () pone la parte posterior de datos de imagen en el lienzo. El método drawImage dibuja una imagen en el lienzo.
leafletImage(map, function(err, canvas) {
var context = canvas.getContext("2d");
getMapHeading(context,canvas);
getLegends(context,canvas);
var data = context.getImageData(0, 0, canvas.width, canvas.height);
//store the current globalCompositeOperation
var compositeOperation = context.globalCompositeOperation;
//set to draw behind current content
context.globalCompositeOperation = "destination-over";
//set background color
//context.fillStyle = "grey";
context.fillStyle = "#ddd";
//draw background / rect on entire canvas
context.fillRect(0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
context.clearRect (0,0,canvas.width, canvas.height);
//restore it with original / cached ImageData
context.putImageData(data, 0,0);
//reset the globalCompositeOperation to what it was
context.globalCompositeOperation = compositeOperation;
context.drawImage(canvas,0,0);
print.href = dataURL;
print.download = "map.png";
});
finally On printing the map will look like
Mapa de impresión de folletos: leyendas, título, capa, color
Espero que haya disfrutado de este artículo y ahora pueda crear un mapa de impresión de folletos: leyendas, título, capa, color. Si encuentra algún problema al implementar un mapa imprimible, comente a continuación. Gracias.
Autor: Akshay Upadhyay
Propietario y director de una sociedad de responsabilidad limitada que presta servicios a industrias individuales y de gran escala en el campo de los mapas y los SIG. Él es un Medallista de Oro en M.Tech (Tecnología de la Información Espacial) y posee algunos blogs y sitios web de Tecnología famosos ... Saber más Ver todas las publicaciones de Akshay Upadhyay
Autor Akshay Upadhyay Categorías GIS Etiquetas mapa de color , mapa de capas , leyendas , mapas impresos , mapa de título
https://www.igismap.com/leaflet-print-map-legends-title-layer-color/
>> Complementos de folletos: https://leafletjs.com/plugins.html
>> La diferencia entre ESRI-Leaflet y Leaflet: https://github.com/Esri/esri-leaflet/blob/master/README.md#fre frecuencia -Preguntas solicitadas