增加修改功能
dongjiajun
parent
b1051f7579
commit
8db90be785
|
|
@ -98,6 +98,7 @@
|
|||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-edit"
|
||||
@click="editSelected(scope.$index, simpleData)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
|
|
@ -136,12 +137,17 @@
|
|||
/>
|
||||
</div>
|
||||
<canvas v-show="checkRealityWait" id="scaleBar"></canvas>
|
||||
<div class="update-btns" v-show="updatePointVisible">
|
||||
<div><el-button type="primary" @click="selectPoint">选取点</el-button></div>
|
||||
<div><el-button type="primary" @click="savePoint">保存点</el-button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="checkRealityWait" class="bottomCont">
|
||||
<span>制图单位：中国科学院空天信息创新研究院</span><br />
|
||||
<span>制图日期：{{ createImgTime }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<SampleSetting
|
||||
|
|
@ -252,6 +258,9 @@ export default {
|
|||
isDeepSpace: false,
|
||||
depthList: [],
|
||||
createImgTime: null,
|
||||
updatePointVisible:false,
|
||||
currentSelectPoint: null, //当前选择修改的点对象
|
||||
updatedPoint:null, // 修改后的点对象
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -594,6 +603,61 @@ export default {
|
|||
simpleData.splice(index, 1);
|
||||
});
|
||||
},
|
||||
editSelected(index, simpleData) {
|
||||
//显示地图按钮
|
||||
this.updatePointVisible = true;
|
||||
|
||||
cu.removePoint()
|
||||
//将当前选择要修改的点变为红色
|
||||
if (simpleData.length !== 0) {
|
||||
for (let i in simpleData) {
|
||||
if( i == index ){
|
||||
cu.addPoint(simpleData[index].lng, simpleData[index].lat, 10,true);
|
||||
}else{
|
||||
cu.addPoint(simpleData[i].lng, simpleData[i].lat, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
//保存当前修改的点信息
|
||||
this.currentSelectPoint = simpleData[index];
|
||||
// this.$confirm(`确定修改该样本？`, "提示", {
|
||||
// confirmButtonText: "确定",
|
||||
// cancelButtonText: "取消",
|
||||
// type: "warning",
|
||||
// }).then(async () => {
|
||||
// simpleData.splice(index, 1);
|
||||
// });
|
||||
},
|
||||
//选择点
|
||||
async selectPoint(){
|
||||
//启动新增点，点击地图，新增一个点
|
||||
let res = await cu.clickToAddPoint()
|
||||
cu.addPoint(res.lng, res.lat, 10);
|
||||
this.updatedPoint = {
|
||||
...this.currentSelectPoint,
|
||||
lng: res.lng,
|
||||
lat: res.lat
|
||||
}
|
||||
console.log(this.updatedPoint,'查看点');
|
||||
console.log(this.simpleData[2],'查看simpleData');
|
||||
},
|
||||
// 保存点
|
||||
savePoint(){
|
||||
//清空所有点
|
||||
cu.removePoint();
|
||||
let index = this.simpleData.indexOf(this.currentSelectPoint)
|
||||
//更新table中信息
|
||||
this.simpleData.splice(index,1,this.updatedPoint)
|
||||
//重新添加到地图中
|
||||
if (this.simpleData.length !== 0) {
|
||||
for (let i in this.simpleData) {
|
||||
cu.addPoint(this.simpleData[i].lng, this.simpleData[i].lat, 10);
|
||||
}
|
||||
}
|
||||
this.$refs.multipleTable.toggleAllSelection();
|
||||
//关闭地图按钮
|
||||
this.updatePointVisible = false;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
globalSampleFun: function () {
|
||||
|
|
@ -741,6 +805,20 @@ export default {
|
|||
margin-left: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.update-btns{
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.onBorder {
|
||||
|
|
|
|||
|
|
@ -162,26 +162,53 @@ class CesiumUtils {
|
|||
this.viewer.imageryLayers.remove(this.privide);
|
||||
}
|
||||
|
||||
static addPoint(pLon, pLat, pAlt) {
|
||||
static addPoint(pLon, pLat, pAlt, isSelected = false) {
|
||||
var pointEntity = this.viewer.entities.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(pLon, pLat, pAlt),
|
||||
point: {
|
||||
pixelSize: 10,
|
||||
color: Cesium.Color.YELLOW
|
||||
}
|
||||
color: isSelected ? Cesium.Color.RED : Cesium.Color.YELLOW,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
static removePoint() {
|
||||
this.viewer.entities.removeAll();
|
||||
}
|
||||
|
||||
//修改点的位置
|
||||
static clickToAddPoint(){
|
||||
return new Promise((resolve, reject) => {
|
||||
var scene = this.viewer.scene;
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
|
||||
const that = this;
|
||||
handler.setInputAction(function (movement) {
|
||||
// 清除历史单击点
|
||||
// handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
// movement.position 像素的x、y坐标
|
||||
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);
|
||||
resolve({ lng, lat });
|
||||
}else{
|
||||
reject('未获取到坐标');
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
});
|
||||
}
|
||||
//鼠标点击
|
||||
static handleClick() {
|
||||
var scene = this.viewer.scene;
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
|
||||
const that = this;
|
||||
|
||||
|
||||
handler.setInputAction(function (movement) {
|
||||
// 清除历史单击点
|
||||
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
|
|
@ -206,10 +233,10 @@ class CesiumUtils {
|
|||
angleDataIds: [],
|
||||
geoX: longitudeString,
|
||||
geoY: latitudeString,
|
||||
metaDataId: sessionStorage.getItem('metaDataId'),
|
||||
referImageIds: []
|
||||
}
|
||||
getProductValue(of).then(res => {
|
||||
metaDataId: sessionStorage.getItem("metaDataId"),
|
||||
referImageIds: [],
|
||||
};
|
||||
getProductValue(of).then((res) => {
|
||||
if (res.code == 200) pValue = res.data.imagePixel;
|
||||
// 清空容器
|
||||
const pendPreview =
|
||||
|
|
|
|||
Loading…
Reference in New Issue