图像上的传单自定义坐标

问题描述：

我有一个尺寸为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>

答

如果我理解正确的话，你想类似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

太谢谢你了！有效！我想要的确切方式！ – RogerHN

不客气，谢谢你的反馈。请你可以考虑加注并接受这个答案？这是堆栈溢出系统来感谢人们，尽管当然一个很好的评论也非常感谢！ :-) – ghybs

我注意到的唯一情况是左下角控件显示的坐标和我点击地图时有所不同。例如，如果我在纽约（1208，-1864）上放置标记，则控件上显示的坐标不同。我如何让他们看起来一样？再次感谢！ – RogerHN

图像上的传单自定义坐标

相关推荐