Cesium + 天地图本地部署方案

原创

已于 2023-11-26 11:15:09 修改 · 2.3k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html5 #js

于 2023-11-26 11:14:44 首次发布

演示地址

cesium: v1.111.0

近年来，地理信息系统（GIS）的应用越来越广泛，而Cesium和天地图作为GIS领域的两个重要工具，相结合的本地部署方案备受关注。本文将介绍如何在本地环境中搭建Cesium与天地图的集成方案，为地理可视化提供更灵活、定制化的解决方案。

1. 准备工作

在开始之前，确保你已经完成以下准备工作：

安装Node.js和npm
下载Cesium的最新版本
获取天地图的API密钥

2. Cesium的安装与配置

首先，解压Cesium的压缩包，并进入Cesium-1.111\Build\Cesium目录。然后，新建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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

幻雪暗影

关注关注

14
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用Cesium加载并集成天地图

TqbcAbap的博客

09-25

1058

Cesium是一个强大的地理可视化库，它提供了丰富的功能和工具，使开发者能够在Web应用程序中创建交互式的地理信息展示。天地图是中国国家地理信息公共服务平台提供的地图服务，它提供了高质量的地图数据和服务。在本文中，我们将介绍如何使用Cesium加载并集成天地图，以便在Cesium应用程序中显示天地图数据。接下来，我们需要创建一个Cesium的Viewer实例，并将其绑定到HTML文件中的一个容器元素中。除了矢量地图之外，天地图还提供了其他类型的地图，例如影像地图、地形图等。在这里，我们选择了矢量地图样式（

Cesium 9 ，Cesium 离线地图本地实现与内网服务器部署（ Vue + Cesium 多项目共享离线地图切片部署实践）

NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）

07-14

2213

⭐在使用 Vue 与 Cesium 进行三维可视化开发的过程中，离线地图切片往往是提高加载性能、避免外网依赖的重要方式。很多实际业务场景中，一个服务器上往往会部署多个前端系统（如大屏系统 bigscreen 与管理系统 system），并都需要使用相同的一套地图切片数据。本文将详细讲解如何在 Nginx 中高效地配置多个项目共享一套地图切片资源，从项目目录结构、Nginx 配置、Cesium 代码编写、到常见问题与注意事项，提供一整套完整可复制的实战方案。

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

优快云-Ada助手 2023.11.30
恭喜您发布了第13篇博客，“Cesium + 天地图本地部署方案”，内容非常实用且有深度。希望您能继续分享关于本地部署方案的经验和心得，或者可以考虑拓展到其他相关的技术领域，让更多的读者受益。期待您的下一篇作品！

cesium 调用天地图的两种方式

liyan_gis的专栏

05-24

6839

Cesium调用天地图可以使用wmts方式加载，还可以使用url模板的方式加载，效果如图所示：本文以天地图影像为例，如果想加矢量图或者地形晕圈图，可以私信我。方式一：wmts的方式看下官网的说明：提供由兼容WMTS 1.0.0的服务器提供的平铺图像。此提供程序支持HTTP KVP编码和RESTful GetTile请求，但不支持SOAP编码。下面标出了比较重要的构造参数的参数下面是具体代码： viewer.imageryLayers.addImageryPr...

[cesium] 地图初始化，天地图、影像图、加载高德地图、点击地图，创建点、线、面

最新发布

qq_14993591的博客

09-17

515

【代码】[cesium] 地图初始化，创建点、线、面

cesium加载天地图 加载wmts

AllBluefm的专栏

04-02

1895

【代码】cesium加载天地图 加载wmts。

Cesium本地化部署

sinat_34721059的博客

05-26

1784

Cesium 初学入门

本地开发加载天地图

datouniao1的博客

01-28

4213

首先到天地图控制台申请一个key: 如果是本地测试，那么对应的白名单设置为null 第二步:使用key，加载天地图: <!DOCTYPE html> <html style="width:100%;height:100%;margin:0;font-family:Microsoft YaHei;"> <head> <meta charset=...

2401_84446787的博客

05-15

715

