6-地图视图同步和瓦片预读

本博客合集是我的openlayers学习笔记，希望能帮助到刚开始接触openlayers的同学
@commnet 所用openlayers版本：v5.3.0
@commnet 阅读本文前需要对前端知识有一定的了解
@comment 本文内容只提供参考，建议结合openlayers官网的API和examples来学习
@comment 部分代码参考了@老胡

地图视图同步

两个不同容器、不同地图源的地图，可以通过设置相同的view参数来实现视图同步。

创建两个地图容器

<div id="map1" style="height: 300px;width: 100%;border: 1px solid black;"></div>
<div id="map2" style="height: 300px;width: 100%;border: 1px solid blue;"></div>

通过设置相同的view参数来实现视图同步

var view = new ol.View({
    center: [0, 0],
    zoom: 1
});

var map1 = new ol.Map({
    target: 'map1',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: view
});

var map2 = new ol.WebGLMap({
    target: 'map2',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: view
});

此时，拖动或放缩其中一个地图，另一个地图也跟着拖动或放缩。

瓦片预读

当网速很慢时，加载地图时会出现“白方块”现象，用户体验很差，这是因为整个地图被切割成瓦片逐个加载，如下图所示。

瓦片预读是指预加载低分辨率的瓦片，再加载相应分辨率的瓦片，这样加载过程中就会缓解出现白方块现象，提升用户体验。

ol中的瓦片预读通过设置ol.layer.Tile中的preload参数来实现。

var view = new ol.View({
    center: [0, 0],
    zoom: 1
});

var map1 = new ol.Map({
    target: 'map1',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        //设置preload为Infinity，启用瓦片预读
        preload: Infinity,
    ],
    view: view
});

var map2 = new ol.WebGLMap({
    target: 'map2',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        //设置preload为0，也是默认值，没有瓦片预读
        preload: 0,
    ],
    view: view
});

可以看到，下图中上下两个容器中的地图在拖动时，上面的地图开启了瓦片预读，会优先加载低分辨率的瓦片，不至于出现白方块；而下面的地图则没有瓦片预读，会出现白方块，体验较差。