javascript - 可以将我自己的(大) map 与 Leaflet.js 一起使用吗？

Question

我使用 Leaflet 有一段时间了，最​​近获得了一张大(我的意思是大)PNG 图像，其中包含特定区域(半径几公里)的卫星照片。我希望能够切换到它以将其与 Leaflet.js 中的当前 map 进行比较。我将如何做到这一点？

我可以很容易地找出哪个像素位置对应于某个现实生活中的 GPS 坐标，从理论上讲，Leaflet.js 应该能够将我的大 map 图像放置在 map 中，对吗？但是怎么办？这就是问题所在。

        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

确定光栅图像(卫星照片)的实际坐标，以便您稍后可以将其覆盖在普通图 block 上，称为地理配准。

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

您还有可能适合您需要的在线工具:https://www.georeferencer.com/

这个想法是确定光栅图像 Angular 的坐标。

一旦你有了这些坐标，你就可以使用 Ivan 的 Leaflet.ImageOverlay.Rotated用于定位(并可能旋转和倾斜)图像的插件:

Display rotated and skewed images in your LeafletJS maps.

This LeafletJS plugin adds a new class, L.ImageOverlay.Rotated, subclass of L.ImageOverlay. The main difference is that the position of L.ImageOverlay is defined by a L.LatLngBounds (the L.LatLngs of the top-left and bottom-right corners of the image), whereas L.ImageOverlay.Rotated is defined by three points (the L.LatLngs of the top-left, top-right and bottom-left corners of the image).

The image will be rotated and skewed (as the three corner points might not form a 90-degree angle).

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);