Leaflet加载图片-imageoverlay

原文地址  http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html

leaflet使用imageoverlay加载图片，转载

Using leaflet.js to pan and zoom a big image

14 Jun 2014

I recently used leaflet.js to embed a large image in a webpage and allow users pan over it and zoom into it. There's aStack Overflow post about how to do this for a single image, but the anwsers don't have enough detail to make it easy to understand and do.

The image I used was of a newspaper article. It's not big enough to needsegmentation, but it's too big to show on a page at full scale. I need to beable to read the article text. By using Leaflet I canzoom out to get anoverview of the layout, and zoom in andpan to read the text. Leaflettakes care of all the user interaction details for me.

Update 2016-04-05: See this gist for a full working example HTML file.

The result

Here's the end product.

+-

Leaflet

and here's the code to make it work.

How it works

Let's walk through the code.

  minZoom: 1,  maxZoom: 4,  center: [0, 0],  zoom: 1,

We want to be able to zoom over 4 levels (1 to 4). Zoom level 3 is going to be the actual size (1 to 1) of the image.That means zoom level 4 will be twice as big, zoom level 2 will half as big,and zoom level 1 a quarter of the original size. We start by focusing on the center of the image, at zoom level 1.

  crs: L.CRS.Simple

This tells Leaflet to use a simple 1-1 mapping between screen pixels and its internal latitude-longitude coordinate system.In other words, our image is flat, not a globe that we're projecting onto a flat image.

Image sizes and coordinates

// dimensions of the imagevar w = 2000,    h = 1500,    url = '/images/newspaper-big.jpg';

This is the size of our image in pixels and its location.

// calculate the edges of the image, in coordinate spacevar southWest = map.unproject([0, h], map.getMaxZoom()-1);var northEast = map.unproject([w, 0], map.getMaxZoom()-1);var bounds = new L.LatLngBounds(southWest, northEast);

This is the fun bit. We want to tell Leaflet how to place the image on the map.So we ask it tounproject thepixel coordinates of the south-westand north-east corners of the map intolat-long coordinates. We tell it todo that zoom level 3 (orgetMaxZoom()-1) since at that zoom level, the imagemust be actual size and fill the map.

In pixels, Leaflet considers the origin (0, 0) to be the top-left corner.So the bottom left corner has a y-coordinate ofh and an x-coordinate of0.Similarly, the top right corner has a y-coordinate of0 and an x-coordinate ofw.

The bounds variable now describes the lat-long coordinates of where on themap the image must be placed such that it is actual size at zoom level 3.

// add the image overlay, // so that it covers the entire mapL.imageOverlay(url, bounds).addTo(map);// tell leaflet that the map is exactly as big as the imagemap.setMaxBounds(bounds);

Finally, we add the image itself as an overlay to the map using the boundswe just calculated. We then tell Leaflet that the total size of the map isonly as the image, so the user can't drag past the edges.

Conclusion

The biggest step for me was wrapping my head around Leaflet's coordinatesystem and how and when to project from screen pixels into lat-long coordinatessuch that my zoom levels worked as expected.

I've found this to be a really powerful way of showing large images in a small pagewhen users need to be able to get both an overview and see the details. Leafletdoes all the hard work of providing a great-looking interface that the useris familiar with (provided they've used a mapping website).