Javascript 是否可以将我自己的（大）地图与传单.js一起使用？

我使用传单已经有一段时间了，最近我得到了一张大的（我指的是大的）PNG图像，其中包含一张特定区域（半径几公里）的卫星照片。我希望能够切换到它，将其与当前的地图进行比较。我将如何做到这一点

我可以很容易地找到哪个像素位置对应于某个现实生活中的GPS坐标，从那张传单上说，js应该能够在地图上放置我的大地图图像，对吗？但是怎么做呢？这就是问题所在

        var bookmarks = L.layerGroup();

        var layer1 = L.tileLayer('<URL_GOING_TO_STREET_MAP>', { id: 'mapbox.one' }); // maxZoom: 18, 
        var layer2 = L.tileLayer('<URL_GOING_TO_SATELLITE_MAP>', { id: 'mapbox.two' });
        var layer3 = L.tileLayer('<URL_GOING_TO_STREET_AND_SATELLITE_COMBO_MAP>', { id: 'mapbox.three' });

        var theMap = L.map('map', {
            center: [ <CENSORED>, <CENSORED> ],
            zoom: 4,
            layers: [ layer3, bookmarks ]
        });

        var baseLayers = {
            "Standard": layer1,
            "Satellite": layer2,
            "Satellite + info combo": layer3
        };

        var overlays = {
            "Bookmarks": bookmarks
        };

        L.control.layers(baseLayers, overlays).addTo(theMap);

        fetch('./data/generated.geojson').then(function(response) { return response.json() }).then(function(actualData)
        {
            L.geoJSON(actualData).bindTooltip(function (layer)
            {
                return layer.feature.properties.name;
            }).openTooltip().addTo(bookmarks);
        });

var bookmarks=L.layerGroup（）；
var layer1=L.tillelayer（“”，{id:'mapbox.one'}）；//maxZoom:18，
var layer2=L.tillelayer（“”，{id:'mapbox.two'}）；
var layer3=L.tillelayer（“”，{id:'mapbox.three'}）；
var theMap=L.map（'map'{
中心：[，],，
缩放：4，
图层：[第3层，书签]
});
var baseLayers={
“标准”：第1层，
“卫星”：第二层，
“卫星+信息组合”：第3层
};
变量覆盖={
“书签”：书签
};
L.控制层（基本层、覆盖层）。添加到（主题图）；
fetch（'./data/generated.geojson'）。然后（函数（响应）{return response.json（）}）。然后（函数（actualData）
{
L.geoJSON（actualData）.bindTooltip（函数（层）
{
返回layer.feature.properties.name；
}).openTooltip（）.addTo（书签）；
});

确定光栅图像（卫星照片）的实际坐标，以便以后可以将其覆盖在普通瓷砖上，这称为地理参考

您有大量的在线资源来描述可能的过程，例如

您还拥有适合您需要的在线工具：

其思想是确定光栅图像角点的坐标

一旦你有了这些坐标，你可以使用Ivan的插件来定位（并可能旋转和倾斜）你的图像：

在地图中显示旋转和倾斜的图像

这个插件添加了一个新类，

L.ImageOverlay.Rotated

，它是

L.ImageOverlay

的子类。主要区别在于

L.ImageOverlay

的位置由

L.LatLngBounds

（图像左上角和右下角的

L.LatLngs

）定义，而

L.ImageOverlay.Rotated

由三个点定义（图像左上角、右上角和左下角的

L.LatLngs

）

图像将被旋转和倾斜（因为三个角点可能不会形成90度角）

摘自插件：

var point1=L.latLng（40.52256691873593，-3.7743186950683594），
点2=L.latLng（40.5210255066156，-3.7734764814376835），
点3=L.latLng（40.52180437272552，-3.7768453359603886）；
L.imageOverlay.rotated（“URL到图像”），第1点、第2点、第3点{
属性：“©；”
}).addTo（地图）；

获取图像角点的横向坐标，然后根据该坐标创建一个

L.ImageOverlay

。可能存在重复，但不重复。链接到的问题对我没有帮助。我可以找到图像角点的GPS坐标，因此我不必上传（非常庞大，版权保护，无论如何都必须保密）图像文件到该服务。然而，问题是如何在传单中实现这一点。我不是想发布最后的评论。我按Enter键获取一行新的内容，但它发布了评论。无论如何，我现在要添加实际的源代码，如果你想帮我，我可以告诉你我永远不会去g为了自己解决这个问题…只需修改插件演示页面上的代码示例。为了简单起见，在上面更新的答案中复制。我不明白这些点的意思。但不管怎样，我得到了这个错误：TypeError:L.imageOverlay.rotated不是函数在插件描述中说的：“三点（图像左上角、右上角和左下角的L.LatLngs）”。关于您报告的错误，听起来您在尝试使用插件脚本之前没有包含插件脚本。如果您在使用插件脚本时需要帮助，请打开其他问题。