调用这三个商业地图服务,我们使用的都是切片(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',
opaq