openlayers 3 加载地图瓦片数据

openlayers 是一套开源的js地图渲染框架,数据源可以使用天地图的数据源。

map对象相当如一个容器,它上面可以铺放多个layer,layer可以加载数据源或其它作用。

有关openlayers 的详细介绍,请参考http://openlayers.org/

下面创建一个layer

urlTemplate中包含x,y,z(z:地图级数,x:x方向序数, y:y方向序数)

function newTilesUrlLayer(urlTemplate, tileSize, zeroLevelSize) {
    var resolutions = new Array(22);
    for (var i = 0, ii = resolutions.length; i < ii; ++i) {
        resolutions[i] = zeroLevelSize / Math.pow(2, i) / 512;
    }
    var layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tileSize: tileSize,
            tileUrlFunction: tileUrlFunctionCallBack,
            projection: 'EPSG:4326',
            //tilePixelRatio: tileSize / 256,
            tileGrid: new ol.tilegrid.TileGrid({
                resolutions: resolutions,
                tileSize: tileSize,
                origin:[-180,-90]
		    })
        }),
        name: ''
    });

    function tileUrlFunctionCallBack(tileCoord, pixelRatio, projection) {
        var z = tileCoord[0];
        var x = tileCoord[1];
        var y = tileCoord[2];

        var xStr4 = "0000" + x.toString();
        xStr4 = xStr4.substr(xStr4.length - 4, 4);
        var yStr4 = "0000" + y.toString();
        yStr4 = yStr4.substr(yStr4.length - 4, 4);

        var url = urlTemplate.replace('{z}', z.toString());
        url=url.replace('{y}', yStr4);
	    url=url.replace('{y}', yStr4);
        url = url.replace('{x}', xStr4);
        url = url.replace('{x}', xStr4);
        return url
    }

    return layer;
}

这里的tileUrlFunctionCallBack淡淡的

就是解析数据源地址的回调函数。

以下给出一个应用的例子的完整代码:

1. Itelluro.ol.js

/**
 * those are for pulling tiles from Itelluro tiles source address, which would return a new layer or map that is access to openlayer3.
 * refer to http://openlayers.org
 */

//
// map

/**
 * @param {string} id The container for the map.
 * @param {number} numLevels The maximum zoom level used to determine the resolution constraint.
 * @param {number} dsEast  MaxX extent coordinates.
 * @param {number} dsWest MinX extent coordinates
 * @param {number} dsSouth MinY extent coordinates
 * @param {numbere} dsNorth MaxY extent coordinates
 * @param {string} sourcePackageKey Source Package Key of tiles' provider.
 * @param {string} url URL address of tiles' provider.
 * @param {number} tileSize The pixel of tile.
 * @param {number} zeroLevelSize  The size of zero level tile.
 * @return {ol.layer.Tile} return map
 */
function NewWebTilesMap(id, numLevels, dsEast, dsWest, dsSouth, dsNorth, 
            sourcePackageKey, url, tileSize, zeroLevelSize) {
   
    layer1 = newItelluroLayer(sourcePackageKey, url, tileSize, zeroLevelSize);

    var view = new ol.View({
        center: [(dsEast + dsWest) / 2, (dsNorth + dsSouth) / 2], zoom: 0, minZoom: 0, maxZoom: numLevels,
        projection: 'EPSG:4326',
        maxResolution: zeroLevelSize / tileSize,
    });

    var map = new ol.Map({
        layers: [layer1],
        target: id,
        view: view,
        renderer: "dom"
    });

    return map;
}

/**
 * @param {string} id The container for the map.
 * @param {number} numLevels The maximum zoom level used to determine the resolution constraint.
 * @param {number} dsEast  MaxX extent coordinates.
 * @param {number} dsWest MinX extent coordinates
 * @param {number} dsSouth MinY extent coordinates
 * @param {number} dsNorth MaxY extent coordinates
 * @param {string} root Local root directory of tiles' files.
 * @param {number} tileSize The pixel of tile.
 * @param {number} zeroLevelSize  The size of zero level tile.
 * @return {ol.layer.Tile} return map
 */
function NewLocalTilesMap(id, numLevels, dsEast, dsWest, dsSouth, dsNorth,
           root, tileSize, zeroLevelSize){
        
    layer1 = newLocalTilesLayer(root, tileSize, zeroLevelSize);

    var view = new ol.View({
        center: [(dsEast + dsWest) / 2, (dsNorth + dsSouth) / 2], zoom: 0, minZoom: 0, maxZoom: numLevels,
        projection: 'EPSG:4326',
        maxResolution: zeroLevelSize / tileSize,
    });

    var map = new ol.Map({
        layers: [layer1],
        target: id,
        view: view,
        renderer: "dom"
    });

    return map;
}


//
// layer

/**
 * @param {string} sourcePackageKey The package key address of tiles' provider.
 * @param {string} url URL address of tiles' provider.
 * @param {number} tileSize The pixel of tile.
 * @param {number} zeroLevelSize  The size of zero level tile.
 * @return {ol.layer.Tile} return layer
 */
function newItelluroLayer(sourcePackageKey, url, tileSize, zeroLevelSize) {
    if (url.indexOf("?") > 0)
        url += "&T={t}";
    else
        url += "?T={t}";
    url = url.replace('{t}', sourcePackageKey);
    return newWebTilesLayer(url, tileSize, zeroLevelSize);
}

