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

最新推荐文章于 2025-05-26 18:53:39 发布

思考的行者

最新推荐文章于 2025-05-26 18:53:39 发布

阅读量2.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： openlayers 文章标签： gis javascript

本文链接：https://blog.youkuaiyun.com/xiaonankeji/article/details/109577203

openlayers 专栏收录该内容

7 篇文章

订阅专栏

本文介绍将OpenLayers从5升级到6后遇到的地图瓦片错位问题及解决方案。通过修改tileUrlFunction中的y坐标为相反数来适配OpenLayers 6加载瓦片的新方式。然而，此方法并未完全解决问题，例如标记位置出现偏差。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当把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>