web-dev-qa-db-fra.com

Puis-je empêcher le panoramique de la carte Leaflet hors du monde?

Existe-t-il un moyen de limiter le panoramique à l'extérieur du monde? Sur cette photo, le brun est le monde, le gris est le vide. Je veux qu'il soit impossible de faire un panoramique comme ça.

out of this world

javascriptmapsleaflet
26
Terion

Dépliant vous permet de contrôler la résistance de la carte à être glissée hors des limites avec l'option maxBoundsViscosity (valeur: 0 à 1). Si vous le définissez au maximum, vous désactivez entièrement le déplacement hors des limites.

var map = new L.Map('map', {
  center: bounds.getCenter(),
  zoom: 5,
  layers: [osm],
  maxBounds: bounds,
  maxBoundsViscosity: 1.0
});

Cette fonctionnalité est disponible dans 1.0.0. la demande d'extraction pertinente comprend n exemple de travail :

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm1 = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  }),
  osm2 = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  }),
  bounds = new L.LatLngBounds(new L.LatLng(49.5, -11.3), new L.LatLng(61.2, 2.5));

var map1 = new L.Map('map1', {
  center: bounds.getCenter(),
  zoom: 5,
  layers: [osm1],
  maxBounds: bounds,
  maxBoundsViscosity: 0.75
});

var map2 = new L.Map('map2', {
  center: bounds.getCenter(),
  zoom: 5,
  layers: [osm2],
  maxBounds: bounds,
  maxBoundsViscosity: 1.0
});

var latlngs = L.rectangle(bounds).getLatLngs();
L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map1);
L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map2);
html,
body,
#map {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<h1>Left: Bouncy maxBounds. Right: Not bouncy.</h1>

<div id="map1" style="float: left; width:45%; height: 80%;"></div>
<div id="map2" style="float: left; width:45%; height: 80%;"></div>
40
approxiblue

Voilà comment je l'ai résolu pour la carte du monde

var map = L.map('map').setView([51.505, -0.09], 3);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

var southWest = L.latLng(-89.98155760646617, -180),
northEast = L.latLng(89.99346179538875, 180);
var bounds = L.latLngBounds(southWest, northEast);

map.setMaxBounds(bounds);
map.on('drag', function() {
    map.panInsideBounds(bounds, { animate: false });
});

Voir l'exemple de travail à la fois pour version .7.0.7 http://jsfiddle.net/exqar2w4/18/ et pour version 1.0.3 http://jsfiddle.net/exqar2w4/20/

18
rob.m

J'utilise react-leaflet donc la syntaxe est légèrement différente de celle ci-dessus, mais a pensé qu'il serait utile de montrer quelques limites raisonnables à utiliser (aucune des réponses ci-dessus ne le fait).

import Leaflet from 'leaflet'
import { Map as LeafletMap} from 'react-leaflet'

// Set map bounds.
// Allow scroll over the international date line, so users can comfortably zoom into locations near the date line.
const corner1 = Leaflet.latLng(-90, -200)
const corner2 = Leaflet.latLng(90, 200)
const bounds = Leaflet.latLngBounds(corner1, corner2)

Qui est ensuite rendu comme ...

<LeafletMap
  maxBoundsViscosity={1.0}
  maxBounds={bounds}
  {...otherProps}
>
3
thclark