<template>
|
<div>
|
<el-collapse v-model="activeName" accordion @change="clean1()">
|
<el-collapse-item title="地名地址查询" name="1">
|
<el-form :inline="true" style="font-color: 0; text-align: center; margin-top: 6px" label-position="right">
|
<el-form-item label="名称:" class="form_item">
|
<div style="display: flex; flex-direction: row; align-items: center">
|
<el-input size="small" placeholder="请输入内容" v-model="positionName" clearable>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-form>
|
|
<div class="buttongroups">
|
<el-button size="small" class="bimBtn" @click="query1()">搜索</el-button>
|
</div>
|
|
<el-table :data="tableData" size="mini" style="background: #182a45; margin-top: 6px" :height="'200px'"
|
@row-click="tableClick1">
|
<el-table-column prop="properties.name" header-align="center" align="center" label="地名" min-width="40">
|
</el-table-column>
|
<el-table-column prop="properties.address" header-align="center" align="center" label="地址" min-width="40">
|
</el-table-column>
|
</el-table>
|
</el-collapse-item>
|
|
<el-collapse-item title="区域查询" name="2">
|
<el-form :inline="true" style="font-color: 0; text-align: center; margin-top: 6px" label-position="right">
|
|
<el-form-item label="类型:" class="form_item">
|
<div style="display: flex; flex-direction: row; align-items: center">
|
<el-select v-model="form2.Location" style="width: 150px" collapse-tags placeholder="请选择类型">
|
<el-option :value="form2.LocationCode" :label="form2.Location"
|
style="height: 200px; overflow: auto; background-color: #fff">
|
<el-tree :data="tableTreeList" :check-strictly="true" highlight-current @node-click="treeCheck"
|
node-key="id" ref="treeSelect" :props="treeProps"></el-tree>
|
</el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<el-form-item label="范围:" class="form_item">
|
<div class="buttongroups">
|
<el-button size="small" class="bimBtn" @click="draw1()">绘制</el-button>
|
<el-button size="small" class="bimBtn" @click="clean1()">清除</el-button>
|
</div>
|
</el-form-item>
|
|
|
</el-form>
|
|
<div class="buttongroups">
|
<el-button size="small" class="bimBtn" @click="query2()">搜索</el-button>
|
</div>
|
|
<el-table :data="tableData2" size="mini" style="background: #182a45; margin-top: 6px" :height="'200px'"
|
@row-click="tableClick2">
|
<el-table-column prop="properties.name" header-align="center" align="center" label="名称" min-width="40">
|
</el-table-column>
|
<el-table-column prop="properties.entity" header-align="center" align="center" label="类型" min-width="40">
|
</el-table-column>
|
</el-table>
|
|
<div class="buttongroups">
|
<el-button size="small" class="bimBtn" @click="cleanAllEntity()">清空</el-button>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item title="模糊查询" name="3">
|
<el-form :inline="true" style="font-color: 0; text-align: center; margin-top: 6px" label-position="right">
|
<el-form-item label="类型:" class="form_item">
|
<div style="display: flex; flex-direction: row; align-items: center">
|
<el-select v-model="form3.Location" style="width: 150px" collapse-tags placeholder="请选择类型">
|
<el-option :value="form3.LocationCode" :label="form3.Location"
|
style="height: 200px; overflow: auto; background-color: #fff">
|
<el-tree :data="tableTreeList" :check-strictly="true" highlight-current @node-click="treeCheck3"
|
node-key="id" ref="treeSelect" :props="treeProps"></el-tree>
|
</el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="名称:" class="form_item">
|
<div style="display: flex; flex-direction: row; align-items: center">
|
<el-input size="small" placeholder="请输入内容" v-model="positionName3" clearable>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-form>
|
|
<div class="buttongroups">
|
<el-button size="small" class="bimBtn" @click="query3()">搜索</el-button>
|
</div>
|
|
<el-table :data="tableData3" size="mini" style="background: #182a45; margin-top: 6px" :height="'200px'"
|
@row-click="tableClick2">
|
<el-table-column prop="properties.name" header-align="center" align="center" label="名称" min-width="40">
|
</el-table-column>
|
<el-table-column prop="properties.entity" header-align="center" align="center" label="类型" min-width="40">
|
</el-table-column>
|
</el-table>
|
|
<div class="buttongroups">
|
<el-button size="small" class="bimBtn" @click="cleanAllEntity()">清空</el-button>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item title="根据范围位置统计查询" name="4">
|
<el-form :inline="true" style="font-color: 0; text-align: center; margin-top: 6px" label-position="right">
|
<el-form-item label="类型:" class="form_item">
|
<div style="display: flex; flex-direction: row; align-items: center">
|
<el-select v-model="form4.Location" style="width: 150px" collapse-tags placeholder="请选择类型">
|
<el-option :value="form4.LocationCode" :label="form4.Location"
|
style="height: 200px; overflow: auto; background-color: #fff">
|
<el-tree :data="tableTreeList" :check-strictly="true" highlight-current @node-click="treeCheck4"
|
node-key="id" ref="treeSelect" :props="treeProps"></el-tree>
|
</el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="范围:" class="form_item">
|
<div class="buttongroups">
|
<el-button size="small" class="bimBtn" @click="draw1()">绘制</el-button>
|
<el-button size="small" class="bimBtn" @click="clean1()">清除</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
|
<div class="buttongroups">
|
<el-button size="small" class="bimBtn" @click="query4()">搜索</el-button>
|
</div>
|
|
<el-table :data="tableData4" size="mini" style="background: #182a45; margin-top: 6px" :height="'200px'">
|
<el-table-column prop="key" header-align="center" align="center" label="类型" min-width="40">
|
</el-table-column>
|
<el-table-column prop="value" header-align="center" align="center" label="数量" min-width="40">
|
</el-table-column>
|
</el-table>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</template>
|
<script>
|
let drawObj = null;
|
|
import {
|
queryPosition,
|
getTree,
|
queryRangePosition,
|
queryShpPosition,
|
summaryRangePosition,
|
} from "@/api/api";
|
|
export default {
|
data() {
|
return {
|
EntityList: [],
|
activeName: "1",
|
positionName: "",
|
positionName2: "",
|
positionName3: "",
|
tableData: [],
|
tableData2: [],
|
tableData3: [],
|
tableData4: [],
|
tableTreeList: [],
|
form2: {
|
Location: "",
|
LocationCode: "",
|
},
|
form3: {
|
Location: "",
|
LocationCode: "",
|
},
|
form4: {
|
Location: "",
|
LocationCode: "",
|
},
|
|
treeProps: {
|
children: "children",
|
label: "name",
|
id: "id",
|
},
|
};
|
},
|
components: {},
|
methods: {
|
query1() {
|
if (this.positionName == null || this.positionName == "") {
|
this.$message.warning("请先输入地名！");
|
return;
|
}
|
queryPosition(this.positionName).then((res) => {
|
if (res.code == 200) {
|
this.tableData = res.data.features;
|
if (res.data.features.length == 0) {
|
this.$message.warning("未搜索到结果！");
|
return;
|
}
|
} else {
|
console.log(res);
|
}
|
});
|
},
|
tableClick1(row) {
|
if (sgworld) {
|
let l = Number(row.geometry.coordinates[0]);
|
let w = Number(row.geometry.coordinates[1]);
|
if (l === 0 || w === 0) return;
|
this.flyTo(l, w);
|
}
|
},
|
|
flyTo(l, w, h) {
|
sgworld.Navigate.flyToPosition(l, w, h || Number(1000));
|
},
|
|
tableClick2(row) {
|
switch (row.geometry.type) {
|
case "Point":
|
let point = sgworld.factory.createPoint({
|
lon: row.geometry.coordinates[0],
|
lat: row.geometry.coordinates[1],
|
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
alt: 4,
|
pixelSize: 10,
|
color: SmartEarth.Cesium.Color.WHITE,
|
outlineColor: SmartEarth.Cesium.Color.BLACK,
|
outlineWidth: 2,
|
});
|
this.EntityList.push(point);
|
this.tableClick1(row);
|
break;
|
case "MultiLineString":
|
var pointList = [];
|
row.geometry.coordinates[0].forEach((e) => {
|
pointList.push(e[0]);
|
pointList.push(e[1]);
|
});
|
let line = sgworld.factory.createPolyline({
|
lineColor: SmartEarth.Cesium.Color.RED,
|
outlineColor: SmartEarth.Cesium.Color.BLACK,
|
lineWidth: 4,
|
isDepthTest: false,
|
outline: false,
|
clampToGround: true,
|
positions: SmartEarth.Cesium.Cartesian3.fromDegreesArray(pointList),
|
});
|
this.EntityList.push(line);
|
|
let linePoints = []
|
row.geometry.coordinates[0].forEach((e) => {
|
linePoints.push(Cesium.turf.point(e))
|
})
|
var features = Cesium.turf.featureCollection(linePoints);
|
var center = Cesium.turf.center(features);
|
var l = Number(center.geometry.coordinates[0]);
|
var w = Number(center.geometry.coordinates[1]);
|
this.flyTo(l, w, 500);
|
break;
|
case "MultiPolygon":
|
var pointList = [];
|
row.geometry.coordinates[0][0].forEach((e) => {
|
pointList.push(e[0]);
|
pointList.push(e[1]);
|
});
|
let polygon = sgworld.factory.createPolygon({
|
material: SmartEarth.Cesium.Color.YELLOWGREEN.withAlpha(0.8),
|
outlineColor: SmartEarth.Cesium.Color.YELLOW,
|
lineWidth: 1,
|
outline: true,
|
outlineWidth: 10,
|
positions: SmartEarth.Cesium.Cartesian3.fromDegreesArray(pointList),
|
});
|
this.EntityList.push(polygon);
|
|
var polygon1 = Cesium.turf.polygon(row.geometry.coordinates[0]);
|
var center = Cesium.turf.centerOfMass(polygon1);
|
|
var l = Number(center.geometry.coordinates[0]);
|
var w = Number(center.geometry.coordinates[1]);
|
this.flyTo(l, w, 500);
|
break;
|
default:
|
break;
|
}
|
},
|
|
//绘制查询范围
|
draw1() {
|
sgworld.Creator.createSimpleGraphic(
|
"polygon",
|
{
|
clampToGround: true,
|
},
|
(entity) => {
|
drawObj = entity;
|
}
|
);
|
},
|
clean1() {
|
if (drawObj) {
|
sgworld.Creator.SimpleGraphic.remove(drawObj.id);
|
drawObj = null;
|
}
|
},
|
query2() {
|
if (drawObj == null) {
|
this.$message.warning("请先绘制范围！");
|
return;
|
}
|
if (this.form2.LocationCode == "" || this.form2.LocationCode == null) {
|
this.$message.warning("请先选择类型！");
|
return;
|
}
|
let coord = [];
|
let positions = drawObj.polygon.hierarchy.getValue().positions;
|
positions.forEach((position) => {
|
let cartographic = Cesium.Cartographic.fromCartesian(position);
|
coord.push([
|
Cesium.Math.toDegrees(cartographic.longitude),
|
Cesium.Math.toDegrees(cartographic.latitude),
|
]);
|
});
|
|
let wkt = "";
|
coord.forEach((e) => {
|
wkt += e[0] + " " + e[1] + ",";
|
});
|
wkt += coord[0][0] + " " + coord[0][1];
|
wkt = "POLYGON((" + wkt + "))";
|
let rangeParamVo = {
|
tableName: [this.form2.LocationCode],
|
wkt: wkt,
|
};
|
queryRangePosition(rangeParamVo).then((res) => {
|
if (res.code == 200) {
|
this.tableData2 = res.data.features;
|
this.clean1()
|
if (res.data.features.length == 0) {
|
this.$message.warning("未搜索到结果！");
|
return;
|
}
|
} else {
|
console.log(res);
|
}
|
});
|
},
|
|
query3() {
|
if (this.form3.LocationCode == "" || this.form3.LocationCode == null) {
|
this.$message.warning("请先选择类型！");
|
return;
|
}
|
|
let rangeParamVo = {
|
tableName: [this.form3.LocationCode],
|
name: this.positionName3,
|
};
|
queryShpPosition(rangeParamVo).then((res) => {
|
if (res.code == 200) {
|
this.tableData3 = res.data.features;
|
if (res.data.features.length == 0) {
|
this.$message.warning("未搜索到结果！");
|
return;
|
}
|
} else {
|
console.log(res);
|
}
|
});
|
},
|
|
query4() {
|
if (drawObj == null) {
|
this.$message.warning("请先绘制范围！");
|
return;
|
}
|
if (this.form4.LocationCode == "" || this.form4.LocationCode == null) {
|
this.$message.warning("请先选择类型！");
|
return;
|
}
|
let coord = [];
|
let positions = drawObj.polygon.hierarchy.getValue().positions;
|
positions.forEach((position) => {
|
let cartographic = Cesium.Cartographic.fromCartesian(position);
|
coord.push([
|
Cesium.Math.toDegrees(cartographic.longitude),
|
Cesium.Math.toDegrees(cartographic.latitude),
|
]);
|
});
|
|
let wkt = "";
|
coord.forEach((e) => {
|
wkt += e[0] + " " + e[1] + ",";
|
});
|
wkt += coord[0][0] + " " + coord[0][1];
|
wkt = "POLYGON((" + wkt + "))";
|
let rangeParamVo = {
|
tableName: [this.form4.LocationCode],
|
wkt: wkt,
|
};
|
summaryRangePosition(rangeParamVo).then((res) => {
|
if (res.code == 200) {
|
let data = [];
|
for (const key in res.data) {
|
data.push({
|
key: key,
|
value: res.data[key],
|
});
|
}
|
this.tableData4 = data;
|
this.clean1()
|
} else {
|
console.log(res);
|
}
|
});
|
},
|
|
//获取表名列表
|
getTableList() {
|
getTree().then((res) => {
|
if (res.code == 200) {
|
this.tableTreeList = res.data;
|
} else {
|
console.log(res);
|
}
|
});
|
},
|
|
treeCheck(node) {
|
if (node.tableName == null) {
|
return;
|
} else {
|
this.form2.LocationCode = node.tableName;
|
this.form2.Location = node.name;
|
}
|
},
|
treeCheck3(node) {
|
if (node.tableName == null) {
|
return;
|
} else {
|
this.form3.LocationCode = node.tableName;
|
this.form3.Location = node.name;
|
}
|
},
|
treeCheck4(node) {
|
if (node.tableName == null) {
|
return;
|
} else {
|
this.form4.LocationCode = node.tableName;
|
this.form4.Location = node.name;
|
}
|
},
|
|
cleanAllEntity() {
|
this.EntityList.forEach((e) => {
|
e.removeFromMap();
|
});
|
this.EntityList = [];
|
},
|
},
|
mounted() {
|
this.getTableList();
|
},
|
computed: {},
|
created() { },
|
destroyed() { },
|
};
|
</script>
|
<style lang="less" scoped>
|
.input-item {
|
margin: 0px;
|
color: white;
|
|
/deep/ .el-input__inner {
|
-webkit-appearance: none;
|
background-color: #1b1b1b;
|
background-image: none;
|
border-radius: 0px;
|
border: 0;
|
box-sizing: border-box;
|
color: #ffffff;
|
display: inline-block;
|
font-size: inherit;
|
height: 30px;
|
line-height: 30px;
|
outline: 0;
|
padding: 0 15px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
}
|
|
/deep/.el-form-item__label {
|
color: #ffffff;
|
}
|
|
/deep/ .el-radio {
|
color: #ffffff;
|
}
|
|
/deep/.el-range-input {
|
color: #ffffff;
|
background: transparent;
|
}
|
}
|
</style>
|
|
<style scoped lang="less">
|
.input-item {
|
margin: 0px;
|
color: white;
|
|
/deep/ .el-form-item__label {
|
color: #ffffff;
|
}
|
|
/deep/ .el-range-input {
|
color: #ffffff;
|
background: transparent;
|
}
|
}
|
|
/deep/ .el-input__inner {
|
-webkit-appearance: none;
|
background-color: #1b1b1b;
|
background-image: none;
|
border-radius: 0px;
|
border: 0;
|
box-sizing: border-box;
|
color: #ffffff;
|
display: inline-block;
|
font-size: inherit;
|
height: 30px;
|
line-height: 30px;
|
outline: 0;
|
padding: 0 15px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 150px;
|
}
|
|
.buttongroups {
|
margin: 8px auto;
|
text-align: center;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
gap: 6px;
|
width: 150px;
|
}
|
|
.el-button {
|
cursor: pointer;
|
background: transparent;
|
border: none;
|
color: #ffffff;
|
border-radius: 0px;
|
|
width: 50%;
|
height: 26px;
|
background: url("~@/assets/img/small_btn_back.png") no-repeat;
|
background-size: 100% 100%;
|
|
font-size: 11px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #e0e5fa;
|
text-shadow: 0px 1px 4px rgba(5, 28, 55, 0.42);
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
margin: 0px;
|
}
|
|
.el-button:hover {
|
background: #18a4f0;
|
border: 1px solid #7596fa;
|
}
|
|
/deep/.el-form-item {
|
margin-bottom: 0px;
|
margin-right: 0px;
|
}
|
|
/deep/.el-table--mini .el-table__cell {
|
padding: 0px 0;
|
}
|
|
/deep/.el-table th.el-table__cell>.cell {
|
padding: 6px 6px;
|
}
|
|
/deep/.el-table .cell {
|
color: #aec2de;
|
}
|
|
/deep/.el-table tr {
|
height: 33px;
|
}
|
|
.el-table /deep/ tr {
|
background-color: transparent;
|
color: #dedfe1;
|
}
|
|
.el-table /deep/ tr th {
|
background-color: rgba(240, 250, 254, 0.1);
|
color: rgba(240, 250, 254, 0.85);
|
}
|
|
.el-table /deep/ tr:hover>td {
|
background-color: rgba(0, 166, 226, 0.4) !important;
|
}
|
</style>
|
