基于ESRI-Leaflet的出图

This article i.e Leaflet Print Map – Legends, Title, Layer, Color is for how can we take a beautiful map on paper from web by making it printable, with all map elements as map title and legends etc. Here we will use leaflet-image plugin from leaflet JavaScript library. This plugin uses the map and canvas HTML tag.

Leaflet Print Map – Legends, Title, Layer, Color

This plugin can be downloaded from https://github.com/mapbox/leaflet-image/blob/gh-pages/leaflet-image.js link. To implement this plugin on your system, you first need to create map, which can be done by following this article.

First of all add the leaflet library in your document by adding these scripts.

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
 <script  scr="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></ script>

Thereafter, create a division using

After adding the leaflet-image plugin in document you can call the leafletimage() method, which takes map as input and calls to callback function.

This function create a canvas html tag sets its width and heigth. Which draws layer in same order as drawn on map i.e. tile, path and markers. Before calling this function you must create function to get legend and map title with leaflet.

Here we have create getMapHeading() function which takes context and canvas as input. So what is Content?

var context = canvas.getContext(contextType);

getContext()– method returns a drawing context on the canvas.

contextType-Is a DOMString containing the context identifier defining the drawing context associated to the canvas.  “2d”, leading to the creation of a CanvasRenderingContext2D object representing a two-dimensional rendering context.

canvas– element is used to draw graphics on a web page.

Map Title in Leaflet Map

Take the map title in a variable and measure its width. if its width is less than one forth of canvas width then set its width according to canvas width. else the tile is larger then split it.

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);
 }
 }
 }

Map Legends in Leaflet Map Printable

Similarly function is created for legend as getLegeds(). In this function we have taken legend title, icon, range and containing div in variables. Check everything and recreate the context as you want it to be appeared on print.

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);
 }
 }

Leaflet-image plugin for printing map – Leaflet Print Map – Legends, Title, Layer, Color

Now Call the leafletImage() function and provide the create map and call the callback function. In this callback you can call the getMapHeading() and getLegends() functions. For this function we have taken the image data in data variable by using getImageData() method. And The getImageData() method returns an ImageData object that copies the pixel data for the specified rectangle on a canvas.

So the rectangle is given as whole canvas. Then set the globalCompositionOperation as destination-over. The globalCompositeOperation property sets or returns how a source (new) image are drawn onto a destination (existing) image. The putImageData() puts the image data back onto the canvas. The drawImage method draws an image onto the canvas.

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

Leaflet Print Map – Legends, Title, Layer, Color

Hope you enjoyed this article and are now able to create Leaflet Print Map – Legends, Title, Layer, Color. If you find any problem in implementing a printable map, do comment below. Thanks.

 

Author: Akshay Upadhyay

Owner and Director of a Private Limited company which serves individual to large scale industries in the field of Maps and GIS. He is a Gold Medalist in M.Tech(Spatial Information Technology) and owns some famous Technology blogs and website... Know more View all posts by Akshay Upadhyay

AuthorAkshay UpadhyayCategoriesGISTagscolor map, layer map, legends, Print maps, title map

https://www.igismap.com/leaflet-print-map-legends-title-layer-color/

>>Leaflet插件大全：https://leafletjs.com/plugins.html
>>ESRI-Leaflet和Leaflet的区别：https://github.com/Esri/esri-leaflet/blob/master/README.md#frequently-asked-questions