使用超图功能（四）
一.分析
//通视分析
visibilityAnalysis: {
//当前点击状态是否是 添加观察点
addViewFlag: false,
//当前点击状态是否是 添加目标点
addTargetFlag: false,
//添加的目标点的点号
num: 0,
//是否能移除目标点
couldRemove: false,
//画观察点
handlerPoint: null,
//鼠标移动
handler: null,
//距离的线
sightline: null,
//鼠标点击
handler: null,
targetPosition1: null,
dirLightOptions: null,
directionalLight_1: null,
position1: null,
//初始化
init: function () {
//初始化距离的线
supperMap.visibilityAnalysis.sightline = new Cesium.Sightline(supperMap.scene);
//初始化观察点
supperMap.visibilityAnalysis.handlerPoint = new Cesium.DrawHandler(supperMap.viewer, Cesium.DrawMode.Point);
supperMap.visibilityAnalysis.handlerPoint.drawEvt.addEventListener(function (result) {
//添加观察点
if (supperMap.visibilityAnalysis.addViewFlag) {
var point = result.object;
// point.show = false;
var position = result.object.position;
//将获取的点的位置转化成经纬度
var cartographic = supperMap.cartesian2toDegrees(position);
//设置观察点
supperMap.visibilityAnalysis.sightline.viewPosition = cartographic;
supperMap.visibilityAnalysis.addViewFlag = false;
}
supperMap.visibilityAnalysis.handlerPoint.deactivate();
});
//初始化鼠标点击
supperMap.visibilityAnalysis.handler = new Cesium.ScreenSpaceEventHandler(supperMap.scene.canvas);
supperMap.visibilityAnalysis.sightline.build();
},
//添加通视点
addTarget: function (CartesianPosition) {
if (supperMap.visibilityAnalysis.addViewFlag === false && supperMap.visibilityAnalysis.addTargetFlag) {
supperMap.visibilityAnalysis.num += 1;
//将获取的点的位置转化成经纬度
var cartographic = supperMap.cartesian2toDegrees(CartesianPosition);
//添加目标点
var name = "point" + supperMap.visibilityAnalysis.num;
var flag = supperMap.visibilityAnalysis.sightline.addTargetPoint({
position: cartographic,
name: name
});
supperMap.visibilityAnalysis.couldRemove = true;
}
},
//销毁
destory: function () {
supperMap.visibilityAnalysis.addViewFlag = false;
supperMap.visibilityAnalysis.addTargetFlag = false;
supperMap.visibilityAnalysis.handlerPoint.clear();
supperMap.viewer.entities.removeAll();
if (supperMap.visibilityAnalysis.couldRemove) {
supperMap.visibilityAnalysis.sightline.removeAllTargetPoint();
supperMap.visibilityAnalysis.couldRemove = false;
}
supperMap.viewer.enableCursorStyle = true;
//移除移动事件
$('body').removeClass('drawCur');
supperMap.visibilityAnalysis.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
supperMap.visibilityAnalysis.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
},
//淹没分析
floodAnalysis: {
//面实体
polygon: null,
//生成的面集合
polygonList:[],
//动态面
activeShape: null,
//动态面的点位置
activeShapePointsPosition: [],
//点击的点
floatingPoint: null,
//点击的点id
floatingPointList: [],
//点击注册
handler: null,
//初始设定的水位高度
waterHeight: 0,
//目标水位
targetHeight: 1000,
//速度
speed:100,
//淹没层
poly: null,
//掩膜层集合
polyList: [],
//定时任务集合
intervalIdList:[],
/**
* 初始化
*/
init: function () {
//开启地形深度检测，如果鼠标指针和点不重合，这个选项设置为true试试。
supperMap.viewer.scene.globe.depthTestAgainstTerrain = true;
//注册点击事件
supperMap.floodAnalysis.handler = new Cesium.ScreenSpaceEventHandler(supperMap.viewer.canvas);
//鼠标左键
supperMap.floodAnalysis.handler.setInputAction(function (event) {
// scene.pickPosition只有在开启地形深度检测，且不使用默认地形时是准确的。
var earthPosition = supperMap.viewer.scene.pickPosition(event.position);
if (Cesium.defined(earthPosition)) {
if (supperMap.floodAnalysis.activeShapePointsPosition.length === 0) {
supperMap.floodAnalysis.floatingPoint = supperMap.floodAnalysis.createPoint(earthPosition);
supperMap.floodAnalysis.activeShapePointsPosition.push(earthPosition);
var dynamicPositions = new Cesium.CallbackProperty(function () {
return new Cesium.PolygonHierarchy(supperMap.floodAnalysis.activeShapePointsPosition);
}, false);
supperMap.floodAnalysis.activeShape = supperMap.floodAnalysis.drawShape(dynamicPositions); //绘制动态图
}
supperMap.floodAnalysis.activeShapePointsPosition.push(earthPosition);
supperMap.floodAnalysis.createPoint(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠标移动
supperMap.floodAnalysis.handler.setInputAction(function (event) {
if (Cesium.defined(supperMap.floodAnalysis.floatingPoint)) {
var newPosition = supperMap.viewer.scene.pickPosition(event.endPosition);
if (Cesium.defined(newPosition)) {
supperMap.floodAnalysis.floatingPoint.position.setValue(newPosition);
supperMap.floodAnalysis.activeShapePointsPosition.pop();
supperMap.floodAnalysis.activeShapePointsPosition.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//右键取消
supperMap.floodAnalysis.handler.setInputAction(function (event) {
if (supperMap.floodAnalysis.activeShapePointsPosition.length > 2) {
// if (!Cesium.defined(supperMap.floodAnalysis.poly)) {
supperMap.floodAnalysis.poly = supperMap.floodAnalysis.getPolygonPrimitive(supperMap.floodAnalysis.activeShapePointsPosition, supperMap.floodAnalysis.waterHeight, supperMap.floodAnalysis.targetHeight,supperMap.floodAnalysis.speed);
// }
}
supperMap.floodAnalysis.terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},
/**
* 绘制点
* @param worldPosition
* @returns {*}
*/
createPoint: function (worldPosition) {
let id = generateUUID();
var point = supperMap.viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.WHITE,
pixelSize: 5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
},
id: id
});
supperMap.floodAnalysis.floatingPointList.push(id);
return point;
},
/**
* 绘制图形
* @param positionData
* @returns {*}
*/
drawShape: function (positionData) {
var shape = supperMap.viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7)),
perPositionHeight: true,
clampToGround: true,
aboveGround: true,
overGroundAlpha: 0.9,
outline: true,
}
});
return shape;
},
/**
* 取消函数
*/
terminateShape: function () {
supperMap.floodAnalysis.activeShapePointsPosition.pop(); //去除最后一个动态点
if (supperMap.floodAnalysis.activeShapePointsPosition.length) {
//绘制最终图
supperMap.floodAnalysis.polygonList.push(supperMap.floodAnalysis.drawShape(supperMap.floodAnalysis.activeShapePointsPosition))
}
supperMap.viewer.entities.remove(supperMap.floodAnalysis.floatingPoint); //去除动态点图形（当前鼠标点）
supperMap.viewer.entities.remove(supperMap.floodAnalysis.activeShape); //去除动态图形
supperMap.floodAnalysis.floatingPoint = undefined;
supperMap.floodAnalysis.activeShape = undefined;
supperMap.floodAnalysis.activeShapePointsPosition = [];
},
/**
* 销毁函数
*/
destory: function () {
this.terminateShape();
//移除面
supperMap.floodAnalysis.polygonList.forEach(function (item) {
supperMap.viewer.entities.remove(item);
});
//移除点
supperMap.floodAnalysis.floatingPointList.forEach(function (item) {
supperMap.removeEntity(item);
});
//移除定时任务
supperMap.floodAnalysis.intervalIdList.forEach(function (item) {
window.clearInterval(item);
});
//移除水
supperMap.floodAnalysis.polyList.forEach(function (item) {
supperMap.removeEntity(item);
});
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
this.handler = null;
},
/**
* 生成淹没层
*/
getPolygonPrimitive: function (positions, waterHeight, targetHeight,speed) {
try {
var PolygonPrimitive = (function () {
function _(positions, waterHeight, targetHeight) {
this.options = {
name: '多边形',
polygon: {
hierarchy: [],
perPositionHeight: true,
extrudedHeight: 0,
material: new Cesium.Color.fromBytes(64, 157, 253, 150),
}
};
this.hierarchy = positions;
this._init();
}
_.prototype._init = function () {
var _self = this;
var _updateHierarchy = function () {
return _self.hierarchy;
};
//实时更新polygon.hierarchy
this.options.polygon.hierarchy = new Cesium.CallbackProperty(_updateHierarchy, false);
this.timer = setInterval(() => {
if (waterHeight < targetHeight) {
waterHeight += speed;
if (waterHeight > targetHeight) {
waterHeight = targetHeight
}
let id = generateUUID();
let entity = {
name: '多边形',
polygon: {
hierarchy: positions,
perPositionHeight: true,
extrudedHeight: waterHeight,
material: new Cesium.Color.fromBytes(64, 157, 253, 150),
},
id: id
}
supperMap.viewer.entities.add(entity);
supperMap.floodAnalysis.polyList.push(id);
}
}, 1000);
supperMap.floodAnalysis.intervalIdList.push(this.timer);
// supperMap.viewer.entities.add(this.options);
};
return _;
})();
let polygonPrimitive = new PolygonPrimitive(positions, waterHeight, targetHeight);
return polygonPrimitive;
} catch (e) {
console.log(e)
}
},
},
//天际线分析
skyline: {
//天际线分析对象
skyline: null,
polygonHandler: null,
//初始化函数
init: function () {
//创建天际线分析对象
this.skyline = new Cesium.Skyline(supperMap.scene);
this.polygonHandler = new Cesium.DrawHandler(supperMap.viewer, Cesium.DrawMode.Polygon);
},
/**
* 销毁函数
*/
destory: function () {
supperMap.viewer.entities.removeAll();
supperMap.skyline.skyline.clear();
supperMap.skyline.polygonHandler.clear();
}
},
//视域分析
visibility: {
pointHandler: null,
handler: null,
//可视域分析对象
viewshed3D: null,
colorStr1: null,
colorStr2: null,
viewModel: {
direction: 1.0,
pitch: 1.0,
distance: 1.0,
verticalFov: 1.0,
horizontalFov: 1.0,
visibleAreaColor: '#ffffffff',
invisibleAreaColor: '#ffffffff',
},
/**
* 初始化
*/
init: function () {
// 先将此标记置为true，不激活鼠标移动事件中对可视域分析对象的操作
supperMap.scene.viewFlag = true;
this.pointHandler = new Cesium.DrawHandler(supperMap.viewer, Cesium.DrawMode.Point);
this.handler = new Cesium.ScreenSpaceEventHandler(supperMap.scene.canvas);
// 创建可视域分析对象
this.viewshed3D = new Cesium.ViewShed3D(supperMap.scene);
this.colorStr1 = this.viewshed3D.visibleAreaColor.toCssColorString();
this.colorStr2 = this.viewshed3D.hiddenAreaColor.toCssColorString();
var toolbar = document.getElementById('cygj_fx_syfx_wrapper');
Cesium.knockout.track(supperMap.visibility.viewModel);
Cesium.knockout.applyBindings(supperMap.visibility.viewModel, toolbar);
Cesium.knockout.getObservable(supperMap.visibility.viewModel, 'direction').subscribe(
function (newValue) {
supperMap.visibility.viewshed3D.direction = parseFloat(newValue);
}
);
Cesium.knockout.getObservable(supperMap.visibility.viewModel, 'pitch').subscribe(
function (newValue) {
supperMap.visibility.viewshed3D.pitch = parseFloat(newValue);
}
);
Cesium.knockout.getObservable(supperMap.visibility.viewModel, 'distance').subscribe(
function (newValue) {
supperMap.visibility.viewshed3D.distance = parseFloat(newValue);
}
);
Cesium.knockout.getObservable(supperMap.visibility.viewModel, 'verticalFov').subscribe(
function (newValue) {
supperMap.visibility.viewshed3D.verticalFov = parseFloat(newValue);
}
);
Cesium.knockout.getObservable(supperMap.visibility.viewModel, 'horizontalFov').subscribe(
function (newValue) {
supperMap.visibility.viewshed3D.horizontalFov = parseFloat(newValue);
}
);
Cesium.knockout.getObservable(supperMap.visibility.viewModel, 'visibleAreaColor').subscribe(
function (newValue) {
var color = Cesium.Color.fromCssColorString(newValue);
supperMap.visibility.viewshed3D.visibleAreaColor = color;
}
);
Cesium.knockout.getObservable(supperMap.visibility.viewModel, 'invisibleAreaColor').subscribe(
function (newValue) {
var color = Cesium.Color.fromCssColorString(newValue);
supperMap.visibility.viewshed3D.hiddenAreaColor = color;
}
);
// 鼠标移动时间回调
supperMap.visibility.handler.setInputAction(function (e) {
// 若此标记为false，则激活对可视域分析对象的操作
if (!supperMap.scene.viewFlag) {
//获取鼠标屏幕坐标,并将其转化成笛卡尔坐标
var position = e.endPosition;
var last = supperMap.scene.pickPosition(position);
//计算该点与视口位置点坐标的距离
var distance = Cesium.Cartesian3.distance(supperMap.visibility.viewPosition, last);
if (distance > 0) {
// 将鼠标当前点坐标转化成经纬度
var cartographic = Cesium.Cartographic.fromCartesian(last);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
// 通过该点设置可视域分析对象的距离及方向
supperMap.visibility.viewshed3D.setDistDirByPoint([longitude, latitude, height]);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
supperMap.visibility.handler.setInputAction(function (e) {
//鼠标右键事件回调，不再执行鼠标移动事件中对可视域的操作
supperMap.scene.viewFlag = true;
$("#cygj_fx_syfx_wrapper").show();
supperMap.visibility.viewModel.direction = supperMap.visibility.viewshed3D.direction;
supperMap.visibility.viewModel.pitch = supperMap.visibility.viewshed3D.pitch;
supperMap.visibility.viewModel.distance = supperMap.visibility.viewshed3D.distance;
supperMap.visibility.viewModel.horizontalFov = supperMap.visibility.viewshed3D.horizontalFov;
supperMap.visibility.viewModel.verticalFov = supperMap.visibility.viewshed3D.verticalFov;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
supperMap.visibility.pointHandler.drawEvt.addEventListener(function (result) {
var point = result.object;
var position = point.position;
supperMap.visibility.viewPosition = position;
// 将获取的点的位置转化成经纬度
var cartographic = Cesium.Cartographic.fromCartesian(position);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height + 1.8;
point.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
if (supperMap.scene.viewFlag) {
// 设置视口位置
supperMap.visibility.viewshed3D.viewPosition = [longitude, latitude, height];
supperMap.visibility.viewshed3D.build();
// 将标记置为false以激活鼠标移动回调里面的设置可视域操作
supperMap.scene.viewFlag = false;
}
});
},
/**
* 销毁
*/
destory: function () {
supperMap.viewer.entities.removeAll();
supperMap.visibility.viewshed3D.distance = 0.1;
supperMap.scene.viewFlag = true;
//清除观察点
supperMap.visibility.pointHandler.clear();
var toolbar = document.getElementById('cygj_fx_syfx_wrapper');
//移除绑定元素
Cesium.knockout.cleanNode(toolbar);
//移除右击事件
supperMap.visibility.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
},
//阴影分析
shadow: {
buildPromise: null,
ground1Promise: null,
lakePromise: null,
treePromise: null,
roadPromise: null,
bridgePromise: null,
//阴影查询对象
shadowQuery: new Object(),
endTime: null,
tooltip: null,
handlerPolygon: null,
points: null,
handler: null,
/**
* 初始化
*/
init: function () {
this.endTime = new Date($("#cygj_fx_yyfx_selDate").val());
this.tooltip = createTooltip(document.body);
this.handlerPolygon = new Cesium.DrawHandler(supperMap.viewer, Cesium.DrawMode.Polygon, 0);
this.points = [];
this.handler = new Cesium.ScreenSpaceEventHandler(supperMap.scene.canvas);
//打开阴影
supperMap.viewer.shadows = true;
supperMap.scene.shadowMap.darkness = 0.3; //设置第二重烘焙纹理的效果（明暗程度）
supperMap.scene.skyAtmosphere.brightnessShift = 0.4; //修改大气的亮度
supperMap.scene.debugShowFramesPerSecond = true;
supperMap.scene.hdrEnabled = false;
supperMap.scene.sun.show = true;
//加阴影
let layers = supperMap.scene.layers;
layers.layerQueue.forEach(item => {
//设置阴影
//默认true
item.selectEnabled = false;
//设置图层的阴影模式
//默认0
item.shadowType = 2;
})
this.buildPromise = supperMap.scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {name: 'build'});
this.ground1Promise = supperMap.scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {name: 'ground1'});
this.lakePromise = supperMap.scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_LAKE, {name: 'lake'});
this.treePromise = supperMap.scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_TREE, {name: 'tree'});
this.roadPromise = supperMap.scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_ROAD, {name: 'road'});
this.bridgePromise = supperMap.scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BRIDGE, {name: 'bridge'});
//创建阴影查询对象
supperMap.shadow.shadowQuery = new Cesium.ShadowQueryPoints(supperMap.scene)
supperMap.shadow.setCurrentTime();
supperMap.shadow.handlerPolygon.activeEvt.addEventListener(function (isActive) {
if (isActive == true) {
supperMap.viewer.enableCursorStyle = false;
supperMap.viewer._element.style.cursor = '';
$('body').removeClass('drawCur').addClass('drawCur');
}
else {
supperMap.viewer.enableCursorStyle = true;
$('body').removeClass('drawCur');
}
});
supperMap.shadow.handlerPolygon.movingEvt.addEventListener(function (windowPosition) {
if (supperMap.shadow.handlerPolygon.isDrawing) {
supperMap.shadow.tooltip.showAt(windowPosition, '绘制阴影分析区域(右键结束绘制)
');
}
});
supperMap.shadow.handlerPolygon.drawEvt.addEventListener(function (result) {
supperMap.shadow.tooltip.setVisible(false);
supperMap.shadow.points.length = 0;
var polygon = result.object;
if (!polygon) {
return;
}
polygon.show = false;
supperMap.shadow.handlerPolygon.polyline.show = false;
var positions = [].concat(polygon.positions);
positions = Cesium.arrayRemoveDuplicates(positions, Cesium.Cartesian3.equalsEpsilon);
//遍历多边形，取出所有点
for (var i = 0, len = positions.length; i < len; i++) {
//转化为经纬度，并加入至临时数组
var cartographic = Cesium.Cartographic.fromCartesian(polygon.positions[i]);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
supperMap.shadow.points.push(longitude);
supperMap.shadow.points.push(latitude);
}
//设置分析对象的开始结束时间
var dateValue = $("#selDate").val();
var startTime = new Date(dateValue);
startTime.setHours(Number($("#startTime :selected").val()));
supperMap.shadow.shadowQuery.startTime = Cesium.JulianDate.fromDate(startTime);
var endTime = new Date(dateValue);
endTime.setHours(Number($("#endTime :selected").val()));
supperMap.shadow.shadowQuery.endTime = Cesium.JulianDate.fromDate(endTime);
//设置当前时间
supperMap.shadow.setCurrentTime();
supperMap.shadow.shadowQuery.spacing = 10;
supperMap.shadow.shadowQuery.timeInterval = 60;
//设置分析区域、底部高程和拉伸高度
var bh = Number($('#bottomHeight').val());
var eh = Number($('#extrudeHeight').val());
supperMap.shadow.shadowQuery.qureyRegion({
position: supperMap.points,
bottom: bh,
extend: eh
});
});
},
setCurrentTime: function () {
this.endTime.setHours(Number($("#cygj_fx_yyfx_endTime :selected").val()));
supperMap.viewer.clock.currentTime = Cesium.JulianDate.fromDate(this.endTime);
supperMap.viewer.clock.multiplier = 1;
supperMap.viewer.clock.shouldAnimate = true;
},
/**
* 销毁函数
*/
destory: function () {
//去掉阴影
let layers = supperMap.scene.layers;
layers.layerQueue.forEach(item => {
//设置阴影
//默认true
item.selectEnabled = true;
//设置图层的阴影模式
//默认0
item.shadowType = 0;
})
//打开阴影
supperMap.viewer.shadows = false;
}
},