/**
 * @param {string} root Local root directory of tiles' files.
 * @param {number} tileSize The pixel of tile.
 * @param {number} zeroLevelSize  The size of zero level tile.
 * @return {ol.layer.Tile} return layer
 */
function newLocalTilesLayer(root, tileSize, zeroLevelSize) {
    var imageType = "png";
    root += "\\{z}\\{y}\\{y}_{x}." + imageType;
    return newTilesUrlLayer(root, tileSize, zeroLevelSize);
}

/**
 * @param {string} url URL address of tiles' provider.
 * @param {number} tileSize The pixel of tile.
 * @param {number} zeroLevelSize  The size of zero level tile.
 * @return {ol.layer.Tile} return layer
 */
function newWebTilesLayer(url, tileSize, zeroLevelSize) {
    url = encodeURI(url);
    if (url.indexOf("?") > 0)
        url += "&L={z}&X={x}&Y={y}";
    else
        url += "?L={z}&X={x}&Y={y}";
    return newTilesUrlLayer(url, tileSize, zeroLevelSize);
}

/**
 * @param {string} urlTemplate URL template. Must include {x}, {y} or {-y}.
 * @param {number} tileSize The pixel of tile.
 * @param {number} zeroLevelSize  The size of zero level tile.
 * @return {ol.layer.Tile} return layer
 */
function newTilesUrlLayer(urlTemplate, tileSize, zeroLevelSize) {
    var resolutions = new Array(22);
    for (var i = 0, ii = resolutions.length; i < ii; ++i) {
        resolutions[i] = zeroLevelSize / Math.pow(2, i) / 512;
    }
    var layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tileSize: tileSize,
            tileUrlFunction: tileUrlFunctionCallBack,
            projection: 'EPSG:4326',
            //tilePixelRatio: tileSize / 256,
            tileGrid: new ol.tilegrid.TileGrid({
                resolutions: resolutions,
                tileSize: tileSize,
                origin:[-180,-90]
		    })
        }),
        name: ''
    });

    function tileUrlFunctionCallBack(tileCoord, pixelRatio, projection) {
        var z = tileCoord[0];
        var x = tileCoord[1];
        var y = tileCoord[2];

        var xStr4 = "0000" + x.toString();
        xStr4 = xStr4.substr(xStr4.length - 4, 4);
        var yStr4 = "0000" + y.toString();
        yStr4 = yStr4.substr(yStr4.length - 4, 4);

        var url = urlTemplate.replace('{z}', z.toString());
        url=url.replace('{y}', yStr4);
	    url=url.replace('{y}', yStr4);
        url = url.replace('{x}', xStr4);
        url = url.replace('{x}', xStr4);
        return url
    }

    return layer;
}

2. demo.html

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">
    <script src="../mapScript/ol.js" resource="http://openlayers.org/en/v3.15.1/build/ol.js"></script>
    <script src="../mapScript/Itelluro.ol.js"></script>
    <style type="text/css">
        .demo {
            width: 40%;
            height: 400px;
            margin-right: 10%;
            margin-bottom:5%;
            float: left;
        }


        .demo .olMap {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <h2>Openlayer3 使用示例</h2>
    <ol>
        <li><a href="#LOCAL">Demo "LOCAL"</a></li>
        <li><a href="#DOM">Demo "DOM"</a></li>
        <li><a href="#GIS">Demo "GIS"</a></li>
        <li><a href="#DEM">Demo "DEM"</a></li>
    </ol>
    <br />
    <hr />
    <div style=" margin:auto 50px">
        <div class="demo">
            <a name="LOCAL">Demo "LOCAL":</a>
            <div id="mapDiv1" class="olMap"></div>
        </div>
        <div class="demo">
            <a name="DOM">
                Demo "DOM":
            </a>
            <div id="mapDiv2" class="olMap"></div>
        </div>
        <div class="demo">
            <a name="GIS">
                Demo "GIS":
            </a>
            <div id="mapDiv3" class="olMap"></div>
        </div>
        <div class="demo">
            <a name="DEM">
                Demo "DEM":
            </a>
            <div id="mapDiv4" class="olMap"></div>
        </div>
    </div>
    <div style="clear:both;"></div>
    <hr />
    <script type="text/javascript">
        // Demo "LOCAL":
        var map1 = NewLocalTilesMap("mapDiv1", 6, 105.75140725069299, 105.68615672963949, 30.3320666017035, 30.376267769680222, 'tilesSource/out', 512, 2.25);


        // Demo "DOM":
        var url2 = "http://121.199.72.208/iTelluro.Server.yaan/Service/DOM/dom.ashx"
        var map2 = NewWebTilesMap("mapDiv2", 6, 180, -180, -90, 90,
            "bmng", url2, 512, 36);


        // Demo "GIS":
        var url3 = "http://121.199.72.208/iTelluro.Server.yaan/Service/GIS/gis.ashx";
        var map3 = NewWebTilesMap("mapDiv3", 6, 180, -180, -90, 90,
            "全球地质图", url3, 512, 36);


        // Demo "DEM":
        var url4 = "http://192.168.100.18/iTelluro.Server/Service/DEM/dem.ashx?img=png";
        NewWebTilesMap("mapDiv4", 6, 180, -180, -90, 90,
            "30mDEMS", url4, 150, 20);
    </script>
</body>
</html>


转载自:https://blog.csdn.net/u010061554/article/details/51220294

You may also like...