openlayer加载在线百度地图_openlayers加载自定义百度地图

作者：很楠不爱3 | 2024-02-27 20:23:09
踩
openlayers加载自定义百度地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Openlayer加载在线百度瓦片地图</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="baiduMap" style="width: 100%"></div>
</body>


<script>
    // 百度地图层
    var baiduMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tilePixelRatio: 2,    //瓦片像素比
            tileUrlFunction: function (tileCoord) {  // 参数tileCoord为瓦片坐标
                var z = tileCoord[0];
                var x = tileCoord[1];
                var y = tileCoord[2];
 
                // 计算当前层级下瓦片总数的一半，用于定位整个地图的中心点
                var halfTileNum = Math.pow(2, z - 1);
                // 原点移到中心点后，计算xy方向上新的坐标位置
                var baiduX = x - halfTileNum;
                var baiduY = y + halfTileNum;
 
                // 百度瓦片服务url将负数使用M前缀来标识
                if (baiduX < 0) {
                    baiduX = 'M' + (-baiduX);
                }
                if (baiduY < 0) {
                    baiduY = 'M' + (-baiduY);
                }
 
                // 返回经过转换后，对应于百度在线瓦片的url
                return 'http://online2.map.bdimg.com/onlinelabel/?qt=tile&x=' + baiduX + '&y=' + baiduY + '&z=' + z + '&styles=pl&udt=20160321&scaler=2&p=0';
            }
        })
    });
 
    // 创建地图
    var map = new ol.Map({
        layers: [
            baiduMapLayer
        ],
        view: new ol.View({
            // 设置成都为地图中心
            center: [104.06, 30.67],
            projection: 'EPSG:4326',
            zoom: 4
        }),
        target: 'baiduMap'
    });
</script>
    var projection = ol.proj.get("EPSG:3857");
    var resolutions = [];
    for(var i=0; i<19; i++){
        resolutions[i] = Math.pow(2, 18-i);
    }
    var tilegrid  = new ol.tilegrid.TileGrid({
        origin: [0,0],
        resolutions: resolutions
    });
	/*
    var baidu_source = new ol.source.TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
            if(!tileCoord){
                return "";
            }
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
			
			// 百度瓦片服务url将负数使用M前缀来标识
            if(x<0){
                x = "M"+(-x);
            }
            if(y<0){
                y = "M"+(-y);
            }
            //## 核心代码处，将百度地图的调用网址修改为离线的地图瓦片服务网址
            return "http://localhost:8003/Map/roadmap/"+z+"/"+x+"/"+y+".png"
        }
    });

    var baidu_layer = new ol.layer.Tile({
        source: baidu_source
    });
 */
 var baidu_layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tilePixelRatio: 2,    //瓦片像素比
            tileUrlFunction: function (tileCoord) {  // 参数tileCoord为瓦片坐标
                var z = tileCoord[0];
                var x = tileCoord[1];
                var y = tileCoord[2];
 
                // 计算当前层级下瓦片总数的一半，用于定位整个地图的中心点
                var halfTileNum = Math.pow(2, z - 1);
                // 原点移到中心点后，计算xy方向上新的坐标位置
                var baiduX = x - halfTileNum;
                var baiduY = y + halfTileNum;
 
                // 百度瓦片服务url将负数使用M前缀来标识
                if (baiduX < 0) {
                    baiduX = 'M' + (-baiduX);
                }
                if (baiduY < 0) {
                    baiduY = 'M' + (-baiduY);
                }
 
                // 返回经过转换后，对应于百度在线瓦片的url
                //return 'http://online2.map.bdimg.com/onlinelabel/?qt=tile&x=' + baiduX + '&y=' + baiduY + '&z=' + z + '&styles=pl&udt=20160321&scaler=2&p=0';
				return "http://localhost:8003/Map/roadmap/"+z+"/"+baiduX+"/"+baiduY+".png"
            }
        })
    });
/*    百度转换方法填入坐标系，地址统一为北客站
     var projection =new BMap.MercatorProjection();
                                                        百度地图拾取的坐标
     var point = projection.lngLatToPoint(new BMap.Point(108.94318,34.385242));
     x：12127631.28
     y:4056293.97
     */
    var map = new ol.Map({
        target: 'map',
        layers: [baidu_layer],
        view: new ol.View({
            center:[12127787.24,4056019],
            zoom: 15
        })
    });
    /*
    使用ol自带的转换使用方式,，因为地图是百度切片的原因出现比较大的偏差
     */
    var map = new ol.Map({
        target: 'map2',
        layers: [baidu_layer],
        view: new ol.View({
            //谷歌地图拾取的坐标
             center : ol.proj.transform([108.938981,34.375414], 'EPSG:4326', 'EPSG:3857'),
            zoom: 15
        })
    });
 
 
 
</script>
</html>

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/155741