Cesium加载离线地图和离线地形

news2025/1/24 5:03:19

文章目录

  • 前言
  • 一、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影像

image-20220615184733459

点击下载全球

image-20220615184844014

新建下载

image-20220615185008192

由于没有付费下载速度非常慢，所以得找一款下载速度较快的软件，在2.4改进中提出。

image-20220615185045216

2.2 数据处理

输出数据

image-20220615185704963

2.3 地图发布

首先在官网下载nginx（在前言中有百度云链接），下载windows稳定版。

image-20220615190001300

下载好后解压出来，不要直接运行nginx.exe，要通过命令行来运行。

image-20220615215649446

使用cd命令到达nginx的解压缩后的目录

cd C:UsersLenovoDesktop ginx-1.22.0

image-20220615190522148

使用启动命令启动nginx服务，会有一个窗口一闪而过。

start nginx

查看任务进程是否存在，dos输入：

tasklist /fi “imagename eq nginx.exe”

image-20220615190901827

最后用浏览器访问http://localhost/就可以看到成功部署页面。

image-20220615201817443

紧接着修改配置文件，配置目录各文件夹作用如下图所示，这里只修改conf目录里面的文件。

Nginx Windows修改配置文件

在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

image-20220615192904657

使用以下命令重新加载nginx，注意：每次修改完配置文件都要重新使用命令加载一次

nginx -s reload

这里在桌面Test中新建两个文件夹存放Cesium和数据

image-20220615204244039

在CesiumDemo放入第一个Cesium APP（hello world）的文件

image-20220615204302152

在data文件夹放入导出的数据

image-20220615194106008

通过浏览器尝试访问http://localhost/map/即可看到数据路径下的文件

image-20220615202943745

最后在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得到图像

image-20220615203857337

2.4下载速度改进

改进方法是使用图新地球下载数据会更快，在这里演示下载湖南省地图数据

首先解压后双击打开图新地球

image-20220615211128781

直接拖入MapBox.lrc图层到图新地球

image-20220615211304147

在搜索栏中搜索湖南省

image-20220615211339123

点击下载

image-20220615211417825

选择地图上湖南省包围的平面，然后配置好下载，这里下载11个级别391.5MB(两分钟即可下载好)。

image-20220615211526290

设置好路径下载

image-20220615211744197

下载好后使用官网工具Cesiumlab进行影像切片

image-20220615212125770

选择11个层级后选择散列

image-20220615212326139

等待数据处理好

image-20220615212426661

处理好后将data文件夹里原来的数据全部删除，然后用处理好的数据全部替换，最后重新访问http://localhost/得到只有湖南省影像的地图。

image-20220615213013161

image-20220615213138965

图新地球目前没有找到下载全球影像的方法，不过他可以下载多个图层，此后在做补充。

参考资料：

  1. Cesium离线地图极简教程
  2. 如何在Windows系统搭建Nginx服务器

二、Cesium加载离线地形

这是官网地形效果，下面加载本地离线地形，方法同加载离线地图一样，先下载数据切片后通过nginx发布。

image-20220618210136963

2.1 下载数据

首先在地理空间数据云上下载数据。http://www.gscloud.cn/search（桂林市七星区地形数据 提取码：ee1k ）

image-20220618210648250

选择好需要下载的数据级，这里选择DEM数字高程数据中的GDEMV3 30M分辨率数字高程数据。

image-20220618210936217

然后检索广西桂林七星区数据。

image-20220618211033669

实际下载的数据是图中较大框内的数据，远比七星区大。

image-20220618211141266

点击下载标签下载

image-20220618211217380

2.2 数据处理

下载完后解压出来，打开CesiumLab选择地形切片。

image-20220618211348446

配置好后提交出来，在这里同样选择散列。

image-20220618211654353

实际耗时半个小时处理完（为节省时间地形已传百度云：桂林市七星区地形数据 提取码：ee1k ）

image-20220618211745348

2.3 地形发布

处理完后同样在Test文件夹下新建一个terrain文件夹存放地形数据，原地图数据可新建一个map文件夹保存。terrain文件夹内文件如图所示。

image-20220618212117066

在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内目录中的文件成功发布。

image-20220618212514477

最后在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;

本地影像效果如图

