天際線，天際線又稱城市輪廓或全景，是指天空與觀察點(diǎn)周圍的表面以及要素相分離的界線。天際線分析功能可根據(jù)觀察點(diǎn)，生成當(dāng)前場景窗口中建筑物頂端邊緣與天空的分離線，主要用于城市建筑規(guī)劃等場景中

iClient3D for WebGL提取天際線

1.創(chuàng)建天際線分析，可設(shè)定相關(guān)展示屬性參數(shù)

// 創(chuàng)建天際線分析對象
var skyline = new Cesium.Skyline(scene);
 //設(shè)置顏色
 skyline.color =Cesium.Color.CYAN;
// 設(shè)置天際線的顯示模式,DisplayMode.LINE表示天際線的線模式，DisplayMode.FACE表示天際線的面模式
//默認(rèn)為線模式
skyline.displayStyle=Cesium.Skyline.displayMode.LINE

2.設(shè)置觀測點(diǎn)參數(shù)并執(zhí)行（以場景當(dāng)前位置為例，可按照需求進(jìn)行設(shè)定）

// 獲取場景的當(dāng)前相機(jī)位置
var cartographic = scene.camera.positionCartographic;
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
 //天際線分析的視口位置設(shè)置成當(dāng)前相機(jī)位置
 skyline.viewPosition = [longitude, latitude, height];
// 設(shè)置俯仰，單位：度，取值范圍為0-90 
skyline.pitch = Cesium.Math.toDegrees(scene.camera.pitch);
// 獲取或設(shè)置相機(jī)與正北方向的夾角。單位：度，取值范圍0-360
skyline.direction = Cesium.Math.toDegrees(scene.camera.heading);
// 天際線分析半徑設(shè)置為10000米，單位：米。默認(rèn)值為-1.0，表示無窮遠(yuǎn)
skyline.radius = 10000; 
// 執(zhí)行天際線分析
skyline.build(); 

這樣我們就能在場景中看到一條天際線了

image.png

上面我們已經(jīng)在場景中展示出了天際線，那除了這個(gè)，我們還能從天際線分析的結(jié)果里面做什么應(yīng)用尼，接下來我們來看看吧，可結(jié)合webgl官方實(shí)例-天際線分析('http://support.supermap.com.cn:8090/webgl/examples/editor.html#skyline')進(jìn)行查看

天際線分析應(yīng)用

1.提取限高體

addLimitbody()模擬新建建筑物在不影響天際線時(shí)的高度范圍
positon:指定限高體位置信息，由經(jīng)度、緯度的數(shù)組表示
name:指定限高體名稱,用于移除限高體對象removeLimitbody(name) 的指定

//添加限高體對象
    skyline.addLimitbody({
         position: positionarray,
         name: "limitBody"
                });

2.獲取障礙物對象

getObjectIds() ，返回一個(gè)k-v對象，key為S3M圖層ID，value為對象IDS數(shù)組，你可以判定哪些建筑影響了城市的天際線，做相應(yīng)的調(diào)整；

3.獲取二三維天際線結(jié)果

getSkyline2D()&getSkyline3D()
在官方示例里面，提取二維天際線以及拉伸閉合體以及體現(xiàn)這兩種，接下來我們看看通過echarts圖表將兩者結(jié)合使用的例子

//獲取二維天際線對象  
var object = skyline.getSkyline2D();
 //獲取三維天際線對象  
var locations=skyline.getSkyline3D();
//用echarts繪制二維天際線
var myChart = echarts.init(document.getElementById("map"));
var option = {
    backgroundColor: "rgba(73,139,156,0.9)",
    title: {
        text: "二維天際線"
    },

    tooltip: {
        trigger: "axis"
    },

    calculable: true,
    xAxis: [
        {
            type: "category",
            boundaryGap: false,
            data: object.x,
            show: false
        } 
    ],

    yAxis: [
        {
            type: "value",
            min: 0,
            max: 1
        }
    ],

    series: [
        {
            name: "",
            type: "line",
            data: object.y
        }
    ]
};
myChart.setOption(option);
// 監(jiān)聽click事件，獲取相應(yīng)的點(diǎn)并繪制在場景中
myChart.on('click',function(params){
    viewer.entities.removeAll()
    viewer.entities.add({
            position:Cesium.Cartesian3.fromDegrees(locations.x[params.dataIndex], locations.y[params.dataIndex], locations.z[params.dataIndex]),
            billboard: {
                // horizontalOrigin:Cesium.HorizontalOrigin.LEFT,
                image: './images/map.png',
                pixelOffset: new Cesium.Cartesian2(0, -32),
            }
        })
})
}

sy.gif