一、简介
范围,分析,模拟,水淹分析,绘制。
二、示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水淹分析</title>
<script src="./js/config.js"></script>
<script src="./scripts/vue.min.js"></script>
<script type="text/javascript" src="./scripts/element.index.js"></script>
<link rel="stylesheet" href="./scripts/element.index.css">
<link rel="stylesheet" href="./css/common.css">
<script type="text/javascript" src="../anov-gis-sdk/index.js"></script>
<link rel="stylesheet" href="../anov-gis-sdk/index.css">
</head>
<body>
<div id="global">
</div>
<script>
new Vue({
el: '#global',
template: `
<div id="cesiumContainer">
<div class="waterformBox">
<el-form ref="form" :model="form">
<el-form-item label="自动分析">
<el-col :span="15">
<el-switch v-model="form.auto" ></el-switch>
</el-col>
<el-col :span="9">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
@click="draw"
round
></el-button>
<el-button
type="primary"
icon="el-icon-delete"
size="mini"
@click="reset"
round
></el-button>
</el-col>
</el-form-item>
<el-form-item label="当前高程">
<el-input v-model.number="form.curHeight" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="最小高程">
<el-input
v-model.number="form.minHeight"
@change="changeHeigit"
></el-input>
</el-form-item>
<el-form-item label="最大高程">
<el-input
v-model.number="form.maxHeight"
@change="changeHeigit"
></el-input>
</el-form-item>
<el-form-item label="步进高度">
<el-input
v-model.number="form.setpHeight"
@change="changeHeigit"
></el-input>
</el-form-item>
</el-form>
<el-slider
v-model="form.curHeight"
:min="form.minHeight"
:max="form.maxHeight"
:step="form.setpHeight"
@input="changeslider"
></el-slider>
</div>
</div>`,
data() {
let t = [
//初始范围
107.428594,
41.282392,
107.456929,
41.282392,
107.456929,
41.305005,
107.428594,
41.305005
];
let t2 = [
//初始范围
107.345147,
41.395337,
107.568974,
41.396442,
107.555225,
41.224117,
107.376214,
41.228213
];
let drawPolygon = null; //绘制的范围
let waterAnalysis = null; //水淹分析类
let drawPositions = Cesium.Cartesian3.fromDegreesArray(t2); //绘制产生的点
let polygonEntity = null; //绘制的多边形实体
let form = {
auto: false,
curHeight: 990,
minHeight: 990,
maxHeight: 1440,
setpHeight: 20
};
//这里存放数据
return {
form,
t,
t2,
drawPolygon,
waterAnalysis,
drawPositions,
polygonEntity,
defaultPolygon: undefined,
yelv: false,
haveDraw: false
};
},
//监控data中的数据变化
watch: {
"form.auto"(v) {
if (v) {
this.start();
} else {
this.notAuto();
}
}
},
mounted() {
this.init();
},
//方法集合
methods: {
// 进度条修改
changeslider(v) {
!v && this.haveDraw && this.waterAnalysis && this.waterAnalysis.stop();
this.yelv && !this.form.auto && this.waterAnalysis && this.waterAnalysis.noAuto(this.drawPositions, this.form.curHeight);
this.yelv = true;
this.haveDraw = false;
},
// 不自动分析
notAuto() {
this.pause();
if (this.waterAnalysis) {
this.waterAnalysis.noAuto(this.drawPositions, this.form.curHeight);
}
},
// 修改高度
changeHeigit(type) {
if (this.waterAnalysis) {
this.waterAnalysis.resetParas(this.form);
}
},
// 初始化
init() {
this.init3d();
this.swithTerrainProvider2SampleTerrain(false);
this.reset();
},
// 初始化三维球
init3d() {
window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
vrButton: false,
});
const baselayer = ANOVGIS.ImageryLayerFactory.createImageryLayer(
ANOVGIS.ImageryType.TDT,
{
style: "img",
key: globalConfig.tdtKey
}
);
viewer.imageryLayers.addImageryProvider(baselayer);
},
// 重置
reset(callBack) {
let that = this;
this.clear();
that.initWater();
that.drawPositions = Cesium.Cartesian3.fromDegreesArray(that.t2);
ANOVGIS.LocateUtil.flyToPoints(viewer, that.drawPositions, 0,
-28,
14000, 2, callBack);
},
// 初始化水淹分析类
initWater() {
if (!this.waterAnalysis) {
this.waterAnalysis = new ANOVGIS.CesiumWaterAnalysis(window.viewer, {
minHeight: this.form.minHeight,
maxHeight: this.form.maxHeight,
speed: this.form.setpHeight,
intervalStep: 300
});
}
},
// 切换地形数据
swithTerrainProvider2SampleTerrain(is2Sample) {
if (viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1)
});
} else {
if (is2Sample) {
viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
}
}
},
// 开始绘制
draw() {
let that = this;
this.clear();
this.initWater();
this.drawPolygon = new ANOVGIS.DrawPolygon(viewer, {
justDraw: true,
fill: false,
clampToGround: true,
onCompleted: function (positions) {
that.drawPositions = positions;
that.haveDraw = true;
}
});
this.drawPolygon.startDraw();
},
// 开始分析
start() {
// if (this.waterAnalysis) {
// this.waterAnalysis.stop();
// }
if (!this.waterAnalysis) {
alert("未初始化");
return;
}
this.waterAnalysis.start(this.drawPositions, h => {
this.form.curHeight = h;
});
},
// 暂停
pause() {
this.waterAnalysis && this.waterAnalysis.pause();
},
// 停止
stop() {
this.clear();
},
// 清除
clear() {
this.form = {
auto: false,
curHeight: 990,
minHeight: 990,
maxHeight: 1440,
setpHeight: 20
};
if (this.waterAnalysis) {
this.waterAnalysis.stop();
this.waterAnalysis = null;
}
if (this.drawPolygon) {
this.drawPolygon.clear();
this.drawPolygon = null;
}
}
},
});
</script>
</body>
</html>