最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Bounding view of a Leaflet image map to a landscape viewport - Stack Overflow

programmeradmin1浏览0评论

I have a square image 16384x16384 that has been sliced into tiles using MapTiler to create 6 levels of zoom in Leaflet.

I have set up the image in Leaflet as follows:

var map = L.map('map', {
      maxZoom: 6,
      minZoom: 0,
    }).setView([0, 0],1);

var tilesURL = "_server/tiles/{z}/{x}/{y}.jpg";

L.tileLayer(tilesURL, {
    maxZoom: 6,
    continuousWorld: 'false',
    tms: true
}).addTo(map);

How would I either:

  1. Restrict the view of this large square image to just the middle (landscape rectangle) area?
  2. Produce a non-square rectangular set of tiles?

Additionally, can Leaflet auto-fit the bounded area to the Map container?

I have a square image 16384x16384 that has been sliced into tiles using MapTiler to create 6 levels of zoom in Leaflet.

I have set up the image in Leaflet as follows:

var map = L.map('map', {
      maxZoom: 6,
      minZoom: 0,
    }).setView([0, 0],1);

var tilesURL = "_server/tiles/{z}/{x}/{y}.jpg";

L.tileLayer(tilesURL, {
    maxZoom: 6,
    continuousWorld: 'false',
    tms: true
}).addTo(map);

How would I either:

  1. Restrict the view of this large square image to just the middle (landscape rectangle) area?
  2. Produce a non-square rectangular set of tiles?

Additionally, can Leaflet auto-fit the bounded area to the Map container?

Share Improve this question edited Feb 8, 2017 at 20:03 approxiblue 7,12216 gold badges52 silver badges59 bronze badges asked Jun 19, 2013 at 9:03 ukmikebukmikeb 3031 gold badge5 silver badges15 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4
  1. Yes. Use the maxBounds option.
  2. No idea, but why do you want to do such a thing?
  3. Yes: the method fitBounds does that.

Couldn't edit @L. Sanna code since the queue is full but I would like to contribute with an example on how to use maxBounds for the first question.

I am using Leaflet 1.7.1 on Angular

Note:

  • maxBounds() accepts latLngBounds data type as an argument. In my case I used a tuple holding the two coordinates.
  • maxboundViscosity() accepts a value between 0.0-1.0 that will control how solid the bounds are when dragging the map out of bounds. Value on 1 will prevent any out of bounds areas from showing.
  • Tip: Adjust you minZoom to have the view not show any out of bound areas.
this.map = L.map('map', {
      maxBounds: [[-90, -260],[90, 260]],
      maxBoundsViscosity: 1,
      center: [39.8282, -98.5795],
      zoom: 5,
      zoomSnap: 0.15 // enables fractional zooms
});

Happy coding!

发布评论

评论列表(0)

  1. 暂无评论