|
@@ -1,16 +1,18 @@
|
|
|
<template>
|
|
|
- <el-tabs class="multi_level_query_table" v-model="activeName" @tab-click="handleClick"
|
|
|
+ <el-tabs class="multi_level_query_table" v-model="activeName" @tab-click="handleClick" @tab-remove="removeTab"
|
|
|
v-if="store.state.query_pick_last_pane">
|
|
|
<el-tab-pane :label="store.state.query_pick_last_pane.name" name="second">
|
|
|
<div class="list_vector_multi" v-for="(item_last, index) in store.state.query_pick_last_pane.value" :key="index"
|
|
|
v-if="item_last.filed != 'geom'">
|
|
|
- <span>{{ item_last.filedZH }}:
|
|
|
- {{ item_last.filedZH == '面积'?item_last.data.toFixed(2):item_last.data }}</span>
|
|
|
+ <span>{{ item_last.filedZH }}:
|
|
|
+ {{ item_last.filedZH == '面积' ? item_last.data.toFixed(2) : item_last.data }}</span>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
- <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in store.state.query_pick_pane" :key="index">
|
|
|
- <pie class="echart" :class="item.name == '权属' ? 'echart1' : ''" unit="亩" @echartClick="(name)=>echartClick(name,item.value)" :ref="`echartRef`"></pie>
|
|
|
+ <el-tab-pane :closable="item.close" :label="item.name" :name="item.name"
|
|
|
+ v-for="(item, index) in store.state.query_pick_pane" :key="index">
|
|
|
+ <pie class="echart" :class="item.name == '权属' ? 'echart1' : ''" unit="亩"
|
|
|
+ @echartClick="(name) => echartClick(name, item.value)" :ref="`echartRef`"></pie>
|
|
|
<div>{{ eclickname }}</div>
|
|
|
<el-collapse v-for="(value, index_item) in echartList[eclickname]" :key="index_item" @change="handleChange">
|
|
|
<el-collapse-item :title="'地块' + (index_item + 1)" name="1">
|
|
@@ -22,7 +24,7 @@
|
|
|
</div>
|
|
|
:
|
|
|
<div class="filed_box">
|
|
|
- {{ value_field.filedZH == '面积'?value_field.data.toFixed(2):value_field.data }}
|
|
|
+ {{ value_field.filedZH == '面积' ? value_field.data.toFixed(2) : value_field.data }}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -30,6 +32,13 @@
|
|
|
</el-collapse>
|
|
|
|
|
|
</el-tab-pane>
|
|
|
+ <el-tab-pane label="自定义" name="自定义">
|
|
|
+ <div style="margin-bottom: 20px;">
|
|
|
+ <el-button size="small" @click="addTab()">
|
|
|
+ add tab
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</template>
|
|
|
|
|
@@ -44,6 +53,7 @@ let manager_multi_level_query = null;
|
|
|
let pick_entity = null;
|
|
|
|
|
|
let manager_multi_level_vector = null;
|
|
|
+let query_click_by_iserver = null;
|
|
|
|
|
|
export default {
|
|
|
components: { pie },
|
|
@@ -56,7 +66,8 @@ export default {
|
|
|
pick_entity: null,
|
|
|
pick_entity_geo: null,
|
|
|
eclickname: '',
|
|
|
- echartList:{}
|
|
|
+ echartList: {},
|
|
|
+ tabIndex: 2
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
@@ -65,21 +76,49 @@ export default {
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- compute(mj) {
|
|
|
- return mj ? (mj * 0.0015).toFixed(2) : 0;
|
|
|
- },
|
|
|
- setEchart(data, type, index) {
|
|
|
- this.$nextTick(() => {
|
|
|
- let max = index == 0 ? 3 : 10
|
|
|
- let legend_right= index == 0 ? "2%" : "10%"
|
|
|
- this.$refs.echartRef[index].setOptions({ data, type, max,legend_right });
|
|
|
- });
|
|
|
- },
|
|
|
- echartClick(name,datas){
|
|
|
- this.eclickname = name
|
|
|
- // let click = datas.filter((c) => c.name == name);
|
|
|
- // if (click.length > 0) this.gogeojson(click[0].geom );
|
|
|
- },
|
|
|
+ removeTab(targetName) {
|
|
|
+ let tabs = store.state.query_pick_pane;
|
|
|
+ let activeName = this.activeName;
|
|
|
+ if (activeName === targetName) {
|
|
|
+ tabs.forEach((tab, index) => {
|
|
|
+ if (tab.name === targetName) {
|
|
|
+ let nextTab = tabs[index + 1] || tabs[index - 1];
|
|
|
+ if (nextTab) {
|
|
|
+ activeName = nextTab.name;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ this.activeName = activeName;
|
|
|
+ store.state.query_pick_pane = tabs.filter(tab => tab.name !== targetName);
|
|
|
+ },
|
|
|
+ addTab() {
|
|
|
+ let newTabName = ++this.tabIndex + '';
|
|
|
+ store.state.query_pick_pane.push({
|
|
|
+
|
|
|
+ name: newTabName,
|
|
|
+ value: [1,2,3,4],// element.data
|
|
|
+ close: 'closable'
|
|
|
+
|
|
|
+ });
|
|
|
+ this.activeName = newTabName;
|
|
|
+ },
|
|
|
+ compute(mj) {
|
|
|
+ return mj ? (mj * 0.0015).toFixed(2) : 0;
|
|
|
+ },
|
|
|
+ setEchart(data, type, index) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let max = index == 0 ? 3 : 10
|
|
|
+ let legend_right = index == 0 ? "2%" : "10%"
|
|
|
+ this.$refs.echartRef[index].setOptions({ data, type, max, legend_right });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ echartClick(name, datas) {
|
|
|
+ this.eclickname = name
|
|
|
+ // let click = datas.filter((c) => c.name == name);
|
|
|
+ // if (click.length > 0) this.gogeojson(click[0].geom );
|
|
|
+ },
|
|
|
switch_show(flag) {
|
|
|
pick_entity.entities.values.forEach((res) => {
|
|
|
res.show = flag;
|
|
@@ -93,74 +132,74 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- gogeojson(data){
|
|
|
- let geojson = wellknown.parse(data);
|
|
|
-
|
|
|
- const twoDArray = geojson.coordinates[0];
|
|
|
- const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
- this.pick_entity_geo = oneDArray;
|
|
|
-
|
|
|
- pick_entity.entities.add({
|
|
|
- polygon: {
|
|
|
- // 获取指定属性(positions,holes(图形内需要挖空的区域))
|
|
|
- hierarchy: {
|
|
|
- positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
|
|
|
- },
|
|
|
- // 边框
|
|
|
- outline: true,
|
|
|
- // 边框颜色
|
|
|
- outlineColor: Cesium.Color.RED,
|
|
|
- // 边框尺寸
|
|
|
- outlineWidth: 2,
|
|
|
- // 填充的颜色,withAlpha透明度
|
|
|
- material: Cesium.Color.GREEN.withAlpha(0),
|
|
|
- // 是否被提供的材质填充
|
|
|
- fill: true,
|
|
|
- // 恒定高度
|
|
|
- height: 1.1,
|
|
|
- // 显示在距相机的距离处的属性,多少区间内是可以显示的
|
|
|
- // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
|
|
|
- // 是否显示
|
|
|
- show: true,
|
|
|
- // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
|
|
|
- zIndex: 10
|
|
|
- }
|
|
|
- });
|
|
|
+ gogeojson(data) {
|
|
|
+ let geojson = wellknown.parse(data);
|
|
|
+
|
|
|
+ const twoDArray = geojson.coordinates[0];
|
|
|
+ const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
+ this.pick_entity_geo = oneDArray;
|
|
|
+
|
|
|
+ pick_entity.entities.add({
|
|
|
+ polygon: {
|
|
|
+ // 获取指定属性(positions,holes(图形内需要挖空的区域))
|
|
|
+ hierarchy: {
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
|
|
|
+ },
|
|
|
+ // 边框
|
|
|
+ outline: true,
|
|
|
+ // 边框颜色
|
|
|
+ outlineColor: Cesium.Color.RED,
|
|
|
+ // 边框尺寸
|
|
|
+ outlineWidth: 2,
|
|
|
+ // 填充的颜色,withAlpha透明度
|
|
|
+ material: Cesium.Color.GREEN.withAlpha(0),
|
|
|
+ // 是否被提供的材质填充
|
|
|
+ fill: true,
|
|
|
+ // 恒定高度
|
|
|
+ height: 1.1,
|
|
|
+ // 显示在距相机的距离处的属性,多少区间内是可以显示的
|
|
|
+ // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
|
|
|
+ // 是否显示
|
|
|
+ show: true,
|
|
|
+ // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
|
|
|
+ zIndex: 10
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- let flag = true;
|
|
|
- let time = setInterval(() => {
|
|
|
- flag = !flag
|
|
|
- this.switch_show(flag);
|
|
|
- }, 500);
|
|
|
- setTimeout(() => {
|
|
|
- clearInterval(time);
|
|
|
- pick_entity.entities.values.forEach((res) => {
|
|
|
+ let flag = true;
|
|
|
+ let time = setInterval(() => {
|
|
|
+ flag = !flag
|
|
|
+ this.switch_show(flag);
|
|
|
+ }, 500);
|
|
|
+ setTimeout(() => {
|
|
|
+ clearInterval(time);
|
|
|
+ pick_entity.entities.values.forEach((res) => {
|
|
|
|
|
|
- pick_entity.entities.remove(res);
|
|
|
+ pick_entity.entities.remove(res);
|
|
|
|
|
|
- })
|
|
|
- }, 6000)
|
|
|
+ })
|
|
|
+ }, 6000)
|
|
|
|
|
|
|
|
|
- // 注意:polygon首尾坐标要一致
|
|
|
- var polygon = turf.polygon([geojson.coordinates[0]]);
|
|
|
+ // 注意:polygon首尾坐标要一致
|
|
|
+ var polygon = turf.polygon([geojson.coordinates[0]]);
|
|
|
|
|
|
- var centroid = turf.centroid(polygon).geometry.coordinates;
|
|
|
+ var centroid = turf.centroid(polygon).geometry.coordinates;
|
|
|
|
|
|
- viewer.camera.flyTo({
|
|
|
- duration: 1,
|
|
|
+ viewer.camera.flyTo({
|
|
|
+ duration: 1,
|
|
|
|
|
|
- destination: Cesium.Cartesian3.fromDegrees(centroid[0], centroid[1], 3000),
|
|
|
- // destination: {
|
|
|
- // x: -6283267.004204832,
|
|
|
- // y: 28123682.896774407,
|
|
|
- // z: 23709669.98539126
|
|
|
- // },
|
|
|
- orientation: {
|
|
|
- heading: 6.149339593573709,
|
|
|
- pitch: -1.539825618847483,
|
|
|
- roll: 0
|
|
|
- },
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(centroid[0], centroid[1], 3000),
|
|
|
+ // destination: {
|
|
|
+ // x: -6283267.004204832,
|
|
|
+ // y: 28123682.896774407,
|
|
|
+ // z: 23709669.98539126
|
|
|
+ // },
|
|
|
+ orientation: {
|
|
|
+ heading: 6.149339593573709,
|
|
|
+ pitch: -1.539825618847483,
|
|
|
+ roll: 0
|
|
|
+ },
|
|
|
});
|
|
|
},
|
|
|
handleChange(val) {
|
|
@@ -220,18 +259,22 @@ export default {
|
|
|
};
|
|
|
|
|
|
const wkt = wellknown.stringify(geojsonPoint);
|
|
|
+ let id = store.state.vectorlayerlist[store.state.vectorlayerlist.length - 1].id
|
|
|
let obj = {
|
|
|
// "wkt": 'POINT (109.51207847188947 18.311530254307392)', //单面
|
|
|
// "wkt": 'POINT (109.50728022974468 18.318266593715794)', //多面
|
|
|
"wkt": wkt,
|
|
|
|
|
|
- "id": 'dd699f839bc04969ae2dc2e1964d0ad1',
|
|
|
+ // "id": 'dd699f839bc04969ae2dc2e1964d0ad1',
|
|
|
+ "id": id,
|
|
|
+
|
|
|
}
|
|
|
GetTableData(obj).then(res => {
|
|
|
if (res.data.data != undefined) {
|
|
|
store.state.query_pick_last_pane = {
|
|
|
name: res.data.dataname,
|
|
|
- value: res.data.data[0]
|
|
|
+ value: res.data.data[0],
|
|
|
+ close: 'closable'
|
|
|
};
|
|
|
}
|
|
|
if (res.data.child != undefined) {
|
|
@@ -239,11 +282,13 @@ export default {
|
|
|
let index = -1;
|
|
|
res.data.child.forEach(element => {
|
|
|
if (element.data.length > 1) {
|
|
|
- index ++;
|
|
|
+ index++;
|
|
|
let edata = []
|
|
|
store.state.query_pick_pane.push({
|
|
|
name: element.dataname,
|
|
|
- value: []// element.data
|
|
|
+ value: [],// element.data
|
|
|
+ close: 'closable'
|
|
|
+
|
|
|
});
|
|
|
|
|
|
element.data.forEach(e => {
|
|
@@ -255,28 +300,27 @@ export default {
|
|
|
})
|
|
|
});
|
|
|
// if(element.dataname == '土地现状'){
|
|
|
- const countByName = element.data.reduce((acc, e) => {
|
|
|
- let name,value = ''
|
|
|
- e.forEach((res) => {
|
|
|
- if (res.filed == 'dlmc' || res.filed == 'qslx') name = res.data
|
|
|
- if (res.filed == 'siweiarea') value = res.data
|
|
|
-
|
|
|
+ const countByName = element.data.reduce((acc, e) => {
|
|
|
+ let name, value = ''
|
|
|
+ e.forEach((res) => {
|
|
|
+ if (res.filed == 'dlmc' || res.filed == 'qslx') name = res.data
|
|
|
+ if (res.filed == 'siweiarea') value = res.data
|
|
|
+
|
|
|
})
|
|
|
- acc[name] = (acc[name] || 0) + value;
|
|
|
- if(element.dataname=='权属')
|
|
|
- {
|
|
|
- if(!this.echartList[name])this.echartList[name]=[]
|
|
|
- this.echartList[name].push(e)
|
|
|
- }
|
|
|
- return acc;
|
|
|
- }, {});
|
|
|
-
|
|
|
+ acc[name] = (acc[name] || 0) + value;
|
|
|
+ if (element.dataname == '权属') {
|
|
|
+ if (!this.echartList[name]) this.echartList[name] = []
|
|
|
+ this.echartList[name].push(e)
|
|
|
+ }
|
|
|
+ return acc;
|
|
|
+ }, {});
|
|
|
+
|
|
|
Object.keys(countByName).forEach((key) => {
|
|
|
- edata.push({name:key,value:this.compute(countByName[key])})
|
|
|
+ edata.push({ name: key, value: this.compute(countByName[key]) })
|
|
|
});
|
|
|
edata.sort((a, b) => b.value - a.value);
|
|
|
// }
|
|
|
- this.setEchart(edata,'vertical',index)
|
|
|
+ this.setEchart(edata, 'vertical', index)
|
|
|
|
|
|
// store.state.query_pick_pane.push({
|
|
|
// name: element.dataname,
|
|
@@ -291,12 +335,96 @@ export default {
|
|
|
})
|
|
|
|
|
|
|
|
|
+ this.highlightResults(longitude, latitude);
|
|
|
|
|
|
that.handler_multi_level_query.destroy();
|
|
|
that.handler_multi_level_query = null;
|
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
|
|
|
|
|
+ },
|
|
|
+ async highlightResults(longitude, latitude) {
|
|
|
+ // 高亮结果
|
|
|
+ let queryByIDParameters = {
|
|
|
+ getFeatureMode: "BUFFER",
|
|
|
+ // getFeatureMode: "SPATIAL",
|
|
|
+ spatialQueryMode: "INTERSECT",
|
|
|
+ datasetNames: store.state.vectorlayerlist[store.state.vectorlayerlist.length - 1].source.split(","),
|
|
|
+ geometry: {
|
|
|
+ parts: [1],
|
|
|
+ points: [{ y: latitude, x: longitude }],
|
|
|
+ type: "POINT",
|
|
|
+ },
|
|
|
+ bufferDistance: 0.00005,
|
|
|
+ hasGeometry: true,
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ let response = await axios.post(this.calcIserverURI(store.state.vectorlayerlist[store.state.vectorlayerlist.length - 1].url), queryByIDParameters);
|
|
|
+
|
|
|
+
|
|
|
+ const outputCoords = this.convertCoordinates(response.data.features[0].geometry.points);
|
|
|
+ outputCoords.push(outputCoords[0])
|
|
|
+
|
|
|
+ let f = { "type": "Polygon", "coordinates": [outputCoords] };
|
|
|
+ let result = turf.buffer(f, 1 / 99999, {
|
|
|
+ units: "kilometers",
|
|
|
+ });
|
|
|
+ let positions = [];
|
|
|
+ const twoDArray = result.geometry.coordinates[0];
|
|
|
+ const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
+
|
|
|
+ positions = oneDArray;
|
|
|
+
|
|
|
+
|
|
|
+ if (this.isArray2D(oneDArray)) {
|
|
|
+ const oneDArray2 = oneDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
+ positions = oneDArray2;
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ query_click_by_iserver.entities.add({
|
|
|
+ polygon: {
|
|
|
+ // 获取指定属性(positions,holes(图形内需要挖空的区域))
|
|
|
+ hierarchy: {
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArray(positions)
|
|
|
+ },
|
|
|
+ // 边框
|
|
|
+ outline: false,
|
|
|
+ // 边框颜色
|
|
|
+ outlineColor: Cesium.Color.RED,
|
|
|
+ // 边框尺寸
|
|
|
+ outlineWidth: 10,
|
|
|
+ // 填充的颜色,withAlpha透明度
|
|
|
+ material: Cesium.Color.RED,
|
|
|
+
|
|
|
+ // 是否被提供的材质填充
|
|
|
+ fill: true,
|
|
|
+ // 恒定高度
|
|
|
+ height: 1.1,
|
|
|
+ // 显示在距相机的距离处的属性,多少区间内是可以显示的
|
|
|
+ // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
|
|
|
+ // 是否显示
|
|
|
+ show: true,
|
|
|
+ // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
|
|
|
+ zIndex: 10
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ convertCoordinates(coordArray) {
|
|
|
+ return coordArray.map(coord => [coord.x, coord.y]);
|
|
|
+ },
|
|
|
+ calcIserverURI(url) {
|
|
|
+ let uriArr = url.split("/");
|
|
|
+ uriArr[5] = uriArr[5].replace("map-", "data-");
|
|
|
+ uriArr[7] = "data";
|
|
|
+ uriArr[8] = "featureResults.rjson?returnContent=true";
|
|
|
+ return uriArr.join("/");
|
|
|
},
|
|
|
multiPolygonToPolygons(multiPolygon) {
|
|
|
const polygons = [];
|
|
@@ -326,6 +454,8 @@ export default {
|
|
|
// viewer.scene.primitives.remove(element);
|
|
|
|
|
|
// }
|
|
|
+
|
|
|
+ this.remove_query_click_by_iserver();
|
|
|
},
|
|
|
add_viewer_for_vector(geojson, data) {
|
|
|
|
|
@@ -376,7 +506,32 @@ export default {
|
|
|
} else {
|
|
|
that.add_viewer_for_vector(geojson, data);
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ remove_query_click_by_iserver() {
|
|
|
+ for (var i = 0; i < 10; i++) {
|
|
|
+ query_click_by_iserver.entities.values.forEach((res) => {
|
|
|
+
|
|
|
+ query_click_by_iserver.entities.remove(res);
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isArray2D(arr) {
|
|
|
+ // 首先检查arr是否是数组
|
|
|
+ if (!Array.isArray(arr)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查数组中的每个元素是否也是数组
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ if (!Array.isArray(arr[i])) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果所有元素都是数组,那么arr是二维数组
|
|
|
+ return true;
|
|
|
+ },
|
|
|
},
|
|
|
beforeCreate() { }, //生命周期 - 创建之前
|
|
|
created() { }, //生命周期 - 创建完成(可以访问当前this实例)
|
|
@@ -396,6 +551,9 @@ export default {
|
|
|
|
|
|
pick_entity = new Cesium.CustomDataSource("pick_entity");
|
|
|
viewer.dataSources.add(pick_entity);
|
|
|
+
|
|
|
+ query_click_by_iserver = new Cesium.CustomDataSource("query_click_by_iserver");
|
|
|
+ viewer.dataSources.add(query_click_by_iserver);
|
|
|
})
|
|
|
|
|
|
}, //生命周期 - 挂在完成
|
|
@@ -438,17 +596,21 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
-.echart{
|
|
|
+.echart {
|
|
|
width: 300px;
|
|
|
height: 420px;
|
|
|
}
|
|
|
-.echart1{
|
|
|
+
|
|
|
+.echart1 {
|
|
|
height: 280px;
|
|
|
}
|
|
|
+
|
|
|
.multi_level_query_table {
|
|
|
position: absolute;
|
|
|
top: 7rem;
|
|
|
width: 19rem;
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
/* 去掉tabs标签栏下的下划线 */
|