许多文章讲述了如何基于Cesium加载本地离线三维地形数据。由于Cesium的地形加载只支持读取URL,不能直接读取本地数据的文件夹路径,因此目前常用的方式是将获取的terrain地形数据利用nginx代理发布到本地服务器(例如:http://localhost:8080/terrain/)。然而,本人在实际操作过程中发现,nginx正常发布数据后,Cesium加载所发布数据会出现跨域报错问题,如下所示:
Access to XMLHttpRequest at ‘xxx’ from origin ‘xxx’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
解决方法:在nginx.conf中修改配置,增加跨域请求,如下所示:
add_header Access-Control-Allow-Origin *
为了快速掌握,笔者给了一个nginx.conf的设置demo
server {
#自定义端口号
listen 8080;
#Access-Control-Allow-Origin *解决跨域问题跨域
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers Origin,X-Requested-Width,Content-Type,Accept;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Max-Age 1728000;
if ($request_method = 'OPTIONS') {
return 204;
}
#设置route /terrain (route路由名称:terrain)
location /terrain {
#terrain数据所在位置 绝对路径/相对路径(相对nginx.exe位置)都可以
alias D:/GoogleChrome/terrain;
autoindex on;
autoindex_localtime on;
}
}
Cesium加载本地服务:
var myTerrainProvider= new Cesium.CesiumTerrainProvider({
url: "http://localhost:8080/terrain"
});
var viewer = new Cesium.Viewer('name', {
terrainProvider: myTerrainProvider,
});
值得注意的是,nginx存在一个端口号,Cesium项目运行也存在一个端口号,两个端口号需不同!否则会出现访问冲突的情况。
此外,大家可以利用地理数据云下载所需DEM.tif数据,并利用Cesiumlab2将tif数据转为terrain数据,便于后期的工作或研究。
最后来看看离线加载的三维地形效果,以广东省深圳市为例: