openlayers加载百度地图二——ol5加载百度地图

对于一般瓦片来说，origin在左上角，X轴从左至右递增，Y轴是从上往下递增（先计算左上角，然后计算右下角）

但是，百度瓦片Origin在[0,0]，X轴从左至右递增，Y轴从下往上递增（从左下角到右上角）

所以，就要在tileUrlFunction上下点功夫了，废话不多说，直接撸代码吧：

<!--
 * @Author: yang xiunan
 * @Date: 2020-10-31 16:03:42
 * @LastEditTime: 2020-11-09 09:51:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ol6d:\myCode\ol5\src\components\HelloWorld.vue
-->
<template>
    <div class="box">
        <div id="map"></div>
    </div>
</template>

<script>
/* eslint-disable */
import Map from "ol/Map";
import View from "ol/View";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Fill, Icon, Stroke, Style, Text } from "ol/style";
import TileGrid from "ol/tilegrid/TileGrid";
import TileImage from "ol/source/TileImage";
import Tile from "ol/layer/Tile";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
export default {
    name: "HelloWorld",
    mounted() {
        let center = [108.946994, 34.261361];

        let resolutions = [];
        for (let i = 0; i < 19; i++) {
            resolutions[i] = Math.pow(2, 18 - i);
        }
        let tilegrid = new TileGrid({
            origin: [0, 0],
            resolutions: resolutions,
        });

        let baidu_source = new TileImage({
            projection: "EPSG:3857",
            tileGrid: tilegrid,
            tileUrlFunction: function (tileCoord, pixelRatio, proj) {
                if (!tileCoord) {
                    return "";
                }
                let z = tileCoord[0];
                let x = tileCoord[1];
                let y = tileCoord[2];

                if (x < 0) {
                    x = "M" + -x;
                }
                if (y < 0) {
                    y = "M" + -y;
                }

                return (
                    // "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" +
                    // x +
                    // "&y=" +
                    // y +
                    // "&z=" +
                    // z +
                    // "&styles=pl&udt=20151021&scaler=1&p=1"

                    "https://api.map.baidu.com/customimage/tile?&x=" +
                    x +
                    "&y=" +
                    y +
                    "&z=" +
                    z +
                    "&udt=20201022&scale=1&styles=t%3Aland%7Ce%3Aall%7Cc%3A%2300121cff%2Ct%3Awater%7Ce%3Aall%7Cc%3A%2300445dff%2Ct%3Ahighway%7Ce%3Aall%7Cc%3A%2307313fff%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Aall%7Cv%3Aon%7Cc%3A%23003242ff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alabel%7Ce%3Al.t.s%7Cv%3Aon%7Cc%3A%2335bd8500%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alabel%7Ce%3Al.t.f%7Cv%3Aon%7Cc%3A%2335bd85ff%7Cw%3A1%2Ct%3Abuilding%7Ce%3Aall%7Cv%3Aon%7Cc%3A%231692beff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%2Ct%3Apoi%7Ce%3Al.t.f%7Cv%3Aon%7Cc%3A%2335bd85ff%2Ct%3Apoi%7Ce%3Al.t.s%7Cv%3Aon%7Cc%3A%2335bd8500%2Ct%3Apoi%7Ce%3Al.i%7Cv%3Aoff%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aroad%7Ce%3Al.i%7Cv%3Aoff"
                );
            },
        });

        let baidu_layer = new Tile({
            source: baidu_source,
        });

        let iconFeature = new Feature({
            geometry: new Point(center),
            name: "Null Island",
            population: 4000,
            rainfall: 500,
        });

        let iconStyle = new Style({
            image: new Icon({
                scale: 1,
                // anchorXUnits: 'fraction',
                // anchorYUnits: 'pixels',
                src: require("../assets/police.png"),
            }),
        });

        iconFeature.setStyle(iconStyle);

        let vectorSource = new VectorSource({
            features: [iconFeature],
        });

        let vectorLayer = new VectorLayer({
            source: vectorSource,
        });

        let map = new Map({
            target: "map",
            layers: [baidu_layer, vectorLayer],
            view: new View({
                center: center,
                zoom: 11,
                projection: "EPSG:4326",
            }),
        });
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
    width: 100%;
    height: 100vh;
}
</style>

加载出来效果如下：

地图是加载出来了，但是偏移严重，我设置的中心点108.946994, 34.261361，是西安钟楼的，但是加载出来，位置都偏移到北三环以外了。

怎么解决偏移问题呢，我们下节再聊。