Question

我正在调查使用OpenLayers进行Web应用程序。基本上OpenStreetMap或Google Maps不能放大，所以我想要实现的是当你缩放到最高级别并再次点击缩放时加载自定义地图图像。

如果那是不可能的，那么替代方法是进行仅在最大缩放级别上出现的叠加，一旦点击它们将进入另一个地图，可能是基于SVG的。

哪一种更可行？欢迎任何反馈！

Answer 1

我确信它可以完成，但配置起来很棘手。

您可以使用Mapnik渲染自己的openstreetmap图块。由于它基于矢量源，您可以进一步放大。

或者，您可以添加矢量图层（这将成为SVG或VML）或静态图像图层，并且仅在足够高的缩放级别上显示它。但是，由于您的基础层是OSM或Google地图，因此地图无法放大到基础图层的最大缩放级别。

您可以做的是覆盖默认的OpenLayers.Layer.OSM图层，将最大缩放级别设置得更高（although this is not good practice）并停止以更高的缩放级别获取OSM图块图像，并添加自定义行为（加载图块）从您自己的服务器，或使用矢量图层选项）。您必须在类层次结构中的某处覆盖正确的方法（OpenLayers.Layer.OSM extends OpenLayers.Layer.XYZ extends OpenLayers.Layer.Grid等。）

OpenLayers.Layer.MyOSMLayer = OpenLayers.Class(OpenLayers.Layer.OSM, {
    initialize: function(name, options) {
        options = OpenLayers.Util.extend({
            numZoomLevels: 19 + 4,
        }, options);
        var newArguments = [name, url, options];
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    },

    // @override from XYZ
    getURL: function (bounds) {
        var xyz = this.getXYZ(bounds);
        if ( xyz.z > 19 ) {  // override url on higher zoomlevel
             return "http://myserver/white.png";
        }
        // else default behaviour: super.getUrl()
        return OpenLayers.Layer.OSM.prototype.getURL.apply(this, [bounds]);
    },

    CLASS_NAME: "OpenLayers.Layer.MyOSMLayer"
})

Openlayers放大自定义地图

1 个答案: