SuperMap iClient3D for WebGL教程（空间分析）- Skyline天际线分析

作者：刘大

天际线，天际线又称城市轮廓或全景，是指天空与观察点周围的表面以及要素相分离的界线。天际线分析功能可根据观察点，生成当前场景窗口中建筑物顶端边缘与天空的分离线，主要用于城市建筑规划等场景中
###iClient3D for WebGL提取天际线
1.创建天际线分析，可设定相关展示属性参数

// 创建天际线分析对象
var skyline = new Cesium.Skyline(scene);
 //设置颜色
 skyline.color =Cesium.Color.CYAN;
// 设置天际线的显示模式,DisplayMode.LINE表示天际线的线模式，DisplayMode.FACE表示天际线的面模式
//默认为线模式
skyline.displayStyle=Cesium.Skyline.displayMode.LINE

2.设置观测点参数并执行（以场景当前位置为例，可按照需求进行设定）

// 获取场景的当前相机位置
var cartographic = scene.camera.positionCartographic;
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
 //天际线分析的视口位置设置成当前相机位置
 skyline.viewPosition = [longitude, latitude, height];
// 设置俯仰，单位：度，取值范围为0-90 
skyline.pitch = Cesium.Math.toDegrees(scene.camera.pitch);
// 获取或设置相机与正北方向的夹角。单位：度，取值范围0-360
skyline.direction = Cesium.Math.toDegrees(scene.camera.heading);
// 天际线分析半径设置为10000米，单位：米。默认值为-1.0，表示无穷远
skyline.radius = 10000; 
// 执行天际线分析
skyline.build(); 

这样我们就能在场景中看到一条天际线了

上面我们已经在场景中展示出了天际线，那除了这个，我们还能从天际线分析的结果里面做什么应用尼，接下来我们来看看吧，可结合webgl官方实例-天际线分析(‘http://support.supermap.com.cn:8090/webgl/examples/editor.html#skyline’)进行查看

天际线分析应用

#####1.提取限高体
addLimitbody()模拟新建建筑物在不影响天际线时的高度范围
positon:指定限高体位置信息，由经度、纬度的数组表示
name:指定限高体名称,用于移除限高体对象removeLimitbody(name) 的指定

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

#####2.获取障碍物对象
getObjectIds() ，返回一个k-v对象，key为S3M图层ID，value为对象IDS数组，你可以判定哪些建筑影响了城市的天际线，做相应的调整；
#####3.获取二三维天际线结果
getSkyline2D()&getSkyline3D()
在官方示例里面，提取二维天际线以及拉伸闭合体以及体现这两种，接下来我们看看通过echarts图表将两者结合使用的例子

//获取二维天际线对象  
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);
// 监听click事件，获取相应的点并绘制在场景中
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),
			}
		})
})
}