調用這三個商業地圖服務，我們使用的都是切片（Tile）地圖服務，關于切片地圖的含義這里做簡單的介紹：
切片地圖就是指將顯示的地圖切成一塊一塊的(256 * 256)分別顯示加載。openlayers 3中有這樣圖層加載類，ol.layer.Tile,對應的source類有ol.source.TileImage,ol.source.XYZ,這兩者的關系通過源碼可以看到
ol.inherits(ol.source.XYZ, ol.source.TileImage);,ol.source.TileImage是父類。

對于天地圖，我們訪問天地圖地圖主頁服務，打開控制臺->Network,我們可以看到請求的一些地址如下：

http://t2.tianditu.com/DataServer?T=vec_w&x=53&y=24&l=6'

其中重要的信息是x,y,z分別表示x坐標，y坐標和zoomLevel。

其實在openlayers 3源碼中有Bing地圖和OSM地圖的擴展了，我們可以仿照它們進行一些擴展。

1.擴展天地圖

源碼使用模塊化打包

var ol = require('openlayers');ol.source.TianMap = function(options){var options = options ? options : {};var attributions;if(options.attributions !== undefined){attributions = option.attributions;}else{attributions = [ol.source.BaiduMap.ATTRIBUTION];}var url;if(options.mapType == "sat"){url = "http://t{0-4}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}";}else if(options.mapType == "satLabel"){url = "http://t{0-4}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}";}else if(options.mapType == "label"){url = "http://t{0-4}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}";}else{url = "http://t{0-4}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}";}ol.source.XYZ.call(this, {attributions: attributions,projection: ol.proj.get('EPSG:3857'),cacheSize: options.cacheSize,crossOrigin: 'anonymous',opaque: options.opaque !== undefined ? options.opaque : true,maxZoom: options.maxZoom !== undefined ? options.maxZoom : 19,reprojectionErrorThreshold: options.reprojectionErrorThreshold,tileLoadFunction: options.tileLoadFunction,url: url,wrapX: options.wrapX}); } ol.inherits(ol.source.TianMap, ol.source.XYZ);ol.source.TianMap.ATTRIBUTION = new ol.Attribution({html: '&copy; <a class="ol-attribution-tianmap" ' +'href="http://www.tianditu.cn/">' +'天地圖</a>' }); module.exports = ol.source.TianMap;

使用方法

var tianMapSat = new ol.layer.Tile({title: "天地圖衛星",source: new ol.source.TianMap({mapType:"sat"}) }); map.addLayer(tianMapSat);

2. 擴展百度地圖

百度地圖坐標進行了加偏，所以需要使用projzh轉化
百度地圖使用的是定制化的墨卡托投影和BD-09 datum,所以將WGS-84坐標轉化為百度坐標需要兩步
first transform from WGS-84 to BD-09 (which itself uses the GCJ-09 transform), and then do the forward transform to Baidu Mercator
第一步是將WGS-84 轉化為 BD-09，然后轉化為百度墨卡托

baiduMercator.forward(bd09.fromWGS84(point))

反過來的轉化為

bd09.toWGS84(baiduMercator.inverse(point))

https://github.com/tschaub/projzh

