使用Leaflet在圖像上創建覆蓋

Question

我試圖讓Leaflet用於標准的非地圖圖像，以便可以使用像素而不是地理緯度和縱向坐標在圖像上放置標記。

這是我嘗試工作的小提琴：

http://jsfiddle.net/letsgetsilly/8Neau/4/

<div id="map" style="width: 1500px; height: 2316px"></div>

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script>

     var map = L.map('map', {
        maxZoom: 4,
        minZoom: 2,
        crs: L.CRS.Simple
     }).setView([0,50], 4);

    var southWest = map.unproject([0, 4000], map.getMaxZoom());
    var northEast = map.unproject([1500, 0], map.getMaxZoom());
    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));


    //actual image dimensions: 1500 x 2000
    var imageUrl = 'https://i.imgur.com/bXA34EQ.jpg';

    var southWestSize = map.unproject([0, 2000], map.getMaxZoom());
    var northEastSize = map.unproject([1500, 0], map.getMaxZoom());
    L.imageOverlay(imageUrl, new L.LatLngBounds(southWestSize, northEastSize)).addTo(map);

    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(map);
    }
    map.on('click', onMapClick);

    L.marker(map.unproject([800, 300])).addTo(map).bindPopup("<b>I'm a dog!</b><br />I am a popup.<br /> ").openPopup();


</script>

我在幾個層面上都在努力：

我不明白如何為圖片適當設置setView。 傳單需要什么？
我不知道如何獲取圖像的經緯度坐標
我不知道如何控制圖像在屏幕上的位置，也不知道其大小，以免圖像看起來不整齊

對於那些處於類似情況的人，我從這些來源中獲得了部分幫助：

Leaflet是非地圖圖像的好工具嗎？

http://omarriott.com/aux/leaflet-js-non-geographical-imagery/

http://maps.mixedbredie.net/leaflet/image.html

Answer 1

我使用一種更簡單的方法來顯示帶有傳單的大圖像，然后包括一個在單擊圖像時顯示坐標的函數。 選擇興趣點，單擊，然后將坐標復制到標記的代碼中。

下面的代碼說明了要點。 我還在https://peter-thomson.com/leaflet-map-tutorial/leaflet-map-tutorial-how-to-add-markers-and-popups-to-an-image-or-diagram上寫了一個教程-displayed-使用-leaflet.html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Display images with icons using leaflet</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> </head> <body> <h1>Display images with icons using leaflet</h1> <div id="image-map" style="width: 1152px; height: 864px; border: 1px solid #AAA;"></div> <script> // Using leaflet.js to pan and zoom a big image. var map = L.map('image-map', { minZoom: 1, maxZoom: 4, center: [0, 0], zoom: 1, maxBoundsViscosity: 1, crs: L.CRS.Simple }); //zoom 4 full size image is 4608px * 3456 px //zoom 3 2304 * 1728 //zoom 2 1152 * 864 //zoom 1 576 * 432 var image = L.imageOverlay("https://peter-thomson.com/images/Dolomites%202016%20Peter%20A/960/P1050579.JPG", [ [0, 0], [432, 576] ]); //initial size ( at zoom 0, double size at zoom 1 ) image.addTo(map); // tell leaflet that the map is exactly as big as the image map.setMaxBounds(new L.LatLngBounds([0, 0], [432, 576])); // prevent panning outside the image area L.tileLayer('', { attribution: '&copy; <a href="https://peter-thomson.com">Peter Thomson 2018</a>' }).addTo(map); //note - don't change bounds after adding marker coordinates var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(map); } map.on('click', onMapClick); var DownIcon = L.Icon.extend({ options: { iconSize: [40, 40], // size of the icon iconAnchor: [20, 40], // point of the icon which will correspond to marker's location popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor } }); var downblueIcon = new DownIcon({ iconUrl: 'https://peter-thomson.com/appdevelopmenttutorials/leaflet-map/down-blue-icon.png' }), downyellowIcon = new DownIcon({ iconUrl: 'https://peter-thomson.com/appdevelopmenttutorials/leaflet-map/down-yellow-icon.png' }); mark1 = L.marker([247.433334, 312.5], { icon: downyellowIcon }).bindPopup(L.popup({ maxWidth: 500 }).setContent("Duron Pass: the far point of the walk. There is a path along the ridge to the left from the top of the pass")).addTo(map); mark2 = L.marker([203.933334, 364.5], { icon: downblueIcon }).bindPopup(L.popup({ maxWidth: 500 }).setContent("We followed this path")).addTo(map); </script> </body> </html>

使用Leaflet在圖像上創建覆蓋

問題描述

1 個解決方案

解決方案1
1 2018-04-26 21:17:32

使用Leaflet在圖像上創建覆蓋

問題描述

1 個解決方案

解決方案1 1 2018-04-26 21:17:32

解決方案1
1 2018-04-26 21:17:32