image-20220618213427247

对比官方影像数据发现问题。

image-20220618210136963

参考资料：

  1. Cesium：加载本地高程/地形数据

2.4 遇到的问题

  • 问题：效果差、精度低，有很多小地形没有显示
  • 原因：可能是因为下载的地形数据分辨率和精度较低
  • 改进：寻找精度分辨率更高的地形数据

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407999.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

this.$emit使用方法【前端技术】

this.$emit使用方法【前端技术】

this.$emit()主要用于子组件向父组件传值。 下面就给大家举一个实际开发中使用到的案例。 需求&#xff1a; 点击关联项目&#xff0c;弹出关联项目数据进行选择一条数据&#xff0c;点击确定&#xff0c;项目编号会回显到关联项目中。 1新增页面 2 新增页面中点击关联项目弹出…
阅读更多...
vue3全局自定义指令实现按钮权限控制

vue3全局自定义指令实现按钮权限控制

1. 文档介绍的全局自定义指令 在Vue的模板语法中我们除了使用&#xff1a;v-show、v-for、v-model等&#xff0c;Vue其实 也允许我们来自定义自己的指令。 1&#xff09;注意&#xff0c;在 Vue 中&#xff0c;代码复用和抽象的主要形式是组件。 2&#xff09;然而&#xff0c…
阅读更多...
HTML+CSS实现搜索框

HTML+CSS实现搜索框

HTMLCSS实现搜索框&#xff1a; 需求分析&#xff1a; 1、输入框焦点事件 onfocus:成为焦点, 点击输入框的时候&#xff0c;出现闪烁光标&#xff0c;此时可以输入内容。 onblur :失去焦点, 点击页面空白区域&#xff0c;光标消失。此时不可以输入内容。 2、获取元素 3、…
阅读更多...
vite配置@别名，以及如何让vscode智能提示路经

vite配置@别名，以及如何让vscode智能提示路经

vite配置别名 vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue// 配置别名import { resolve } from "path"; // https://vitejs.dev/config/ export default defineConfig({plugins: [vue()],// ↓解析配置resolve: {// ↓路…
阅读更多...
HTML基础之form表单

HTML基础之form表单

目录 一&#xff1a;表单属性 1 name 属性 2 action属性 3 method属性 4 target属性 5 enctype属性 二&#xff1a;表单对象 1 input标签 2 多行文本textarea 3 下拉列表select 4 表单控件&#xff08;元素&#xff09;button 5 表单控件&#xff08;元素&#xff…
阅读更多...
Vuex持久化插件(vuex-persistedstate)

Vuex持久化插件(vuex-persistedstate)

为什么使用持久化 目的: 让在vuex中管理的状态数据同时储存在本地。可免去自己储存的环节。 在开发的过程中&#xff0c;像用户信息&#xff08;名字&#xff0c;头像&#xff0c;token&#xff09;需要vuex中储存且需要本地储存再例如&#xff0c;购物车如果需要未登录状态下…
阅读更多...
Router-view

Router-view

我们都知道&#xff0c;路由指的是组件和路径的一种映射关系。Router-view也被称为路由的出口,今天我们就探讨下如何去使用路由出口。 也就是: 路径--------------------------------------------------------------->页面 可以把router-view理解成一类代码存放的位置。 …
阅读更多...
vue3项目中使用three.js

vue3项目中使用three.js

vue3项目中使用three.js前言一、three.js是什么&#xff1f;二、vue3中下载与安装three.js三、操作步骤1.创建场景2.创建物体3.添加光源4.添加相机5.开始渲染四、myThree.vue源代码五、效果图1.单个模型2.多个模型总结前言 在vue3项目中&#xff0c;通过three.js使用了一段短小…
阅读更多...
java 课程设计——银行管理系统

java 课程设计——银行管理系统

银行管理系统&#xff08;java&#xff09; 环境&#xff1a; idea2020 jdk1.8 能实现的功能&#xff1a; 1.注册账户 2.登录 3.查询账户信息 4.存款 5.取款 6.向另一个账户转账 7.修改账户密码 8.注销账户 项目结构 项目演示 1.主页面&#xff1a; 2.注册账号&#xff1a;…
阅读更多...
多行文本溢出显示省略号