var ol = require('openlayers'); var projzh = require('projzh'); /* projzh處理百度坐標的問題，算法基于proj4m project* https://www.versioneye.com/nodejs/projzh/0.5.0* https://github.com/tschaub/projzh*/ ol.source.BaiduMap = function(options){var options = options ? options : {};var attributions;if(options.attributions !== undefined){attributions = option.attributions;}else{attributions = [ol.source.BaiduMap.ATTRIBUTION];}var extent = [72.004, 0.8293, 137.8347, 55.8271];//定義百度坐標//地址：https://github.com/openlayers/openlayers/issues/3522var baiduMercator = new ol.proj.Projection({code: 'baidu',extent: ol.extent.applyTransform(extent, projzh.ll2bmerc),units: 'm'});ol.proj.addProjection(baiduMercator);ol.proj.addCoordinateTransforms('EPSG:4326', baiduMercator, projzh.ll2bmerc, projzh.bmerc2ll);ol.proj.addCoordinateTransforms('EPSG:3857', baiduMercator, projzh.smerc2bmerc, projzh.bmerc2smerc);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,extent: ol.extent.applyTransform(extent, projzh.ll2bmerc),tileSize: [256, 256]});var satUrls = [0, 1, 2, 3, 4].map(function(sub) {return 'http://shangetu' + sub +'.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46&udt=20150601';});var urls = [0, 1, 2, 3, 4].map(function(sub) {return 'http://online' + sub +'.map.bdimg.com/onlinelabel/qt=tile&x={x}&y={y}&z={z}&v=009&styles=pl&udt=20170301&scaler=1&p=1';});ol.source.TileImage.call(this, {crossOrigin: 'anonymous', //跨域cacheSize: options.cacheSize,// projection: ol.proj.get('EPSG:3857'),projection:'baidu',tileGrid: tilegrid,tileUrlFunction: function(tileCoord, pixelRatio, proj){if(!tileCoord) return "";var z = tileCoord[0];var x = tileCoord[1];var y = tileCoord[2];var hash = (x << z) + y;var index = hash % urls.length;index = index < 0 ? index + urls.length : index;if(options.mapType == "sat"){return satUrls[index].replace('{x}', x).replace('{y}', y).replace('{z}', z);}return urls[index].replace('{x}', x).replace('{y}', y).replace('{z}', z);},wrapX: options.wrapX !== undefined ? options.wrapX : true}); }ol.inherits(ol.source.BaiduMap,ol.source.TileImage);ol.source.BaiduMap.ATTRIBUTION = new ol.Attribution({html: '&copy; <a class="ol-attribution-baidumap" ' +'href="http://map.baidu.com/">' +'百度地圖</a>' });module.exports = ol.source.BaiduMap;

調用

var baiduMapSat = new ol.layer.Tile({title: "百度地圖衛星",source: new ol.source.BaiduMap({mapType:"sat"}) }); map.addLayer(baiduMapSat);

3. 擴展高德地圖

var ol = require('openlayers');ol.source.AMap = function(options){var options = options ? options : {};var attributions;if(options.attributions !== undefined){attributions = option.attributions;}else{attributions = [ol.source.AMap.ATTRIBUTION];}var url;if(options.mapType == "sat"){url ="http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}";}else{url = "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";}ol.source.XYZ.call(this, {crossOrigin: 'anonymous', //跨域cacheSize: options.cacheSize,projection: ol.proj.get('EPSG:3857'),// urls:urls,url:url,wrapX: options.wrapX !== undefined ? options.wrapX : true});}ol.inherits(ol.source.AMap,ol.source.XYZ);ol.source.AMap.ATTRIBUTION = new ol.Attribution({html: '&copy; <a class="ol-attribution-amap" ' +'href="http://ditu.amap.com/">' +'高德地圖</a>' });module.exports = ol.source.AMap;

調用

var aMapSat = new ol.layer.Tile({title: "高德地圖衛星",source: new ol.source.AMap({mapType:"sat"}) }); map.addLayer(aMapSat);

最后推薦一個github倉庫,Openlayers 3 使用React 組件化+wepack+ES6實踐,
包括擴展在其中的具體使用方法

https://github.com/zrysmt/openlayers3-react

參考閱讀

• openlayers github
• openlayers github Issues
• openlayers 官方地址
• Openlayers 3 使用React 組件化+wepack+ES6實踐記錄筆記
• OpenLayers 3 之 加載百度地圖
• OpenLayers 3 之 加載天地圖

總結

以上是生活随笔為你收集整理的openlayers 3扩展，调用百度地图、高德地图、天地图服务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。