坡度和坡向是兩個(gè)重要的地形特征因子颜阐，在地形表面分析中起到重要作用。其中吓肋，坡度是地表面上某一點(diǎn)的切面和水平面所成的夾角凳怨，坡度值越大，地勢(shì)越陡峭是鬼；坡度值越小肤舞，地勢(shì)越平坦。而坡度變化的方向稱為坡向均蜜，指每個(gè)像元到其相鄰像元方向上值的變化率最大的下坡方向李剖，表示地表面某一位置斜坡方向變化的量度。
三維坡度坡向分析用于計(jì)算柵格數(shù)據(jù)集中各像元的坡度值囤耳，及像元坡度面的朝向篙顺。坡度用度數(shù)表示的分析結(jié)果的范圍是0到90°；坡向計(jì)算的范圍是0到360°充择，以正北方0°為開始德玫，按順時(shí)針移動(dòng)，回到正北方以360°結(jié)束椎麦。
在SuperMap iClient3D for WebGL中宰僧，我們?nèi)绾螌?shí)現(xiàn)坡度坡向分析尼
一.準(zhǔn)備數(shù)據(jù)，發(fā)布服務(wù)
1.數(shù)據(jù)集右鍵观挎，選擇“生成緩存”
2.彈出“生成場(chǎng)景緩存”對(duì)話框撒桨，如下圖所示
這里需要注意的是需勾選上“帶法線”以及選擇“Tin地形”
不要使用場(chǎng)景右鍵生成場(chǎng)景緩存，因?yàn)檫@樣生成的tin地形是不帶法線的键兜，無(wú)法進(jìn)行坡度坡向分析；
3.新建球面場(chǎng)景穗泵，將第二步生成的tin地形加入普气，保存場(chǎng)景以及工作空間，再通過(guò)iServer發(fā)布成三維服務(wù)即可
二.WebGL實(shí)現(xiàn)坡度坡向分析
1.加載iserver的Tin地形
var viewer = new Cesium.Viewer('cesiumContainer', {
infoBox: false,
terrainProvider: new Cesium.CesiumTerrainProvider({
url: 'http://192.168.15.83:8090/iserver/services/3D-demo3/rest/realspace/datas/JingjinTerrain2',
//地形服務(wù)源自SuperMap iServer發(fā)布時(shí)需設(shè)置isSct為true
isSct: true,
//是否請(qǐng)求頂點(diǎn)法線
requestVertexNormals: true
})
});
2.初始化坡度設(shè)置對(duì)象 SlopeSetting
屬性說(shuō)明：
ColorTable :獲取或設(shè)置顏色表佃延；
ColorTableMaxKey :獲取或設(shè)置顏色表（ColorTable）的最大鍵值现诀；
ColorTableMinKey :獲取或設(shè)置顏色表（ColorTable）的最小鍵值夷磕；
CoverageArea :獲取或設(shè)置參與坡度分析的區(qū)域。
DisplayMode : 獲取或設(shè)置呈現(xiàn)模式仔沿，共有SlopeSettingEnum.ARROW坐桩，SlopeSettingEnum.FACE，SlopeSettingEnum.FACE_AND_ARROW封锉，SlopeSettingEnum.NONE4中模式绵跷；
MaxVisibleValue : 獲取或設(shè)置最大可見值。
MinVisibleValue : 獲取或設(shè)置最小可見值成福。
Opacity : 獲取或設(shè)置透明度碾局。（[0.0,1.0]，0.0完全透明奴艾，1.0完全不透明）
//初始化SlopeSetting并設(shè)置相關(guān)屬性
var slope = new Cesium.SlopeSetting();
slope.DisplayMode = Cesium.SlopeSettingEnum.DisplayMode.FACE_AND_ARROW;
slope.MaxVisibleValue = 0;
slope.MinVisibleValue = 90;
var colorTable = new Cesium.ColorTable();
colorTable.insert(0, new Cesium.Color(230 / 255, 198 / 255, 1));
colorTable.insert(20, new Cesium.Color(210 / 255, 150 / 255, 1));
colorTable.insert(30, new Cesium.Color(190 / 255, 100 / 255, 1));
colorTable.insert(50, new Cesium.Color(165, 50 / 255, 1));
colorTable.insert(80, new Cesium.Color(157 / 255, 0, 1));
slope.ColorTable = colorTable;
slope.Opacity = 0.5;
//執(zhí)行坡度坡向分析
slope.CoverageArea = positions;
viewer.scene.globe.SlopeSetting = {
//坡度設(shè)置
slopeSetting: slope,
//分析范圍模式：
//ARM_REGION:繪制區(qū)域參與分析
//ARM_NONE:全部區(qū)域不參與分析
//ARM_ALL:全部區(qū)域參與分析
analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION
};
可以參考SuperMap iClient3D for WebGL官網(wǎng)范例http://support.supermap.com.cn:8090/webgl/examples/editor.html#terrainSlopeAnalysis 查看屬性改變后的效果净当；
接下來(lái) 我們對(duì)上面的官方實(shí)例做一點(diǎn)點(diǎn)改變，在繪制面移動(dòng)時(shí)蕴潦，實(shí)時(shí)進(jìn)行坡度坡向分析像啼，主要修改 handlerPolygon.movingEvt事件
主要代碼如下：
handlerPolygon.movingEvt.addEventListener(function (windowPosition) {
// handlerPolygon在繪制面的過(guò)程，會(huì)存在polyline這個(gè)對(duì)象潭苞，
// 可根據(jù)他判斷節(jié)點(diǎn)數(shù)忽冻，當(dāng)大于3個(gè)時(shí)，即可拿到節(jié)點(diǎn)做坡度坡向分析
if (handlerPolygon.polyline != undefined && handlerPolygon.polyline.positions.length > 2) {
//轉(zhuǎn)換坐標(biāo) 獲取經(jīng)緯度以及高度
var array = [].concat(handlerPolygon.polyline.positions);
var positions = [];
for (var i = 0, len = array.length; i < len; i++) {
var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var h = cartographic.height;
if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {
positions.push(longitude);
positions.push(latitude);
positions.push(h);
}
}
//執(zhí)行分析
slope.CoverageArea = positions;
viewer.scene.globe.SlopeSetting = {
slopeSetting: slope,
analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION
};
}
});
效果如圖：
