<template>
|
<Popup ref="pop" :title="form.title" left="calc(100% - 330px)" @close="close">
|
<div class="bufferSearch">
|
<el-form ref="form" :model="form" label-width="130px" :rules="rules">
|
<el-form-item label-width="80px" label="图层" 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 class="nolabel-form-item">
|
<el-button type="primary" @click="addPoint">点</el-button>
|
<el-button type="primary" @click="addPolyline">线</el-button>
|
<el-button type="primary" @click="addPolygon">面</el-button>
|
</el-form-item>
|
<hr />
|
<el-form-item label="缓冲半径(米):">
|
<el-input-number
|
v-model="form.input"
|
controls-position="right"
|
@change="handleChange"
|
:min="1"
|
:max="300"
|
style="width=200px;"
|
></el-input-number>
|
<span></span>
|
</el-form-item>
|
</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 axios from "axios";
|
import serviceTools from "@mixin/serviceTools";
|
let buffRadius;
|
let imageLayer = {};
|
export default {
|
name: "bufferSearch",
|
components: {
|
Popup,
|
},
|
mixins: [serviceTools],
|
data() {
|
return {
|
loading: false,
|
dialogVisible: false,
|
poiResults: [],
|
areaSelectData: [
|
{
|
lable: "hpzhuzhai",
|
value: "hpzhuzhai",
|
},
|
],
|
form: {
|
title: "缓冲区查询",
|
input: 100,
|
location: "",
|
},
|
//表单验证规则
|
rules: {
|
location: [
|
{ required: true, message: "请选择图层", trigger: "change" },
|
],
|
},
|
serverURL: "http://183.162.245.49:3301",
|
serverList: [], //地址数据源
|
extent: undefined,
|
loadServerList: false,
|
};
|
},
|
computed: {},
|
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;
|
});
|
},
|
// 关闭弹窗
|
close() {
|
this.clearEntity();
|
delete window.buff;
|
imageLayer[this.form.location] &&
|
imageLayer[this.form.location].setVisibility(false);
|
},
|
// 打开弹窗
|
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
|
),
|
});
|
}
|
},
|
getTableData(_buff = {}) {
|
const points =
|
_buff.this_buff.buff.polygon.hierarchy.getValue().positions;
|
let geometrys = "";
|
let firstPoint;
|
let degrees = "";
|
points.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.dialogVisible = true;
|
this.loading = true;
|
this.poiResults = [];
|
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=${geometrys}&geometryType=esriGeometryPolygon&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);
|
});
|
}
|
});
|
},
|
clearEntity() {
|
window.buff && window.buff.clearBuff();
|
},
|
// 添加点
|
addPoint() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
buffRadius = this.form.input;
|
this.clearEntity();
|
window.buff = sgworld.Analysis.DrawPointBuffer(
|
buffRadius,
|
(event) => {
|
this.getTableData(window.buff);
|
}
|
);
|
}
|
});
|
},
|
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,
|
""
|
);
|
}
|
},
|
// 添加线
|
addPolyline() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
buffRadius = this.form.input;
|
this.clearEntity();
|
window.buff = sgworld.Analysis.DrawPolylineBuffer(
|
buffRadius,
|
(event) => {
|
this.getTableData(event);
|
}
|
);
|
}
|
});
|
},
|
// 添加面
|
addPolygon() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
buffRadius = this.form.input;
|
this.clearEntity();
|
window.buff = sgworld.Analysis.DrawPolygonBuffer(
|
buffRadius,
|
(event) => {
|
this.getTableData(event);
|
}
|
);
|
}
|
});
|
},
|
// 设置缓冲半径
|
handleChange(value) {
|
if (buff) {
|
buff.changeBurr(value);
|
}
|
buffRadius = value;
|
},
|
},
|
};
|
</script>
|
<style lang="less">
|
.bufferSearch {
|
.el-button {
|
padding: 12px 30px;
|
}
|
.nolabel-form-item {
|
text-align: center;
|
}
|
.el-input-number {
|
width: 150px !important;
|
}
|
}
|
</style>
|
