草庐IT

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

繁华哟 2023-04-14 原文

文章目录

前言

直接把地图数据切片，然后通过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:UsersLenovoDesktop ginx-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/得到只有湖南省影像的地图。

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

参考资料：

  1. Cesium离线地图极简教程
  2. 如何在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;

本地影像效果如图

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

参考资料：

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

2.4 遇到的问题

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

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

地形Cesiumimgimg_convertxffandroid前端后端

有关Cesium加载离线地图和离线地形的更多相关文章

  1. ruby - 完全离线安装RVM - 2

    我打算为ruby​​脚本创建一个安装程序，但我希望能够确保机器安装了RVM。有没有一种方法可以完全离线安装RVM并且不引人注目(通过不引人注目，就像创建一个可以做所有事情的脚本而不是要求用户向他们的bash_profile或bashrc添加一些东西)我不是要脚本本身，只是一个关于如何走这条路的快速指针(如果可能的话)。我们还研究了这个很有帮助的问题:RVM-isthereawayforsimpleofflineinstall?但有点误导，因为答案只向我们展示了如何离线在RVM中安装ruby。我们需要能够离线安装RVM本身，并查看脚本https://raw.github.com/wayn

  2. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  3. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  4. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  5. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  6. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

  7. ruby-on-rails - 是否可以让 ActiveRecord 为使用 :joins option? 加载的行创建对象 - 2

    我需要做这样的事情classUser'User',:foreign_key=>'abuser_id'belongs_to:gameendclassGame['JOINabuse_reportsONusers.id=abuse_reports.abuser_id','JOINgamesONgames.id=abuse_reports.game_id'],:group=>'users.id',:select=>'users.*,count(distinctgames.id)ASgame_count,count(abuse_reports.id)asabuse_report_count',:

  8. ruby - 运行 rackup private_pub.ru -s thin -E production 命令时无法加载此类文件 -- thin (LoadError) - 2

    我指的是pubrailscasttutorial并已正确执行所有步骤，但在运行最后一个命令时，即rackupprivate_pub.ru-sthin-Eproduction为了架设faye服务器，我收到以下错误:/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in`require':cannotloadsuchfile--thin(LoadError)from/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in`require'from/var/lib/gems/1.9.1/gems

  9. ruby - libxml-ruby 无法在 x86_64 上加载 - 2

    我们在服务器端遇到libxml-rubygem的问题可能是因为它使用x86_64架构:$uname-aLinuxip-10-228-171-642.6.21.7-2.fc8xen-ec2-v1.0#1SMPTueSep110:25:30EDT2009x86_64GNU/Linuxrequire'libxml'LoadError:/usr/local/ruby-enterprise/lib/ruby/gems/1.8/gems/libxml-ruby-1.1.4/lib/libxml_ruby.so:invalidELFheader-/usr/local/ruby-enterprise/

  10. Ruby 不从 stdlib 加载 CSV - 2

    我不太确定为什么这不起作用，我一直在寻找解决方案。很简单，我正在运行一个执行require'CSV'的小脚本。，它在我的Mac1.9.3-p327上运行良好，但在p374上的服务器上无法运行。我得到的错误是/home/deployer/.rbenv/versions/1.9.3-p374/lib/ruby/1.9.1/rubygems/custom_require.rb:36:inrequire':cannotloadsuchfile--CSV(LoadError)from/home/deployer/.rbenv/versions/1.9.3-p374/lib/ruby/1.9.1/

随机推荐