多行文本溢出显示省略号

文本溢出显示省略号分两种情况&#xff0c;单行文本溢出显示省略号&#xff08;参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873&#xff09;&#xff0c;另外一种就是多行文本溢出显示省略号。 多行文本显示省略号有两种办法 第一种&#xff1a; …
阅读更多...
解决Vue刷新后页面数据丢失的问题（sessionStorage和localStorage的用法）

解决Vue刷新后页面数据丢失的问题（sessionStorage和localStorage的用法）

一、为什么刷新后数据会丢失 vuex存储的数据只是在页面中&#xff0c;相当于全局变量&#xff0c;页面刷新的时候vuex里的数据会重新初始化&#xff0c;导致数据丢失。因为vuex里的数据是保存在运行内存中的&#xff0c;当页面刷新时&#xff0c;页面会重新加载vue实例&#xf…
阅读更多...
初识React及React开发依赖介绍

初识React及React开发依赖介绍

文章目录初识ReactReact介绍React特点React的依赖介绍React的开发依赖Babel和React的关系React的依赖引入初识React React介绍 React是什么呢? 相信每个做开发的人对它都或多或少有一些印象; 这里我们来看一下官方对它的解释:用于构建用户界面的 JavaScript 库; 目前对于前端…
阅读更多...
H5页面实现微信授权登录

H5页面实现微信授权登录

项目需求描述&#xff1a; 用户通过扫码海报携带活动二维码跳转到h5页面&#xff0c;并且完成微信授权&#xff0c;完成授权的用户进入小程序后不再进行授权操作。这里边涉及到了两个大问题&#xff0c;一是怎样在一个域名下部署两个项目&#xff0c;二是用户点击授权之后跳转…
阅读更多...
vue.js not detected问题解决

vue.js not detected问题解决

最近在看vue的时候&#xff0c;发现之前装过的vuedevtools提示vue.js is not detected。重装了一次后&#xff0c;发现对于没有应用vue框架的页面&#xff0c;的确是检测不到vue.js&#xff0c;所以报这个很正常&#xff1b;切换到有vue.js资源的页面&#xff0c;调试界面就会自…
阅读更多...
史上最详细vue的入门基础

史上最详细vue的入门基础

一&#xff1a;Vue Vue&#xff1a;一种用于构建用户界面的渐进式javascript框架 Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件 特定&#xff1a; 1、采用组件化模式&#xff0c;提高代码复用率&#xff0c;且让代码更好…
阅读更多...
安装与配置webpack-dev-serve

安装与配置webpack-dev-serve

作用 相当于在本地开启了一个服务&#xff0c;我们可以通过http网络请求访问提高了IO性能&#xff0c;因为webpack-dev-server将我们的文件编译后放到内存里面&#xff0c;以空间换时间无需我们每次都需要手动编译我们的文件&#xff0c;我们每次保存文件&#xff0c;就会自动…
阅读更多...
【web前端面试宝典】经典10问（上篇）

【web前端面试宝典】经典10问（上篇）

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列专栏&#xff1a;前端面试 &#x1f451;名言警句&#xff1a;海阔凭鱼…
阅读更多...
Vue：实现TodoList案例（尚硅谷）

Vue：实现TodoList案例（尚硅谷）

Vue核心&#xff1a;Vue核心&#xff1a;组件化编程&#xff08;脚手架&#xff09; 一、静态页面 app.vue 注&#xff1a; MyItem.vue不直接在app.vue中引入&#xff0c;而在MyList.vue中引入 <template><div id"root"><div class"todo-cont…
阅读更多...
【微信小程序】一文读懂，数据请求

【微信小程序】一文读懂，数据请求

&#x1f352;观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列又更新新文章啦&#xff0c;上文我们讲解了微信小程序的全局配置和局部配置&#xff0c;那么今天就让我们来学习微信小程序的数据请求&#xff0c;这可是做小程序交互效果和绑定数据动…
阅读更多...
react生命周期详细介绍

react生命周期详细介绍

目录 挂载&#xff1a;在组件实例被创建并插入到dom中时&#xff0c;生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render componentDidMount 更新&#xff1a;当组件的 props 或 state 发生变化时会触发更新。 componentWillReceive…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023