cesium 切换瓦片地图的加载方式
如果你熟悉 cesium,那么你或多或少应该用过或者了解如何用 cesium 加载瓦片地图。
熟悉加载瓦片地图这本身不是一个太难的工作,一般来说,只要你照着官方的沙盒中的示例,一般都能轻松掌握。
但是问题是,只要你细心研究过,你就会发现,cesium 加载瓦片地图,居然是用 ajax 请求的方式来加载贴图的。
这种加载方式的优劣我们姑且不论,cesium 选择这种方式必然会有其意义所在。
但是问题是,为什么翻遍 api 和源码,都没有找到一个方式,可以更换贴图的加载方式呢?
我们知道,对于现代的浏览器来说,一般都会对传统的加载图片做一些优化。
比如会进行缓存,同样的图片,不会重复向服务器请求等等。
这两种加载图片的方式,用在浏览器上,到底哪一种比较比较好,还有待商榷。
截止到目前为止,我还并未找到对两种加载方式的优劣进行比较的分析资料。
如果有童鞋曾经看过相关比较好的资料,还希望能积极分享出来。
如果要采用 JavaScript 的方式来加载图片,该怎么做呢?
一般我们会采用下面的方式:
const img = new Image()img.src = imgUrlimg.crossOrigin = 'Anonymous'// 图片加载成功img.onload = () => {console.log(imgUrl + " 图片加载成功!")}// 图片加载失败img.onerror = () => {console.error('图片:【' + imgUrl + '】加载失败!')}
现在问题是,我们怎么将上面这套机制,应用在 cesium 里面呢?
也就是说,我们需要做一些修改源码的操作。
但是修改源码最关键的一个要素是,我们只是朝源码上加功能,而不能对现有的功能造成哪怕一丝丝的影响。
否则,在我们没有全盘掌握某段代码的作用的时候,随意的修改,会造成难以预料的后果。
对于 JavaScript 来说,有些时候,做到这一点,还蛮容易的。
如果源码是采用面向对象的方式写的,那么我们对原型链上某个方法重载下,就能达到我们想要的效果。
接下俩,我们需要做的就是,找到合适的重载的地方。
那么该如何找呢?
别着急,接下来,我会手把手的教你,该如何找到合适的重载的地方。
首先,我们需要用到我们的好伙伴——chrome devtool。
当然如果你用火狐浏览器的开发者工具,也能达到同样的效果,这里就不一一举例了,直接以 chrome 为例进行说明。
我们找到 Network 这一列,刷新下页面,能看到我们页面发的所有的请求。
而 XHR 这一栏里面,就是我们前端页面所有的 ajax 请求的集合栏了。
随便点开一个加载瓦片图的链接,你便会详细的了解到每个请求的调用栈。
如何找到合适的地方,进行重载呢?
这里貌似没有什么好方法,只有从上到下,依次将源码点开研究一番。
最后你会发现,在这个地方进行重载,可以达到比较满意的效果。
之所以这么说,原因有几点,这个 loadImage 方法是个静态的方法,需要 imageryProvider 的实例以及图片的 url 地址,其返回的结果是个一 Promise,而 Promise 最终返回的值为图片元素。
既然这个地方用的是 fetchImage 方法,也就是通过 ajax 的方式来获取图片的,那么我们直接给这个地方改成传统的拿图方式就好了。
import {ImageryProvider} from 'Cesium'// 将原来的 loadImage 方法重命名ImageryProvider.loadImage2 = ImageryProvider.loadImage// 将 loadImage 重载ImageryProvider.loadImage = function(imageryProvider, url) {// 在某些情况下,走我们原来的逻辑if(url === some case){return ImageryProvider.loadImage2.call(this, imageryProvider, url)}// 其余情况,采用传统的加载图片的方式return new Promise((resolve, reject) => {const imgUrl = url.urlconst img = new Image()img.src = imgUrlimg.crossOrigin = 'Anonymous'// 图片加载成功了,进行 resloveimg.onload = () => {resolve(img)}// 图片未加载成功img.onerror = (err) => {console.error('图片:【' + imgUrl + '】加载失败!')reject(err)}})}
如果后面需要进一步优化的话,为了防止图片出错,加载失败,可以用一个通用的图片去代替出错的图片,以达到让程序能够正常的运行的目的。
比如这样做:
// 图片未加载成功img.onerror = (err) => {console.error('图片:【' + imgUrl + '】加载失败!')resolve(ErrorImage)}
或者这样做:
// 图片未加载成功img.onerror = (err) => {console.error('图片:【' + imgUrl + '】加载失败!')img.url = errorImageUrl}
总之,在平时写代码的过程中,总会有很多小细节,很值得我们去优化,如果优化的好,也可以极大的提升用户的使用体验。