用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
    })
});

显示结果如下：

转载自：https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/50495244.jpg