openlayers 保存当前视角的三种实现方式

原创已于 2025-06-17 11:47:50 修改 · 905 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端框架 #es6 #postgresql

于 2023-02-09 15:54:07 首次发布

同事请教如何保存OpenLayers地图当前视角到后端并前端恢复展示，作者翻阅官方文档总结三种实现方式。一是计算extent，用View类的fit方法填充视角；二是记录并保存地图的center和zoom，再设置视角中心和缩放；三是用animate方法以动画方式实现，需用到center和zoom值。

最近被同事请教了如何openlayers地图视角相关的问题，需求是保存当前地图视角到后端，前端再恢复展示。挺简单的功能，翻阅了一下openlayers官方文档，总结了三种实现方式。废话不多说，先上图。

这是默认的视角：

这是应用后的视角：

一、通过计算extent的方式

实现思路就是通过计算地图当前视角的extent，再通过VIew类的fit方法实现填充视角。

这个extent可以理解为视图框，是由左下角和右上角的两个点组成的数组结构。

第一步，先计算当前的extent并保存：


// map 为地图对象 我这里随便拖动了一下视角去计算
const save_to_extent = map.getView().calculateExtent(map.getSize())
// 计算后输出如下 投影坐标为EPSG:3857
const extent = [
    4768298.477224449,
    2463043.557842091,
    19639886.700388342,
    6376619.406043116
]

第二步，基于上面我们计算后保存下来的视角范围去填充视角：


map.getView().fit(extent)

二、通过setCenter和setZoom方式实现

第一步，记录并保存当前地图的center和zoom：


const save_to_center = map.getView().getCenter()
const save_to_zoom = map.getView().getZoom()
// 获取后保存如下
const center = [
    11601079.397755772,
    4242729.515556631
]
const zoom = 3.6768849901621956

第二步，设置视角中心和缩放


map.getView().setCenter(center)
map.getView().setZoom(zoom)

三、通过animate方法以动画方式实现

这种方式可以给移动视角过程增加动画。需要第二步里的center和zoom值。


/**********************************************
 * Tips: 这里animate的参数顺序决定动画的顺序 
 * 比如这里代表先平移到中心点，再缩放视角     
 * *******************************************/ 
map.getView().animate({center},{zoom})

以上就是我总结的三种方式，如果还有其他的实现方式，欢迎来补充。