/* eslint-disable no-undef */
|
<template>
|
<Popup
|
ref="pop"
|
:title="form.title"
|
width="410px"
|
maxHeight="430px"
|
left="calc(100% - 420px)"
|
@close="clearAll"
|
>
|
<div class="spaceSearch">
|
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
|
<el-form-item label="图层" v-if="form.area == 0" prop="location">
|
<el-select
|
@change="cascaderChange"
|
allow-create
|
:value="form.location"
|
>
|
<el-option
|
v-for="item in serverList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="类型:">
|
<el-select v-model="form.type">
|
<el-option label="坐标查询" value="position"></el-option>
|
<el-option label="范围查询" value="range"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="form.type === 'range'">
|
<el-button @click="drawSearchPolygon" type="primary" class="areaBtn">
|
多边形
|
</el-button>
|
<el-button @click="drawSearchCircle" type="primary" class="areaBtn">
|
圆形
|
</el-button>
|
<el-button @click="drawSearchSqure" type="primary" class="areaBtn">
|
矩形
|
</el-button>
|
</el-form-item>
|
<div v-else>
|
<el-form-item label="经度:" prop="lon">
|
<el-input v-model="form.lon"></el-input>
|
</el-form-item>
|
<el-form-item label="纬度:" prop="lat">
|
<el-input v-model="form.lat"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="pointSearch" type="primary" class="areaBtn">
|
查询
|
</el-button>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
<el-dialog
|
title="查询结果"
|
:visible.sync="dialogVisible"
|
width="60%"
|
:modal="false"
|
>
|
<el-table
|
:data="poiResults"
|
stripe
|
style="width: 100%"
|
height="450px"
|
element-loading-text="拼命加载中"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
v-loading="loading"
|
>
|
<el-table-column
|
v-for="(item, index) in poiResults[0]"
|
:key="index"
|
:prop="index"
|
:label="index"
|
width="180"
|
>
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
</Popup>
|
</template>
|
<script>
|
import Popup from "@tools/Popup.vue";
|
import serviceTools from "@mixin/serviceTools";
|
import axios from "axios";
|
let imageLayer = {};
|
let buffAnalyse;
|
export default {
|
name: "spaceSearch",
|
components: {
|
Popup,
|
},
|
mixins: [serviceTools],
|
data() {
|
return {
|
dialogVisible: false,
|
loading: false,
|
//表单元素
|
form: {
|
type: "position",
|
title: "空间查询",
|
serveType: "wms",
|
lon: "",
|
lat: "",
|
area: "0",
|
location: "", //地址框结果
|
province: "",
|
city: "",
|
},
|
//表单验证规则
|
rules: {
|
location: [
|
{ required: true, message: "请选择图层", trigger: "change" },
|
],
|
lon: [{ required: true, message: "请输入经度", trigger: "blur" }],
|
lat: [{ required: true, message: "请输入纬度", trigger: "blur" }],
|
},
|
// 查询结果列表
|
poiResults: [],
|
IsResultShow: false, //结果div显示与否
|
drawAreaData: {}, // 绘制的多边形
|
poiPoint: [], //POI点
|
allPoiShow: [], //所有展示出来的点
|
serverURL: "http://183.162.245.49:3301",
|
serverList: [], //地址数据源
|
extent: undefined,
|
loadServerList: false,
|
};
|
},
|
mounted() {},
|
methods: {
|
getServerList() {
|
this.getGisserverLayerList(this.serverURL)
|
.then((data) => {
|
this.serverList = [];
|
data.layers &&
|
data.layers.WMS &&
|
data.layers.WMS.forEach((item) => {
|
this.serverList.push({
|
label: item.title,
|
value: item.name,
|
});
|
});
|
this.loadServerList = true;
|
})
|
.catch(() => {
|
this.loadServerList = true;
|
});
|
},
|
// 清空所有
|
clearAll() {
|
this.clearSearch();
|
this.removeDrawArea();
|
|
imageLayer[this.form.location] &&
|
imageLayer[this.form.location].setVisibility(false);
|
},
|
// 清空当前搜索结果
|
clearSearch() {
|
if (this.poiResults !== []) {
|
this.poiResults = [];
|
this.IsResultShow = false;
|
}
|
this.allPoiShow = [];
|
this.removePOI();
|
},
|
// 切换类型
|
changeType() {
|
this.clearAll();
|
this.searchPOI(true);
|
},
|
// 查询结果点击跳转视角
|
flyTo(e) {
|
let id = e.currentTarget.id; //获取当前id
|
window.Viewer.flyTo(window.Viewer.entities.getById(id));
|
},
|
// 打开弹窗
|
open() {
|
if (window.isGisserver && !this.loadServerList) {
|
this.serverURL = window.location.origin;
|
this.getServerList();
|
} else if (!this.loadServerList) {
|
this.getServerList();
|
}
|
|
this.$refs.pop.open();
|
imageLayer[this.form.location] &&
|
imageLayer[this.form.location].setVisibility(true);
|
if (this.extent) {
|
Viewer.camera.flyTo({
|
destination: Cesium.Rectangle.fromDegrees(
|
this.extent.xmin,
|
this.extent.ymin,
|
this.extent.xmax,
|
this.extent.ymax
|
),
|
});
|
}
|
!buffAnalyse &&
|
(buffAnalyse = new SmartEarth.BufferAnalysis(Viewer, Cesium));
|
},
|
//清除POI
|
removePOI(removeArea) {
|
this.poiPoint.forEach((id) => {
|
window.Viewer.entities.removeById(id);
|
});
|
this.poiPoint = [];
|
if (removeArea) {
|
this.removeDrawArea();
|
}
|
},
|
cascaderChange(item) {
|
imageLayer[this.form.location] &&
|
imageLayer[this.form.location].setVisibility(false);
|
this.form.location = item;
|
|
axios
|
.get(this.serverURL + `/gisserver/rest/services/${item}/MapServer`)
|
.then((data) => {
|
let fullExtent = data && data.data && data.data.fullExtent;
|
if (fullExtent) {
|
this.extent = fullExtent;
|
Viewer.camera.flyTo({
|
destination: Cesium.Rectangle.fromDegrees(
|
fullExtent.xmin,
|
fullExtent.ymin,
|
fullExtent.xmax,
|
fullExtent.ymax
|
),
|
});
|
}
|
});
|
if (imageLayer[item]) {
|
imageLayer[item].setVisibility(true);
|
} else {
|
//GisServer-TMS添加
|
var urls = this.serverURL + "/gisserver/wmsserver/" + item;
|
imageLayer[item] = sgworld.Creator.createImageryProvider(
|
"gisserver",
|
"wms",
|
{
|
url: urls,
|
layers: "",
|
parameters: {
|
format: "image/png",
|
transparent: true,
|
},
|
},
|
"0",
|
undefined,
|
true,
|
""
|
);
|
}
|
},
|
//清除绘制区域
|
removeDrawArea() {
|
if (this.drawAreaData) {
|
window.Viewer.entities.removeById(this.drawAreaData.id);
|
this.drawAreaData = undefined;
|
}
|
},
|
getTableData(position, type = "esriGeometryPolygon") {
|
let mapExtent = `${this.extent.xmin},${this.extent.ymin},${this.extent.xmax},${this.extent.ymax}`;
|
let url = `${this.serverURL}/gisserver/rest/services/${this.form.location}/MapServer/identify?geometry=${position}&geometryType=${type}&layers=all&tolerance=2&mapExtent=${mapExtent}&imageDisplay=600%2C550%2C96&returnGeometry=false`;
|
axios.get(url).then((res) => {
|
if (res.data) {
|
debugger;
|
this.poiResults = [];
|
this.loading = false;
|
res.data.results.forEach((item) => {
|
this.poiResults.push(item.attributes);
|
});
|
}
|
});
|
},
|
//绘制查询多边形区域
|
drawSearchPolygon() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.removePOI(true);
|
window.sgworld.Creator.createSimpleGraphic(
|
"polygon",
|
{
|
removeEdit: true,
|
},
|
(entity) => {
|
let positions = entity.polygon.hierarchy.getValue().positions;
|
let degrees, firstPoint;
|
let polygon = "",
|
geometrys = "";
|
positions.forEach((p, i) => {
|
degrees = window.sgworld.Core.toDegrees(p);
|
// degrees = coordtransform.wgs84togcj02(degrees.lon, degrees.lat);
|
degrees = [degrees.lon, degrees.lat];
|
if (i > 0) {
|
polygon += ",";
|
}
|
polygon += `${degrees[0]},${degrees[1]}`;
|
geometrys += "[" + degrees[0] + "," + degrees[1] + "],";
|
i === 0 &&
|
(firstPoint = "[" + degrees[0] + "," + degrees[1] + "]");
|
});
|
|
geometrys += firstPoint;
|
if (geometrys.length != 0) geometrys.trimEnd(",");
|
geometrys = "{rings:[[" + geometrys + "]]}";
|
|
this.drawAreaData = {
|
id: entity.id,
|
};
|
this.dialogVisible = true;
|
this.loading = true;
|
this.poiResults = [];
|
this.getTableData(geometrys);
|
}
|
);
|
}
|
});
|
},
|
pointSearch() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.dialogVisible = true;
|
this.loading = true;
|
this.poiResults = [];
|
this.getTableData(
|
`${this.form.lon},${this.form.lat}`,
|
"esriGeometryPoint"
|
);
|
}
|
});
|
},
|
//绘制矩形区域
|
drawSearchSqure() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.removePOI(true);
|
window.sgworld.Creator.createSimpleGraphic(
|
"rectangle",
|
{
|
removeEdit: true,
|
},
|
(entity) => {
|
this.drawAreaData = {
|
id: entity.id,
|
};
|
let rectangle = entity.rectangle.coordinates.getValue();
|
rectangle.west = Cesium.Math.toDegrees(rectangle.west);
|
rectangle.south = Cesium.Math.toDegrees(rectangle.south);
|
rectangle.east = Cesium.Math.toDegrees(rectangle.east);
|
rectangle.north = Cesium.Math.toDegrees(rectangle.north);
|
this.dialogVisible = true;
|
this.loading = true;
|
this.poiResults = [];
|
let geometrys = "";
|
geometrys +=
|
"[" +
|
rectangle.west +
|
"," +
|
rectangle.south +
|
"]," +
|
"[" +
|
rectangle.east +
|
"," +
|
rectangle.south +
|
"]," +
|
"[" +
|
rectangle.east +
|
"," +
|
rectangle.north +
|
"]," +
|
"[" +
|
rectangle.west +
|
"," +
|
rectangle.north +
|
"]," +
|
"[" +
|
rectangle.west +
|
"," +
|
rectangle.south +
|
"]";
|
if (geometrys.length != 0) geometrys.trimEnd(",");
|
geometrys = "{rings:[[" + geometrys + "]]}";
|
this.getTableData(geometrys);
|
}
|
);
|
}
|
});
|
},
|
// 绘制圆形区域
|
drawSearchCircle() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.removePOI(true);
|
window.sgworld.Creator.createSimpleGraphic(
|
"circle",
|
{
|
removeEdit: true,
|
},
|
(entity) => {
|
let position = entity.position.getValue();
|
let degrees = window.sgworld.Core.toDegrees(position);
|
// degrees = coordtransform.wgs84togcj02(degrees.lon, degrees.lat);
|
let radius = entity.ellipse.semiMajorAxis.getValue();
|
let pointF = Cesium_turf.point([degrees.lon, degrees.lat]);
|
let positions = buffAnalyse.getBuff(pointF, radius).positions;
|
|
let geometrys = "";
|
let firstPoint;
|
positions.forEach((p, i) => {
|
degrees = window.sgworld.Core.toDegrees(p);
|
geometrys += "[" + degrees.lon + "," + degrees.lat + "],";
|
i === 0 &&
|
(firstPoint = "[" + degrees.lon + "," + degrees.lat + "]");
|
});
|
geometrys += firstPoint;
|
if (geometrys.length != 0) geometrys.trimEnd(",");
|
geometrys = "{rings:[[" + geometrys + "]]}";
|
|
this.drawAreaData = {
|
id: entity.id,
|
position: position,
|
radius: radius,
|
};
|
|
this.dialogVisible = true;
|
this.loading = true;
|
this.poiResults = [];
|
this.getTableData(geometrys);
|
}
|
);
|
}
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less">
|
.spaceSearch {
|
margin-top: 20px;
|
.el-form-item__label {
|
color: white;
|
}
|
.searchBtn {
|
position: relative;
|
left: 40%;
|
}
|
.el-radio {
|
width: 100px;
|
margin-right: 0px;
|
}
|
.el-input {
|
width: 300px;
|
}
|
/deep/ .el-input__inner {
|
width: 95%;
|
}
|
}
|
.resultDivs {
|
height: 200px;
|
}
|
.eachResultDiv {
|
padding-left: 25px;
|
height: 30px;
|
margin-top: 10px;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
.eachResultDiv:hover {
|
background-color: rgba(0, 0, 0, 0.5);
|
}
|
</style>
|
