Openlayers 3載入XYZ示例

openlayers3中有個ol.source.xyz類，可以載入tile瓦片圖層，本文只是做個說明，介紹如何識別以及如何正確載入這些圖層。

明顯的名稱.png

arcserver切片.png

這是arcserver的切片，感覺xyz不明顯，但是組織形式也和xyz是一樣的，其實，稍微想想，除了名字不一樣，豈不都是一樣，那麼我們認為本質就是一樣的，只是有個障眼法，問題就出在，arcserver的是16進製制的，位數是行r8位數，列c8位數，餘位補0。

這裡需要對名稱轉下，通過正常的url「翻譯」到arcserver的16進製制。

var road= new ol.layer.tile(
})})
//將10進製轉16進製制，餘位補0，湊成arcserver的切片格式
function padleft(num, val)

通過tileurlfunction重寫url獲取函式，構造成正確的，這裡y-1不一定的，有的需要加1，有的需要z+-1，如果組合混亂的話，對z，y微微加減一調整下，應該很快就能湊齊地圖。

geowebcache切片.png

變幻而不是變形，說明萬變不離其宗啊，geowebcache切片看著雖然很複雜，但是也是xyz嗎，只不過變幻了，難道就認不出了？明顯epsg_900913是座標系，後面的_10是z。其他的雖然也是摸不著頭腦，可以了解下geowebcache的切片組織規範，比如看下原始碼，然後理解了，稍微調整即可。

var road= new ol.layer.tile(
})});//字元擷取
var padleft_ = function(num, val) ;
//xy行列轉換
var convert_=function(zoomlevel, x, y) 
if (y < 0 || y > extent - 1) 
var gridloc = [x, extent - y - 1, zoomlevel];
return gridloc;
}

這個的確有點複雜了。。。

綜述：本文只是大概介紹下常見的xyz格式和變體，對於簡單的xyz可以直接format載入，對於複雜的需要使用tileurlfunction 甚至tilegrid組合，重寫url，將標準的xyz，「翻譯」成脾氣不同的切片們，讓他們乖乖聽話，組成我們需要的切片。

Openlayers 3載入XYZ示例

openlayers3 自定義打包

使用OPENLAYERS 3 顯示聚合資料

OpenLayers 3 之動態點擴散效果

Openlayers 3載入XYZ示例

openlayers3 自定義打包

使用OPENLAYERS 3 顯示聚合資料

OpenLayers 3 之 動態點擴散效果

相關推薦

OpenLayers 3 之動態點擴散效果