cesium 切换瓦片地图的加载方式

如果你熟悉 cesium，那么你或多或少应该用过或者了解如何用 cesium 加载瓦片地图。

熟悉加载瓦片地图这本身不是一个太难的工作，一般来说，只要你照着官方的沙盒中的示例，一般都能轻松掌握。

但是问题是，只要你细心研究过，你就会发现，cesium 加载瓦片地图，居然是用 ajax 请求的方式来加载贴图的。

image.png

这种加载方式的优劣我们姑且不论，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。

image.png

当然如果你用火狐浏览器的开发者工具，也能达到同样的效果，这里就不一一举例了，直接以 chrome 为例进行说明。

我们找到 Network 这一列，刷新下页面，能看到我们页面发的所有的请求。

而 XHR 这一栏里面，就是我们前端页面所有的 ajax 请求的集合栏了。

随便点开一个加载瓦片图的链接，你便会详细的了解到每个请求的调用栈。

如何找到合适的地方，进行重载呢？

这里貌似没有什么好方法，只有从上到下，依次将源码点开研究一番。

最后你会发现，在这个地方进行重载，可以达到比较满意的效果。

image.png

之所以这么说，原因有几点，这个 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
}

总之，在平时写代码的过程中，总会有很多小细节，很值得我们去优化，如果优化的好，也可以极大的提升用户的使用体验。