OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等)

前言

OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持多种常用的地图来源，包括天地图、百度地图、高德地图、ArcGIS地图、Bing地图、OSM地图、Google地图等。

---

一、加载天地图

1.前提条件

加载天地图前，需要先到天地图官网注册并申请应用密钥，官网地址为：国家地理信息公共服务平台 天地图

2.服务地址

瓦片地址如下（以矢量底图为例）：https://t0.tianditu.gov.cn/DataServer?T=vec_c&x=3233&y=673&l=12&tk=你的密钥

3.加载代码

//实例化map对象加载地图
        var map = new ol.Map({
            //地图容器div的id 
            target: 'container',           
            //地图容器中加载的图层
            layers: [
                //加载瓦片图层数据
                new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的密钥",                        
                        wrapX: false
                    })                    
                }),
                new ol.layer.Tile({
                    title: "天地图矢量图层注记",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的密钥",                        
                        wrapX: false
                    })                    
                })
            ],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'), //地图初始中心点
                //地图初始显示级别
                zoom: 4
            })
        });

---

二、加载百度地图

1.加载代码

//坐标参考系
        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];

                if (x < 0) {
                    x = "M" + (-x);
                }
                if (y < 0) {
                    y = "M" + (-y);
                }
                return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
            }
        });
        //百度地图
        var baidu_layer = new ol.layer.Tile({
            source: baidu_source
        });
        //地图容器
        var map = new ol.Map({
            target: 'container',
            layers: [baidu_layer],
            view: new ol.View({
                center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'),
                zoom: 4
            })
        });

---

三、加载高德地图

1.加载代码

 var gaodeMapLayer = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });

        var map = new ol.Map({
            layers: [gaodeMapLayer],
            view: new ol.View({
                center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'), //地图初始中心点
                projection: 'EPSG:3857',
                zoom: 4,
                minZoom: 1
            }),
            target: 'container'
        });

---

四、加载ArcGIS地图

1.加载代码

//实例化鼠标位置控件（MousePosition）
        var mousePositionControl = new ol.control.MousePosition({
            //坐标格式
            coordinateFormat: ol.coordinate.createStringXY(4),
            //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
            projection: 'EPSG:4326',
            //坐标信息显示样式，默认是'ol-mouse-position'
            className: 'custom-mouse-position',
            //显示鼠标位置信息的目标容器
            target: document.getElementById('mouse-position'),
            //未定义坐标的标记
            undefinedHTML: ' '
        });

        //实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'container', 
            //地图容器中加载的图层
            layers: [],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'),
                //地图初始显示级别
                zoom: 4 
            }),
            //加载控件到地图容器中
            controls: ol.control.defaults({//地图中默认控件
                //                attributionOptions: /** @type {ol.control.Attribution} */({
                //                    collapsible: true //地图数据源信息控件是否可展开,默认为true
                //                })
            }).extend([mousePositionControl])//加载鼠标位置控件
        });
      
        arcGISLayers = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' + 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
            })
        })
        //添加地图图层  
        map.addLayer(arcGISLayers); 

五、加载Bing地图

1.前提条件

加载Bing图前，需要先到官网注册并申请应用密钥，官网地址为：https://www.microsoft.com/en-us/maps

2.加载代码

//实例化Map对象加载地图
        var key = '你的密钥';
        var roads = new ol.layer.Tile({
            source: new ol.source.BingMaps({ key: key, imagerySet: 'Road' })
        });
        var map = new ol.Map({
            layers: [roads],
            target: 'container',
            view: new ol.View({
                center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'),
                zoom: 4
            })
        });

---

六、加载OSM地图

1.加载代码

 //实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'container',
            //地图容器中加载的图层
            layers: [
                //加载瓦片图层数据
                new ol.layer.Tile({
                    //图层对应数据源，此为加载OpenStreetMap在线瓦片服务数据
                    source: new ol.source.OSM() 
                })
            ],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'),
                //地图初始显示级别
                zoom: 4 
            })
        });

---

七、加载Google地图

1.加载代码

//实例化map对象加载地图
        var map = new ol.Map({
            //地图容器div的id
            target: 'container',
            //地图容器中加载的图层
            layers: [
                //加载瓦片图层数据
                new ol.layer.Tile({
                    title: "谷歌地图",
                    source: new ol.source.XYZ({
                        url: "http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z} ",
                        wrapX: false
                    })
                })
            ],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'),
                zoom: 4
            })
        });