如何爲平面1：1像素座標系配置Openlayers？

我正在嘗試構建遊戲激戰2的地圖，但是無法讓openlayers正確處理座標系並完全呈現地圖。如何爲平面1：1像素座標系配置Openlayers？

這裏是什麼，我有一個小提琴：兩軸https://jsfiddle.net/ndqb8rqx/

激戰世界廣場和49152像素。座標原點（[0, 0]）應該是西北。東南應該是[49152, 49152]。遊戲開發商製作了地圖圖塊可以作爲一項服務：https://wiki.guildwars2.com/wiki/API:Tile_service

我創建了一個基於Zoomify一個Projection設法處理這個問題：

var gw2Projection = new ol.proj.Projection({ 
    code: 'ZOOMIFY', 
    units: 'pixels', 
    extent: [0, -49152, 49152, 0] 
})

而且我還添加了遊戲的瓷磚作爲來自XYZ源的Tilelayer，如下所示：

new ol.layer.Tile({ 
    source: new ol.source.XYZ({ 
    url: 'https://tiles.guildwars2.com/1/1/{z}/{x}/{y}.jpg', 
    projection: gw2Projection 
    }), 
}),

第一個問題是，openlayers不顯示完整的映射。地圖實際上比小提琴表演更向南和東延伸。實際上在小提琴中顯示的右下邊緣實際上是[32768, 32768]，但是該地圖延伸到[49152, 49152]。看起來，當完全縮小時，openlayers只需將座標系縮小到單個區域的區域即可。相反，我希望座標與像素匹配1：1。

另一個問題是目前北方向的y座標增加。我想反轉y軸，使得y座標在南方向增加。

來源

2017-12-02 FrederikNS

@ahocevar將我推向正確的方向。創建自定義tilegrid的建議是必要的，但不是設置縮放級別，而是需要設置實際分辨率。

所以通過添加這樣的tilegrid：

var tilegrid = new ol.tilegrid.TileGrid({ 
    extent: extent, 
    resolutions: [128, 64, 32, 16, 8, 4, 2, 1] 
});

層源像這樣在使用它：

source: new ol.source.XYZ({ 
    tileGrid: tilegrid, 
    url: 'https://tiles.guildwars2.com/1/1/{z}/{x}/{y}.jpg', 
    projection: gw2Projection 
}),

最後將它添加到視圖，以及：

view: new ol.View({ 
    center: ol.extent.getCenter(extent), 
    zoom: 1, 
    projection: gw2Projection, 
    extent:extent, 
    resolutions: tilegrid.getResolutions() 
})

現在顯示整個地圖，並且座標是正確的。 Y軸仍然是負面的。

這裏有結果的小提琴，我還包括良好的措施的TileDebug層：https://jsfiddle.net/kay99yor/1/

來源

2017-12-07 21:07:31 FrederikNS

以使這項工作的關鍵是一個自定義的tile網格的定義，即用正確程度和MAXZOOM：

var tilegrid = new ol.tilegrid.createXYZ({ 
    extent: gw2Projection.getExtent(), 
    maxZoom: 7 
});

然後XYZ源與tilegrid配置：

source: new ol.source.XYZ({ 
    url: 'https://tiles.guildwars2.com/1/1/{z}/{x}/{y}.jpg', 
    projection: gw2Projection, 
    tileGrid: tilegrid 
})

同時配置該視圖與該瓷磚網格的決議：

view: new ol.View({ 
    center: ol.extent.getCenter(gw2Projection.getExtent()), 
    extent: gw2Projection.getExtent(), 
    zoom: 1, 
    resolutions: tilegrid.getResolutions() 
}

我有crea提供了一個更新的小提琴，使您的地圖工作：https://jsfiddle.net/kay99yor/。

來源

2017-12-04 09:09:05 ahocevar

謝謝你的回答，但不幸的是我真的沒有看到有區別嗎？座標相同，y軸方向仍然相同，並且地圖的缺失部分仍未顯示。我可以看到的唯一區別是您將視圖集中在地圖上。 – FrederikNS

如何爲平面1：1像素座標系配置Openlayers？

回答

相關問題