openlayers3 application (1): call Baidu offline tile map

The previous article introduced the use of openlayers3 to load Baidu online maps. For some projects or application scenarios, such as units that are not allowed to access the Internet, some projects only load applications for a certain area map, such as a county map, you can use Baidu to download The tile map is deployed separately on the server or locally.

This article mainly describes how to use openlayers3 to call the downloaded Baidu offline tile map. There are many tile map downloaders on the Internet, so I will not describe them in detail here.

Openlayers3 loads offline Baidu tile map, the effect and code are as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="ol/ol3/css/ol.css" />
    <style type="text/css">
        body, #mainMap {
            border: 0px;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-size: 13px;
        }
    </style>
    <script type="text/javascript" src="ol/ol3/build/ol-debug.js"></script>

</head>
<body>

    <div id="mainMap">

    </div>

</body>
</html>
<script type="text/javascript">
    // custom resolution and tile coordinate system
    var resolutions = [];
    var maxZoom = 18;

    // Calculate the resolution used by Baidu
    for (var i = 0; i <= maxZoom; i++) {
        resolutions[i] = Math.pow(2, maxZoom - i);
    }
    var tilegrid = new ol.tilegrid.TileGrid (ol
        origin: [0, 0],
        resolutions: resolutions // set the resolution
    });

    // Create a data source for Baidu Maps
    var baiduSource = new ol.source.TileImage({
        projection: 'EPSG:3857',
        tileGrid: tilegrid,
        tileUrlFunction: function (tileCoord, pixelRatio, proj) {
            var z = tileCoord [0];
            var x = tileCoord[1];
            var y = tileCoord[2];

            // Baidu tile service url will use the M prefix to identify negative numbers
            if (x < 0) {
                x = -x;
            }
            if (y < 0) {
                y = -y;
            }

            return "tiles/" + z + "/" + x + "/" + y + ".png";
        }
    });

    // Baidu map layer
    var baiduMapLayer2 = new ol.layer.Tile({
        source: baiduSource
    });

    // create map
    var map = new ol.Map ({
        layers: [
            baiduMapLayer2
        ],
        view: new ol.View({
            // Set Chengdu as the map center
            center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
            zoom: 3
        }),
        target: 'mainMap'
    });
</script>

openlayers3 application (1): call Baidu offline tile map

Guess you like