Cesium加载离线地图和离线地形
文章目录
- 前言
- 一、Cesium加载离线地图
- 1.1 下载数据
- 2.2 数据处理
- 2.3 地图发布
- 2.4下载速度改进
- 二、Cesium加载离线地形
- 2.1 下载数据
- 2.2 数据处理
- 2.3 地形发布
- 2.4 遇到的问题
前言
直接把地图数据切片,然后通过nginx以静态服务方式发布。
使用工具:
- 图新地球 提取码:oznv————————————用来下载地图
- 红豆地球 提取码:2thg————————————用来下载地图
- Nginx 提取码:wnjl——————————————代理服务器,用于瓦片数据发布
- Cesiumlab 提取码:iey3————————————用于数据切片
- MapBox影像 提取码:48dt———————————用来加载影像
- Test源码 提取码:1cpt——————————————Test目录下所有文件
- 桂林市七星区地形数据 提取码:ee1k————————桂林市七星区地形原始数据和处理后的数据
一、Cesium加载离线地图
1.1 下载数据
打开红豆地球直接拖入加载MapBox影像
点击下载全球
新建下载
由于没有付费下载速度非常慢,所以得找一款下载速度较快的软件,在2.4改进中提出。
2.2 数据处理
输出数据
2.3 地图发布
首先在官网下载nginx(在前言中有百度云链接),下载windows稳定版。
下载好后解压出来,不要直接运行nginx.exe,要通过命令行来运行。
使用cd命令到达nginx的解压缩后的目录
cd C:\Users\Lenovo\Desktop\nginx-1.22.0
使用启动命令启动nginx服务,会有一个窗口一闪而过。
start nginx
查看任务进程是否存在,dos输入:
tasklist /fi “imagename eq nginx.exe”
最后用浏览器访问http://localhost/就可以看到成功部署页面。
紧接着修改配置文件,配置目录各文件夹作用如下图所示,这里只修改conf目录里面的文件。
在conf目录下找到nginx.conf使用vscode打开即可,找到server这个节点修改成如下保存(原来server函数全部删除)。
server {listen 80;location / {alias C:/Users/Lenovo/Desktop/Test/CesiumDemo/;index index.html index.htm;}location /map {alias C:/Users/Lenovo/Desktop/Test/data;autoindex on;autoindex_localtime on;}}
修改完成后保存,使用以下命令检查一下配置文件是否正确,后面是nginx.conf文件的路径,successful就说明正确了。
nginx -t -c /Users/Lenovo/Desktop/nginx-1.22.0/conf/nginx.conf
使用以下命令重新加载nginx,注意:每次修改完配置文件都要重新使用命令加载一次
nginx -s reload
这里在桌面Test中新建两个文件夹存放Cesium和数据
在CesiumDemo放入第一个Cesium APP(hello world)的文件
在data文件夹放入导出的数据
通过浏览器尝试访问http://localhost/map/即可看到数据路径下的文件
最后在CesiumDemo文件夹中的index.html中引入瓦片地图服务代码
var viewer = new Cesium.Viewer('cesiumContainer', {animation: false,//是否显示动画控件baseLayerPicker: true,//是否显示图层选择控件geocoder: true,timeline: false,sceneModePicker: true,navigationHelpButton: false,infoBox: true,imageryProvider: new Cesium.UrlTemplateImageryProvider({url: '/map/{z}/{x}/{y}.png',fileExtension: 'png'})
});
index.html完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cesium App</title><script src="./scripts/Cesium/Cesium.js"></script><link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css"><style>html, body, .container{height: 100%;width: 100%;margin: 0;padding: 0;}</style>
</head>
<body><div id="cesiumContainer" ></div><script>var viewer = new Cesium.Viewer('cesiumContainer', {animation: false,//是否显示动画控件baseLayerPicker: true,//是否显示图层选择控件geocoder: true,timeline: false,sceneModePicker: true,navigationHelpButton: false,infoBox: true,imageryProvider: new Cesium.UrlTemplateImageryProvider({url: '/map/{z}/{x}/{y}.png',fileExtension: 'png'})
});</script>
</body>
</html>
通过访问http://localhost/打开Cesium得到图像
2.4下载速度改进
改进方法是使用图新地球下载数据会更快,在这里演示下载湖南省地图数据
首先解压后双击打开图新地球
直接拖入MapBox.lrc图层到图新地球
在搜索栏中搜索湖南省
点击下载
选择地图上湖南省包围的平面,然后配置好下载,这里下载11个级别391.5MB(两分钟即可下载好)。
设置好路径下载
下载好后使用官网工具Cesiumlab进行影像切片
选择11个层级后选择散列
等待数据处理好
处理好后将data文件夹里原来的数据全部删除,然后用处理好的数据全部替换,最后重新访问http://localhost/得到只有湖南省影像的地图。
图新地球目前没有找到下载全球影像的方法,不过他可以下载多个图层,此后在做补充。
参考资料:
- Cesium离线地图极简教程
- 如何在Windows系统搭建Nginx服务器
二、Cesium加载离线地形
这是官网地形效果,下面加载本地离线地形,方法同加载离线地图一样,先下载数据切片后通过nginx发布。
2.1 下载数据
首先在地理空间数据云上下载数据。http://www.gscloud.cn/search(桂林市七星区地形数据 提取码:ee1k )
选择好需要下载的数据级,这里选择DEM数字高程数据中的GDEMV3 30M分辨率数字高程数据。
然后检索广西桂林七星区数据。
实际下载的数据是图中较大框内的数据,远比七星区大。
点击下载标签下载
2.2 数据处理
下载完后解压出来,打开CesiumLab选择地形切片。
配置好后提交出来,在这里同样选择散列。
实际耗时半个小时处理完(为节省时间地形已传百度云:桂林市七星区地形数据 提取码:ee1k )
2.3 地形发布
处理完后同样在Test文件夹下新建一个terrain文件夹存放地形数据,原地图数据可新建一个map文件夹保存。terrain文件夹内文件如图所示。
在nginx的conf目录下找到nginx.conf修改配置文件,在server函数中添加
ocation /terrain {alias C:/Users/Lenovo/Desktop/Test/data/terrain;autoindex on;autoindex_localtime on;
}
完整server代码如下:
server {listen 80;location / {alias C:/Users/Lenovo/Desktop/Test/CesiumDemo/;index index.html index.htm;}location /map {alias C:/Users/Lenovo/Desktop/Test/data/map;autoindex on;autoindex_localtime on;}location /terrain {alias C:/Users/Lenovo/Desktop/Test/data/terrain;autoindex on;autoindex_localtime on;}
}
使用以下命令重新加载nginx,注意:每次修改完配置文件都要重新使用命令加载一次
nginx -s reload
在浏览器访问http://localhost/terrain/即可看到terrain内目录中的文件成功发布。
最后在CesiumDemo文件夹中的index.html中引入地形服务代码
var terrainProvider = new Cesium.CesiumTerrainProvider({url: 'http://localhost:80/terrain'});
viewer.terrainProvider = terrainProvider;
完整代码:
this.viewer = new Cesium.Viewer('cesiumContainer', {selectionIndicator: false, // 不显示指示器小部件infoBox: true, // 不显示信息框sceneModePicker: false, // 不显示模式切换选项baseLayerPicker: false,navigationHelpButton: false,animation: true,shouldAnimate: true,geocoder: false,homeButton: false,imageryProvider: new Cesium.UrlTemplateImageryProvider({url: '/map/{z}/{x}/{y}.png',fileExtension: 'png'})
})var terrainProvider = new Cesium.CesiumTerrainProvider({url: 'http://localhost:80/terrain'});viewer.terrainProvider = terrainProvider;
本地影像效果如图
对比官方影像数据发现问题。
参考资料:
- Cesium:加载本地高程/地形数据
2.4 遇到的问题
- 问题:效果差、精度低,有很多小地形没有显示
- 原因:可能是因为下载的地形数据分辨率和精度较低
- 改进:寻找精度分辨率更高的地形数据
Cesium加载离线地图和离线地形相关推荐
- leaflet、cesium加载百度地图,加载自定义样式百度地图
1 leaflet.cesium加载百度地图(官方预设样式) 预留,待补充 2 leaflet.cesium加载百度自定义样式地图 样式编辑器新版地址:http://lbsyun.baidu.com/ ...
- 使用cesium加载mapbox地图底色的办法
使用cesium加载mapbox地图底色的办法 安装:vue-cli-plugin-cesium插件 vue-cli-plugin-cesium - npm 获取cesium的token: 申请ces ...
- cesium加载百度地图_Cesium专栏-百度地图加载(附源码下载)
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
- 046:cesium加载高德地图(多种形式)
第046个 点击查看专栏目录 本示例的目的是介绍如何在vue+cesium中加载加载高德地图.这里区分了很多种形式,详情见核心分析和源代码. 直接复制下面的 vue+cesium源代码,操作2分钟即可 ...
- 043:cesium加载Bing地图(多种形式)
第043个 点击查看专栏目录 本示例的目的是介绍如何在vue+cesium中加载加载Bing地图.这里显示4种形式的地图,分别为:AERIAL.ROAD.CANVAS_DARK.AERIAL_WITH ...
- cesium加载各类地图服务
目录 一.图层顺序 二. wms 2.1 加载wms,以及数据筛选 2.2移除wms 三.GeoJson 3.1 加载Geojson 3.2 移除Geojson 四.kml 五.3DTiles 5.1 ...
- cesium加载百度地图_四大Webgis地图框架的对比选择
选择的方式主要是根据业务需求,主要分为: 传统GIS业务(Leaflet),三维业务(Cesium),互联网展示型(MapboxGL),老IE浏览器,老业务维护(OpenLayers). 1.Leaf ...
- Cesium 加载离线地图服务
Cesium 可以加载自定义的地图服务,一般在私有云上应用比较广. 原始地图数据有很多地方都可以下载.比如常用的下载工具,付费的有水经注.91助手等,还有国家空间地理服务的官网上也有可用的数据.假设你 ...
- Cesium加载离线地图
Cesium加载离线地图 一.下载地图并导出为tms格式 二.安装nginx并配置静态文件服务路径 一.下载地图并导出为tms格式 利用地图下载器下载相关范围的地图,然后导出为tms格式的地图切片 二 ...
最新文章
- 收藏!15000个Python开源项目中精选Top30!
- 新手探索NLP(十一)——知识图谱
- linux 分析 进程cpu占用过高
- C++有的地方为什么要类内定义,类外实现(类内声明,类外初始化)?
- boost::multiprecision模块mpfr_float相关的测试程序
- Android—打包aar以及module依赖操作
- Oracle数据库中游标的游标的使用
- 拖拽自动生成的DataGridView和BindingSource操作数据库(增加,修改,删除)---自己实现...
- 我对正向代理和反向代理的理解
- 未签名的应用程序请求对系统进行无限制访问_OWASP Top 10 2017 10项最严重的 Web 应用程序安全风险 (完结篇)...
- HTTPS协议详解:TLS/SSL握手过程
- 【leetcode】Minimum Path Sum
- 20191026(补):(leetcode习题)最长的斐波那契子序列的长度
- 洛谷P2886牛继电器
- 局域网中使用来宾账户访问计算机
- oracle中lob类型学习
- 连载《国培计划》骨干教师的研修日志之八:米新江教授讲座有感
- python复制单元格格式太多_你觉得复制粘贴excel浪费时间,那你该学这些技巧
- 每日刷题记录 (六)
- 教你如何ping指定指定IP的指定端口
热门文章
- [18调剂]东南大学 苏州联合研究生院接收调剂信息
- CSS图片旋转/暂停后保持旋转状态(音乐播放常用)
- 和熊二一起捣鼓spark系列之闲聊篇
- 如何让光伏发电系统收益最大化?
- 数据分享|Spss Modeler关联规则Apriori模型、Carma算法分析超市顾客购买商品数据挖掘实例...
- centos 5.6 安装HP打印机--成功版本
- Sql Server数据库中的用户及权限配置,保障数据库安全
- 计算机整个文稿应用回顾主题,计算机应用教案16.doc
- 背景透明css样式,CSS 背景(background)+背景透明(CSS3)
- JSP运行出现源代码的情况之一