OpenLayers 切片预加载

GIS之路
0 阅读4分钟

前言

❝

在GIS中，切片预加载技术主要用于提升地图浏览的流畅性和用户体验，特别是在OpenLayers开发库中。通过提前加载当前视图周边区域的地图切片，预加载技术可以减少用户平移或缩放地图时的等待时间，避免出现空白区域，确保地图显示的连续性和响应速度。这对于网络条件较差或数据量较大的场景尤为重要，能够显著提升地图应用的性能。

1. 预加载属性

TileLayer对象属性preload用于控制切片图层预加载。preload属性为Number类型，默认值是0。设置preload值用于加载低分辨率切片，该值代表最高预加载级别，0表示没有预加载。

2. 创建预加载图层

demo中以天地图影像为例，设置preload值为Infinity（无限大），表示预加载最高级别。

const TDTImgPreload = new ol.layer.Tile({
    title: "天地图影像图层",
    preload: Infinity,
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
        attibutions: "天地图影像描述",
        crossOrigin: "anoymous",
        wrapX: false
    })
})

3. 共享视图

在两个地图对比查看时需要地图进行联动，有两种方式可以实现。其一是在创建好两个地图后设置一个的视图为另一个的视图；其二是两个地图共享一个视图。

方式一：利用setView方法设置视图

const mapTop = new ol.Map({
    target: "map-top",
    loadTilesWhileInteracting: true,
    view: new ol.View({
        center: [102.845864, 25.421639],
        zoom: 5,
        worldsWrap: false,
        minZoom: 1,
        maxZoom: 20,
        projection: 'EPSG:4326',
    }),
    layers: [TDTImgPreload]
})

const mapBottom = new ol.Map({
    target: "map-bottom",
    loadTilesWhileInteracting: true,
    view: new ol.View({
        center: [102.845864, 25.421639],
        zoom: 5,
        worldsWrap: false,
        minZoom: 1,
        maxZoom: 20,
        projection: 'EPSG:4326',
    }),
    layers: [TDTImgUnPreload, TDTImgCvaLayer]
})

mapTop.setView(mapBottom.getView())

方式二：共享同一视图

const view = new ol.View({
    center: [102.845864, 25.421639],
    zoom: 5,
    worldsWrap: false,
    minZoom: 1,
    maxZoom: 20,
    projection: 'EPSG:4326',
}),
const mapTop = new ol.Map({
    target: "map-top",
    loadTilesWhileInteracting: true,
    view:view,
    layers: [TDTImgPreload]
})

const mapBottom = new ol.Map({
    target: "map-bottom",
    loadTilesWhileInteracting: true,
    view:view,
    layers: [TDTImgUnPreload, TDTImgCvaLayer]
})

4. 加载效果

位于上方的图层使用切片预加载，位于下方的图层未使用，在缩放和平移过程中，可以看到上方图层加载过程表现更完美，没有出现空白。对于下方未使用切片预加载的图层，切片加载速度稍慢，而且会出现一些空白。

5. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers 切片预加载</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="../../libs/css/ol9.2.4.css">

    <script src="../../js/config.js"></script>
    <script src="../../js/util.js"></script>
    <script src="../../libs/js/ol9.2.4.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #map-top {
            position: absolute;
            top: 50px;
            bottom: 50%;
            width: 100%;
        }

        #map-bottom {
            position: absolute;
            top: 50%;
            bottom: 0;
            width: 100%;
        }

        #top-content {
            position: absolute;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
            color: #fff;
            text-align: center;
            font-size: 32px;
        }

        #top-content span {
            font-size: 32px;
        }
    </style>
</head>

<body>
    <div id="top-content">
        <span>OpenLayers 切片预加载</span>
    </div>
    <div id="map-top" title=""></div>
    <div id="map-bottom" title=""></div>
</body>

</html>

<script>
    //地图投影坐标系
    const projection = ol.proj.get('EPSG:3857');
    //==============================================================================//
    //============================天地图服务参数简单介绍==============================//
    //================================vec：矢量图层==================================//
    //================================img：影像图层==================================//
    //================================cva：注记图层==================================//
    //======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//
    //==============================================================================//
    const TDTImgPreload = new ol.layer.Tile({
        title: "天地图影像图层",
        preload: Infinity,
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
            attibutions: "天地图影像描述",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })

    const TDTImgUnPreload = new ol.layer.Tile({
        title: "天地图影像图层",
        preload: 0,
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
            attibutions: "天地图影像描述",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const TDTImgCvaLayer = new ol.layer.Tile({
        title: "天地图影像注记图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
            attibutions: "天地图注记描述",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })

    const mapTop = new ol.Map({
        target: "map-top",
        loadTilesWhileInteracting: true,
        view: new ol.View({
            center: [102.845864, 25.421639],
            zoom: 5,
            worldsWrap: false,
            minZoom: 1,
            maxZoom: 20,
            projection: 'EPSG:4326',
        }),
        layers: [TDTImgPreload]
    })

    const mapBottom = new ol.Map({
        target: "map-bottom",
        loadTilesWhileInteracting: true,
        view: new ol.View({
            center: [102.845864, 25.421639],
            zoom: 5,
            worldsWrap: false,
            minZoom: 1,
            maxZoom: 20,
            projection: 'EPSG:4326',
        }),
        layers: [TDTImgUnPreload, TDTImgCvaLayer]
    })

    mapTop.setView(mapBottom.getView())

</script>

❝

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试

❝

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注 哦 ！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !

avatar
文章
阅读
粉丝