zooms.google.com上的缩放比Google Maps API v3更平滑
我注意到maps.google.com上的缩放比使用Google Maps API版本3的自定义地图的行为有所不同(读取更平滑)。 后来我发现这也适用于Google的演示。
使用Google Maps API v3有没有办法在地图上获得相同的平滑缩放感觉?
我一直试图在网络上搜索解决方案,但我可以找到的其中一个问题就是人们问如何进行缩放动画,这不是我正在寻找的。
本地Google地图网站maps.google.com使用HTML5 canvas元素来呈现地图。 Google Maps API v3没有 。 目前(截至2015年底),无法使用Google Maps API获得流畅的连续缩放行为。
在搜索Google文档和网页后得到的答案没有结果之后,我花了一些时间了解API v3以及maps.google.com基本如何工作来呈现和显示地图。 有一个主要的区别是,立即清楚为什么连续缩放无法使用API:
Google Maps API v3会创建一个由图像拼贴图组成的地图,每个图像都会呈现为一个固定的默认大小为256 x 256 px
单个<div />
容器。 当切换缩放级别时,每个单独的图块都必须用新图像(任何类型的图像,可能使用自定义叠加层等动态样式)重新渲染。 这是一项非常昂贵的任务,因此每个额外的缩放步骤都会增加额外的资源以加载,并且通过DOM操作重新渲染整个场景需要额外的计算成本。 即使在高CPU /内存机器上使用现代浏览器,流体变焦的体验几乎是不可能的。
maps.google.com使用HTML5画布对象来渲染地图场景(我敢肯定,旧版浏览器有一个API v3风格的回退变体)。 在本地支持的画布对象中绘制比在DOM元素中替换图像便宜。 Google使用基于矢量图形的方法,基本上可以在不需要额外资源的情况下连续放大细节。 另外,特定缩放级别所需的信息可以作为较小的数据块读取并应用于绘图例程。
我必须承认,我不知道这是如何详细工作的。 这正是我通过检查源代码所发现的,我希望它几乎总结了为什么使用maps API目前无法实现“平滑缩放”。 无论如何,让我们期待Google Maps API v4!
还有其他JavaScript映射库允许平滑缩放,比如Mapbox-GL和Cesium。 他们都使用WebGL,就像maps.google.com一样。
https://www.mapbox.com/mapbox-gl-js/example/fitbounds/
https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Camera.html&label=Showcases
我认为现在取决于谷歌地图是否处于精简模式,这与基于画布的地图相反,它似乎是老派的基于图像拼贴的地图的名称。
根据谷歌地图有关系统和浏览器要求的文档,Google Maps将禁用某些视频卡的3D功能,对于某些视频卡而言,它超出了这一范围,只允许您使用精简模式。
链接地址: http://www.djcxy.com/p/81597.html上一篇: Zoom is smoother on maps.google.com than on Google Maps API v3