<template>
|
<div class="resourceQuery">
|
<moon-map></moon-map>
|
<div
|
class="left_menu"
|
@click="leftDialog =true"
|
v-show="!leftDialog"
|
>
|
</div>
|
<div
|
class="left_box"
|
v-show="leftDialog"
|
>
|
<div class="top_box">
|
<div class="input_box">
|
<el-form
|
:model="form"
|
label-width="120px"
|
label-position="top"
|
size="small"
|
>
|
<el-form-item label="">
|
<el-input
|
v-model="form.name"
|
placeholder=""
|
prefix-icon="el-icon-search"
|
/>
|
</el-form-item>
|
<el-form-item label="传感器类型">
|
<el-select
|
style="width: 100%"
|
v-model="form.region"
|
placeholder=""
|
>
|
<el-option
|
v-for="(e, i) in stretchOptions"
|
:label="e.label"
|
:value="e.value"
|
:key="i"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="数据类型">
|
<el-select
|
style="width: 100%"
|
v-model="form.region"
|
placeholder=""
|
>
|
<el-option
|
v-for="(e, i) in stretchOptions"
|
:label="e.label"
|
:value="e.value"
|
:key="i"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间范围">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.time"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="yyyy-MM-DD HH:mm:ss"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<!-- <div class="btnstyle editBtn">
|
<el-button type="primary" @click="onSubmit">确定</el-button>
|
<el-button class="delbtn">取消</el-button>
|
</div> -->
|
</el-form-item>
|
</el-form>
|
<div class="KJCX">
|
<div class="KJCX_title">空间查询</div>
|
<div class="KJCX_btn_list">
|
<div
|
class="KJCX_btn"
|
@click="setDrawMenu(1)"
|
>
|
<span>点</span>
|
<div class="btn_bg d"></div>
|
</div>
|
<div
|
class="KJCX_btn"
|
@click="setDrawMenu(2)"
|
>
|
<span>线</span>
|
<div class="btn_bg x"></div>
|
</div>
|
<div
|
class="KJCX_btn"
|
@click="setDrawMenu(3)"
|
>
|
<span>矩形</span>
|
<div class="btn_bg jx"></div>
|
</div>
|
<div
|
class="KJCX_btn"
|
@click="setDrawMenu(4)"
|
>
|
<span>多边形</span>
|
<div class="btn_bg db"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
class="btn_close"
|
@click="leftDialog = false"
|
>
|
|
</div>
|
<div class="btn_box">
|
<div class="btn">
|
<el-button
|
type="primary"
|
class="btnbox"
|
>检索</el-button>
|
</div>
|
<div>
|
<el-button
|
type="primary"
|
class="btnbox delbtn"
|
>重置</el-button>
|
</div>
|
</div>
|
</div>
|
<div v-show="listDialog">
|
|
</div>
|
<!-- <div class="pagination">
|
<el-pagination
|
small
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[100, 200, 300, 400]"
|
:page-size="100"
|
layout="sizes, prev, pager, next, jumper"
|
:total="400"
|
>
|
</el-pagination>
|
</div> -->
|
<!-- <div class="list_box">
|
<div
|
class="list"
|
v-for="(e, i) in list"
|
:key="i"
|
:class="{ list_active: e.checked }"
|
@click.stop="checkedList(e)"
|
>
|
<div class="attribute_box">
|
<div class="attribute">
|
<span class="attribute_title">图幅名称：</span>
|
<span class="attribute_content">{{ e.name }}</span>
|
</div>
|
<div class="attribute">
|
<span class="attribute_title">存情位量：</span>
|
<span class="attribute_content">{{ e.time }}</span>
|
</div>
|
<div class="attribute">
|
<span class="attribute_title">生产时间：</span>
|
<span class="attribute_content">{{ e.data }}</span>
|
</div>
|
<div
|
class="attribute"
|
style="margin: 0"
|
>
|
<span class="attribute_title">数据大小：</span>
|
<span class="attribute_content">dsadas</span>
|
</div>
|
</div>
|
<div
|
class="all_btn"
|
v-on:click.stop="details(e)"
|
>
|
<i class="el-icon-more"></i>
|
</div>
|
</div>
|
</div> -->
|
<!-- <div class="bottom_box">
|
<span class="msg_box">显示第{{ paginationData.pageNo }}到{{
|
paginationData.pageSize
|
}}条，共{{ list.length }}条记录，已选择{{
|
listChecked.length
|
}}条</span>
|
<div class="bottom_btn">
|
<el-button
|
type="primary"
|
class="btnbox"
|
>全选</el-button>
|
<el-button
|
type="primary"
|
class="btnbox delbtn"
|
>取消</el-button>
|
</div>
|
</div> -->
|
</div>
|
<div
|
class="details_box"
|
v-show="detailsBox"
|
>
|
<div class="details_t">
|
<i
|
class="el-icon-close"
|
@click="detailsBox = false"
|
></i>
|
</div>
|
<div class="details_table">
|
<div class="table_header">
|
<div class="table_td">属性</div>
|
<div class="table_td">属性值</div>
|
</div>
|
<div
|
class="table_tr"
|
v-for="(e, i) in tableList"
|
:key="i"
|
>
|
<div class="table_td">{{ e.name }}</div>
|
<div class="table_td">{{ e.value }}</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
title="提示"
|
:visible.sync="dialogVisible"
|
width="20%"
|
:before-close="handleClose"
|
>
|
<div class="dialogContent">
|
<el-form ref="form">
|
<el-form-item label="缓冲距离（M）">
|
<el-input-number
|
v-model="bufferNumber"
|
:step="10"
|
></el-input-number>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<span
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button
|
size="small"
|
@click="dialogVisible = false"
|
>取 消</el-button>
|
<el-button
|
type="primary"
|
size="small"
|
@click="setCloseDialog"
|
>确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import * as turf from "@turf/turf"
|
import moonMap from "../../components/MapView/moonMap.vue"; //地图
|
export default {
|
components: {
|
moonMap,
|
},
|
data() {
|
return {
|
paginationData: {
|
pageNo: 1,
|
pageSize: 10,
|
},
|
tableList: [
|
{
|
name: "dataid",
|
value: "LC81350352022001LGN00",
|
},
|
{
|
name: "satellite",
|
value: "LANDSAT8",
|
},
|
{
|
name: "datatype",
|
value: "OLLTIRS",
|
},
|
{
|
name: "ines samples",
|
value: "7931.0",
|
},
|
{
|
name: "sensor",
|
value: "7811.0",
|
},
|
],
|
listChecked: [],
|
list: [
|
{
|
name: "名称",
|
CQWZ: "位置",
|
time: "时间",
|
data: "大小",
|
checked: false,
|
},
|
{
|
name: "名称",
|
CQWZ: "位置",
|
time: "时间",
|
data: "大小",
|
checked: false,
|
},
|
{
|
name: "名称",
|
CQWZ: "位置",
|
time: "时间",
|
data: "大小",
|
checked: false,
|
},
|
{
|
name: "名称",
|
CQWZ: "位置",
|
time: "时间",
|
data: "大小",
|
checked: false,
|
},
|
],
|
currentPage4: 4,
|
form: {
|
name: "",
|
region: "",
|
selectName: "",
|
layerUrl: "",
|
children: [],
|
value1: "",
|
},
|
stretchOptions: [
|
{
|
value: "目录",
|
label: "目录",
|
},
|
],
|
detailsBox: false,
|
listDialog: false,
|
leftDialog: true,
|
drawType: null,
|
dialogVisible: false,
|
bufferNumber: 100,
|
};
|
},
|
methods: {
|
details(val) {
|
this.detailsBox = true;
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
},
|
checkedList(val) {
|
val.checked = !val.checked;
|
if (val.checked) {
|
this.listChecked.push(val);
|
}
|
|
if (this.listChecked.length > 0) {
|
if (!val.checked) {
|
this.listChecked.forEach((e, i) => {
|
if (e.name == val.name) {
|
this.listChecked.splice(i, 1);
|
}
|
});
|
}
|
}
|
},
|
setDrawMenu(res) {
|
this.bufferNumber = 100;
|
switch (res) {
|
case 1:
|
this.drawType = 'point';
|
this.dialogVisible = true;
|
break;
|
case 2:
|
this.drawType = 'polyline';
|
this.dialogVisible = true;
|
break;
|
case 3:
|
this.drawType = 'rectangle';
|
this.setDrawEntity();
|
break;
|
case 4:
|
this.drawType = 'polygon';
|
this.setDrawEntity();
|
break
|
}
|
},
|
handleClose() {
|
this.$confirm('确认关闭？')
|
.then(_ => {
|
this.dialogVisible = false;
|
})
|
.catch(_ => { });
|
},
|
setCloseDialog() {
|
this.dialogVisible = false;
|
this.setDrawEntity();
|
},
|
setDrawEntity() {
|
var config = {}
|
if (this.drawType != 'point') {
|
config = { showSize: false }
|
}
|
var that = this;
|
sgworld.Creator.createSimpleGraphic(this.drawType, config, (entity) => {
|
sgworld.Creator.SimpleGraphic.clear()
|
that.querySatialQuery(entity);
|
});
|
},
|
querySatialQuery(res) {
|
var res_val;
|
switch (this.drawType) {
|
case 'point':
|
res_val = res.position.getValue();
|
break;
|
case 'polyline':
|
res_val = res.polyline.positions.getValue();
|
break;
|
case 'rectangle':
|
res_val = res.rectangle.coordinates.getValue();
|
break;
|
case 'polygon':
|
res_val = res.polygon.hierarchy.getValue().positions;
|
break;
|
}
|
var val = this.getEntityGeometry(res_val, this.drawType)
|
debugger
|
},
|
getEntityGeometry(res, type) {
|
var res_val;
|
var std = [];
|
if (type == 'point') {
|
var geom = this.setCartesianToEightFour(res);
|
var point = turf.point([geom.lng, geom.lat]);
|
res_val = this.setTurfBuffer(point, this.bufferNumber, 'circle')
|
} else if (type == 'polyline') {
|
for (var i in res) {
|
var geom = this.setCartesianToEightFour(res[i]);
|
std.push([geom.lng, geom.lat])
|
}
|
|
var line = turf.lineString(std, { name: "polyline" })
|
res_val = this.setTurfBuffer(line, this.bufferNumber, 'buffer')
|
} else if (type == 'rectangle') {
|
var geom = new Cesium.Rectangle.subsample(
|
res,
|
Cesium.Ellipsoid.WGS84,
|
res.height
|
)
|
for (var i in geom) {
|
var rectangle = this.setCartesianToEightFour(geom[i]);
|
std.push([rectangle.lng, rectangle.lat])
|
}
|
std.push(std[0])
|
res_val = turf.polygon([std], { name: "polygon" })
|
} else if (type == 'polygon') {
|
for (var i in res) {
|
var polygon = this.setCartesianToEightFour(res[i]);
|
std.push([polygon.lng, polygon.lat])
|
}
|
std.push(std[0])
|
res_val = turf.polygon([std], { name: "polygon" })
|
}
|
return this.setJonToWKT(res_val)
|
},
|
setJonToWKT(res) {
|
let fixedVal = this.fixToPositon(res)
|
var jsonToWkt = this.$wkt.convert(fixedVal.geometry)
|
return jsonToWkt;
|
},
|
setTurfBuffer(geom, distance, type) {
|
|
return turf.buffer(geom, distance, { units: 'miles' });
|
},
|
fixToPositon(restVal, digits = 6) {
|
restVal.geometry.coordinates.forEach(coord => {
|
if (Array.isArray(coord)) {
|
coord.forEach(item => {
|
if (item.length >= 2) {
|
item[0] = Number(item[0].toFixed(digits))
|
item[1] = Number(item[1].toFixed(digits))
|
}
|
})
|
}
|
})
|
return restVal
|
},
|
setCartesianToEightFour(res) {
|
var std = {}
|
let ellipsoid = Viewer.scene.globe.ellipsoid
|
let cartographic = ellipsoid.cartesianToCartographic(res)
|
std.lat = Cesium.Math.toDegrees(cartographic.latitude)
|
std.lng = Cesium.Math.toDegrees(cartographic.longitude)
|
std.alt = cartographic.height
|
return std
|
}
|
},
|
created() { },
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.resourceQuery {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
.left_menu {
|
top: 10px;
|
left: 10px;
|
position: absolute;
|
width: 20px;
|
height: 20px;
|
background: url("../../assets/img/展开菜单.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
.left_box {
|
width: 427px;
|
height: auto;
|
left: 10px;
|
top: 10px;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
padding: 10px;
|
position: absolute;
|
z-index: 12;
|
.top_box {
|
padding: 10px;
|
background: #1e2a3d;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.btn_close {
|
top: 20px;
|
right: 20px;
|
position: absolute;
|
width: 20px;
|
height: 20px;
|
background: url("../../assets/img/收起菜单.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
.btn_box {
|
.btn {
|
margin-bottom: 37px;
|
}
|
.btnbox {
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
}
|
.btnbox:hover {
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #689cff;
|
}
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
.input_box {
|
width: 282px;
|
.KJCX_btn_list {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.KJCX_title {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff;
|
padding-bottom: 6px;
|
}
|
.KJCX_btn {
|
display: flex;
|
align-items: center;
|
span {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff;
|
}
|
.btn_bg {
|
width: 26px;
|
height: 26px;
|
cursor: pointer;
|
margin-left: 7px;
|
}
|
.d {
|
background: url("../../assets/img/d.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.x {
|
background: url("../../assets/img/x.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.jx {
|
background: url("../../assets/img/jx.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.db {
|
background: url("../../assets/img/db.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
/deep/ .el-input.is-disabled .el-input__wrapper,
|
/deep/ .el-input__wrapper {
|
background: rgba(13, 19, 29, 0.4);
|
border: 1px solid rgba(214, 228, 255, 0.4);
|
}
|
/deep/ .el-input__wrapper.is-focus {
|
/* border: 1px solid #D6E4FF;
|
box-shadow:none; */
|
box-shadow: 0 0 0 1px #d6e4ff;
|
}
|
/deep/ .el-input__inner {
|
color: #d6e4ff;
|
}
|
/deep/ .el-form-item__label {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff !important;
|
padding-bottom: 6px;
|
line-height: 1;
|
}
|
/deep/ .el-date-editor .el-range-input {
|
background: rgba(13, 19, 29, 0.4);
|
}
|
}
|
}
|
.pagination {
|
padding: 10px;
|
background: #1e2a3d;
|
margin: 5px 0;
|
}
|
.list_box {
|
overflow: auto;
|
// height: 350px;
|
height: 42%;
|
.list {
|
padding: 10px;
|
background: #0d131d;
|
margin: 2px 0;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
cursor: pointer;
|
.attribute_box {
|
.attribute {
|
font-size: 12px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #d6e4ff;
|
margin-bottom: 10px;
|
}
|
}
|
.all_btn {
|
color: rgba(214, 228, 255, 1);
|
font-size: 18px;
|
cursor: pointer;
|
}
|
}
|
.list_active {
|
background: rgba(104, 156, 255, 0.5);
|
}
|
}
|
.list_box::-webkit-scrollbar {
|
width: 2px;
|
}
|
.list_box::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(115, 161, 250, 0.5);
|
}
|
.list_box::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(105, 105, 105, 0.5);
|
}
|
.bottom_box {
|
width: 100%;
|
box-sizing: border-box;
|
margin-top: 4px;
|
background: #1e2a3d;
|
padding: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.msg_box {
|
font-size: 12px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #d6e4ff;
|
white-space: nowrap;
|
}
|
.bottom_btn {
|
display: flex;
|
|
.btnbox {
|
width: 47px;
|
height: 25px;
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
font-size: 12px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.btnbox:hover {
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #689cff;
|
}
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
}
|
}
|
.details_box {
|
width: 533px;
|
// height: 430px;
|
background: rgba(7, 8, 14, 0.8);
|
padding: 10px;
|
position: absolute;
|
top: 355px;
|
left: 489px;
|
.details_t {
|
height: 12px;
|
display: flex;
|
justify-content: flex-end;
|
font-size: 12px;
|
color: rgba(142, 151, 168, 1);
|
i {
|
cursor: pointer;
|
}
|
}
|
.details_table {
|
margin-top: 10px;
|
// height: 400px;
|
border: 1px solid rgba(214, 228, 255, 0.4);
|
border-radius: 4px;
|
.table_tr,
|
.table_header {
|
display: flex;
|
background: rgba(38, 47, 71, 0.68);
|
}
|
.table_tr {
|
background: #000;
|
}
|
.table_tr:nth-child(odd) {
|
background: rgba(38, 47, 71, 0.68);
|
}
|
.table_td {
|
font-size: 14px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #d6e4ff;
|
padding-left: 22px;
|
padding-top: 6px;
|
padding-bottom: 6px;
|
}
|
.table_td:nth-child(1) {
|
overflow: hidden;
|
width: 184px;
|
border-right: 1px solid rgba(214, 228, 255, 0.4);
|
}
|
.table_td:nth-child(2) {
|
overflow: hidden;
|
width: 337px;
|
}
|
}
|
}
|
}
|
.dialogContent /deep/.el-icon-plus {
|
color: #606266 !important;
|
}
|
</style>
|
