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

偏移问题，我首先想到的是，百度地图采用的是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 "ol/tilegrid/TileGrid";
import TileImage from "ol/source/TileImage";
import Tile from "ol/layer/Tile";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import Projection from "ol/proj/Projection";
import {addProjection, addCoordinateTransforms} from "ol/proj";
import {applyTransform} from "ol/extent";

export default {
    name: "HelloWorld",
    mounted() {
        let center = [108.94238,34.26097]; //西安钟楼
        // let center = [108.964031,34.217865]; //西安大雁塔
        // let center = [116.411794, 39.9068]; //北京东单
        
        let extent = [72.004, 0.8293, 137.8347, 55.8271];

        let baiduMercator = new Projection({
            code: 'baidu',
            extent: applyTransform(extent, projzh.ll2bmerc),
            units: 'm'
        });

        addProjection(baiduMercator);
        addCoordinateTransforms('EPSG:4326', baiduMercator, projzh.ll2bmerc, projzh.bmerc2ll);
        addCoordinateTransforms('EPSG:3857', baiduMercator, projzh.smerc2bmerc, projzh.bmerc2smerc);

        let bmercResolutions = new Array(19);
        for (let i = 0; i < 19; ++i) {
            bmercResolutions[i] = Math.pow(2, 18 - i);
        }

        let baidu = new Tile({
            source: new TileImage({
                projection: 'baidu',
                maxZoom: 18,
                tileUrlFunction: function(tileCoord) {
                    let x = tileCoord[1];
                    let y = tileCoord[2];
                    let z = tileCoord[0];
                    return "https://api.map.baidu.com/customimage/tile?&x="+x+"&y="+y+"&z="+z+"&udt=20170927&scale=1&ak=8d6c8b8f3749aed6b1aff3aad6f40e37&styles=t%3Aland%7Ce%3Aall%7Cc%3A%2300121cff%2Ct%3Awater%7Ce%3Aall%7Cc%3A%2300445dff%2Ct%3Ahighway%7Ce%3Aall%7Cc%3A%2307313fff%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Aall%7Cv%3Aon%7Cc%3A%23003242ff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alabel%7Ce%3Al.t.s%7Cv%3Aon%7Cc%3A%2335bd8500%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alabel%7Ce%3Al.t.f%7Cv%3Aon%7Cc%3A%2335bd85ff%7Cw%3A1%2Ct%3Abuilding%7Ce%3Aall%7Cv%3Aon%7Cc%3A%231692beff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%2Ct%3Apoi%7Ce%3Al.t.f%7Cv%3Aon%7Cc%3A%2335bd85ff%2Ct%3Apoi%7Ce%3Al.t.s%7Cv%3Aon%7Cc%3A%2335bd8500%2Ct%3Apoi%7Ce%3Al.i%7Cv%3Aoff%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aroad%7Ce%3Al.i%7Cv%3Aoff"

                },
                tileGrid: new TileGrid({
                    resolutions: bmercResolutions,
                    origin: [0, 0],
                    extent: applyTransform(extent, projzh.ll2bmerc),
                    tileSize: [256, 256]
                })
            })
        });

        let iconFeature = new Feature({
            geometry: new Point(center),
            name: "Null Island",
            population: 4000,
            rainfall: 500,
        });

        let iconStyle = new Style({
            image: new Icon({
				scale: 1,
				// anchorXUnits: 'fraction',
				// anchorYUnits: 'pixels',
				src: require("../assets/police.png"),
            }),
        });

        iconFeature.setStyle(iconStyle);

        let vectorSource = new VectorSource({
            features: [iconFeature],
        });

        let vectorLayer = new VectorLayer({
            source: vectorSource,
        });

        let map = new Map({
            target: 'map',
            layers: [baidu, vectorLayer],
            view: new View({
                center: center,
                zoom: 13,
                projection: "EPSG:4326"
            })
        });
    },
};
</script>

<style scoped>
#map {
    width: 100%;
    height: 100vh;
}
</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

加载出来几乎是没有偏移的，和天地图的效果一样，大家可以利用天地图的api验证。