ModelGraphics類是隸屬于實(shí)體對(duì)象的一個(gè)類型，主要用于創(chuàng)建模型圖形，加載的gltf模型數(shù)據(jù)，和前面說(shuō)到的廣告牌類似，只不過(guò)這里添加的模型數(shù)據(jù)。
關(guān)于gltf模型數(shù)據(jù)的制作，請(qǐng)參考前面的博客SuperMap iClient3D for WebGL教程（模型篇）-S3M/GLTF制作
添加的效果如下圖
基礎(chǔ)使用方法如下：
viewer.entities.add({
id: "test",
position: Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200),
model: {
uri: 'data/Cesium_Air.gltf'
}
});
接下來(lái)我們一起來(lái)學(xué)習(xí)下ModelGraphics的特點(diǎn)。
一、主要參數(shù)介紹
1、uri：一個(gè)gltf的地址屬性，可以是本地?cái)?shù)據(jù)，也可以是在線數(shù)據(jù)。
2、show：指定模型是否顯示出來(lái)。
3、scale：指定模型的縮放比例
4、minimumPixelSize：指定模型縮小到多少像素后，不再能被縮小，默認(rèn)值是0，就是能被無(wú)限縮小。例如將值設(shè)為200，不斷縮小場(chǎng)景，我們依然可以看見一個(gè)大小不變化的飛機(jī)模型。
5、maximumScale：模型的最大比例尺寸，指定此屬性后minimumPixelSize將不能持續(xù)被放大，當(dāng)超過(guò)maximumScale后，模型能夠被縮?。徊⑶襪inimumPixelSize是maximumScale能放大到的最大尺寸，是不是比較暈乎，來(lái)看個(gè)動(dòng)圖，我們將maximumScale設(shè)置為50，minimumPixelSize設(shè)置為200，注意觀察中間過(guò)程，中間是否有個(gè)過(guò)程不能再被縮小，當(dāng)放大一定程度后就可以被持續(xù)縮小了
6、incrementallyLoadTextures：官方介紹是設(shè)置在加載模型后紋理是否可以繼續(xù)流入，默認(rèn)是true，據(jù)說(shuō)是在動(dòng)態(tài)修改貼圖的時(shí)候使用的，目前沒有用過(guò)，用到的時(shí)候再來(lái)更新。
7、runAnimations：指定是否應(yīng)該啟動(dòng)模型中指定的gltf動(dòng)畫，默認(rèn)是true，當(dāng)設(shè)置為false時(shí)，gltf動(dòng)畫模型默認(rèn)不啟動(dòng)動(dòng)畫。
8、shadows：模型的陰影方式，當(dāng)viewer的shadows為true時(shí)有效，有陰影的模型將更加具有立體感。
9、heightReference：高度模式，支持Cesium.HeightReference.NONE(絕對(duì)高度)、Cesium.HeightReference.RELATIVE_TO_GROUND（相對(duì)地面）、Cesium.HeightReference.CLAMP_TO_GROUND（貼地）三種高度模式，高度模式通過(guò)字面意思理解即可。
10、distanceDisplayCondition：即是控制模型在什么相機(jī)位置下顯示出來(lái)。例如設(shè)置distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1500,5000)，即是在相機(jī)距離1500-5000的位置范圍內(nèi)顯示，其他范圍模型都不顯示。
11、silhouetteColor：模型的輪廓顏色，默認(rèn)為紅色，需要配合silhouetteSize使用才會(huì)有效果，silhouetteSize為輪廓的像素寬度，我們將silhouetteSize設(shè)置為2.0展現(xiàn)出如下效果：
12、color：指定Color與模型的渲染顏色混合的屬性，默認(rèn)為白色，即沒有任何顏色，顯示模型本色。
13、colorBlendMode：模型的顏色混合模式，支持3種，Cesium.ColorBlendMode.REPLACE（替換模式）、Cesium.ColorBlendMode.MIX（混合模式）、Cesium.ColorBlendMode.HIGHLIGHT（相乘模式），我們將模型的渲染顏色設(shè)置為new Cesium.Color(1,0,0,1)紅色，來(lái)看下三種模式的區(qū)別
14、colorBlendAmount：混合模式的強(qiáng)度值，當(dāng)colorBlendMode為Cesium.ColorBlendMode.MIX時(shí)有效，范圍0-1，0表示不和顏色混合，1則表示替換。
主要的參數(shù)就介紹到此。
二、使用方法
ModelGraphics隸屬于Entity大類，操作當(dāng)然全部在EntityCollection中進(jìn)行操作，接下來(lái)我們來(lái)一步一步的實(shí)現(xiàn)。
1、添加ModelGraphics
我們使用viewer.entities.add方法進(jìn)行添加
添加對(duì)象有幾個(gè)必填參數(shù)id（對(duì)象的唯一標(biāo)識(shí)符。如果沒有提供，則生成GUID，所以建議自己添加）、position、model
viewer.entities.add({
id: "test",
position: Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200),
model: {
uri: 'data/Cesium_Air.gltf',
}
});
這樣即可添加一個(gè)ModelGraphics，其他參數(shù)可以按照上一步介紹到的參數(shù)進(jìn)行按需添加。
我們對(duì)模型數(shù)據(jù)，這里多介紹一個(gè)參數(shù)orientation,也就是實(shí)體的方向?qū)傩裕覀兲砑油昴Ｐ秃?，如果方向不?duì)可以使用這個(gè)方法進(jìn)行調(diào)整模型方向，關(guān)于方向我們需要使用到Cesium.HeadingPitchRoll這個(gè)類型
首先來(lái)了解下Heading、Pitch、Roll三個(gè)參數(shù)。
Heading：即是Z軸方向的旋轉(zhuǎn)角，比如調(diào)整飛機(jī)機(jī)頭的東南西北的方向。
pitch：對(duì)象上下的旋轉(zhuǎn)，比如調(diào)整飛機(jī)機(jī)頭向上，還是向下的方向。
roll：對(duì)象中軸線上的旋轉(zhuǎn)，比如調(diào)整飛機(jī)向左傾斜還是向右傾斜。
我們?cè)O(shè)置Heading為45°
實(shí)現(xiàn)代碼如下：
var position=Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200)
var airmodel=viewer.entities.getById("test");
var headingPitchRoll=new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(45),0,0);
var orientation=Cesium.Transforms.headingPitchRollQuaternion(position,headingPitchRoll);
airmodel.orientation=orientation;
設(shè)置pitch為45°，像不像一只飛翔的小鳥？
三、綜合使用
這里引入一個(gè)entity里面的新類型path，與實(shí)體關(guān)聯(lián)的路徑對(duì)象，和SampledPositionProperty屬性，這里我們添加一個(gè)沿線飛行的飛機(jī)。path類型和SampledPositionProperty類型后續(xù)文章會(huì)講到
代碼如下：
var startTime = viewer.clock.currentTime;
var positions = new Cesium.SampledPositionProperty();
positions.addSample(startTime, Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200));
var stopTime = Cesium.JulianDate.addSeconds(startTime, 60, new Cesium.JulianDate());
positions.addSample(stopTime, Cesium.Cartesian3.fromDegrees(101.88089882736969, 26.60700234866561, 200));
var position = Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200)
var airmodel = viewer.entities.getById("test");
var headingPitchRoll = new Cesium.HeadingPitchRoll(0, Cesium.Math.toRadians(5), 0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, headingPitchRoll);
viewer.entities.add({
id: "test",
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: startTime,
stop: stopTime
})]),
position: positions,
orientation:orientation,
model: {
uri: 'data/Cesium_Air.gltf',
},
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.RED
}),
width: 10
}
});
viewer.trackedEntity = viewer.entities.getById("test");
實(shí)現(xiàn)效果如下：
