Cesium-Sandcastle(基本流程)

上一篇博文操作结束,就可以有运行环境,本篇介绍主要是方便之后写代码。学习每一项技术,每次都特别讨厌开始,因为环境+写代码+运行代码流程不熟悉。本篇博文+上一篇就能解决这些问题,我也是刚开始学习,书写不周,欢迎讨论。

1,下载cesiumjs(https://cesium.com/cesiumjs/);
2,打开官方沙盒(http://mars3d.cn/forcesium/Apps/Sandcastle/),将js代码和htmlcss代码复制下来,拷贝到下面代码对应位置(js和css路径已修改,能正常运行);
3,js代码拷贝至Sandcastle_Begin-Sandcastle_End之间,htmlcss代码放到style>和<script id=“cesium_sandcastle_script”>之间,保存至根目录index.html里;
4,打开powershell,运行cnpm start即可;

综上所述,仅需将两处复制修改,其余可视为固定格式。这样一来,包括搭环境以及运行代码的整个流程就有了。接下来在sandcastle里看代码、改代码(直接在sandcastle里也可以,只是我觉得不太舒服),到本地保存学习即可。

本案例主体是使用Viewer加载一个3D地球和其他小控件(默认加载):

<!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, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="Apps/Sandcastle/Sandcastle-header.js"></script>
    <script type="text/javascript" src="Build/CesiumUnminified/Cesium.js" nomodule></script>
    <script type="module" src="Apps/Sandcastle/load-cesium-es6.js"></script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
    <style>
        @import url(Apps/Sandcastle/templates/bucket.css);
        //可理解为links,不同之处,在于加载css文件的先后问题,不影响正常写代码
    </style>
    <div id="cesiumContainer"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
        function startup(Cesium) {
            'use strict';
        //Sandcastle_Begin
        var viewer = new Cesium.Viewer('cesiumContainer');
        //Sandcastle_End
            Sandcastle.finishedLoading();
        }
        if (typeof Cesium !== 'undefined') {
            window.startupCalled = true;
            startup(Cesium);
        }
    </script>
</body>
</html>

Viewer详解:
博客:https://blog.csdn.net/weixin_42078760/article/details/81675838
官方API:http://cesium.xin/cesium/cn/Documentation1.62/Viewer.html?classFilter=viewer
图解:https://my.oschina.net/u/1470240/blog/1932096

搜索beijing,这视角还是很清楚的,cesium很强!
Cesium-Sandcastle(基本流程)_第1张图片
Cesium-Sandcastle(基本流程)_第2张图片

你可能感兴趣的:(技术)