openlayer实现ImageStatic扩展支持平铺Wrapx

news2024/11/17 17:46:43

地图平铺（Tiling）是地图服务中常见的技术，用于将大尺寸的地图数据分割成许多小块（瓦片），便于高效加载和展示。这种技术特别适用于网络环境，因为它允许浏览器只加载当前视图窗口内所需的地图瓦片，从而加快加载速度并节省带宽。而WrapX（或称为Y Wraparound）是这一技术中的一种特殊处理方式，主要用于处理地图在东西方向上的连续性，实现地球表面的无限滚动效果。

地图平铺基础

地图平铺的基本原理是将地球表面按照特定的投影方式（如Web Mercator投影）映射到二维平面，然后将这个平面切割成规则的网格，每个网格对应一个地图瓦片。瓦片通常按照特定的层级（zoom level）和行列坐标（x, y）进行组织，每一级的瓦片数量都是上一级的四倍（因为每一级的每个瓦片都会被细分为四个子瓦片）。

WrapX（Y轴环绕）

在标准的地图平铺方案中，当用户向西或向东滚动地图到达地图边缘时，地图通常会停止滚动。然而，启用WrapX功能后，当用户滚动到地图西侧边缘时，地图会无缝衔接东侧的相应瓦片，反之亦然，给人一种地球表面连续不断的错觉。这意味着在东西方向上，地图数据被设计为重复，使得用户可以无限滚动，这对于飞行模拟、全球导航等应用特别有用。

实现WrapX

实现WrapX功能，需要地图服务器和客户端的共同支持：

•服务器端：地图服务器需要能够处理超出正常范围的瓦片请求，当请求超过地图的最大经度时，服务器应返回对应的对侧经度的瓦片数据。这通常需要在服务器的瓦片生成逻辑或请求处理逻辑中实现。

•客户端：在地图展示的JavaScript库（如OpenLayers、Leaflet等）中，需要配置或自定义平移行为，使得当地图达到一侧边界时，自动调整地图中心到对侧相应位置，同时请求正确的瓦片数据。这通常涉及到监听地图的移动事件，并在接近边界时重新设置地图的中心坐标。

总结

WrapX技术使得地图在东西方向上形成一个无限循环的视觉效果，提高了用户体验，尤其是在需要展示连续横跨国际日期变更线或需要连续滚动地球表面的应用场景中。通过服务器端和客户端的配合，可以轻松实现这一功能，为用户提供无缝的地图浏览体验。

OpenLayers 是一个用于网络地图的开源 JavaScript 库，它不直接提供静态图层（Static Image Layer）的功能，但你可以使用 ol/layer/Image 类来展示静态图像，并通过 ol/source/ImageStatic 类的实例来配置图层的源，但其本身不支持Wrapx

通过代码扩展实现Wrapx

import ImageStatic from 'ol/source/ImageStatic';
import { getTopLeft } from 'ol/extent';

class WrappedImageStatic extends ImageStatic {
    constructor(options) {
        super(options);
        this.wrapX_ = options.wrapX !== undefined ? options.wrapX : true;
    }

    getWrapX() {
        return this.wrapX_;
    }

    setWrapX(wrapX) {
        this.wrapX_ = !!wrapX;
    }

    getExtent() {
        const extent = super.getExtent();
        if (this.wrapX_) {
            const size = this.getImage().getSize();
            const worldWidth = size[0] * (extent[2] - extent[0]) / (extent[2] - extent[0]);
            const worldWidthAbs = Math.abs(worldWidth);
            const halfWorldWidth = worldWidthAbs / 2;
            const worldWidthDirection = worldWidth > 0 ? 1 : -1;
            return [
                getTopLeft(extent)[0] - halfWorldWidth * worldWidthDirection,
                extent[1],
                getTopLeft(extent)[0] + halfWorldWidth * worldWidthDirection + worldWidthAbs,
                extent[3]
            ];
        }
        return extent;
    }
}

export default WrappedImageStatic;