一、多邊形繪制代碼

上一篇介紹了線的繪制，本篇介紹多邊形的繪制，具體代碼如下（别忘了使用你自己的

Token

，基礎環境不知道怎麼布置的請參考開發環境搭建），繪制的結果如下圖所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
    <div id="cesiumContainer" style="position:fixed;left:0px;top:0px;width:100%;height:100%;"></div>
    <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // Replace `your_access_token` with your Cesium ion access token.

    Cesium.Ion.defaultAccessToken = '你的Token; //替換成你的Token
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder:true,//控制右上角第一個位置的查找工具
        homeButton:true,//控制右上角第二個位置的home圖示
        sceneModePicker:true,//控制右上角第三個位置的選擇視角模式，2d，3d
        baseLayerPicker:true,//控制右上角第四個位置的圖層選擇器
        navigationHelpButton:true,//控制右上角第五個位置的導航幫助按鈕
        animation:false,//控制左下角的動畫器件
        timeline:false,//控制下方時間線
        fullscreenButton:false,//右下角全屏按鈕
        vrButton:false,//右下角vr按鈕
        shouldAnimate: true,//允許動畫同步
        infoBox : true, //不顯示點選要素之後顯示的資訊
        terrainProvider: Cesium.createWorldTerrain()
    });

    viewer._cesiumWidget._creditContainer.style.display="none";//取消版權資訊

    let polygon_height = viewer.entities.add({
        name: "polygon_height",
        polygon: {
            show: true,
            hierarchy: Cesium.Cartesian3.fromDegreesArray([
                110.0,
                30.0,
                120.0,
                30.0,
                115.0,
                40.0,
            ]),
            height: 100000,
            material: Cesium.Color.CYAN.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK,
        }
    })

    // let polygon_clamp_to_ground = viewer.entities.add({
    //     name: "polygon_clamp_to_ground",
    //     polygon: {
    //         show: true,
    //         hierarchy: Cesium.Cartesian3.fromDegreesArray([
    //             110.0,
    //             30.0,
    //             120.0,
    //             30.0,
    //             115.0,
    //             40.0,
    //         ]),
    //         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    //         material: Cesium.Color.CYAN.withAlpha(0.5),
    //         outline: true,
    //         outlineColor: Cesium.Color.BLACK,
    //     }
    // })

    // let polygon_height_and_extruded_height = viewer.entities.add({
    //     name: "polygon_height_and_extruded_height",
    //     polygon: {
    //         show: true,
    //         hierarchy: Cesium.Cartesian3.fromDegreesArray([
    //             110.0,
    //             30.0,
    //             120.0,
    //             30.0,
    //             115.0,
    //             40.0,
    //         ]),
    //         height: 50000,
    //         extrudedHeight: 100000,
    //         // fill: false,
    //         fill: true,
    //         // material: Cesium.Color.CYAN.withAlpha(0.5),
    //         material: Cesium.Color.CYAN,

    //         outline: true,
    //         outlineColor: Cesium.Color.BLACK,
    //         outlineWidth: 5.0,

    //         // closeTop: false,
    //         // closeBottom: false,
    //     }
    // })

    // let polygon_extruded_height = viewer.entities.add({
    //     name: "polygon_extruded_height",
    //     polygon: {
    //         show: true,
    //         hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
    //             110.0,
    //             30.0,
    //             100000,
    //             120.0,
    //             30.0,
    //             100000,
    //             115.0,
    //             40.0,
    //             300000,
    //         ]),
    //         // height: 50000,
    //         extrudedHeight: -50000,
    //         // fill: false,
    //         material: Cesium.Color.CYAN.withAlpha(0.5),
    //         // material: Cesium.Color.CYAN,

    //         outline: true,
    //         outlineColor: Cesium.Color.RED,
    //         outlineWidth: 5.0,
    //         perPositionHeight: true,
    //     }
    // })

    // let polygon_per_position_height = viewer.entities.add({
    //     name: "polygon_per_position_height",
    //     polygon: {
    //         show: true,
    //         hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
    //             110.0,
    //             41.0,
    //             0.0,
    //             115.0,
    //             41.0,
    //             500000.0,
    //             120.0,
    //             41.0,
    //             0.0,
    //         ]),
    //         perPositionHeight: true,
    //         // perPositionHeight: false,
    //         material: Cesium.Color.CYAN.withAlpha(0.5),
    //         outline: true,
    //         outlineColor: Cesium.Color.BLACK,
    //         outlineWidth: 10.0
    //     }
    // })

    // let polygon_extruded_height_close_top = viewer.entities.add({
    //     name: "polygon_extruded_height_close_top",
    //     polygon: {
    //         show: true,
    //         hierarchy: Cesium.Cartesian3.fromDegreesArray([
    //             110.0,
    //             30.0,
    //             120.0,
    //             30.0,
    //             115.0,
    //             40.0,
    //         ]),
    //         height: 50000,
    //         extrudedHeight: 100000,
    //         material: Cesium.Color.CYAN,

    //         outline: true,
    //         // outlineColor: Cesium.Color.RED,
    //         outlineWidth: 5.0,

    //         closeTop: false,
    //         closeBottom: false,
    //         distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000000.0)
    //     }
    // })

    viewer.flyTo(viewer.entities);
    </script>
</body>
</html>

二、圖解參數

2.1 name

polygon

的名稱，在滑鼠點選點彈出的

infoBox

中會顯示該名稱。

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

2.2 polygon

