大体而言，首先是:
我想在我们国家的OpenStreetMap map 上放一张带云的天气雷达图像. 这是巴新的雷达图像:
这是以色列官方气象学家的官方网站: 这不是openstreemap，但图像是 map 的一部分，我可以放大/缩小.
这是我想在我的Wix网站上提出的相同概念:
放大后:
这是以色列官方气象网站，所以你可以明白我将图像添加到 map 上的意思
这是我的Wix网站，网站上没有什么比Open Streemap map 和图片更多的东西:https://chocolade13091972.wixsite.com/chocolade-imagine
在Wix中，我上传了PNG图像到我的站点，然后使用html和javascript，我可以将Open Streemap map 添加到我的站点，然后我可以拖动PNG图像，问题是当我发布我的站点时，图像覆盖在 map 上方，它不是 map 的一部分.
结果是，例如，当我放大/缩小时，图像不会与 map 一起放大/缩小. 这就是为什么我需要以某种方式使PNG图像将成为 map 的一部分，但还没有使PNG变得有点透明，所以如果我放大很多，我会通过图像看到一点 map .
这是使用wix中的embed html将openstreemap map添加到wix站点的代码，这段代码还使用png图像并try 使其成为map的组成部分:
<!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图像，也不像它应该在 map 上那样:
如果我缩小我的Wix网站，看看我的国家，你可以看到右侧远处雷达PNG图像的云层.
我的问题首先是如何让图像成为 map 不可分割的一部分？也许我在这里提供的代码正在做这项工作.
但最大的问题是如何让形象适合我的国家以色列？和他们在官方网站上做的一样.
