Cesium學習筆記（二）：新增實體物件
阿新 • • 發佈：2018-12-30
1. 首先，你需要選擇一款程式碼編輯器，可以選擇eclipse，webstorm，visual studio code這種比較大型的帶有程式碼提示的，你也可以選擇sublime，nodepad++，atom這種沒有提示的，但是不能使用word這種自帶格式的，這樣出來的程式碼其實是有很大問題的。
以上這些你都可以自行選擇，Cesium官方也給我們提供了一個很好用的東西Sandcastle，它可以很方便的把效果顯示出來，不用來回切換，而且它還自帶了很多例子，你可以直接通過例子來學習，它就在你本地的伺服器中，輸入localhost:8080/Apps/Sandcastle就可以找到。
但是我還是建議你至少找一款編譯器，至少都有最基本的程式碼提示不是？畢竟官方這個只是個網頁，一點程式碼提示都沒有
2. 下面進入正題
首先在我們的編譯器中開啟HelloWorld.html，可以看到內容，我稍微註釋一下
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content 3. 第一個例子
首先我們在地圖上新增一個多邊形實體
var viewer = new Cesium.Viewer('cesiumContainer');
//建立一個多邊形實體物件
var wyoming = viewer.entities.add({
name : 'Wyoming',
polygon : {
//給出位置
hierarchy : Cesium.Cartesian3.fromDegreesArray([
-109.080842,45.002073,
-105.91517,45.002073,
-104.058488,44.996596,
-104.053011,43.002989,
-104.053011,41.003906,
-105.728954,40.998429,
-107.919731,41.003906,
-109.04798,40.998429,
-111.047063,40.998429,
-111.047063,42.000709,
-111.047063,44.476286,
-111.05254,45.002073]),
//離地高度
height : 0,
//材質（相當於填充色，但是可以填充的可不止顏色，可以看到這裡是紅色半透明）
material : Cesium.Color.RED.withAlpha(0.5),
//外邊線
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
//這是一個動畫效果，進入後鏡頭就會自動轉到這個實體處
viewer.zoomTo(wyoming);
還可以讓它擁有體積
//離地高度
wyoming.polygon.height = 300000;
//兩個高度差組成了它的體積
wyoming.polygon.extrudedHeight : 250000;
我們還可以給他配上一個介紹
wyoming.description = '\
<img\
width="50%"\
style="float:left; margin: 0 1em 1em 0;"\
src="//imgsrc.baidu.com/baike/abpic/item/d35a10f45f26d158dcc4740e.jpg"/>\
<p>\
一大塊果凍，想不想吃？\
</p>\
<p>\
介紹: \
<a style="color: WHITE"\
target="_blank"\
href="http://imgsrc.baidu.com/baike/abpic/item/d35a10f45f26d158dcc4740e.jpg">點選檢視</a>\
</p>';
當然我們可以照著這個例子畫點其他的，比如一個白色的橢圓
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
ellipse : {
//長短半軸（橢圓嘛）
semiMinorAxis : 250000.0,
semiMajorAxis : 400000.0,
material : Cesium.Color.WHITE.withAlpha(0.5)
}
});
viewer.zoomTo(viewer.entities);
形狀有很多，這裡列舉一些
- 盒 entity.box
- 圈和橢圓 entity.ellipse
- 走廊 entity.corridor
- 氣缸和錐體 entity.cylinder
- 多邊形 entity.polygon
- 折線 entity.polyline
- 折線卷 entity.polylineVolume
- 矩形 entity.rectangle
- 球體和橢球體 entity.ellipsoid
- 牆壁 entity.wall
大家可以自己搞幾個玩玩，具體屬性可以查一查API
然後我們繼續玩，我們甚至可以在裡面填充一些圖片
ellipse.material = '//cesiumjs.org/images/2015/02-02/cats.jpg';
再比如把它做成斑馬條紋的
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
ellipse : {
semiMinorAxis : 250000.0,
semiMajorAxis : 400000.0,
//條形材質
material : new Cesium.StripeMaterialProperty({
evenColor : Cesium.Color.WHITE,
oddColor : Cesium.Color.BLACK,
repeat : 16
})
}
});
viewer.zoomTo(viewer.entities);
一條藍色的發光線（怎麼感覺發的是白光）
var entity = viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
-77.1, 35]),
width : 5,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.3,
color : Cesium.Color.BLUE
})
}
});
viewer.zoomTo(viewer.entities);
4. 點，廣告牌和標籤（Points, Billboards, and Labels）
這東西可以用來做標記的，比如說，我把南京的玄武湖標記一下
var xuanwuhu = viewer.entities.add({
name : 'xuanwuhu',
position : Cesium.Cartesian3.fromDegrees(118.793091, 32.074570),
point : {
pixelSize : 5,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2
},
label : {
text : '玄武湖',
font : '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
//垂直位置
verticalOrigin : Cesium.VerticalOrigin.BUTTON,
//中心位置
pixelOffset : new Cesium.Cartesian2(0, 20)
}
});
viewer.zoomTo(xuanwuhu);
廣告牌可以顯示一個圖片
var citizensBankPark = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
//廣告牌
billboard : {
image : 'http://imgsrc.baidu.com/baike/abpic/item/d35a10f45f26d158dcc4740e.jpg',
width : 64,
height : 64
},
label : {
text : 'Citizens Bank Park',
font : '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.TOP,
pixelOffset : new Cesium.Cartesian2(0, 32)
}
});
viewer.zoomTo(citizensBankPark);
5. 新增3D模型
這個比較多，也比較重點，後面會有單獨一篇寫這個，先看個例子吧
var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
model : {
uri : '../Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf'
}
});
//這個是鏡頭追蹤，將鏡頭固定在小車上
viewer.trackedEntity = entity;