Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
736da9bf by chiangbt
Options

20191205

1 parent 8e7bd3ba
Inline Side-by-side
Showing 2 changed files with 148 additions and 114 deletions
......@@ -35,9 +35,9 @@
</div>
<div id="toolbar" class="param-container tool-bar">
<div class="param-item">
<button type="button" id="area" class="button black">测面</button>
<button type="button" id="draw" class="button black">绘面</button>
<button type="button" id="begin" class="button black">淹没分析</button>
<button type="button" id="clear" class="button black">清除</button>
</div>
</div>
</div>
......@@ -57,69 +57,38 @@ export default {
left: "0px",
backgroundColor: "#000000"
},
smviewer:{}
viewer:{}
}
},
mounted: function(){
this.viewer=new Cesium.Viewer("cesiumContainer", {
var __this = this;
__this.viewer=new Cesium.Viewer("cesiumContainer", {
terrainProvider : new Cesium.CesiumTerrainProvider({
url : URL_CONFIG.SiChuan_TERRAIN,
isSct : true//地形服务源自SuperMap iServer发布时需设置isSct为true
}),
});
var scene = __this.viewer.scene;
var widget = __this.viewer.cesiumWidget;
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility="hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
// 添加影像数据
var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.SiChuan_IMG
}));
// 添加数据服务
this.addLayers(__this.viewer);
var clampMode = 0; // 空间模式
var scene = this.viewer.scene;
var widget = this.viewer.cesiumWidget;
var handlerArea, handlePolygon;
// 设置相机视图
scene.camera.setView({
destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
orientation : {
heading : 1.4059101895600987,
pitch : -0.20917672793046682,
roll : 2.708944180085382e-13
}
});
// 量测面积代码
var stviewer = this.viewer;
var handlerPolygon;
var positions = null;
handlerArea = new Cesium.MeasureHandler(this.viewer, Cesium.MeasureMode.Area, clampMode);
handlerArea.measureEvt.addEventListener(function(result){
var mj = Number(result.area);
var area = mj > 1000000 ? (mj/1000000).toFixed(2) + "km²" : mj.toFixed(2) + "㎡"
handlerArea.areaLabel.text = "面积:" + area;
});
handlerArea.activeEvt.addEventListener(function(isActive){
if(isActive === true){
stviewer.enableCursorStyle = false;
stviewer._element.style.cursor = "";
$("body").removeClass("measureCur").addClass("measureCur");
}else{
stviewer.enableCursorStyle = true;
$("body").removeClass("measureCur");
}
});
$("#area").click(function(){
deactiveAll();
handlerArea&&handlerArea.activate();
});
var positions2d = null;
// 绘制面
handlePolygon = new Cesium.DrawHandler(this.viewer, Cesium.DrawMode.Polygon);
handlePolygon.drawEvt.addEventListener(function(polygon){
handlerPolygon = new Cesium.DrawHandler(__this.viewer, Cesium.DrawMode.Polygon);
handlerPolygon.drawEvt.addEventListener(function(polygon){
var array = [].concat(polygon.object.positions);
positions = [];
positions2d = [];
for(var i = 0, len = array.length; i < len; i++){
var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
......@@ -129,87 +98,152 @@ export default {
positions.push(longitude);
positions.push(latitude);
positions.push(h);
positions2d.push(longitude);
positions2d.push(latitude);
positions2d.push(1000.0);
}
}
return positions;
});
$("#draw").click(function(){
deactiveAll();
handlePolygon && handlePolygon.activate();
handlerPolygon && handlerPolygon.deactivate();
handlerPolygon && handlerPolygon.activate();
});
var hyp = new Cesium.HypsometricSetting();
//设置显示模式
hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
//设置线颜色为红色
hyp._lineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
//设置最大/最小可见高度
hyp.MinVisibleValue = 0;
//设置颜色表的最大/最小key值,表示高度
hyp.ColorTableMinKey = 1;
hyp.ColorTableMaxKey = 9000;
//新建颜色表
var colorTable = new Cesium.ColorTable();
var height = 1;
//每隔200m向颜色表插入一个随机色
for(var i = 0; i<90; i++){
height += 200;
colorTable.insert(height, getRandomColor());
}
//返回随机颜色
function getRandomColor(){
return new Cesium.Color(Math.random(), Math.random(), Math.random());
}
hyp.ColorTable = colorTable;
hyp.Opacity = 0.8;
//等高线间隔为200m
hyp.LineInterval = 200.0;
// 淹没分析
var currentHeight = 0;
var maxValue = 0;
var minValue = 0;
var int = null;
function flood(positions){
currentHeight = 0;
int = self.setInterval("flood()", 100);
maxValue = 3300;
minValue = 3000;
hyp.MinVisibleValue = minValue;
currentHeight = minValue;
window.flood = function() {
if(currentHeight > maxValue) {
self.clearInterval(int);
return;
}
hyp.MaxVisibleValue = currentHeight;
hyp.CoverageArea = positions;
console.log(positions);
stviewer.scene.globe.HypsometricSetting = {
hypsometricSetting : hyp,
analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION
};
currentHeight += (500) / 10;
};
}
$("#begin").click(function(){
flood(positions);
handlePolygon.polygon.show = false;
// handlePolygon.polyline.show=false;
var waterHeight = 2000;
var targetHeight = 3500;
var entities = __this.viewer.entities;
//方式1
// __this.floodCal(entities, positions2d, waterHeight, targetHeight);
__this.floodParse(scene, positions2d, waterHeight, targetHeight);
handlerPolygon && handlerPolygon.clear();
});
function clearAll(){
handlerArea && handlerArea.clear();
handlePolygon && handlePolygon.clear();
}
function deactiveAll(){
handlePolygon && handlePolygon.deactivate();
handlerArea && handlerArea.deactivate();
}
$("#clear").click(function(){
handlerPolygon && handlerPolygon.clear();
});
$("#loadingbar").remove();
$("#toolbar").show();
}
},
methods: {
addLayers: function(viewer){
var __this = this;
// 添加影像数据
var layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.SiChuan_IMG
}));
// 设置相机视图
viewer.scene.camera.setView({
destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
orientation : {
heading : 1.4059101895600987,
pitch : -0.20917672793046682,
roll : 2.708944180085382e-13
}
});
},
measureArea: function(handlerArea, viewer){
var clampMode = 0; // 空间模式
var positions = null;
// handlerArea = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Area, clampMode);
handlerArea.measureEvt.addEventListener(function(result){
var mj = Number(result.area);
var area = mj > 1000000 ? (mj/1000000).toFixed(2) + "km²" : mj.toFixed(2) + "㎡"
handlerArea.areaLabel.text = "面积:" + area;
});
handlerArea.activeEvt.addEventListener(function(isActive){
if(isActive === true){
viewer.enableCursorStyle = false;
viewer._element.style.cursor = "";
$("body").removeClass("measureCur").addClass("measureCur");
}else{
viewer.enableCursorStyle = true;
$("body").removeClass("measureCur");
}
});
},
initHyp: function(){
var hyp = new Cesium.HypsometricSetting();
//设置显示模式
hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
//设置线颜色为红色
hyp._lineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
//设置最大/最小可见高度
hyp.MinVisibleValue = 0;
//设置颜色表的最大/最小key值,表示高度
hyp.ColorTableMinKey = 1;
hyp.ColorTableMaxKey = 9000;
//新建颜色表
var colorTable = new Cesium.ColorTable();
var height = 1;
//每隔200m向颜色表插入一个随机色
for(var i = 0; i<90; i++){
height += 200;
colorTable.insert(height, getRandomColor());
}
//返回随机颜色
function getRandomColor(){
return new Cesium.Color(Math.random(), Math.random(), Math.random());
}
hyp.ColorTable = colorTable;
hyp.Opacity = 0.8;
//等高线间隔为200m
hyp.LineInterval = 200.0;
return hyp;
},
floodCal: function(entities, positions2d, waterHeight, targetHeight){
let entity = entities.add({
polygon : {
hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(positions2d)),
perPositionHeight: true,
extrudedHeight: new Cesium.CallbackProperty(function(){
waterHeight+=20;
if(waterHeight>targetHeight){
waterHeight=targetHeight;//给个最大值
}
return waterHeight
}, false),
material: new Cesium.ImageMaterialProperty({
image: './images/waterNormals.jpg',
repeat : new Cesium.Cartesian2(1, 1),
transparent: true
})
}
});
},
floodParse: function(scene, positions2d, waterHeight, targetHeight){
var River1=new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry :new Cesium.PolygonGeometry({
polygonHierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(positions2d)),
extrudedHeight: targetHeight,
height: waterHeight,
vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})
}),
appearance : new Cesium.EllipsoidSurfaceAppearance({
aboveGround : true,
material: new Cesium.Material({
fabric : {
type : 'Water',
uniforms : {
normalMap:'./images/waterNormals.jpg',
frequency: 100.0,
animationSpeed: 0.01,
amplitude: 10.0
}
}
})
}),
show : true
});
scene.primitives.add(River1);
}
}
};
</script>
......