Question

我已经使用Leaflet一段时间了，并且最近获得了一个大的（我的意思是大）PNG图像，其中包含特定区域（半径几公里）的卫星照片。我希望能够切换到与Leaflet.js中的当前地图进行比较。我该如何做到这一点？

我可以很容易地找出哪个像素位置对应于某个真实的GPS坐标，并且从那个Leaflet.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);
        });

Answer 1

确定光栅图像（卫星照片）的实际坐标，以便稍后将其覆盖在公共平铺上，称为地理配准。

您有足够的在线资源描述可能的程序，例如： https://www.mapbox.com/help/georeferencing-imagery/

您还拥有可能符合您需求的在线工具：https://www.georeferencer.com/

我们的想法是确定光栅图像角落的坐标。

拥有这些坐标后，您可以使用Ivan的Leaflet.ImageOverlay.Rotated插件定位（并可能旋转和倾斜）您的图像：

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

此LeafletJS插件添加了一个新类L.ImageOverlay.Rotated，L.ImageOverlay的子类。主要区别在于L.ImageOverlay的位置由L.LatLngBounds（图片的左上角和右下角的L.LatLngs）定义，而L.ImageOverlay.Rotated由三个点（图像的左上角，右上角和左下角的L.LatLngs）定义。

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

Code sample取自插件demo page：

var point1 = L.latLng(40.52256691873593, -3.7743186950683594),
    point2 = L.latLng(40.5210255066156, -3.7734764814376835),
    point3 = L.latLng(40.52180437272552, -3.7768453359603886);

L.imageOverlay.rotated("URL-to-image", point1, point2, point3, {
  attribution: "&copy; <a href='url'>SOURCE</a>"
}).addTo(map);

可以使用我自己的（LARGE）地图与Leaflet.js？

1 个答案: