openlayers加载百度地图三——ol5加载百度地图，解决偏移问题

最新推荐文章于 2024-09-12 19:48:44 发布

原创

最新推荐文章于 2024-09-12 19:48:44 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#gis #js

偏移问题，我首先想到的是，百度地图采用的是bd09II坐标系，那是不是我们把wgs84坐标转换成bd09II再加载就好了呢？经过坐标转换之后发现，坐标偏移还是很严重。其实根本原因是：我们需要根据bd09II坐标系，生成baiduMercator投影。
怎么把3857投影转化成baiduMercator呢，在giuhub中tschaub给出了方法 projzh

下面我们就利用projzh加载百度地图：

<!--
 * @Author: yang xiunan
 * @Date: 2020-10-31 16:03:42
 * @LastEditTime: 2020-11-09 11:10:33
 * @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 projzh from "projzh";
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