openlayer 配置百度地图_百度地图 linelayer 配置项-优快云博客

本文链接：https://blog.youkuaiyun.com/Principal_Z/article/details/117406428

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度地图图层</title>
    <style>
        #Map,
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
</head>

<body>
    <div id="Map" ref="Map"></div>
    <script>
        let map = new ol.Map({
            target: 'Map',
            layers: [],
            view: new ol.View({
                center: ol.proj.fromLonLat([37.41, 8.82]),
                zoom: 4
            })
        })

        function BaiduMap() {
            let resolutions = []
            for (let i = 0; i < 18; i++) {
                resolutions[i] = Math.pow(2, 18 - i)
            }
            let tilegrid = new ol.tilegrid.TileGrid({
                origin: [0, 0],
                resolutions
            })
            let baiduSource = new ol.source.TileImage({
                projection: 'BD09-MC',
                tileGrid: tilegrid,
                tileUrlFunction: function (tileCoord, pixelRatio, porj) {
                    let z = tileCoord[0]
                    let x = tileCoord[1]
                    let y = tileCoord[2] + 1
                    if (x < 0) {
                        x = 'M' + -x
                    }
                    y = -y
                    if (y < 0) {
                        y = 'M' + -y
                    }
                    let num = Math.ceil(Math.random() * 3)
                    return `http://maponline${num}.bdimg.com/onlinelabel/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20201110&scaler=2&p=0`
                }
            })
            let baiduLayer = new ol.layer.Tile({
                source: baiduSource
            })
            map.addLayer(baiduLayer)
        }
        BaiduMap()
    </script>
</body>

</html>