添加高程以及二三维场景切换
duxiaoning
parent
e0eaea4e48
commit
1e34e93eda
|
|
@ -1,18 +1,11 @@
|
|||
<template>
|
||||
<div class="info">
|
||||
<div class="box">
|
||||
<el-checkbox
|
||||
v-model="prodChecked"
|
||||
@change="prodCheckChanged"
|
||||
class="checkbox"
|
||||
>待检验产品</el-checkbox
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="sampleChecked"
|
||||
@change="sampleCheckChanged"
|
||||
class="checkbox"
|
||||
>样本点</el-checkbox
|
||||
>
|
||||
<div class="ckBox">
|
||||
<el-checkbox v-model="prodChecked" @change="prodCheckChanged" class="checkbox">待检验产品</el-checkbox>
|
||||
<el-checkbox v-model="sampleChecked" @change="sampleCheckChanged" class="checkbox">样本点</el-checkbox>
|
||||
<el-checkbox v-model="demChecked" @change="demCheckChanged" class="checkbox">高程图层</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -24,6 +17,7 @@ export default {
|
|||
return {
|
||||
prodChecked: true,
|
||||
sampleChecked: true,
|
||||
demChecked: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -41,6 +35,13 @@ export default {
|
|||
this.$emit("removeSample");
|
||||
}
|
||||
},
|
||||
demCheckChanged() {
|
||||
if (this.demChecked) {
|
||||
this.$emit("addDemLayer");
|
||||
} else {
|
||||
this.$emit("removeDemLayer");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -56,18 +57,15 @@ export default {
|
|||
z-index: 999;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.iconbox div {
|
||||
width: 160px;
|
||||
height: 75px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 55px;
|
||||
width: 160px;
|
||||
background-color: white;
|
||||
margin-left: 3px;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.ckBox {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ class CesiumUtils {
|
|||
timeline: false, //时间线,默认true
|
||||
navigationHelpButton: false, //导航帮助说明,默认true
|
||||
// sceneMode:Cesium.SceneMode.SCENE2D,
|
||||
sceneModePicker: false, //是否显示投影方式控件
|
||||
// sceneModePicker: false, //是否显示投影方式控件
|
||||
infoBox: false, //点击要素之后显示的信息,默认true
|
||||
fullscreenButton: false, //全屏按钮,默认显示true
|
||||
navigationInstructionsInitiallyVisible: false,
|
||||
|
|
@ -75,7 +75,16 @@ class CesiumUtils {
|
|||
// console.log('CesiumNavigation:', CesiumNavigation);
|
||||
CesiumNavigation(viewer, optionsNav);
|
||||
}
|
||||
|
||||
// 添加高程数据
|
||||
static addDemLayer() {
|
||||
this.viewer.scene.terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
|
||||
url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
|
||||
});
|
||||
}
|
||||
// 移除高程数据
|
||||
static removeDemLayer() {
|
||||
this.viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
|
||||
}
|
||||
//添加wms
|
||||
static addlayer(geoWorkspace, layerName) {
|
||||
let matrixIds = [
|
||||
|
|
@ -162,7 +171,7 @@ class CesiumUtils {
|
|||
this.viewer.imageryLayers.remove(this.privide);
|
||||
}
|
||||
|
||||
static addPoint(pLon, pLat, pAlt, isSelected = false,pointId = null) {
|
||||
static addPoint(pLon, pLat, pAlt, isSelected = false, pointId = null) {
|
||||
var pointEntity = this.viewer.entities.add({
|
||||
id: pointId,
|
||||
position: Cesium.Cartesian3.fromDegrees(pLon, pLat, 10),
|
||||
|
|
@ -179,46 +188,46 @@ class CesiumUtils {
|
|||
this.viewer.entities.removeAll();
|
||||
}
|
||||
//修改点的位置
|
||||
static clickToAddPoint(callback){
|
||||
static clickToAddPoint(callback) {
|
||||
//清空之前的handler
|
||||
if (this.addPointHandler) {
|
||||
this.addPointHandler.destroy();
|
||||
}
|
||||
var scene = this.viewer.scene;
|
||||
this.addPointHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
|
||||
const that = this;
|
||||
this.addPointHandler.setInputAction(function (movement) {
|
||||
// 清除历史单击点
|
||||
var cartesian = that.viewer.camera.pickEllipsoid(
|
||||
movement.position,
|
||||
scene.globe.ellipsoid
|
||||
);
|
||||
if (cartesian) {
|
||||
var cartographic = Cesium.Cartographic.fromCartesian(cartesian); // 转弧度
|
||||
// 将弧度转换为度数
|
||||
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
|
||||
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
|
||||
let lng = Number(longitudeString);
|
||||
let lat = Number(latitudeString);
|
||||
const positions = [lng, lat];
|
||||
that.viewer.entities.removeById("theNewPoint");
|
||||
that.viewer.entities.add({
|
||||
id: "theNewPoint",
|
||||
position: cartesian,
|
||||
point: {
|
||||
color: Cesium.Color.fromCssColorString('#9cf7e3'),
|
||||
pixelSize: 10
|
||||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
}
|
||||
});
|
||||
//通过callback函数将数据传递到外部使用
|
||||
callback(positions);
|
||||
var scene = this.viewer.scene;
|
||||
this.addPointHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
|
||||
const that = this;
|
||||
this.addPointHandler.setInputAction(function (movement) {
|
||||
// 清除历史单击点
|
||||
var cartesian = that.viewer.camera.pickEllipsoid(
|
||||
movement.position,
|
||||
scene.globe.ellipsoid
|
||||
);
|
||||
if (cartesian) {
|
||||
var cartographic = Cesium.Cartographic.fromCartesian(cartesian); // 转弧度
|
||||
// 将弧度转换为度数
|
||||
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
|
||||
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
|
||||
let lng = Number(longitudeString);
|
||||
let lat = Number(latitudeString);
|
||||
const positions = [lng, lat];
|
||||
that.viewer.entities.removeById("theNewPoint");
|
||||
that.viewer.entities.add({
|
||||
id: "theNewPoint",
|
||||
position: cartesian,
|
||||
point: {
|
||||
color: Cesium.Color.fromCssColorString('#9cf7e3'),
|
||||
pixelSize: 10
|
||||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
});
|
||||
//通过callback函数将数据传递到外部使用
|
||||
callback(positions);
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
}
|
||||
//销毁监听
|
||||
static destroyClickToAddPoint(){
|
||||
if(this.addPointHandler){
|
||||
static destroyClickToAddPoint() {
|
||||
if (this.addPointHandler) {
|
||||
this.addPointHandler.destroy();
|
||||
}
|
||||
}
|
||||
|
|
@ -349,8 +358,8 @@ class CesiumUtils {
|
|||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
}
|
||||
//销毁点击事件
|
||||
static destoryHandleClick(){
|
||||
if(this.clickShowPopHandler){
|
||||
static destoryHandleClick() {
|
||||
if (this.clickShowPopHandler) {
|
||||
this.clickShowPopHandler.destroy()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
@click="downLoadPro">下载</el-button>
|
||||
</div>
|
||||
<product-info @removeLayer="removeLayer" @addLayer="addLayer" @removeSample="removeSplData"
|
||||
@addSample="getSqlData"></product-info>
|
||||
@addSample="getSqlData" @addDemLayer="addDemLayer" @removeDemLayer="removeDemLayer"></product-info>
|
||||
<div class="preview">
|
||||
<div id="PendPreview" @click="pickValue" style="overflow: hidden; position: relative"></div>
|
||||
</div>
|
||||
|
|
@ -88,9 +88,9 @@
|
|||
<div class="box1">
|
||||
<span class="sp1"></span><span class="sp2">{{
|
||||
orderMsg.productSubClassId == 39
|
||||
? "地表覆盖类型表"
|
||||
: "植被物候类型表"
|
||||
}}</span>
|
||||
? "地表覆盖类型表"
|
||||
: "植被物候类型表"
|
||||
}}</span>
|
||||
</div>
|
||||
<el-table :data="groudClassData" :header-cell-style="{ background: '#E4E9F1' }" :cell-style="tableRowClassName"
|
||||
style="width: 98%; margin-left: 1%; margin-top: 15px" height="200">
|
||||
|
|
@ -508,6 +508,12 @@ export default {
|
|||
removeLayer() {
|
||||
cu.clearLayers();
|
||||
},
|
||||
addDemLayer() {
|
||||
cu.addDemLayer();
|
||||
},
|
||||
removeDemLayer() {
|
||||
cu.removeDemLayer();
|
||||
},
|
||||
removeSplData() {
|
||||
cu.removePoint();
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue