用OpenLayers3实现自定义地图切片的发布

以前做WebGIS开发时，一直采用的是OpenLayers2.13.1版本，2.X版本推出已有些年头，在各行各业应用非常广泛。在该版本发布自定义切片的主要代码如下：

map = new OpenLayers.Map(mapContainerName, {
controls: [new OpenLayers.Control.PanZoomBar({ zoomWorldIcon: true, position: new OpenLayers.Pixel(5, 22) }),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.TouchNavigation({ dragPanOptions: { enableKinetic: true } }),
new OpenLayers.Control.ScaleLine({ topOutUnits: "公里", topInUnits: "米", bottomOutUnits: "", bottomInUnits: "" }),
new OpenLayers.Control.MousePosition({ prefix: "经度:", separator: ",纬度:" }),
new OpenLayers.Control.Attribution({ separator: '_@_@_' }),
new OpenLayers.Control.KeyboardDefaults()
],
units: scaleLineUnits,
projection: toProj,
displayProjection: fromProj,
maxResolution: mapConfigObj.resolutions.split(",")[0],
resolutions: mapConfigObj.resolutions.split(","),
maxExtent: mapBounds
});

var tileLayer = new OpenLayers.Layer.TMS(
mapName,
TILE_HANDLER_URL,
{
layername: "BaseLayer",
'type': mapConfigObj.type,
'getURL': get_tms_url
}, { transitionEffect: 'resize' });

tileLayer.tileOrigin = new OpenLayers.LonLat(mapConfigObj.boundsArray[0], Math.max(mapConfigObj.boundsArray[1], mapConfigObj.boundsArray[3]));

其中，get_tms_url函数如下：

function get_tms_url(bounds) {
bounds = this.adjustBounds(bounds);
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var url = this.url;
var m = this.name;
var f = this.type;

var path = "m=" + m + "&l=" + z + "&r=" + y + "&c=" + x + "&f=" + f;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}

return url + "?" + path;
}

在OpenLayers3中，架构变化很大，不建议将已有项目迁移到OL3。OpenLayers3不仅添加了对地图旋转以及动画的支持，还支持更多的切片数据源及矢量数据格式。同时以后还会利用WebGL支持3D地图及矢量大数据。现在，我们显示一幅分级的自定义分辨率及命名规则的切片栅格地图。这里，图层的数据源选用TileImage，并且实现自定义的tileUrlFunction，以下是采用V3.12.1实现的主要代码：

var mapExtent = [115.397235, 39.369633, 117.530304, 41.098667];
var mapResolutions = [0.00249998, 0.00124999, 0.000624995, 0.000249998, 0.000124999, 0.0000624995, 0.0000249998, 0.0000124999, 0.000004499991];

var tileGrid = new ol.tilegrid.TileGrid({
extent: mapExtent,
origin: [mapExtent[0], mapExtent[3]],
resolutions: mapResolutions,
tileSize: [256, 256]
});

var attribution = new ol.Attribution({ html: "<a href='http://www.map1000.com/' target='_blank'>千图网</a>" });
var urlTemplate = "http://www.map1000.com/MapSite/TileHandlerTest.ashx?m=beijing&l={z}&r={y}&c={x}&f=image/png";
var map = new ol.Map({
target: 'mapDiv',
layers: [
new ol.layer.Tile({
source: new ol.source.TileImage({
attributions: [attribution],
tileUrlFunction: function (tileCoord, pixelRatio, projection) {
var z = tileCoord[0];
var x = tileCoord[1];
var y = -tileCoord[2] - 1;
return urlTemplate.replace('{z}', z.toString()).replace('{y}', y.toString()).replace('{x}', x.toString());
},
tileGrid: tileGrid
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
zoom: 0,
center: [(mapExtent[2] + mapExtent[0]) / 2, (mapExtent[3] + mapExtent[1]) / 2],
resolutions: mapResolutions
})
});

显示结果如下：