[3D地图－CesiumJS系列]　一、快速上手

今天要来介绍3D地图的一个API，CesiumJS。
CesiumJS为一个开源JavaScript函式库，
在2011年由一群资料视觉化的团队开发，
并致力於Web的3D地图呈现，相较於ArcGIS，
Cesium具有较轻量的优势，所需记忆体空间较少，速度较快，
并支援WebGL，在行动装置上不需安装外挂应用程序。
其缺点为相关文件较少，功能不如ArcGIS完整。

专案建置

↓ 下载CesiumJS程序包

解压缩後放在专案资料夹中。

↓ 打开package.json，观察dependencies，内有纪录依赖的函式库

下载下来的档案为CesiumJS的一个node.js server，并没有包含外部函式库，要依靠package.json来安装外部函式库。

↓ 打开VSCode Terminal 移动至该专案路径

cd .\node_modules\cesium\

↓ npm藉由package.json安装函式库

npm install

↓ package.json，找建置的指令

↓ 打开node.js server

npm run start

↓ 成功

↓ 开启8080 port页面

看到这个画面就代表成功啦！！

初始化3D地图

在根目录下建立一个html页面，取名为Cesium.html，或者修改原本的index.html也可以。

↓ 建立一个存放地图的div

<div id="cmap"></div>

↓ 引入Cesium.js

    <script src="../Build/Cesium/Cesium.js"></script>

↓ 引入css

    <link rel="stylesheet" href="../Build/Cesium/Widgets/widgets.css" />

↓ css让地图满版

    <style>
        html,
        body,
        #cmap {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>

↓ 初始化地图，新建一个Cesium.Viewer的物件，第一个参数存放地图的容器Id，第二个参数为设定(选填)。

        const viewer = new Cesium.Viewer('cmap');

↓ 结果

地图功能介绍

↓ 搜寻列

↓ 回到起始中心点

↓ 投影

↓ 底图切换

点线面

↓ 在地图上新增物件，使用 [地图物件].entities.add()

        let point = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(121, 23.5),
            point: {
                pixelSize: 10,
                color: Cesium.Color.YELLOW,
            },
        });

点资料属性

position：座标位置，使用Cesium.Cartesian3.fromDegrees设定座标，并填入经度及纬度。
point：标记点的设定。

↓ 结果

↓ 新增线资料polyline

        let line = viewer.entities.add({
            name: "line",
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([121.523333, 25.15, 120.3508, 23]),
                width: 5,  // 线宽度
                material: Cesium.Color.RED,　　// 红色
                clampToGround: true,  // 虚线
            },
        });

相较於点不同的地方，这边的positions放在polyline里面，是一组阵列座标组，经度、纬度依序排放。

↓ 也可以使用fromDegreesArrayHeights来设定z座标，让线段具备高低落差。

        let lineHeight = viewer.entities.add({
            name: "lineHeight",
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights([121.523333, 25.15, 3000, 120.3508, 23, 12000]),
                width: 5,  // 线宽度
                material: new Cesium.PolylineOutlineMaterialProperty({
                    color: Cesium.Color.ORANGE,  // 橘色
                    outlineWidth: 2,  // 线外框宽度
                    outlineColor: Cesium.Color.BLACK,  // 线外框颜色
                }),
            },
        });

↓ 结果

↓ 剖面图

可以发现橘线从12000m高空慢慢下降到3000m，逐渐贴近红线。

↓ 面图徵与线的呼叫方式大同小异

        let polygon = viewer.entities.add({
            name: "polygon",
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray([
                    120.6, 22.8,
                    120.7, 22.6,
                    120.5, 22.5,
                ]),
                material: Cesium.Color.RED,
            },
        });

↓ 还可以让每个点具备延伸高度，让面图徵变成柱状型

        let polygon3D = viewer.entities.add({
            name: "polygon3D",
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray([
                    121, 23.5,
                    121.5, 23.5,
                    121.2, 23,
                ]),
                extrudedHeight: 5000,  // 拉伸高度(m)
                material: Cesium.Color.GREEN,  // 绿色
                closeTop: false,  // 顶部是否密合
                closeBottom: false,  // 底部是否密合
            },
        });

有拉伸高度的面图徵，可以想像只要把建筑物的棱角及高度记录下来，即可把建筑物的外框描绘出来。

↓ 结果