openlayers加载百度地图四——ol6加载百度地图_openlayers6 加载 百度地图

当把openlayers从5升级到6时，发现加载百度地图就发生瓦片错位的情况。

ol6加载瓦片的方式是从中心点依次向右下角递增，二ol5是从中心点依次向右上角递增，所以，需要把tileUrlFunction中的y坐标改为相反数即可：

<template>
    <div class="box">
        <div id="container"></div>
    </div>
</template>

<script>
/* eslint-disable */
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import TileImage from 'ol/source/TileImage';
import XYZ from 'ol/source/XYZ';
import TileGrid from 'ol/tilegrid/TileGrid';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {Icon, Style,Stroke,Fill} from 'ol/style';

export default {
	name: "home",
	components:{

	},
	data(){
		return {

        }
	},
	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";
            }
		});

		this.map = new Map({
			target:'container',
			layers: [ 
				new TileLayer({
					source:baidu_source,
				}),
			],
			view: new View({
				center: center,
				zoom:10,
				maxZoom:18,
				projection: "EPSG:4326"
			}) 
		})
	
        this.vectorlayer = this.addLayer("vector");
		this.addPoints();
    },
	methods:{
		// 加载图层
		addLayer(name){
			let layer = new VectorLayer({
				source:new VectorSource(),
				className:name,
			})
			this.map.addLayer(layer);
			return layer;
		},
		
		// 加载点
		addPoints(){
			let point = [108.94238,34.26097]; //西安钟楼
            let feature = new Feature({
                geometry:new Point(point),
            })
            feature.setStyle(new Style({
                    image: new Icon({
                        anchor: [0.5, 0.5],
                        src: require(`../assets/images/fire.png`),
                        crossOrigin: '',
                        scale:[0.5,0.5],
                        anchorXUnits: 'fraction',
                        anchorYUnits: 'pixels',
                    }),
                })
            )
			this.vectorlayer.getSource().addFeature(feature);
		},
	},
};
</script>

<style scoped lang="less">
.box {
    width: 100%;
	height: 100%;
	position: relative;
	#container{
		width:100%;
		height: 100%;
		/deep/ .ol-control{
			display:none;
		}
	}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

这样瓦片倒是不错位了，但是钟楼的坐标却显示到北三环以外去了，并且地图缩小时，钟楼的坐标更离谱的显示到国外去了。

那么，我们是否可以和上一节一样，用projzh解决偏移呢？我试了一下，发现还是无法解决。

抱歉，这个问题我暂时无法解决，哪位朋友如果有好的方法，我们一起讨论