|
|
@@ -1,14 +1,28 @@
|
|
|
<template>
|
|
|
- <div class="sm-panel sm-function-module-query" v-show="PoinyQueryShow && vectorShow" v-drag>
|
|
|
+ <div
|
|
|
+ class="sm-panel sm-function-module-query"
|
|
|
+ v-show="PoinyQueryShow && vectorShow"
|
|
|
+ v-drag
|
|
|
+ >
|
|
|
<div class="sm-panel-header">
|
|
|
<span>{{ Resource.PoinyQuery }}</span>
|
|
|
<span class="closeBtn" @click="toggleVisibility">×</span>
|
|
|
</div>
|
|
|
<!-- <div class="sm-function-module-content-btn"> -->
|
|
|
<div class="btnList">
|
|
|
- <span v-for="(item, index) in actionOptions" :key="index" class="icon-span" :title="item.lable"
|
|
|
- :class="item.isSelect ? 'selected-icon' : ''" @click="changleQueryItem(item)">
|
|
|
- <i class="iconfont iconSize" :class="item.iconName" style="margin-top: 0px"></i>
|
|
|
+ <span
|
|
|
+ v-for="(item, index) in actionOptions"
|
|
|
+ :key="index"
|
|
|
+ class="icon-span"
|
|
|
+ :title="item.lable"
|
|
|
+ :class="item.isSelect ? 'selected-icon' : ''"
|
|
|
+ @click="changleQueryItem(item)"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="iconfont iconSize"
|
|
|
+ :class="item.iconName"
|
|
|
+ style="margin-top: 0px"
|
|
|
+ ></i>
|
|
|
</span>
|
|
|
<!-- <el-button type="primary" size="small" @click.stop="mapLayerQuery"
|
|
|
>点击</el-button
|
|
|
@@ -19,28 +33,51 @@
|
|
|
</div>
|
|
|
<div class="sm-function-module-content-tabs">
|
|
|
<el-tabs @tab-click="handleTabClick" v-model="activeLayerId">
|
|
|
- <el-tab-pane :label="item.label" :name="item.id" v-for="(item, index) in layerList" :key="index"></el-tab-pane>
|
|
|
+ <el-tab-pane
|
|
|
+ :label="item.label"
|
|
|
+ :name="item.id"
|
|
|
+ v-for="(item, index) in layerList"
|
|
|
+ :key="index"
|
|
|
+ ></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
<div class="sm-function-module-content-table">
|
|
|
- <el-collapse :value="activeNames" @change="handleCollapseChange" v-if="
|
|
|
- activeLayerId &&
|
|
|
- queryResults[activeLayerId] &&
|
|
|
- queryResults[activeLayerId].length > 0
|
|
|
- ">
|
|
|
- <el-collapse-item :title="'查询结果' + (index + 1)" :name="'查询结果' + (index + 1)"
|
|
|
- v-for="(item, index) in queryResults[activeLayerId]" :key="index">
|
|
|
+ <el-collapse
|
|
|
+ :value="activeNames"
|
|
|
+ @change="handleCollapseChange"
|
|
|
+ v-if="
|
|
|
+ activeLayerId &&
|
|
|
+ queryResults[activeLayerId] &&
|
|
|
+ queryResults[activeLayerId].length > 0
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-collapse-item
|
|
|
+ :title="'查询结果' + (index + 1)"
|
|
|
+ :name="'查询结果' + (index + 1)"
|
|
|
+ v-for="(item, index) in queryResults[activeLayerId]"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<template slot="title">
|
|
|
查询结果{{ index + 1
|
|
|
- }}<i title="定位" class="header-icon el-icon-s-promotion flyBtn2" @click.stop="flyTo(index)"></i>
|
|
|
+ }}<i
|
|
|
+ title="定位"
|
|
|
+ class="header-icon el-icon-s-promotion flyBtn2"
|
|
|
+ @click.stop="flyTo(index)"
|
|
|
+ ></i>
|
|
|
</template>
|
|
|
- <el-table :data="item" :show-header="false" border style="width: 100%" :header-cell-style="{
|
|
|
- background: 'rgba(10, 25, 38, 0.6)',
|
|
|
- color: '#66b1ff',
|
|
|
- fontSize: '14px',
|
|
|
- fontFamily: 'Microsoft YaHei',
|
|
|
- fontWeight: '400',
|
|
|
- }">
|
|
|
+ <el-table
|
|
|
+ :data="item"
|
|
|
+ :show-header="false"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgba(10, 25, 38, 0.6)',
|
|
|
+ color: '#66b1ff',
|
|
|
+ fontSize: '14px',
|
|
|
+ fontFamily: 'Microsoft YaHei',
|
|
|
+ fontWeight: '400',
|
|
|
+ }"
|
|
|
+ >
|
|
|
<el-table-column prop="name" label="字段" width="100">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="value" label="值" width="208">
|
|
|
@@ -62,7 +99,7 @@ import { keys } from "lodash";
|
|
|
import { handModel, handnew, clearTranslate, keyName } from "./modelLayering";
|
|
|
import CockpitVector from "./CockpitVector.vue";
|
|
|
import MultiLevelQuery from "./MultiLevelQuery.vue";
|
|
|
-
|
|
|
+import { loadGeoJSON, str2Unicode } from "@/utils/MapHelper/help.js";
|
|
|
import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
|
|
|
import * as tdsy from "@/views/cockpit/js/tdsy";
|
|
|
import * as turf from "@turf/turf";
|
|
|
@@ -146,17 +183,18 @@ export default {
|
|
|
: true;
|
|
|
},
|
|
|
},
|
|
|
- created() { },
|
|
|
+ created() {},
|
|
|
watch: {
|
|
|
activeLayerId(val) {
|
|
|
if (val && val != "0") {
|
|
|
for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
|
|
|
let obj = store.state.vectorlayerlist[i];
|
|
|
if (obj.id == val) {
|
|
|
- if (obj.type == "S3M") {
|
|
|
- this.addGeometrys(true);
|
|
|
+ if (obj.serverType == "geoserver") {
|
|
|
+ this.removeGeoJSON();
|
|
|
+ this.addGeoJson("#0000ff");
|
|
|
} else {
|
|
|
- this.addGeometrys();
|
|
|
+ this.addGeometrys(obj.type == "S3M");
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
@@ -174,6 +212,7 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
+ console.log(str2Unicode(`fid_城镇`));
|
|
|
this.$nextTick((res) => {
|
|
|
query_click = new Cesium.CustomDataSource("query_click");
|
|
|
viewer.dataSources.add(query_click);
|
|
|
@@ -202,6 +241,7 @@ export default {
|
|
|
toggleVisibility() {
|
|
|
this.removeMapLayerQuery();
|
|
|
this.remove_query_click();
|
|
|
+ this.removeGeoJSON();
|
|
|
store.setToolBarAction(9);
|
|
|
tdsy.remove(false);
|
|
|
},
|
|
|
@@ -262,36 +302,19 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
flyTo(index) {
|
|
|
- dataSourceLayer.entities.removeAll();
|
|
|
let geoms = this.queryResultsGeom[this.activeLayerId];
|
|
|
- let parts = this.queryResultsGeomPart[this.activeLayerId];
|
|
|
let cur = geoms[index];
|
|
|
if (cur) {
|
|
|
- let part = parts[index];
|
|
|
- let start = 0;
|
|
|
- let end = 0;
|
|
|
- for (let k = 0; k < part.length; k++) {
|
|
|
- let points = [];
|
|
|
- if (k > 0) {
|
|
|
- start += part[k - 1];
|
|
|
- }
|
|
|
- end += part[k];
|
|
|
- for (let j = start; j < end; j++) {
|
|
|
- let cx = cur[j][0];
|
|
|
- let cy = cur[j][1];
|
|
|
- points.push(cx);
|
|
|
- points.push(cy);
|
|
|
- }
|
|
|
- // let e = dataSourceLayer.entities.
|
|
|
- let e = viewer.entities.add({
|
|
|
- polyline: new Cesium.PolylineGraphics({
|
|
|
- positions: Cesium.Cartesian3.fromDegreesArray(points),
|
|
|
- width: 3,
|
|
|
- material: Cesium.Color.RED.withAlpha(0.9),
|
|
|
- clampToGround: true,
|
|
|
- }),
|
|
|
- });
|
|
|
- viewer.flyTo(e);
|
|
|
+ if (cur.type) {
|
|
|
+ this.removeGeoJSON();
|
|
|
+ loadGeoJSON(
|
|
|
+ cur,
|
|
|
+ "#0000ff",
|
|
|
+ { isfly: true, fill_a: 0.001 },
|
|
|
+ (data) => (data.name = "geoserver")
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.flyToSuperMap(cur);
|
|
|
}
|
|
|
} else {
|
|
|
this.$message({
|
|
|
@@ -300,6 +323,53 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ addGeoJson() {
|
|
|
+ let geoms = this.queryResultsGeom[this.activeLayerId];
|
|
|
+ geoms.forEach((geom) => {
|
|
|
+ loadGeoJSON(
|
|
|
+ geom,
|
|
|
+ "#0000ff",
|
|
|
+ { fill_a: 0.001 },
|
|
|
+ (data) => (data.name = "geoserver")
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ removeGeoJSON() {
|
|
|
+ viewer.entities.removeAll();
|
|
|
+ viewer.dataSources._dataSources.forEach((das) => {
|
|
|
+ if (das.name == "geoserver") viewer.dataSources.remove(das);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ flyToSuperMap(cur) {
|
|
|
+ dataSourceLayer.entities.removeAll();
|
|
|
+ let parts = this.queryResultsGeomPart[this.activeLayerId];
|
|
|
+ let part = parts[index];
|
|
|
+ let start = 0;
|
|
|
+ let end = 0;
|
|
|
+ for (let k = 0; k < part.length; k++) {
|
|
|
+ let points = [];
|
|
|
+ if (k > 0) {
|
|
|
+ start += part[k - 1];
|
|
|
+ }
|
|
|
+ end += part[k];
|
|
|
+ for (let j = start; j < end; j++) {
|
|
|
+ let cx = cur[j][0];
|
|
|
+ let cy = cur[j][1];
|
|
|
+ points.push(cx);
|
|
|
+ points.push(cy);
|
|
|
+ }
|
|
|
+ // let e = dataSourceLayer.entities.
|
|
|
+ let e = viewer.entities.add({
|
|
|
+ polyline: new Cesium.PolylineGraphics({
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArray(points),
|
|
|
+ width: 3,
|
|
|
+ material: Cesium.Color.RED.withAlpha(0.9),
|
|
|
+ clampToGround: true,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ viewer.flyTo(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
handleTabClick(item, a) {
|
|
|
this.activeLayerId = item.name;
|
|
|
},
|
|
|
@@ -324,6 +394,7 @@ export default {
|
|
|
let scene = viewer.scene;
|
|
|
viewer.entities.removeAll();
|
|
|
dataSourceLayer.entities.removeAll();
|
|
|
+ this.removeGeoJSON();
|
|
|
//拾取模型
|
|
|
let pickedFeature = scene.pick(movement.position);
|
|
|
if (
|
|
|
@@ -345,70 +416,70 @@ export default {
|
|
|
// "ResultNetWork@管线#1"///"ResultNetWork_Node@管线#1"
|
|
|
if (eneityName.indexOf("雨水") > -1 || eneityName.indexOf("管线") > -1) {
|
|
|
// for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
|
|
|
- // let obj = store.state.vectorlayerlist[i];
|
|
|
-
|
|
|
- // console.log(obj.url,'url----------',obj);
|
|
|
- let str1 = eneityName.match(/@(\S*)#/)[1];
|
|
|
- let str2 = eneityName.match(/(\S*)@/)[1];
|
|
|
- let str3 = str1 + ":" + str2;
|
|
|
- // let obj = store.state.vectorlayerlist.find(i => i.title == str1);
|
|
|
- let obj = store.state.vectorlayerlist.find((i) => {
|
|
|
- return str1 == i.title
|
|
|
- });
|
|
|
- let url1 = obj.url.replace("3D-", "data-");
|
|
|
- let url2 = url1.replace(
|
|
|
- "realspace",
|
|
|
- "data/featureResults.rjson?returnContent=true"
|
|
|
- );
|
|
|
- let queryByIDParameters = {
|
|
|
- getFeatureMode: "ID",
|
|
|
- datasetNames: [str3],
|
|
|
- ids: [pickedFeature.id],
|
|
|
- };
|
|
|
- let e = await this.mapQuery(url2, queryByIDParameters);
|
|
|
- if (e && e.totalCount > 0) {
|
|
|
- // that.layerList.push(store.state.vectorlayerlist[i]);
|
|
|
- that.layerList.push(obj);
|
|
|
- for (let u = 0; u < e.features.length; u++) {
|
|
|
- let cur = [];
|
|
|
- var linSAr = JSON.parse(JSON.stringify(e.features[u]));
|
|
|
- if (e.features[u].fieldNames) {
|
|
|
- linSAr.fieldNames.forEach((fieldName, i) => {
|
|
|
- let v = linSAr.fieldValues[i];
|
|
|
- if (v != "" && !isNaN(parseFloat(v))) {
|
|
|
- v = Math.round(parseFloat(v) * 100) / 100;
|
|
|
- }
|
|
|
-
|
|
|
- // cur.push({ name: fieldName, value: v });
|
|
|
- if (
|
|
|
- fieldName.toLowerCase().indexOf("shape") < 0 &&
|
|
|
- fieldName.toLowerCase().indexOf("sm") &&
|
|
|
- v != ""
|
|
|
- ) {
|
|
|
- cur.push({ name: fieldName, value: v });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- //获取图层id的参数
|
|
|
- let substring = pickedFeature.primitive._baseUri.query;
|
|
|
- for (let p = 0; p < store.state.vectorlayerlist.length; p++) {
|
|
|
- if (store.state.vectorlayerlist[p].id == substring) {
|
|
|
- that.layerList.push(store.state.vectorlayerlist[p]);
|
|
|
- break;
|
|
|
- }
|
|
|
+ // let obj = store.state.vectorlayerlist[i];
|
|
|
+
|
|
|
+ // console.log(obj.url,'url----------',obj);
|
|
|
+ let str1 = eneityName.match(/@(\S*)#/)[1];
|
|
|
+ let str2 = eneityName.match(/(\S*)@/)[1];
|
|
|
+ let str3 = str1 + ":" + str2;
|
|
|
+ // let obj = store.state.vectorlayerlist.find(i => i.title == str1);
|
|
|
+ let obj = store.state.vectorlayerlist.find((i) => {
|
|
|
+ return str1 == i.title;
|
|
|
+ });
|
|
|
+ let url1 = obj.url.replace("3D-", "data-");
|
|
|
+ let url2 = url1.replace(
|
|
|
+ "realspace",
|
|
|
+ "data/featureResults.rjson?returnContent=true"
|
|
|
+ );
|
|
|
+ let queryByIDParameters = {
|
|
|
+ getFeatureMode: "ID",
|
|
|
+ datasetNames: [str3],
|
|
|
+ ids: [pickedFeature.id],
|
|
|
+ };
|
|
|
+ let e = await this.mapQuery(url2, queryByIDParameters);
|
|
|
+ if (e && e.totalCount > 0) {
|
|
|
+ // that.layerList.push(store.state.vectorlayerlist[i]);
|
|
|
+ that.layerList.push(obj);
|
|
|
+ for (let u = 0; u < e.features.length; u++) {
|
|
|
+ let cur = [];
|
|
|
+ var linSAr = JSON.parse(JSON.stringify(e.features[u]));
|
|
|
+ if (e.features[u].fieldNames) {
|
|
|
+ linSAr.fieldNames.forEach((fieldName, i) => {
|
|
|
+ let v = linSAr.fieldValues[i];
|
|
|
+ if (v != "" && !isNaN(parseFloat(v))) {
|
|
|
+ v = Math.round(parseFloat(v) * 100) / 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ // cur.push({ name: fieldName, value: v });
|
|
|
+ if (
|
|
|
+ fieldName.toLowerCase().indexOf("shape") < 0 &&
|
|
|
+ fieldName.toLowerCase().indexOf("sm") &&
|
|
|
+ v != ""
|
|
|
+ ) {
|
|
|
+ cur.push({ name: fieldName, value: v });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //获取图层id的参数
|
|
|
+ let substring = pickedFeature.primitive._baseUri.query;
|
|
|
+ for (let p = 0; p < store.state.vectorlayerlist.length; p++) {
|
|
|
+ if (store.state.vectorlayerlist[p].id == substring) {
|
|
|
+ that.layerList.push(store.state.vectorlayerlist[p]);
|
|
|
+ break;
|
|
|
}
|
|
|
- that.queryResults[substring] = [cur];
|
|
|
- that.queryResultsGeom[substring] = [];
|
|
|
- that.activeLayerId = substring;
|
|
|
- } else {
|
|
|
- that.$message({
|
|
|
- message: "查询结果为空！",
|
|
|
- type: "warning",
|
|
|
- customClass: "messageIndex",
|
|
|
- });
|
|
|
}
|
|
|
+ that.queryResults[substring] = [cur];
|
|
|
+ that.queryResultsGeom[substring] = [];
|
|
|
+ that.activeLayerId = substring;
|
|
|
+ } else {
|
|
|
+ that.$message({
|
|
|
+ message: "查询结果为空！",
|
|
|
+ type: "warning",
|
|
|
+ customClass: "messageIndex",
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
// }
|
|
|
}
|
|
|
|
|
|
@@ -441,14 +512,14 @@ export default {
|
|
|
//TODO wanger 分图层查询
|
|
|
for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
|
|
|
let obj = store.state.vectorlayerlist[i];
|
|
|
- if (!obj.source) {
|
|
|
- continue;
|
|
|
- }
|
|
|
// 结果高亮
|
|
|
this.highlightResultsPng(xy.lng, xy.lat);
|
|
|
- if (obj.title == "测试WMS") {
|
|
|
+ if (obj.serverType == "geoserver") {
|
|
|
this.getGeoserver(xy, obj);
|
|
|
} else {
|
|
|
+ if (!obj.source) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
this.superQuery(xy, obj);
|
|
|
}
|
|
|
}
|
|
|
@@ -561,37 +632,36 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
async getGeoserver(xy, obj) {
|
|
|
- let url = "http://192.168.60.52:28085/geoserver/demo/wms";
|
|
|
+ this.queryResults[obj.id] = [];
|
|
|
+ this.queryResultsGeom[obj.id] = [];
|
|
|
+ let url = obj.url.substring(0, obj.url.indexOf("geoserver") + 9) + "/wms";
|
|
|
let params = {
|
|
|
- SERVICE: "WMS",
|
|
|
- VERSION: "1.1.1",
|
|
|
- REQUEST: "GetFeatureInfo",
|
|
|
- // FORMAT: "image/png",
|
|
|
- TRANSPARENT: true,
|
|
|
- QUERY_LAYERS: "demo:yzq_czkfbj",
|
|
|
- // STYLES: "",
|
|
|
- LAYERS: "demo:yzq_czkfbj",
|
|
|
- // exceptions: "application/vnd.ogc.se_inimage",
|
|
|
- INFO_FORMAT: "application/json",
|
|
|
- // FEATURE_COUNT: 50,
|
|
|
- X: 50,
|
|
|
- Y: 50,
|
|
|
- SRS: "EPSG:4326",
|
|
|
- WIDTH: 101,
|
|
|
- HEIGHT: 101,
|
|
|
- BBOX: bbox(xy, 10), // "12152284.626610054,2080930.4355590942,12153248.563804159,2081894.3727532008",
|
|
|
+ service: "WMS",
|
|
|
+ version: "1.1.1",
|
|
|
+ request: "GetFeatureInfo",
|
|
|
+ layers: `${obj.fwgzkj}:${obj.fwmc}`,
|
|
|
+ query_layers: `${obj.fwgzkj}:${obj.fwmc}`,
|
|
|
+ info_format: "application/json",
|
|
|
+ srs: "EPSG:4326",
|
|
|
+ x: 50,
|
|
|
+ y: 50,
|
|
|
+ width: 101,
|
|
|
+ height: 101,
|
|
|
+ bbox: bbox(xy, 10), // "12152284.626610054,2080930.4355590942,12153248.563804159,2081894.3727532008",
|
|
|
};
|
|
|
let res = await axios.get(url, { params });
|
|
|
if (res.data && res.data.features.length > 0) {
|
|
|
this.addLayerList(obj.title, obj);
|
|
|
- that.queryResultsGeom[obj.id] = geoms;
|
|
|
res.data.features.forEach((feitem) => {
|
|
|
let cur = [];
|
|
|
- cur.push({ name: feitem, value: feitem });
|
|
|
- that.queryResults[obj.id].push(cur);
|
|
|
+ Object.keys(feitem.properties).forEach((key) => {
|
|
|
+ cur.push({ name: key, value: feitem.properties[key] });
|
|
|
+ });
|
|
|
+ this.queryResults[obj.id].push(cur);
|
|
|
+ this.queryResultsGeom[obj.id].push(feitem.geometry);
|
|
|
});
|
|
|
} else {
|
|
|
- that.$message({
|
|
|
+ this.$message({
|
|
|
message: "查询结果为空！",
|
|
|
type: "warning",
|
|
|
customClass: "messageIndex",
|
|
|
@@ -638,6 +708,7 @@ export default {
|
|
|
this.layersData = [];
|
|
|
viewer.entities.removeAll();
|
|
|
dataSourceLayer.entities.removeAll();
|
|
|
+ this.removeGeoJSON();
|
|
|
let title;
|
|
|
if (store.state.checkedData) title = store.state.checkedData.title;
|
|
|
// 超图分层分户
|
|
|
@@ -725,9 +796,12 @@ export default {
|
|
|
this.queryResultsGeomPart = {};
|
|
|
this.layerList = [];
|
|
|
viewer.entities.removeAll();
|
|
|
- this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
|
+ if (this.handler.removeInputAction) {
|
|
|
+ this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
|
+ }
|
|
|
dataSourceLayer.entities.removeAll();
|
|
|
+ this.removeGeoJSON();
|
|
|
viewer.dataSources.remove(dataSourceLayer);
|
|
|
},
|
|
|
/**
|
