CesiumJS - 01 起步 Hello world

泛二己

已于 2024-01-24 20:28:04 修改

阅读量1k

点赞数 22

分类专栏： CesiumJS 文章标签：学习

于 2024-01-24 20:22:47 首次发布

本文链接：https://blog.csdn.net/fjtth0034/article/details/135830650

版权

CesiumJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

0 下载 Cesium

npm install cesium --save

注：此方法下载的是最新版本的 CesiumJS。

下载完毕后，在node_modules里找到如下的 js 文件和 css 文件导入。路径可能和下方不同。

<script src="../node_modules/cesium/Build/Cesium/Cesium.js"></script>
<link href="../node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

接下来就可以在 script 标签内写响应代码，或另创建 .js 文件并在 index.html 中使用 script 标签引入即可。

1 看地球 - Viewer类的实例

Viewer 类类似于 Openlayers 中的 Map 类，可以认为是所有内容的载体，是所有使用的入口，是所有操作的舞台。输入参数如下所示

参数名称	类型	描述
container	html元素或html元素id	地图容器
options	Viewer.ConstructorOptions	描述初始化选项的对象

var viewer = new Cesium.Viewer('cesiumContainer');

上述代码将在 HTML 模板中寻找 id="cesiumContainer" 的元素放置中心地球。

它包含中心的三维地球 globe 和周围的控件 widget 。可以通过配置 Viewer 的选项来选择是否需要各种控件。

![[Pasted image 20240123083403.png]]

options 选项

Geocoder : 地名地址搜索，地点搜索默认使用bing地图。
HomeButton : 主页视图，可覆盖该方法，自定义主页视图.
SceneModePicker : 切换 3D, 2D 和哥伦布视角（Columbus View，2.5D）。
BaseLayerPicker : 选择地球上显示的影像和地形。
NavigationHelpButton :帮助信息
Animation : 控制动画的播放速度。
CreditsDisplay : 版权信息。
Timeline : 时间线，指示当前时间并且允许用户跳跃至特定时间。
FullscreenButton：全屏按钮。
…（其他选项）

如果只要一个地球的话，可以配置如下：

const viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder:false, // 地名搜索
        homeButton:false, // 主页
        sceneModePicker:false, // 场景模式选择器
        baseLayerPicker:false, // 基础图层拾取器
        navigationHelpButton:false, // 导航帮助按钮
        animation:false, // 动画
        timeline:false, // 时间线
        fullscreenButton:false, // 全屏按钮
      });

// 去掉版权信息（CreditsDisplay）
viewer._cesiumWidget._creditContainer.style.display="none";

2 用自己的数据 - 加载本地离线的地形和影像

CesiumJS 自带使用 bing Map 的影像和地形信息，但由于网络原因，加载较慢，甚至有些其他的地图数据源无法访问。另外，有些项目是不联网的，需要本地离线使用。上述这些原因使得加载本地离线地形和影像成为了需求。

2.1 实现方式

建立地形及影像资源服务器（爬虫获取数据、服务器配置、解决跨域问题）
移除自带地形及影像，添加本地离线地形和影像

2.2 建立地形及影像资源服务器

本节总共分为三步：

获取数据
Nginx 静态资源服务器配置
解决跨域问题

TODO:: 第 1 步后续会介绍 Python 爬虫爬取地图影像数据，地形数据获取方式有待探索

第 2 步配置 Nginx 服务器请自行搜索解决。

第 3 步解决跨域问题，请将 Nginx 的配置文件 nginx.conf 更改为如下内容：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;

    server {
        listen       81; # 更改成自己配置的端口号
        server_name  localhost;

        location / {
            add_header 'Access-Control-Allow-Origin' $http_origin always; # 全局变量获得当前请求origin，带cookie的请求不支持*
            add_header 'Access-Control-Allow-Credentials' 'true'; # 为 true 可带上 cookie
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # 允许请求方法
            add_header 'Access-Control-Allow-Headers' $http_access_control_request_headers; # 允许请求的 header，可以为 *
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

            root   html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

2.3 移除自带地形及影像，添加本地离线地形和影像

Cesium 默认自带地形和影像，可更换为用户自己的地形和影像数据。

初始化 viewer 时移除，地形对应 option 为 terrainProvider ，影像对应 option 为 imageryProvider 。

默认影像移除后，如果未设置其他影像，地图模型将会是一个蓝色球体。

 const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: new Cesium.EllipsoidTerrainProvider({}),//移除自带地形
        imageryProvider:  new Cesium.UrlTemplateImageryProvider({
          url: {{url}}
        }),//替换为自己的影像
      });

使用时移除

// 移除地形
viewer.scene.terrainProvider=new Cesium.EllipsoidTerrainProvider({});

// 移除影像
viewer.imageryLayers.removeAll()
// 或
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

参考：Cesium.js移除自带地形和影像_cesium移除地形-CSDN博客

TODO:: 加载本地离线地形

3 汇总

启动地图资源服务器后，使用 VS Code 的 Live Server 插件启动，访问本地端口可以看到地球。

<!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>Document</title>
    <script src="../node_modules/cesium/Build/Cesium/Cesium.js"></script>
    <link href="../node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>

    <script>
        let viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider: new Cesium.EllipsoidTerrainProvider({}), // 移除默认地形
            geocoder: false, // 地名搜索
            homeButton: false, // 主页
            sceneModePicker: false, // 场景模式选择器
            baseLayerPicker: false, // 基础图层拾取器
            navigationHelpButton: false, // 导航帮助按钮
            animation: false, // 动画
            timeline: false, // 时间线
            fullscreenButton: false, // 全屏按钮
        })

        viewer._cesiumWidget._creditContainer.style.display = "none";

        viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); // 移除默认 bing Map 影像
        viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
            url: 'http://localhost:81/testMap/roadmap/{z}/{x}/{y}.png', //服务地址,
        }));

    </script>
</body>

</html>