地图浏览过渡效果-transitionEffect

最新推荐文章于 2023-05-30 15:37:15 发布

javaRoger

最新推荐文章于 2023-05-30 15:37:15 发布

阅读量2k

点赞数

分类专栏：杂谈文章标签： transition function float null each layer

本文链接：https://blog.csdn.net/rogerjava/article/details/6409988

版权

本文主要讨论了在使用OpenLayers实现的地图项目中遇到的浏览过渡效果问题，即仅在地图的前几级有过渡效果。通过分析并修改`startTransition`和`getResolutionForZoom`方法的代码，解决了在高层级时地图空白的问题，确保在不同分辨率变化时都能平滑过渡。

摘要由CSDN通过智能技术生成

我们在用OpenLayers客户端来实施的天地图项目、山西平台项目等都遇到一个浏览效果不佳的问题，即已经给图层赋了transitionEffect属性为resize，仍然只有在地图的前面几级有过度效果（1-10级），这样在11级以后的浏览过程中，如果网速不够快，有瓦片不能及时显示出来，就会出现地图显示区域有很多空白，这样浏览的效果就很差。

现在我们来解决这个问题：

首先我们把这个过度效果相关的代码找出来，红色字是OpenLayers原先的代码，蓝色字是我修改后的代码，黄底字是关键位置。

OpenLayers/lib/OpenLayers/Tile/Image.js

     /**
     * Method: startTransition 开始显示过度效果
     * This method is invoked on tiles that are backBuffers for tiles in the
     *     grid. The grid tile is about to be cleared and a new tile source
     *     loaded. This is where the transition effect needs to be started
     *     to provide visual continuity.
     */

     startTransition: function() {
        // backBufferTile has to be valid and ready to use
        if (!this.backBufferTile || !this.backBufferTile.imgDiv) {
            return;
        }

        // calculate the ratio of change between the current resolution of the
        // backBufferTile and the layer. If several animations happen in a
        // row, then the backBufferTile will scale itself appropriately for
        // each request.
        var ratio = 1;
        if (this.backBuffer