<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="请选择..."
|
>
|
<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="mini" plain @click="getCheckedNodes"
|
>确认</el-button
|
>
|
<el-button
|
size="mini"
|
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="请选择..."
|
>
|
<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 @click="getAttributeQuery">查询</el-button>
|
<el-button type="info" @click="clearQuery" plain>重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import $ from 'jquery';
|
import { inquiry_SelectTabs, inquiry_uploadShp, encr } from '../../api/api.js';
|
import { getToken } from '@/utils/auth';
|
import * as turf from '@turf/turf';
|
export default {
|
data() {
|
return {
|
menuTopFrom: {
|
queryType: '',
|
},
|
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: '导入选择范围',
|
},
|
],
|
defaultProps: {
|
children: 'children',
|
label: 'label',
|
},
|
graphicLayer: null,
|
};
|
},
|
|
mounted() {
|
// sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
|
|
this.menuTopFrom.queryType = 'rectangle';
|
this.getAllTable();
|
},
|
methods: {
|
changeValue(value) {
|
// var obj = {};
|
// obj = this.queryOption.find(function (item) {
|
// return item.value === value;
|
// });
|
// if (obj.value == 'inputFile') {
|
// this.getMenuTopFile();
|
// }
|
},
|
async getAllTable() {
|
const data = await inquiry_SelectTabs();
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
var option = data.result;
|
|
for (var i in option) {
|
var val_Data = option[i];
|
val_Data.id = '1' + i;
|
val_Data.label = val_Data.tabDesc + '(' + val_Data.tab + ')';
|
if (option[i].ns == 'bd') {
|
this.layerData[0].children.push(val_Data);
|
} else {
|
this.layerData[1].children.push(val_Data);
|
}
|
}
|
},
|
//获取选择树的节点
|
getCheckedNodes() {
|
var valTree = this.$refs.tree.getCheckedNodes();
|
if (valTree.length == 0) return;
|
|
this.menuTopFrom.queryLayer = valTree[0].tabDesc;
|
for (var i = 0; i < valTree.length; i++) {
|
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) {
|
alert('ShapeFile文件选择不全！');
|
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;
|
this.showMapMenuPop();
|
},
|
error: (e) => {
|
console.log(e);
|
},
|
});
|
},
|
getMenuTopFile() {
|
$('#getMenuTopFile').click();
|
},
|
//查询
|
getAttributeQuery() {
|
//清空标绘
|
sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
|
sgworld.Creator.SimpleGraphic.clear();
|
|
if (this.treeChange.length == 0) {
|
this.$message.error('请选择要查询的数据');
|
return;
|
}
|
if (this.menuTopFrom.queryType != 'inputFile') {
|
sgworld.Creator.createSimpleGraphic(
|
this.menuTopFrom.queryType,
|
{
|
color: '#00FF0060',
|
outlineColor: '#0f0',
|
outlineWidth: 5,
|
},
|
(entity) => {
|
this.setTurfGeometry(entity);
|
}
|
);
|
} else {
|
this.getMenuTopFile();
|
}
|
},
|
setTurfGeometry(res) {
|
var that = this;
|
switch (this.menuTopFrom.queryType) {
|
case 'point': //点
|
var val = that.setCartesianToEightFour(res.position.getValue());
|
that.setTurfCircle([val.lng, val.lat], 10);
|
break;
|
case 'polyline': //线
|
var polyline = res.polyline.positions.getValue();
|
|
that.setTurfPolyOrLine(polyline, 'polyline');
|
break;
|
case 'rectangle': //矩形
|
let rectangle = res.rectangle.coordinates.getValue();
|
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());
|
var radius = res.ellipse.semiMajorAxis.getValue();
|
that.setTurfCircle([val.lng, val.lat], radius);
|
break;
|
case 'polygon': //多边形
|
var polygon = res.polygon.hierarchy.getValue().positions;
|
that.setTurfPolyOrLine(polygon, 'polygon');
|
break;
|
}
|
},
|
setTurfCircle(position, radius) {
|
var options = {
|
steps: 10,
|
units: 'miles',
|
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: 'miles' });
|
} 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' });
|
}
|
this.setJonToWKT(restVal);
|
},
|
|
setJonToWKT(res) {
|
var jsonToWkt = this.$wkt.convert(res.geometry);
|
this.$store.state.mapMenuShpFile = encr(jsonToWkt);
|
this.showMapMenuPop();
|
},
|
showMapMenuPop() {
|
this.$store.state.mapSpaceQueryLayer = this.treeChange;
|
if (
|
this.$store.state.mapPopBoolean != true &&
|
this.$store.state.mapPopBoxFlag != '1'
|
) {
|
this.$store.state.mapPopBoolean = true;
|
this.$store.state.mapPopBoxFlag = '1';
|
}
|
this.$bus.$emit('changeMapMenuTop', 'true');
|
sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
|
sgworld.Creator.SimpleGraphic.clear();
|
//清空inputFile
|
// var file = document.getElementById('getMenuTopFile');
|
// file.outerHTML = file.outerHTML;
|
this.$refs.pathClear.value = '';
|
},
|
clearQuery() {
|
this.$refs.pathClear.value = '';
|
this.treeChange = [];
|
this.menuTopFrom.queryLayer = null;
|
this.menuTopFrom.queryType = 'rectangle';
|
this.$refs.tree.setCheckedKeys([]);
|
sgworld.Creator.SimpleGraphic.clear();
|
},
|
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;
|
},
|
},
|
};
|
</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;
|
}
|
/deep/.el-input__inner {
|
background-color: transparent !important ;
|
color: #fff;
|
border: 1px solid;
|
}
|
/deep/ .el-select .el-input__inner {
|
border-color: #fff !important;
|
}
|
</style>
|
