OpenLayers 3加載本地Google切片地圖

OpenLayers  提供了ol.source.XYZ 接口用以加載切片地圖。

本地切片地圖是用地圖切片下載器下載的Google道路圖層，由於軟件未激活，所以每張切片地圖上都有軟件作者的聯系方式，請忽略。

 

 

下載下來的切片地圖通過Windows自帶的iis發布，這樣就可以通過網絡地址來訪問切片數據。

 

 

首先，根據ol3的接口創建了一個js方法，這個方法會根據傳來的參數創建一個類型為ol.layer.Tile的圖層。

var TileLayer = function (options) {
    var layer = new ol.layer.Tile({
        extent: ol.proj.transformExtent(options.mapExtent, options.fromProject, options.toProject),
        source: new ol.source.XYZ({
            attributions: [options.attribution],
            url: options.url,
            tilePixelRatio: options.tilePixelRatio, // THIS IS IMPORTANT
            minZoom: options.mapMinZoom,
            maxZoom: options.mapMaxZoom
        })
    });
    return layer;
}

配置Google切片地圖的參數，並調用TileLayer方法，把返回的layer添加到地圖中就可以看到Google地圖正確的覆蓋到OpenLayers提供的底圖上。

//定義Google切片參數    
var defaults = {
        url: 'http://localhost:8082/{z}/{x}/{y}.png',
        mapExtent: [-2.0037508342787E7, -2.0037508342787E7, 2.0037508342787E7, 2.0037508342787E7],
        mapMinZoom: 1,
        mapMaxZoom: 14,
        attribution: new ol.Attribution({
            html: 'Tiles © GoogleMap'
        }),
        tilePixelRatio: 1,
        fromProject: "EPSG:102100",
        toProject: "EPSG:3857"
    };
var layer = new TileLayer(defaults);

　　

配置中的formProject是指Google地圖使用的投影，toProject是指底圖使用的投影。

        fromProject: "EPSG:102100",
        toProject: "EPSG:3857"

 使用這種配置看似比較復雜，但是在很多情況下還是比較有用的，比如我們可以改變mapExtent來控制切片塗層加載的范圍，改變zoom控制加載切片的比例范圍，等等。