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.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
}

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

cesium 切换瓦片地图的加载方式相关推荐

html加载百度地图,百度地图API详解之地图API加载方式
本文将向大家介绍百度地图API的两种不同加载方式:同步加载和异步加载. 同步加载这是最常见的加载方式,开发者需要在页面的head标签内添加一个script标签,标签的src属性填写为地图API的地址 ...
ios 高德地图加载瓦片地图_OpenLayers加载高德地图离线瓦片地图
谷歌地球离线瓦片下载使用"迈高图-地图数据下载器"(以下简称:迈高图),演示数据以湖南省长沙市7~16级瓦片数据为例. 下载演示数据迈高图选择谷歌地球为当前地图源,地图图层选择为 ...
ios 高德地图加载瓦片地图_OpenLayers加载谷歌地球离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
leaflet、cesium加载百度地图，加载自定义样式百度地图
1 leaflet.cesium加载百度地图(官方预设样式) 预留,待补充 2 leaflet.cesium加载百度自定义样式地图样式编辑器新版地址:http://lbsyun.baidu.com/ ...
高德地图 sdk 加载 geoserver 发布的瓦片地图服务
前言最近,碰到了需求,想要在高德 sdk 中使用在 geoserver 里面发布的瓦片地图. 还好经过一番研究,在其官方文档中发现,从新版本(v1.4.3开始)的高德 sdk 开始,已经支持加载第三 ...
OGC标准WMTS服务概念与地图商的瓦片编号流派-web地图切片加载
还不知道地图栅格化切片等相关GIS原理的,推荐阅读<webGIS底图栅格化与实时数据合成处理原理,地图API设计,xyz加载> OGC概念 OGC全称--开放地理空间信息联盟(Open G ...
ios 高德地图加载瓦片地图_IOS 高德地图 API 加载 WMS 服务
IOS 高德地图 API 加载 WMS 服务本文主要介绍通过自定义高德地图 MATileOverlay 接口,添加 WMS 服务到地图上.废话少说,先贴代码. 代码自定义类 WMSTileOver ...
cesium 地图无法加载报错401 缺少token
cesium 地图无法加载报错401 缺少token 首先,报错401 说明用户没有访问权限,需要进行身份认证,也就是cesium需要密钥,也是最近实行的吧,因为之前不用也能加载出地图. token ...
WebGIS实战：Vue+Openlayers实现网络地图的加载与切换
目录前言 1.效果图 2.实现步骤 3.下一步计划相关Web GIS实战信息: 上一篇博客:WebGIS实战:Web GIS开发环境配置下一篇博客:WebGIS实战:Vue+Openlayers ...

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

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

cesium 切换瓦片地图的加载方式相关推荐

最新文章

热门文章