Question

我在地图上有一个图像，在“图像叠加层”中我设置了边界（左上方和右下方），但是该图像具有某种程度的拉力，它比宽幅还高，并且原始图像是正方形（558x558），我将标记放置在边界应到达的位置。我无法解决这些问题。非常感谢。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Pruebas2</title>
   <!-- LEAFLET -->
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
   <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
   <!-- Estilos -->
   <link rel="stylesheet" href="estilos.css">
   <!-- Jquery -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="contenedorMapa" style="width: 100%"></div>

   <script> /*MAPA EN TODA LA PANTALLA*/ $('#contenedorMapa').height(window.innerHeight);
   </script>

   <script> // TIPOS DE MAPAS
      var map = L.map('contenedorMapa').setView([22.387672, -97.925450], 7);
      //[21.893950, -101.440188]

      var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
         maxZoom: 20,
         subdomains:['mt0','mt1','mt2','mt3'],
         attribution: ''
      }).addTo(map);
   </script>

   <script>
      var marker13 = L.marker([25.078983, -100.772610]).addTo(map)
      .bindPopup('supe-iz');

      var marker13 = L.marker([19.696318, -95.078198]).addTo(map)
      .bindPopup('inf-der');
   </script>

   <script>
      var imageUr6 = 'ecos/altamira/ppi3/ULTIMA.gif';
      var bordes6 = [[25.078983, -100.772610], [19.696318, -95.078198]];
      var imagen6 = L.imageOverlay(imageUr6, bordes6, {
         opacity: 0.7
      }).addTo(map);
     </script>
</body>
</html>

enter image description here

Answer 1

请检查您的图像。这个对我有用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Pruebas2</title>
   <!-- LEAFLET -->
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
   <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
   <!-- Estilos -->
   <link rel="stylesheet" href="estilos.css">
   <!-- Jquery -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="contenedorMapa" style="width: 100%"></div>

   <script> /*MAPA EN TODA LA PANTALLA*/ $('#contenedorMapa').height(window.innerHeight);
   </script>

   <script> // TIPOS DE MAPAS
      var map = L.map('contenedorMapa').setView([22.387672, -97.925450], 7);
      //[21.893950, -101.440188]

      var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
         maxZoom: 20,
         subdomains:['mt0','mt1','mt2','mt3'],
         attribution: ''
      }).addTo(map);
   </script>

   <script>
      var marker13 = L.marker([25.078983, -100.772610]).addTo(map)
      .bindPopup('supe-iz');

      var marker13 = L.marker([19.696318, -95.078198]).addTo(map)
      .bindPopup('inf-der');
   </script>

   <script>
      var imageUr6 = 'https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif';
      var bordes6 = [[25.078983, -100.772610], [19.696318, -95.078198]];
      var imagen6 = L.imageOverlay(imageUr6, bordes6, {
         opacity: 0.7
      }).addTo(map);
     </script>
</body>
</html>

如何在LeafletJs中使用imageOverlay设置图像而无需调整大小

1 个答案: