圖像上的傳單自定義座標

我有一個尺寸爲8576x8576px的圖像，我想使座標匹配1：1。另外我想要在圖像中心的座標0,0（現在中心是-128,128）。我也想顯示座標。我想爲用戶插入座標放置一個定位按鈕，然後在地圖上找到它們。這樣的事情：http://xero-hurtworld.com/map_steam.php （我使用相同的圖像，但更大）。我製作了268像素的大小。圖像上的傳單自定義座標

我迄今爲止代碼：

https://jsfiddle.net/ze62dte0/

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Map</title> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> 
    <!--[if lte IE 8]> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> 
    <![endif]--> 
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js" charset="utf-8"></script> 
    <script> 
     function init() { 
     var mapMinZoom = 0; 
     var mapMaxZoom = 3; 
     var map = L.map('map', { 
      maxZoom: mapMaxZoom, 
      minZoom: mapMinZoom, 
      crs: L.CRS.Simple 
     }).setView([0, 0], mapMaxZoom); 



    window.latLngToPixels = function(latlng){ 
    return window.map.project([latlng.lat,latlng.lng], window.map.getMaxZoom()); 
    }; 
    window.pixelsToLatLng = function(x,y){ 
    return window.map.unproject([x,y], window.map.getMaxZoom()); 
    }; 

     var mapBounds = new L.LatLngBounds(
      map.unproject([0, 8576], mapMaxZoom), 
      map.unproject([8576, 0], mapMaxZoom)); 

     map.fitBounds(mapBounds); 
     L.tileLayer('{z}/{x}/{y}.jpg', { 
      minZoom: mapMinZoom, maxZoom: mapMaxZoom, 
      bounds: mapBounds, 
      noWrap: true, 
      tms: false 
     }).addTo(map); 

     L.marker([0, 0]).addTo(map).bindPopup("Zero"); 

     L.marker([-128, 128]).addTo(map).bindPopup("center"); 

     var popup = L.popup(); 

     <!-- Click pop-up> 
     var popup = L.popup(); 

     function onMapClick(e) { 
      popup 
      .setLatLng(e.latlng) 
      .setContent("You clicked in " + e.latlng.toString()) 
      .openOn(map); 
     } 

     map.on('click', onMapClick); 

     } 
    </script> 
    <style> 
     html, body, #map { width:100%; height:100%; margin:0; padding:0; } 
    </style> 
    </head> 
    <body onload="init()"> 
    <div id="map"></div> 
    </body> 
</html>

來源

2016-01-06 RogerHN

如果我理解正確的話，你想類似L.CRS.Simple一個CRS是放置0/0/0瓦（瓦大小268px，這是8576/2））以便：

位置[0, 0]位於該圖塊的中心。
整個世界（即整個瓦片0/0/0）從位置[-8576/2, -8576/2]到[8576/2, 8576/2]。

你只需要調整L.CRS.Simple與適當的轉換，以說明這種規模1/2 5 = 1/32（而不是1）和偏移8576 * 1/32/2 = 268/2 = 134（而不是0.5）。

L.CRS.MySimple = L.extend({}, L.CRS.Simple, { 
    transformation: new L.Transformation(1/32, 134, -1/32, 134) 
}); 

var map = L.map('map', { 
    maxZoom: mapMaxZoom, 
    minZoom: mapMinZoom, 
    crs: L.CRS.MySimple 
}).setView([0, 0], mapMaxZoom);

演示：http://plnkr.co/edit/5SQqp7SP4nf8muPM5iso?p=preview（我用Plunker代替的jsfiddle因爲你提供HTML一整頁的代碼，而預計的jsfiddle你分割你的HTML，CSS和JavaScript代碼到單獨的塊）。

至於顯示座標和「定位」按鈕，這將是很容易實現，以便它類似於你提到的例子。如果您需要幫助，請隨時打開新的問題。

在上面的演示中，我使用了Leaflet.Coordinates plugin來快速實現這兩個功能（請參閱地圖左下角的控件;您必須在地圖上開始移動鼠標以顯示座標;單擊該控件以打開編輯模式）。

編輯：

至於Leaflet.Coordinates插件，它包裝顯示座標經度留在[-180; 180度。

在你的情況下，座標不是度數，沒有包裝經度的點。

我認爲這是點擊彈出窗口和控件之間的座標差異的原因。

簡單的補丁插件代碼，以防止包裝：

// Patch first to avoid longitude wrapping. 
L.Control.Coordinates.include({ 
    _update: function(evt) { 
    var pos = evt.latlng, 
     opts = this.options; 
    if (pos) { 
     //pos = pos.wrap(); // Remove that instruction. 
     this._currentPos = pos; 
     this._inputY.value = L.NumberFormatter.round(pos.lat, opts.decimals, opts.decimalSeperator); 
     this._inputX.value = L.NumberFormatter.round(pos.lng, opts.decimals, opts.decimalSeperator); 
     this._label.innerHTML = this._createCoordinateLabel(pos); 
    } 
    } 
});

更新演示：http://plnkr.co/edit/M3Ru0xqn6AxAaSb4kIJU?p=preview

來源

2016-01-06 18:39:19 ghybs

太謝謝你了！有效！我想要的確切方式！ – RogerHN

不客氣，謝謝你的反饋。請你可以考慮加註並接受這個答案？這是堆棧溢出系統來感謝人們，儘管當然一個很好的評論也非常感謝！ :-) – ghybs

我注意到的唯一情況是左下角控件顯示的座標和我點擊地圖時有所不同。例如，如果我在紐約（1208，-1864）上放置標記，則控件上顯示的座標不同。我如何讓他們看起來一樣？再次感謝！ – RogerHN

圖像上的傳單自定義座標

回答

相關問題