cesium 切换瓦片地图的加载方式
如果你熟悉 cesium，那么你或多或少应该用过或者了解如何用 cesium 加载瓦片地图。
熟悉加载瓦片地图这本身不是一个太难的工作，一般来说，只要你照着官方的沙盒中的示例，一般都能轻松掌握。
但是问题是，只要你细心研究过，你就会发现，cesium 加载瓦片地图，居然是用 ajax 请求的方式来加载贴图的。
这种加载方式的优劣我们姑且不论，cesium 选择这种方式必然会有其意义所在。
但是问题是，为什么翻遍 api 和源码，都没有找到一个方式，可以更换贴图的加载方式呢？
我们知道，对于现代的浏览器来说，一般都会对传统的加载图片做一些优化。
比如会进行缓存，同样的图片，不会重复向服务器请求等等。
这两种加载图片的方式，用在浏览器上，到底哪一种比较比较好，还有待商榷。
截止到目前为止，我还并未找到对两种加载方式的优劣进行比较的分析资料。
如果有童鞋曾经看过相关比较好的资料，还希望能积极分享出来。
如果要采用 JavaScript 的方式来加载图片，该怎么做呢？
一般我们会采用下面的方式：
const img = new Image()
img.src = imgUrl
img.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.url
const img = new Image()
img.src = imgUrl
img.crossOrigin = 'Anonymous'
// 图片加载成功了，进行 reslove
img.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
}
总之，在平时写代码的过程中，总会有很多小细节，很值得我们去优化，如果优化的好，也可以极大的提升用户的使用体验。
