<template>
|
<div class="menuBox">
|
<el-form
|
:inline="true"
|
:model="menuTopFrom"
|
class="demo-form-inline"
|
>
|
<el-form-item>
|
<el-select
|
v-model="menuTopFrom.queryLayer"
|
:title="treeChange"
|
placeholder="请选择..."
|
:popper-append-to-body="false"
|
>
|
<el-option
|
:value="menuTopFrom.queryLayer"
|
style="height: 100%"
|
>
|
<div style="height: 200px; overflow: auto">
|
<el-tree
|
:data="layerData"
|
show-checkbox
|
node-key="id"
|
ref="tree"
|
accordion
|
highlight-current
|
:props="defaultProps"
|
>
|
</el-tree>
|
</div>
|
<div style="margin-top: 5px">
|
<el-button
|
size="small"
|
plain
|
@click="getCheckedNodes"
|
>确认</el-button>
|
<el-button
|
size="small"
|
type="info"
|
plain
|
@click="resetCheckedNodes"
|
>重置</el-button>
|
</div>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item>
|
<el-select
|
@change="changeValue($event)"
|
v-model="menuTopFrom.queryType"
|
placeholder="请选择..."
|
:popper-append-to-body="false"
|
>
|
<el-option
|
v-for="item in queryOption"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<input
|
:accept="'.shp, .shx, .dbf, .prj'"
|
style="display: none"
|
ref="pathClear"
|
type="file"
|
name="file"
|
id="getMenuTopFile"
|
multiple="multiple"
|
@change="setMenuTopFile()"
|
/>
|
<!-- <el-link @click="getMenuTopFile" :underline="false"
|
>导入选择范围</el-link
|
> -->
|
</el-form-item>
|
|
<el-form-item>
|
<el-button
|
plain
|
size="small"
|
@click="getAttributeQuery"
|
>查询</el-button>
|
<el-button
|
type="info"
|
size="small"
|
@click="clearQuery"
|
plain
|
>重置</el-button>
|
</el-form-item>
|
<!-- <el-form-item>
|
<el-button
|
plain
|
size="small"
|
@click="flyQuery"
|
>查看</el-button>
|
<el-button
|
plain
|
size="small"
|
@click="flyRemove"
|
>取消</el-button>
|
</el-form-item> -->
|
</el-form>
|
<queryinfo ref="queryinfo" />
|
<!-- <div class="buffer-container" ></div> -->
|
<el-dialog
|
v-dialogDrag
|
custom-class="buffer-dialog"
|
top="40vh"
|
title="管道中心线查询"
|
:visible.sync="dialogFormVisible"
|
:modal="false"
|
:lock-scroll="false"
|
:close-on-click-modal="false"
|
width="25%"
|
@opened="dialogOpend"
|
>
|
<el-form
|
:model="menuTopFrom"
|
label-width="150px"
|
>
|
<el-form-item label="管道中心线">
|
<el-select
|
@change="changeSelect2"
|
v-model="menuTopFrom.pipeline"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in pipelineOption"
|
:key="item.gid"
|
:label="item.pipeName"
|
:value="item.pipeName"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="选取管道">
|
<el-select
|
v-model="menuTopFrom.segName"
|
placeholder="请选择"
|
@change="selectChangeGid"
|
>
|
<el-option
|
v-for="item in segNameOption"
|
:key="item.gid"
|
:label="item.segName"
|
:value="item.gid"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="缓冲区大小（m）">
|
<el-input-number
|
v-model="menuTopFrom.bufferSize"
|
placeholder=""
|
@change="handleBufferChange"
|
:step="500"
|
></el-input-number>
|
</el-form-item>
|
</el-form>
|
<div
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
<el-button
|
type="primary"
|
@click="changeBufferData"
|
>确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import queryinfo from "../../views/Tools/queryinfo.vue"
|
import $ from "jquery"
|
import {
|
inquiry_SelectTabs,
|
inquiry_uploadShp,
|
encr,
|
dataLib_selectTabs,
|
pipelines_selectSegNames,
|
dataLib_selectTabed
|
} from "../../api/api.js"
|
import { selectPipelines } from "@/api/screen.js"
|
import { getToken } from "@/utils/auth"
|
import * as turf from "@turf/turf"
|
import { wktToGeoJSON } from "@terraformer/wkt"
|
export default {
|
components: { queryinfo },
|
data() {
|
return {
|
menuTopFrom: {
|
queryType: "",
|
pipeline: "",
|
segName: "",
|
bufferSize: 5000,
|
},
|
treeChange: [],
|
layerData: [
|
// {
|
// id: 1,
|
// label: "基础数据",
|
// tabDesc: "基础数据",
|
// value: "BD",
|
// children: [],
|
// },
|
// {
|
// id: 2,
|
// label: "业务数据",
|
// tabDesc: "业务数据",
|
// value: "BS",
|
// children: [],
|
// },
|
],
|
|
queryOption: [
|
{
|
value: "point",
|
label: "点选",
|
},
|
{
|
value: "polyline",
|
label: "线选",
|
},
|
{
|
value: "rectangle",
|
label: "矩形",
|
},
|
{
|
value: "circle",
|
label: "圆形",
|
},
|
{
|
value: "polygon",
|
label: "多边形",
|
},
|
{
|
value: "inputFile",
|
label: "导入选择范围",
|
},
|
{
|
value: "buffer",
|
label: "中线缓冲区",
|
},
|
],
|
defaultProps: {
|
children: "children",
|
label: "label",
|
},
|
graphicLayer: null,
|
flyEntity: null,
|
pipelineOption: [],
|
segNameOption: [],
|
bufferEntities: [],
|
featureLayer: [],
|
analyGid: null,
|
dialogFormVisible: false,
|
bufferLinePosition: [],
|
}
|
},
|
|
mounted() {
|
this.menuTopFrom.queryType = "rectangle"
|
this.getAllTable()
|
this.getPipelineData()
|
},
|
watch: {
|
analyGid(newVal, oldVal) {
|
if (newVal !== oldVal && this.dialogFormVisible) {
|
this.genBuffer()
|
}
|
},
|
},
|
methods: {
|
changeValue(value) {
|
var obj = {}
|
obj = this.queryOption.find(function (item) {
|
return item.value === value
|
})
|
if (obj.value == "inputFile") {
|
this.getMenuTopFile()
|
} else if (obj.value == "buffer") {
|
this.dialogFormVisible = true
|
}
|
},
|
async getAllTable() {
|
const data = await dataLib_selectTabed({
|
hasGeom: "true",
|
name: null,
|
})
|
if (data.code != 200) {
|
this.$message.error("列表调用失败")
|
}
|
|
|
var val = data.result
|
var std = [];
|
val.filter((item) => {
|
if (std.indexOf(item.bak) == -1) {
|
std.push(item.bak);
|
this.layerData.push(
|
{
|
val: item.bak,
|
label: item.bak,
|
children: [],
|
}
|
)
|
}
|
});
|
for (var i in this.layerData) {
|
var item = this.layerData[i];
|
for (var j in val) {
|
var res = val[j];
|
|
if (item.val === res.bak) {
|
|
res.label = res.tabDesc
|
this.layerData[i].children.push(res)
|
}
|
}
|
}
|
|
},
|
//获取选择树的节点
|
getCheckedNodes() {
|
var valTree = this.$refs.tree.getCheckedNodes()
|
if (valTree.length == 0) return
|
this.menuTopFrom.queryLayer = valTree[0].tabDesc;
|
this.$store.state.propertiesName = valTree[0];
|
for (var i = 0; i < valTree.length; i++) {
|
if (valTree[i].entity) {
|
this.treeChange.push(valTree[i])
|
}
|
}
|
},
|
//清空树选中的节点
|
resetCheckedNodes() {
|
this.treeChange = []
|
this.menuTopFrom.queryLayer = null
|
this.$refs.tree.setCheckedKeys([])
|
},
|
//导入shp文件
|
async setMenuTopFile() {
|
var val = document.getElementById("getMenuTopFile").files
|
if (!val || !val.length) return
|
var formData = new FormData()
|
var exts = [".shp", ".shx", ".dbf", ".prj"]
|
var count = 0
|
for (var i = 0; i < val.length; i++) {
|
var name = val[i].name.toLocaleLowerCase()
|
var ext = name.substring(name.lastIndexOf("."))
|
if (exts.indexOf(ext) > -1) {
|
count++
|
formData.append(val[i].name, val[i]) // fs.files[i].name,file
|
}
|
}
|
|
if (count != 4) {
|
this.$message({
|
message: "ShapeFile文件选择不全！",
|
type: "warning",
|
})
|
return
|
}
|
$.ajax(BASE_URL + "/inquiry/uploadShp?token=" + getToken(), {
|
type: "post",
|
data: formData,
|
async: true,
|
cache: false,
|
processData: false,
|
contentType: false,
|
success: rs => {
|
if (rs.code !== 200) {
|
return this.$message.error("用户角色请求错误")
|
}
|
|
this.$store.state.mapMenuShpFile = rs.result.wkt
|
this.showMapMenuPop()
|
},
|
error: e => {
|
console.log(e)
|
},
|
})
|
},
|
getMenuTopFile() {
|
$("#getMenuTopFile").click()
|
},
|
//查询
|
getAttributeQuery() {
|
//清空标绘
|
sgworld.Creator.SimpleGraphic.edit(false, { editProp: false })
|
sgworld.Creator.SimpleGraphic.clear()
|
this.clearBufferEntities()
|
if (this.$store.state.queryInfo.length != 0) {
|
for (var i in this.$store.state.queryInfo) {
|
sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i])
|
}
|
this.$store.state.queryInfo = []
|
}
|
if (this.$store.state.primitLayer != null) {
|
sgworld.Creator.DeleteObject(this.$store.state.primitLayer)
|
this.$store.state.primitLayer = null
|
}
|
if (this.treeChange.length == 0) {
|
this.$message.error("请选择要查询的数据")
|
return
|
}
|
let type = this.menuTopFrom.queryType
|
switch (type) {
|
case "buffer":
|
this.dialogFormVisible = true
|
break
|
case "inputFile":
|
this.getMenuTopFile()
|
|
break
|
default:
|
sgworld.Creator.createSimpleGraphic(
|
this.menuTopFrom.queryType,
|
{
|
color: "#00FF0060",
|
outlineColor: "#0f0",
|
outlineWidth: 5,
|
},
|
entity => {
|
this.setTurfGeometry(entity)
|
}
|
)
|
break
|
}
|
},
|
setTurfGeometry(res) {
|
var that = this
|
var res_val
|
switch (this.menuTopFrom.queryType) {
|
case "point": //点
|
var val = that.setCartesianToEightFour(res.position.getValue())
|
res_val = val
|
that.setTurfCircle([val.lng, val.lat], 10)
|
break
|
case "polyline": //线
|
var polyline = res.polyline.positions.getValue()
|
res_val = polyline
|
that.setTurfPolyOrLine(polyline, "polyline")
|
break
|
case "rectangle": //矩形
|
let rectangle = res.rectangle.coordinates.getValue()
|
res_val = rectangle
|
var result = new Cesium.Rectangle.subsample(
|
rectangle,
|
Cesium.Ellipsoid.WGS84,
|
rectangle.height
|
)
|
that.setTurfPolyOrLine(result, "rectangle")
|
|
break
|
case "circle": //圆
|
var val = that.setCartesianToEightFour(res.position.getValue())
|
res_val = res.position.getValue()
|
var radius = res.ellipse.semiMajorAxis.getValue()
|
that.setTurfCircle([val.lng, val.lat], radius)
|
break
|
case "polygon": //多边形
|
var polygon = res.polygon.hierarchy.getValue().positions
|
res_val = polygon
|
that.setTurfPolyOrLine(polygon, "polygon")
|
break
|
}
|
this.flyEntity = res_val
|
},
|
setTurfCircle(position, radius) {
|
var options = {
|
steps: 10,
|
units: "meters",
|
properties: { foo: "bar" },
|
}
|
var circle = turf.circle(position, radius, options)
|
|
this.setJonToWKT(circle)
|
},
|
setTurfPolyOrLine(res, type) {
|
var restVal,
|
std = []
|
for (var i in res) {
|
var line_data = this.setCartesianToEightFour(res[i])
|
std.push([line_data.lng, line_data.lat])
|
}
|
if (type == "polyline") {
|
var line = turf.lineString(std, { name: "polyline" })
|
restVal = turf.buffer(line, 10, { units: "meters" })
|
} else if (type == "rectangle") {
|
var ste = this.setCartesianToEightFour(res[0])
|
std.push([ste.lng, ste.lat])
|
restVal = turf.polygon([std], { name: "rectangle" })
|
} else if (type == "polygon") {
|
var ste = this.setCartesianToEightFour(res[0])
|
std.push([ste.lng, ste.lat])
|
restVal = turf.polygon([std], { name: "polygon" })
|
}
|
console.log("restVal", restVal)
|
this.setJonToWKT(restVal)
|
},
|
|
setJonToWKT(res) {
|
let fixedVal = this.fixToPositon(res)
|
var jsonToWkt = this.$wkt.convert(fixedVal.geometry)
|
this.$store.state.mapMenuShpFile = encr(jsonToWkt)
|
|
this.showMapMenuPop()
|
},
|
showMapMenuPop() {
|
this.$store.state.mapSpaceQueryLayer = this.treeChange
|
this.$store.state.mapPopBoxFlag = "1"
|
this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close()
|
this.$refs &&
|
this.$refs.queryinfo &&
|
this.$refs.queryinfo.open("空间查询", null, {
|
close: () => {
|
// if (this.$store.state.primitLayer != null) {
|
// // sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
|
// this.$store.state.primitLayer = null;
|
// }
|
// if (window.Viewer.scene.primitives.length != 0) {
|
// window.Viewer.scene.primitives.removeAll()
|
// }
|
},
|
})
|
// this.$bus.$emit('changeMapMenuTop', 'true');
|
|
// sgworld.Creator.SimpleGraphic.clear();
|
//清空inputFile
|
// var file = document.getElementById('getMenuTopFile');
|
// file.outerHTML = file.outerHTML;
|
this.$refs.pathClear.value = ""
|
},
|
clearQuery() {
|
// 清楚buffer
|
this.clearBufferEntities()
|
this.$refs.pathClear.value = ""
|
this.treeChange = []
|
this.menuTopFrom.queryLayer = null
|
this.menuTopFrom.queryType = "rectangle"
|
this.$refs.tree.setCheckedKeys([])
|
//清空标绘
|
sgworld.Creator.SimpleGraphic.edit(false, { editProp: false })
|
sgworld.Creator.SimpleGraphic.clear()
|
if (this.$store.state.queryInfo.length != 0) {
|
for (var i in this.$store.state.queryInfo) {
|
sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i])
|
}
|
this.$store.state.queryInfo = []
|
}
|
//关闭窗口
|
this.$refs &&
|
this.$refs.queryinfo &&
|
this.$refs.queryinfo.close("queryinfo")
|
if (this.$store.state.primitLayer != null) {
|
sgworld.Creator.DeleteObject(this.$store.state.primitLayer)
|
this.$store.state.primitLayer = null
|
}
|
},
|
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
|
},
|
async getPipelineData() {
|
const data = await pipelines_selectSegNames()
|
if (data.code != 200) {
|
this.$message.error("列表调用失败")
|
}
|
var std = []
|
var str = []
|
var result = data.result
|
for (var i in result) {
|
if (std.indexOf(result[i].pipeName) == -1) {
|
std.push(result[i].pipeName)
|
str.push(result[i])
|
}
|
}
|
this.featureLayer = data.result
|
this.pipelineOption = str
|
this.menuTopFrom.pipeline = this.pipelineOption[0].pipeName
|
this.changeSelect2(this.menuTopFrom.pipeline)
|
},
|
async genBuffer() {
|
let { pipeline, segName } = this.menuTopFrom
|
let params = { name: pipeline }
|
// let params = { name: "西气东输一线" }
|
|
const res = await selectPipelines(params)
|
if (res.code == 200) {
|
const item = res.result.find(item => item.gid == this.analyGid)
|
console.log("selectPipelines", item)
|
const wkt = item.wkt
|
|
if (item && wkt) {
|
const line = wktToGeoJSON(wkt)
|
|
let position = line.coordinates
|
if (wkt.includes("MULTILINESTRING")) {
|
position = line.coordinates.flat()
|
}
|
this.bufferLinePosition = position
|
if (this.dialogFormVisible) {
|
this.createBuffer()
|
}
|
}
|
}
|
},
|
createBuffer() {
|
this.clearBufferEntities()
|
const position = this.bufferLinePosition
|
const buffRadius = this.menuTopFrom.bufferSize
|
var polylineF = turf.lineString(position)
|
var bufferd = turf.buffer(polylineF, buffRadius, { units: "meters" })
|
var coordinates = bufferd.geometry.coordinates
|
// console.log("coordinates", coordinates)
|
|
var points = coordinates[0]
|
var degreesArray = this.pointsToDegreesArray(points)
|
let array = Cesium.Cartesian3.fromDegreesArray(degreesArray)
|
const hierarchy = new Cesium.PolygonHierarchy(array)
|
const bufferPolygon = sgworld.Viewer.entities.add({
|
polygon: {
|
hierarchy: hierarchy,
|
material: Cesium.Color.RED.withAlpha(0.5),
|
classificationType: Cesium.ClassificationType.BOTH,
|
},
|
})
|
this.bufferEntities.push(bufferPolygon)
|
let res = hierarchy.positions
|
sgworld.Navigate.flyToObj(bufferPolygon)
|
this.flyEntity = res
|
},
|
changeBufferData() {
|
this.dialogFormVisible = false
|
let res = this.flyEntity
|
let restVal,
|
std = []
|
for (let i in res) {
|
let line_data = this.setCartesianToEightFour(res[i])
|
std.push([line_data.lng, line_data.lat])
|
}
|
restVal = turf.polygon([std], { name: "polygon" })
|
|
console.log("bufferPolygon", res)
|
|
console.log("bufferPolygon", restVal)
|
this.setJonToWKT(restVal)
|
},
|
|
pointsToDegreesArray(points) {
|
let degreesArray = []
|
points.forEach(item => {
|
degreesArray.push(item[0])
|
degreesArray.push(item[1])
|
})
|
return degreesArray
|
},
|
clearBufferEntities() {
|
this.bufferEntities.forEach(entity => {
|
sgworld.Viewer.entities.remove(entity)
|
})
|
this.flyEntity = null
|
},
|
changeSelect2(res) {
|
var value = this.featureLayer
|
let option = []
|
for (var i in value) {
|
if (value[i].pipeName == res) {
|
option.push(value[i])
|
}
|
}
|
this.segNameOption = option
|
this.menuTopFrom.segName = option[0].segName || "<空>"
|
this.analyGid = option[0].gid
|
this.genBuffer()
|
},
|
selectChangeGid(res) {
|
this.analyGid = res
|
},
|
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
|
},
|
handleBufferChange(val, oldVal) {
|
this.createBuffer()
|
},
|
dialogOpend() {
|
this.createBuffer()
|
}
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.menuBox {
|
width: 98%;
|
height: 100%;
|
}
|
.unit-option {
|
height: auto;
|
line-height: 1;
|
padding: 0;
|
background-color: #fff;
|
}
|
.unit-tree {
|
padding: 4px 20px;
|
font-weight: 400;
|
}
|
.buffer-dialog {
|
width: 300px;
|
height: 300px;
|
background-color: rgba(244, 248, 255, 0.85) !important;
|
.el-dialog__body {
|
.el-form-item {
|
margin-bottom: 20px !important;
|
}
|
}
|
}
|
</style>
|
|
<style lang="less">
|
.menuBox {
|
.el-dialog__wrapper {
|
pointer-events: none;
|
.buffer-dialog {
|
top: 355px;
|
background-color: rgba(244, 248, 255, 0.85) !important;
|
border: 1px solid rgba(32, 160, 255, 0.6);
|
color: #202020;
|
.el-dialog__body,
|
.el-dialog__header,
|
.el-dialog__footer {
|
pointer-events: auto;
|
}
|
.el-dialog__header {
|
padding: 10px 20px;
|
border-bottom: 1px solid rgba(32, 160, 255, 0.6);
|
|
.el-dialog__headerbtn {
|
top: 10px;
|
font-size: 18px;
|
}
|
}
|
.el-form-item {
|
.el-input-number {
|
width: 202px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
