本文共 2739 字，大约阅读时间需要 9 分钟。
使用的软件是tilemile。openlayers2和openlayers3加载切片地图使用的接口是不同的。下面做分析。
openlayers2:
layerName为图层名字，tileUrl为切片所在路径
function getTileLayerFunc(layerName,tileUrl){ var mapMinZoom = 16; var mapMaxZoom = 23; var mapBounds = new OpenLayers.Bounds( 120.215163348, 30.2106933606, 120.216941889, 30.2125873624); //新建切片图层 var tileLayer = new OpenLayers.Layer.TMS( layerName, "", { serviceVersion: '.', layername: layerName, alpha: true, type: 'jpg', getURL: overlay_getTileURL }); //获取每个小切片路径函数 function overlay_getTileURL(bounds) { bounds = this.adjustBounds(bounds); var res = this.map.getResolution(); var x = Math.round((bounds.left - this.tileOrigin.lon) / (res * this.tileSize.w)); var y = Math.round((bounds.bottom - this.tileOrigin.lat) / (res * this.tileSize.h)); var z = this.map.getZoom(); var path = tileUrl+"/_alllayers/" + z + "/" + x + "/" + y + "." + this.type+"?time="+new Date().getTime(); var url = tileUrl+"/_alllayers/"; if (mapBounds.intersectsBounds( bounds ) && z >= mapMinZoom && z <= mapMaxZoom) { return path; } else {// return "http://www.maptiler.org/img/none.png"; } } //返回切片图层 //return tileLayer; map.addLayer(tileLayer); tileLayer.setZIndex(0);} openlayers3:
layerName为图层名字，tileUrl为切片所在路径
function getTileLayerFunc(layerName,tileUrl){ var projectionExtent = Map.projection.getExtent(); var maxResolution = ol.extent.getWidth(projectionExtent) / (Map.tileSize * 2); var resolutions = new Array(23); var z; for (z = 0; z < resolutions.length; ++z) { resolutions[z] = maxResolution / Math.pow(2, z); } var urlTemplate = tileUrl+'/_alllayers/{z}/{x}/{y}.jpg'+"?time="+new Date().getTime(); var tileLayer = new ol.layer.Tile({ /* ol.source.XYZ and ol.tilegrid.TileGrid have no resolutions config */ source: new ol.source.TileImage({ tileUrlFunction: function(tileCoord, pixelRatio, projection) { var z = tileCoord[0]; var x = tileCoord[1]; var y = Math.pow(2, z) + tileCoord[2]; // wrap the world on the X axis var n = Math.pow(2, z + 1); // 2 tiles at z=0 x = x % n; if (x * n < 0) { // x and n differ in sign so add n to wrap the result // to the correct sign x = x + n; } return urlTemplate.replace('{z}', z.toString()) .replace('{y}', y.toString()) .replace('{x}', x.toString()); }, projection: Map.projection, tileGrid: new ol.tilegrid.TileGrid({ origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions, tileSize: Map.tileSize }) }), name:layerName }); //return tileLayer; map.addLayer(tileLayer); //tileLayer.setZIndex(0)} 转载地址：http://fsyil.baihongyu.com/