如何将 png 图像放在 wix 站点的 openstreemap 地图上，使 png 图像成为地图的组成部分？

问题描述 投票：0回答：1

首先总体来说：

我想在我的国家的 openstreetmap 地图上放置带有云的天气雷达图像。 这是雷达图像的png图像：

这就是以色列官方气象学家官方网站上的样子： 它不是 openstreemap，但图像是地图的一部分，我可以放大/缩小。

这与我想在我的 wix 网站中提出的概念相同：

放大后：

这是以色列官方天气网站，因此您可以通过将图像添加到地图中来了解我的意思：https://ims.gov.il/he/RadarSatellite

这是我的 wix 网站，网站上除了 openstreemap 地图和图像之外什么都没有：https://chocolade13091972.wixsite.com/chocolade-imagine

在wix中，我上传到我的网站png图像，然后使用html和javascript，我可以将openstreemap地图添加到我的网站，然后我可以拖动png图像，问题是当我发布我的网站时，图像覆盖在地图上方，它是不是地图的一部分。

结果是，例如，当我放大/缩小时，图像没有随地图一起放大/缩小。 这就是为什么我需要以某种方式使 png 图像成为地图的一部分，但又要使 png 有点透明，这样如果我放大很多，我会稍微透过图像看到地图。

这是使用 wix 中的嵌入 html 将 openstreemap 地图添加到 wix 站点的代码，并且此代码还采用 png 图像并尝试使其成为地图的组成部分：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Map with PNG Image</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
   <style>
      body, html, #map {
         height: 100%;
         margin: 0;
      }
   </style>
</head>
<body>
   <div id="map"></div>

   <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
   <script>
      var map = L.map('map').setView([32.00718, 34.81487], 10);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      // Define the bounds of your image (latitudes and longitudes)
      var bounds = [[32.00718, 34.81487], [33, 39.7]];

      // Create an image overlay and add it to the map
      var imageUrl = 'https://static.wixstatic.com/media/f7ee46_b3c10d0bb92644aaa9ef18bfbb3df0ee~mv2.png';
      var imageBounds = bounds;

      L.imageOverlay(imageUrl, imageBounds).addTo(map);
   </script>
</body>
</html>

但结果与原始 png 图像并不接近，也不如地图上应有的那样：

如果我缩小我的wix网站以查看我的国家，您可以在右侧远处的某处看到雷达png图像的云。

我的问题首先是如何使图像成为地图的一个组成部分？也许我在这里提供的代码正在完成这项工作。

但最大的问题是如何让图像适合我的国家以色列？和官方网站上的一样。

javascript html leaflet openstreetmap velo
1个回答
1
投票

您的图像是一个 940px × 940px 的正方形。但是，在您的地图中，它显示为矩形：

L.rectangle(bounds).addTo(map);
/// bounds is defined in your code as the bounds for the image  var bounds = [[32.00718, 34.81487], [33, 39.7]];

您需要为图像设置权限范围，但很难猜测它们。

通过将图像边界设置为 

[[31.5, 34], [33, 35.5]]
，您将得到以下结果：

请记住，边界是西南角/东北角。您必须从雷达图像的原始来源获取它们。

有关更多信息，请参阅传单文档：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.