多邊形的繪制參數

2.2.1 show

是否顯示，

true

為顯示，

false

為不顯示，預設為顯示

2.2.2 hierarchy

多邊形的坐标，為笛卡爾坐标系的地心坐标，可以有兩種形式

一種是帶高程值的，如

Cesium.Cartesian3.fromDegreesArrayHeights([第1個點的經緯度高程, 第2個點的經緯度高程, ...])

，如果想要高程值起作用，需設定

perPositionHeight: true

另一種是不帶高程的，隻有經緯度，如

Cesium.Cartesian3.fromDegreesArrayHeights([第1個點的經緯度, 第2個點的經緯度, ...])

，此時的高程預設為

，可配合

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND

參數讓多邊形貼地

2.2.3 height

多邊形的高程，機關

米

，即便

hierarchy

設定了高程，隻要

perPositionHeight: false

，多邊形都會以

height

作為高程值，預設值為

，下圖為設定了

height: 100000

的效果

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

2.2.4 heightReference

多邊形的高程參考面，預設值為

Cesium.HeightReference.NONE

，表示使用絕對高程，如果想要多邊形貼在地表，可設定為

Cesium.HeightReference.CLAMP_TO_GROUND

，下圖為貼地的效果

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

2.2.5 extrudedHeight

多邊形的外擴高程，預設值為

，當值不為

時，可形成多邊形棱柱，即

polygon

可用來繪制幾何體

下圖為

height: 50000

，

extrudedHeight: 100000

的效果，可以把height了解為棱柱的底面高程，

extrudedHeight

了解為頂面高程

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

配合

hierarchy

的高程和

perPositionHeight

，并取消

height

，可繪制頂面或底面傾斜的棱柱，如下圖所示

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

2.2.6 material

多邊形的樣式，顔色也是其中的一種，目前可以先把這個參數當作設定顔色用，預設為白色，如上圖中的多邊形的顔色為青色，對應的值為

Cesium.Color.CYAN

，也可以使用

RGBA

的格式（A表示透明度），如紅色可用

new Cesium.Color(1, 0, 0, 1)

表示

（rgb的取值為0-1，如果是0-255的可以除以255進行歸一化）

。

下圖展示了半透明

（A=0.5）

顔色的顯示效果，對應的值為

new Cesium.Color(0, 0, 1, 0.5)

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

2.2.7 outline

是否顯示多邊形的邊框，

true

為顯示，

false

為不顯示，預設為顯示，下圖為預設不顯示邊框的效果

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

2.2.8 outlineColor

多邊形邊框的顔色，預設為黑色，值的格式同

material

，下圖為

outlineColor: Cesium.Color.RED

的顯示效果

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

2.2.9 outlineWidth

多邊形邊框的寬度，此參數我修改後不起作用，原因還未搞清楚

2.2.10 perPositionHeight

多邊形高程是否使用

hierarchy

中每個點的高程，

true

為使用，

false

為不使用，預設為不使用。使用該參數，我們可以自定義由不同高程的點構成的多邊形，如下圖我們可建構垂直地表的多邊形

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

2.2.11 closeTop

在使用

extrudedHeight

形成棱柱時，頂面是否顯示，

true

為顯示，

false

為不顯示，預設為

true

，下圖為

false

的效果，可見頂面未顯示

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

2.2.12 closeBottom

在使用

extrudedHeight

形成棱柱時，底面是否顯示，

true

為顯示，

false

為不顯示，預設為

true

，下圖為

false

的效果，可見底面未顯示

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

2.2.13 distanceDisplayCondition

多邊形在該視角距離内可見，其他距離不可見，預設為空，即一直可見。如

new Cesium.DistanceDisplayCondition(100.0, 2000000.0)

表示在視角離多邊形的距離為

到

之間時可看到該多邊形，其他距離不顯示該多邊形，這個參數可用來實作類似百度地圖那種不同縮放顯示不同内容的功能

Cesium學習四：使用entity繪制polygon一、多邊形繪制代碼二、圖解參數

一、多邊形繪制代碼

二、圖解參數

2.1 name

2.2 polygon

2.2.1 show

2.2.2 hierarchy

2.2.3 height

2.2.4 heightReference

2.2.5 extrudedHeight

2.2.6 material

2.2.7 outline

2.2.8 outlineColor

2.2.9 outlineWidth

2.2.10 perPositionHeight

2.2.11 closeTop

2.2.12 closeBottom

2.2.13 distanceDisplayCondition

繼續閱讀

geotrellis入門03——專業術語

矢量切片

python 利用arcpy批量裁剪tif檔案，并生成tif檔案

從招聘資料看GIS就業

GIS—手把手用ArcGIS打開osm檔案

地圖資料服務GIS相關

空間分析判斷以及坐标轉換工具

proj4測繪坐标系轉換

玩轉地圖投影

GIS | 坐标系統與地圖投影坐标系統三個半概念地圖投影投影坐标系統

arcgis for js如何畫台風風圈

cesium坐标轉換：不同坐标系之間的互相轉換

GlobalMapper20如何導入文本類（txt，csv，excel）的坐标資料序：一、如何導入離散的坐标點二、離散的坐标點如何生産互相連接配接的線三、離散的坐标點如何生成範圍面

GlobalMapper20正方形的資料變成了矩形，變形了？一、問題描述二、問題分析：三、顯示方式調整

創業,不能兼職(69)---空間資料和屬性資料

坐标系統和投影變換在桌面産品中的應用