OpenLayers3加载百度地图_vue3openlayers百度地图

BaiduMapSource.js

/**
 * 加载百度地图
 * @returns {ol.layer.Tile}
 */
function loadBaiduMap() {
    //数据源信息
    var attribution = new ol.Attribution({
        html: 'Copyright:© 2015 Baidu, i-cubed, GeoEye'
    });
    //地图范围
    var extent = [-20037508.34, -20037508.34, 20037508.34, 20037508.34];
    //瓦片大小
    var tileSize = 256;
    //瓦片参数原点
    var origin = [0, 0];
    //百度地图在线服务地址
    var urlTemplate = "http://online2.map.bdimg.com/tile/?qt=tile&x=" + '{x}' + "&y=" + '{y}' + "&z=" + '{z}' + "&styles=pl&udt=20141219&scaler=1";
    //通过范围计算得到地图分辨率数组resolutions
    var resolutions = getResolutions(extent, tileSize);
    //实例化百度地图数据源
    var baiduSource = new ol.source.TileImage({
        attributions: [attribution],
        tileUrlFunction: function (tileCoord, pixelRatio, projection) {
            //判断返回的当前级数的行号和列号是否包含在整个地图范围内
            if (this.tileGrid != null) {
                var tileRange = this.tileGrid.getTileRangeForExtentAndZ(extent, tileCoord[0], tileRange);
                if (!tileRange.contains(tileCoord)) {
                    return;
                }
            }
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
            return urlTemplate.replace('{z}', z.toString())
                .replace('{y}', y.toString())
                .replace('{x}', x.toString());
        },
        projection: ol.proj.get('EPSG:3857'), //投影坐标系
        tileGrid: new ol.tilegrid.TileGrid({
            origin: origin, //原点，数组类型，如[0,0],
            resolutions: resolutions, //分辨率数组
            tileSize: tileSize //瓦片图片大小
        })
    });
    //实例化百度地图瓦片图层
    var baiduLayer = new ol.layer.Tile({
        source: baiduSource
    });
    //map.addLayer(baiduLayer); //添加Baidu地图图层
    return baiduLayer;
}

/**
 * 加载百度卫星地图
 * @returns {ol.layer.Tile}
 */
function loadBaiduMapSate() {
    //数据源信息
    var attribution = new ol.Attribution({
        html: 'Copyright:© 2015 Baidu, i-cubed, GeoEye'
    });
    //地图范围
    var extent = [-20037508.34, -20037508.34, 20037508.34, 20037508.34];
    //瓦片大小
    var tileSize = 256;
    //瓦片参数原点
    var origin = [0, 0];
    //百度地图在线服务地址
    var urlTemplate = "https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/starpic/?qt=satepc&u=x="+ '{x}' +";y="+ '{y}' +";z="+'{z}'+";v=009;type=sate&fm=46&app=webearth2&v=009&udt=20190425";
    //通过范围计算得到地图分辨率数组resolutions
    var resolutions = getResolutions(extent, tileSize);
    //实例化百度地图数据源
    var baiduSource = new ol.source.TileImage({
        attributions: [attribution],
        tileUrlFunction: function (tileCoord, pixelRatio, projection) {
            //判断返回的当前级数的行号和列号是否包含在整个地图范围内
            if (this.tileGrid != null) {
                var tileRange = this.tileGrid.getTileRangeForExtentAndZ(extent, tileCoord[0], tileRange);
                if (!tileRange.contains(tileCoord)) {
                    return;
                }
            }
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
            return urlTemplate.replace('{z}', z.toString())
                .replace('{y}', y.toString())
                .replace('{x}', x.toString());
        },
        projection: ol.proj.get('EPSG:3857'), //投影坐标系
        tileGrid: new ol.tilegrid.TileGrid({
            origin: origin, //原点，数组类型，如[0,0],
            resolutions: resolutions, //分辨率数组
            tileSize: tileSize //瓦片图片大小
        })
    });
    //实例化百度地图瓦片图层
    var baiduLayer = new ol.layer.Tile({
        source: baiduSource
    });
    //map.addLayer(baiduLayer); //添加Baidu地图图层
    return baiduLayer;
}

/**
 * 通过范围计算得到地图分辨率数组resolutions
 * @param extent
 * @param tileSize
 * @returns {any[]}
 */
function getResolutions(extent, tileSize) {
    var width = ol.extent.getWidth(extent);
    var height = ol.extent.getHeight(extent);
    var maxResolution = (width <= height ? height : width) / (tileSize);//最大分辨率
    var resolutions = new Array(16);
    var z;
    for (var z = 0; z < 16; ++z) {
        resolutions[z] = maxResolution / Math.pow(2, z);
    }
    return resolutions; //返回分辩率数组resolutions
}

/**
 * 重新设置地图视图
 * @param {ol.Coordinate} center 中心点
 * @param {number} zoom 缩放级数
 */
function setMapView(center, zoom) {
    var view = map.getView(); //获取地图视图
    view.setCenter(center); //平移地图
    view.setZoom(zoom); //地图缩放
}
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

实现效果：