Как убрать деление карты в leaflet?

Question

Недавно открыл для себя leaflet. Сделал свою карту, но при приближении, моя карта просто делится на несколько карт, но не приблежается. Код HTML и CSS

body {
  background: url("img/Back_index.jpg") no-repeat;
  background-size: 1920px 1080px;
}

#button_map {
  width: 300px;
  height: 120px;
}

#div_map {
  position: absolute;
  left: 50%;
  margin: 0 0 0 -450px;
}

#div_map_2 {
  border: 2px;
  position: absolute;
  width: 1200px;
  height: 600px;
  top: 50%;
  left: 50%;
  margin: -300px 0 0 -600px;
  background: white;
  background-attachment: local;
  background-size: auto;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>Карта</title>
  <link rel="stylesheet" href="Style_all.css" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

</head>

<body>
  <div id="div_map">
    <a href="main.html"><button id="button_main">Главная</button></a>
    <a href="inventar.html"><button id="button_main">Личный кабинет</button></a>
    <a href="table.html"><button id="button_main">Таблицы</button></a>
  </div>

  <div class="div_map_2" id="div_map_2">

  </div>
  <script>
    var mymap = L.map('div_map_2').setView([51.505, -0.09], 1);
    L.tileLayer('img/Map.jpg', {
      maxZoom: 18,
      tileSize: 600,
      tms: false
    }).addTo(mymap);
  </script>
</body>

</html>

Answer 1

Все достаточно просто и на мой взгляд вы неверно работаете tileLayer. Либо не хватает информации по тому что такое img/Map.jpg.

Вот здесь:

L.tileLayer('img/Map.jpg', {
  maxZoom: 18,
  tileSize: 600,
  tms: false
}).addTo(mymap);

Здесь я использую напрямую url, примерно так (пример из работающего проекта):

L.tileLayer('https://SOMEDOMAIN/styles/v1/{id}/tiles/{z}/{x}/{y}', {
  maxZoom: 18,
  tileSize: 512,
  zoomOffset: -1
}).addTo(this.mymap);

Answer 2

Я понял, что не правильно сделал карту. При помощи программы LeafletPano я разделил карту на тайлы(Размещайте картинку с целой картой сразу же в той папке, где у вас находятся картинки). Ниже предоставлю код.

<div class="div_map_2" id="div_map_2"></div>
    <script>
    var mymap = L.map('div_map_2').setView([1, 1], 5);
    L.tileLayer('http://тут мой сайт.ru/img/Map/{z}-{x}-{y}.jpg', 
    {
    minZoom: 0,//минимальный зум
    maxZoom: 5, //максимальный зум
    attribution: '', //атрибут, что прописывается внизу слева
    tms: false,
    noWrap: true //эта ф-ия не позволяет карте повторятся
    }).addTo(mymap);
    

    </script>

БЛОГ НА HUSL

Как убрать деление карты в leaflet?

Ответы (2 шт):