pathRewrite: {// 把程序中的地址转换成“真实地址”+‘/satellite’后面的部分如‘/satellite/satellite/z={z}&x={x}&y={y}‘，被转换成’http://localhost:3000/satellite/z={z}&x={x}&y={y}’拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！好好的准备一下简历，毕竟是找工作的敲门砖。

vue+cesium踩坑记录(登录点击2次、天地图跨域、entity漂移、图层遮挡) 2021-09-02

weixin_43341974的博客

09-10

2865

windows部署vue打包项目报错处理系统环境场景描述原理解析解决方案系统环境 windows10、vue2.6、axios0.21.1、nginx-1.20.1 场景描述在使用vue开发过程中因为前后端分离，后端服务器在另外的机器上，所以请求后台数据时会遇到跨域问题而请求失败，所以需要在axios里配置代理。配置代理完成后就能正常访问到后台数据了，但是项目开发完毕后npm run build打包后生成的dist文件夹发布到Nginx发现请求报错了，是因为Nginx没有自动原理解析 @click

Cesium访问本地地图vue

03-25

根据之前用户提供的引用，引用[1]和引用[2]提到了加载高德地图和天地图的方法，但用户需要的是本地离线地图。所以需要调整数据源的配置，指向本地的瓦片文件。第一步，用户需要准备好离线地图的瓦片数据。常见的...

Cesium快速入门到精通系列教程一：环境搭建、基础设置及自定义地图

duansamve的博客

05-31

1390

1、官方渠道下载Cesium（可选择历史版本）访问 Cesium GitHub Releases，此处列出了所有正式发布的版本。通过标签（如 v1.95.0）选择目标版本，下载对应的压缩包（包含源码、构建文件和网页）。优势：获取官方认证版本，附带完整变更日志和修复记录。以上命令执行完成后，将node_modules中cesium的以下四个目录复制到public目录：另外，将node_modules中cesium的Widgets目录复制到src目录：cmd中执行。

cesium本地部署、在线部署

03-09

3522

node部署cesium 官网下载cesium：https://cesium.com/downloads/ 打开cesium文件夹，执行命令：cnpm i 安装依赖启动：npm start 访问：http://localhost:8080/

Cesium——天地图服务调用流程&文档&申请Key、token&代码

weixin_46127993的博客

01-05

7675

天地图是中国国家基础地理信息系统，由中国测绘地理信息局和国家地理信息公共服务平台共同开发和运营。它提供了包括地图数据、地理编码、路径规划、地理搜索等多项地理信息服务。天地图的目标是为各行业提供高质量、全面的地理信息数据和解决方案，支持政府决策、城市规划、资源管理、环境保护、交通导航、物流配送等领域的应用。天地图在国内广泛应用于政府机构、企事业单位以及个人用户的地理信息查询与分析工作中。

Cesium学习笔记——Cesium中添加天地图三维服务插件

蹲在草丛嚼益达

02-19

2102

【代码】Cesium学习笔记——Cesium中添加天地图三维服务插件。

Cesium本地文档部署与第一个实例

DTCloud

04-20

693

Cesium 本地化部署和添加 Sandcastle 示例

TqbcAbap的博客

09-24

1065

Cesium 是一个用于创建高性能、跨平台的虚拟地球和地理信息系统 (GIS) 应用程序的开源 JavaScript 库。它提供了强大的功能和工具，使开发人员能够构建令人惊叹的地理可视化应用。本文将介绍如何在本地部署 Cesium，并向您展示如何添加一个基本的 Sandcastle 示例。

使用Tomcat架设Cesium本地服务器(含Nodejs,Python方法)

遨游在太空

04-21

7467

本文主要说明如何使用Tomcat作为本地web服务器，然后将Cesium整个文件夹部署在Tomcat的Webapps文件夹内，即可实现浏览器访问Cesium本地主页。我们将Cesium部署在本地服务器上主要有以下方面的考虑：局域网内，创建Web服务，通过对Cesium服务端文件的修改，展示我们自己想要提供的功能，从而可以在局域网内任何一台机器上通过浏览器即可访问将测试修改后的Cesiu...

cesium影像、地形本地部署记录

junky12345的博客

09-05

440

本文介绍了Cesium离线部署的完整方案：1)通过Nginx部署Cesium库；2)将GMap.NET缓存导出为xyz格式实现影像离线；3)使用cesium-terrain-builder转换tif地形数据，配置Nginx支持terrain文件；4)通过Global Mapper处理tif文件实现定制地形区域。文中详细说明了各环节的配置要点，包括文件路径设置、Nginx头信息调整和关键注意事项（如取消GeoTIFF金字塔选项）。同时提供了Cesium加载自定义影像和地形的JavaScript代码示例。

【开发备忘】下载并本地部署天地图WMTS服务

猴扯

08-03

1177

因此，对于得到的瓦片目录，不需要再用GeoServer发布，而是直接随便找个服务器，tomcat也好，apache也行，iis也ok，把瓦片目录放进去，就可以在cesium等地方正确加载了。我是将瓦片结果以二进制的方式直接保存成png，注意这里面的目录结构是"/{z}/{y}/{x}.png"，这和前面用cesium加载的时候url是一样的顺序（TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}），保持一致更能避免出错。