Cesium学习笔记2——第一个Cesium程序

合集 - Cesium(15)
1.Cesium学习笔记1——安装配置
2.Cesium学习笔记2——第一个Cesium程序
3.地图服务器GeoServer4.Geoserver发布地图服务5.Cesium学习笔记3——调用Geoserver发布的WMS服务6.Cesium学习笔记4——加载天地图地图服务7.Cesium学习笔记5——加载topojson和Geojson8.Cesium学习笔记6——加载倾斜摄影模型9.Cesium开发遇到的问题解决10.Cesium学习笔记7——几何体绘制11.Cesium学习笔记8——加载城市建筑物火柴盒模型12.Cesium学习笔记9——鼠标交互绘制13.Cesium学习笔记10——通过WFS服务实现交互式属性查询14.Cesium学习笔记11——坐标量测15.Cesium学习笔记12——基于Cesium的分层分户模型构建与可视化
收起

 源码

新建文件夹Exp01，新建一个Demo01.html源码，拷贝build文件夹到Exp01文件夹。

编写网页源码如下：

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <!-- Use correct character set. -->
 5     <meta charset="utf-8" />
 6     <!-- Tell IE to use the latest, best version. -->
 7     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 8     <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
 9     <meta
10       name="viewport"
11       content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
12     />
13     <title>Hello World!</title>
14     <script src="../Build/CesiumUnminified/Cesium.js"></script>
15     <style>
16       @import url(../Build/CesiumUnminified/Widgets/widgets.css);
17       html,
18       body,
19       #cesiumContainer {
20         width: 100%;
21         height: 100%;
22         margin: 0;
23         padding: 0;
24         overflow: hidden;
25       }
26     </style>
27   </head>
28   <body>
29     <div id="cesiumContainer"></div>
30     <script>
31       const viewer = new Cesium.Viewer("cesiumContainer",{
32         geocoder:true,
33         homeButton:true,
34         sceneModePicker:true,
35         baseLayerPicker:true,
36         navigationHelpButton:true,
37         animation:false,
38         timeline:false,
39         fullscreenBUtton:true,
40       });
41     </script>
42   </body>
43 </html>
复制代码

 发布

以管理员身份运行CMD，在其中输入命令如黄色部分，采样http-server进行网页发布。

D:\CesiumExp\CesiumJS>cnpm install http-server -g
[npminstall:get:error] GET https://registry.npmmirror.com/binary-mirror-config/latest ConnectTimeoutError: Connect Timeout Error after 5 reties, status: -1, headers: {}
[npminstall:get:error] GET https://registry.npmmirror.com/binary-mirror-config/latest ConnectTimeoutError: Connect Timeout Error after 5 reties, status: -1, headers: {}
^C
D:\CesiumExp\CesiumJS>cnpm install http-server -g
Downloading http-server to C:\Users\yhexie\AppData\Roaming\npm\node_modules\http-server_tmp
Copying C:\Users\yhexie\AppData\Roaming\npm\node_modules\http-server_tmp\.store\http-server@14.1.1\node_modules\http-server to C:\Users\yhexie\AppData\Roaming\npm\node_modules\http-server
Installing http-server's dependencies to C:\Users\yhexie\AppData\Roaming\npm\node_modules\http-server/node_modules
[1/13] mime@^1.6.0 installed at node_modules\.store\mime@1.6.0\node_modules\mime
[2/13] minimist@^1.2.6 installed at node_modules\.store\minimist@1.2.8\node_modules\minimist
[3/13] http-proxy@^1.18.1 installed at node_modules\.store\http-proxy@1.18.1\node_modules\http-proxy
[4/13] secure-compare@3.0.1 installed at node_modules\.store\secure-compare@3.0.1\node_modules\secure-compare
[5/13] basic-auth@^2.0.1 installed at node_modules\.store\basic-auth@2.0.1\node_modules\basic-auth
[6/13] opener@^1.5.1 installed at node_modules\.store\opener@1.5.2\node_modules\opener
[7/13] url-join@^4.0.1 installed at node_modules\.store\url-join@4.0.1\node_modules\url-join
[8/13] corser@^2.0.1 installed at node_modules\.store\corser@2.0.1\node_modules\corser
[9/13] he@^1.2.0 installed at node_modules\.store\he@1.2.0\node_modules\he
[10/13] chalk@^4.1.2 installed at node_modules\.store\chalk@4.1.2\node_modules\chalk
[11/13] html-encoding-sniffer@^3.0.0 installed at node_modules\.store\html-encoding-sniffer@3.0.0\node_modules\html-encoding-sniffer
[12/13] union@~0.5.0 installed at node_modules\.store\union@0.5.0\node_modules\union
[13/13] portfinder@^1.0.28 installed at node_modules\.store\portfinder@1.0.32\node_modules\portfinder
All packages installed (39 packages installed from npm registry, used 2s(network 2s), speed 254.77KB/s, json 13(68.69KB), tarball 471.93KB, manifests cache hit 26, etag hit 26 / miss 2)
[http-server@14.1.1] link C:\Users\yhexie\AppData\Roaming\npm\http-server@ -> C:\Users\yhexie\AppData\Roaming\npm\node_modules\http-server\bin\http-server


D:\CesiumExp\CesiumJS>cd D:\CesiumExp\Exp01

D:\CesiumExp\Exp01>http-server -g
Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: true
Serve Brotli Files: false
Default File Extension: none

Available on:
http://192.168.126.1:8080
http://192.168.209.1:8080
http://192.168.1.5:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server

复制任意一个网址访问

 

posted @   太一吾鱼水  阅读(322)  评论(0)  编辑  收藏  举报
相关博文：
· Cesium学习笔记1——安装配置
· Cesium学习笔记5——加载topojson和Geojson
· cesium源码编译调试及调用全过程
· Cesium本地文档部署与第一个实例
· Cesium源码阅读环境搭建
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示