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

最新推荐文章于 2024-09-13 17:10:25 发布

原创

最新推荐文章于 2024-09-13 17:10:25 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #gis

本文介绍了一种针对百度地图瓦片坐标系特殊性进行地图显示纠偏的方法。通过自定义TileUrlFunction来适配百度地图的Y轴方向，解决了地图加载时的位置偏移问题。

对于一般瓦片来说，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 }