当把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>
这样瓦片倒是不错位了,但是钟楼的坐标却显示到北三环以外去了,并且地图缩小时,钟楼的坐标更离谱的显示到国外去了。
那么,我们是否可以和上一节一样,用projzh解决偏移呢?我试了一下,发现还是无法解决。
抱歉,这个问题我暂时无法解决,哪位朋友如果有好的方法,我们一起讨论