Как растянуть карту под видимую область?

Question

В этом примере карта растянута по высоте с минимальным увеличением. Пример: https://conan -exiles.net / map / # 3 / -3052.00 / 1819.00 Я попытался выяснить пример кода, но это сложно. MyMap:

<div id="map" style="width: 100%; height: 100%; background: #000000; margin: 0;"></div>
<script type="text/javascript">
    var mapSW = [0, 32768],
        mapNE = [32768, 0];
    var map = L.map('map', {    
        attributionControl:false,
        zoomControl: false,
        maxBoundsViscosity: 1.0,
        }).setView([0, 0], 2);
    var Main_Map = L.tileLayer('map_png/{z}/{x}/{y}.png',{  
        minZoom: 1,
        maxZoom: 7,
        maxNativeZoom: 4,
        continuousWorld: false,
        noWrap: true,
        crs: L.CRS.Simple,
        }).addTo(map);
    map.setMaxBounds(new L.LatLngBounds(    
        map.unproject(mapSW, map.getMaxZoom()),
        map.unproject(mapNE, map.getMaxZoom())
        )); 
    </script>

Ответ скрыт в этом примере, но как применить его к моей карте?:

        var mapExtent = [0.00000000, -4000.00000000, 4000.00000000, 0.00000000];
        var mapMinZoom = 2;
        var mapMaxZoom = 5;
        var mapMaxResolution = 0.25000000;
        var mapMinResolution = Math.pow(2, mapMaxZoom) * mapMaxResolution;
        var tileExtent = [0.00000000, -4000.00000000, 4000.00000000, 0.00000000];
        var maxBounds = [[0,0], [-4000,4000]];
        var crs = L.CRS.Simple;
            crs.transformation = new L.Transformation(1, -tileExtent[0], -1, tileExtent[3]);
            crs.scale = function(zoom) {
                return Math.pow(2, zoom) / mapMinResolution;
            };
            crs.zoom = function(scale) {
                return Math.log(scale * mapMinResolution) / Math.LN2;
            };

        var map = new L.Map('map', {
            renderer: L.canvas,
            maxZoom: mapMaxZoom,
            minZoom: mapMinZoom,
            layers: overlays,
            crs: crs,
            maxBounds: maxBounds,
            maxBoundsViscosity: 1,
            attributionControl:false,
            zoomControl:false

        });

            layer = L.tileLayer('map_png/{z}/{x}/{y}.png', {
            minZoom: mapMinZoom, maxZoom: mapMaxZoom,
            bounds: [[0,0], [-4000,4000]],
            tms: false          
        }).addTo(map);

        map.fitBounds([
        crs.unproject(L.point(mapExtent[2], mapExtent[3])),
        crs.unproject(L.point(mapExtent[0], mapExtent[1]))
        ]);

Answer 1

Надеюсь, вы нашли это решение полезным.

let mapExtent = [0.00000000, -4100.00000000, 4100.00000000, 0.00000000];
let minZoom = 0;
let maxZoom = 6;
let maxBounds = [
  [0, 0],
  [-4100, 4100]
];
let mapMaxResolution = 0.2500000;
let mapMinResolution = Math.pow(2, maxZoom) * mapMaxResolution;

let crs = L.CRS.Simple;

crs.scale = function(zoom) {
  console.log(zoom);
  return Math.pow(2, zoom) / mapMinResolution;
};
crs.zoom = function(scale) {
  return Math.log(scale * mapMinResolution) / Math.LN2;
};

let map = L.map('map', {
  crs,
  minZoom,
  maxZoom,
  maxBounds,
  zoomSnap: 0, // important
  maxBoundsViscosity: 1.0,
  attributionControl: false,
  zoomControl: true
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
  maxNativeZoom: 4,
  noWrap: true,
  minZoom,
  maxZoom
}).addTo(map);

map.fitBounds([
  crs.unproject(L.point(mapExtent[2], mapExtent[3])),
  crs.unproject(L.point(mapExtent[0], mapExtent[1]))
]);

map.on('zoomend', function() {
  document.querySelector('.zoom').innerText = map.getZoom();
});

html,
body {
  height: 100%;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}

.zoom {
  font-size: 4rem;
  font-weight: 700;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  color: #fff;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<div class="zoom"></div>
<div id='map'></div>

И с вашей картой jsfiddle.net