openlayers加载titleGrid-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Tiles</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var oUrl="http://10.24.171.34/MERSI/20171116/"+"{z}/{x}/{y}.jpg";
    var layer=new ol.source.TileImage({
        projection: 'EPSG:4326',
        tileGrid: new ol.tilegrid.TileGrid({
            origin: ol.extent.getBottomLeft(new ol.proj.get("EPSG:4326").getExtent()),    // 设置原点坐标
            resolutions:[0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,0.01953125, 0.009765625, 0.0048828125, 0.00244140625],
            extent: [-180, -90, 180, 90],
            tileSize:[256,256],
        }),
        wrapX:false,
        tileUrlFunction:function(tileCoord, pixelRatio, projection) {
            var z = tileCoord[0];
            var x = tileCoord[1];
            /*var y = Math.pow(2, z) + tileCoord[2];*/
            var y = tileCoord[2];
            // wrap the world on the X axis
            var n = Math.pow(2, z + 1); // 2 tiles at z=0
            x = x % n;
            if (x * n < 0) {
                // x and n differ in sign so add n to wrap the result
                // to the correct sign
                x = x + n;
            }
            return oUrl.replace('{z}', z.toString())
                .replace('{y}', y.toString())
                .replace('{x}', x.toString());
        },
    })
    var map = new ol.Map({
        layers: [
            //osmSource,
            /*new ol.layer.Tile({
                source: osmSource
            }),*/
            new ol.layer.Tile({
                source: layer
            }),
            new ol.layer.Tile({
                source: new ol.source.TileDebug({
                    projection: 'EPSG:4326',
                    tileGrid: layer.getTileGrid()
                })
            })

        ],
        target: 'map',
        controls: ol.control.defaults({
            attribution: false,
        }).extend([
            new ol.control.FullScreen(), //全屏
            new ol.control.MousePosition({
                undefinedHTML: 'outside',
                projection: 'EPSG:4326',
                coordinateFormat: function(coordinate) {
                    return ol.coordinate.format(coordinate, '{x}, {y}', 5);
                }
            }), //经纬度坐标
            /*new ol.control.OverviewMap(),*/ //鸟瞰图
            new ol.control.ScaleLine(), // 比例尺
            new ol.control.ZoomSlider(), //滚动轴
            new ol.control.ZoomToExtent(), //回到最大
        ]),
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [116, 39],
            zoom: 4,
            minZoom: 0,
            maxZoom: 8,
            resolutions:[0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,0.01953125, 0.009765625, 0.0048828125, 0.00244140625], //设置分辨率
            extent: [-180, -90, 180, 90]
        })
    });
</script>
</body>
</html>