<template>
|
<div class="lalala tree-container">
|
<el-form ref="form">
|
<el-form-item>
|
<el-select v-model="$store.state.pigCode" clearable filterable style="width :100%" @change="prjChanged"
|
placeholder="请选择项目">
|
<el-option v-for="item in menus" :key="item.code" :label="item.name" :value="item.code">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-input placeholder="输入关键字进行过滤" v-model="filterText" class="search">
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<el-tree ref="tree" :data="treeData" node-key="id" show-checkbox :props="defaultProps" @node-click="handleLeftclick"
|
@node-contextmenu="rightClick" @check="handleCheckChange" :default-checked-keys="handleTreeCheck"
|
:expand-on-click-node="false" :filter-node-method="filterNode" draggable>
|
<span
|
class="slot-t-node"
|
slot-scope="{ node, data }"
|
>
|
<span v-show="!data.isEdit">
|
<span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{
|
node.label
|
}}</span>
|
</span>
|
<span v-show="data.isEdit">
|
<el-input
|
class="slot-t-input"
|
size="mini"
|
autofocus
|
v-model="data.label"
|
:ref="'slotTreeInput' + data.id"
|
@blur.stop="nodeBlur(node, data)"
|
@keydown.native.enter="nodeBlur(node, data)"
|
></el-input>
|
</span>
|
</span>
|
</el-tree>
|
<el-card class="box-card" ref="card" :style="{ ...rightClickMenuStyle }" v-show="menuVisible">
|
<div class="edit" @click="showLayerAttribute()" v-if="showProp && !shwoHistogram">
|
<i class="el-icon-tickets"></i> 属性
|
</div>
|
<div class="edit" @click="positioning()" v-if="showLocal">
|
<i class="el-icon-tickets"></i> 定位
|
</div>
|
<div class="edit" @click="pellucidity()" v-if="showOpacity">
|
<i class="el-icon-tickets"></i> 透明度
|
</div>
|
<div class="edit" @click="histogram()" v-show="shwoHistogram">
|
<i class="el-icon-tickets"></i> 钻孔柱状图
|
</div>
|
<div class="edit" v-show="shwoTileDown" @click="tileDownload()">
|
<i class="el-icon-download"></i> 瓦片下载
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import GeoJSON from "ol/format/GeoJSON.js";
|
import queryinfo from "./queryinfo.vue";
|
import { Vector as VectorSource } from "ol/source";
|
import { Vector as VectorLayer } from "ol/layer";
|
import { perms_selectLayers, comprehensive_selectPubById, project_selectDirAll } from "../../api/api.js";
|
|
export default {
|
name: "tree",
|
components: { queryinfo },
|
data () {
|
return {
|
isBusy: false, // 正忙
|
lastPrjCode: "", // 最后选择项目编码
|
showProp: false, // 属性
|
shwoHistogram: false, // 钻孔柱状图
|
showLocal: false, // 定位
|
showOpacity: false, // 不透明度
|
shwoTileDown: false, // 瓦片下载
|
menuVisible: false, // 菜单
|
levelArray: [ // 高程数组
|
0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000,
|
250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200,
|
100, 50, 25, 10, 0,
|
],
|
filterText: "", // 关键字过滤
|
currentData: "", // 当前数据
|
currentNode: "", // 当前节点
|
rightClickMenuStyle: {}, // 右键菜单样式
|
handleTreeCheck: [], // 默认选中键
|
layerId: [
|
"m_pipeline",
|
"th_strategic_channel",
|
"bs_project",
|
"m_sitepoint",
|
],
|
treeData: [], // 树数据
|
sourceData: [], // 源数据
|
defaultProps: { // 默认属性值
|
children: "children",
|
label: "cnName",
|
},
|
mptLayer: [], // Mpt图层
|
menus: [] // 菜单项
|
};
|
},
|
watch: {
|
filterText (val) {
|
this.$refs.tree.filter(val);
|
},
|
},
|
mounted () {
|
this.getMenus();
|
this.$bus.$on("treeDataCopy", (res) => {
|
this.$store.state.treeData = this.treeData;
|
this.$store.state.checkedKeys = this.$refs.tree.getCheckedKeys();
|
});
|
if (this.$store.state.showAllLayers) {
|
this.layersStart();
|
this.$store.state.showAllLayers = false;
|
} else {
|
this.treeData = this.$store.state.treeData;
|
this.$refs.tree.setCheckedKeys(this.$store.state.checkedKeys);
|
}
|
},
|
methods: {
|
// 获取菜单
|
async getMenus () {
|
let data = await project_selectDirAll();
|
if (data && data.code == 200) this.menus = data.result;
|
},
|
// 初始化图层
|
async layersStart () {
|
let data = await perms_selectLayers();
|
if (data.code != 200) {
|
return this.$message.error("图层列表查询失败");
|
}
|
|
let checkKey = [], checkedLayers = [];
|
let layers = data.result.filter((lyr) => {
|
if (lyr.url && lyr.type == 2 && lyr.isShow == 1) {
|
checkKey.push(lyr.id);
|
if (lyr.serveType == "WMS") checkedLayers.push(lyr);
|
}
|
return lyr;
|
});
|
// 存储选中图层
|
this.treeData = this.setTreeData(layers);
|
this.sourceData = JSON.parse(JSON.stringify(this.treeData));
|
this.$refs.tree.setCheckedKeys(checkKey);
|
sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers));
|
},
|
// 设置树数据
|
setTreeData (source) {
|
/*let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
|
branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
|
// 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ，那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
|
return father.pid == 0; // 返回一级菜单
|
});*/
|
|
let arr = [];
|
let data = JSON.parse(JSON.stringify(source));
|
this.setTreeChildData(data, arr, 0);
|
|
return arr;
|
},
|
// 设置树子节点数据
|
setTreeChildData (data, arr, pid) {
|
let i = 0;
|
while (i < data.length) {
|
let d = data[i];
|
if (d.pid == pid) {
|
arr.push(d);
|
data.splice(i, 1);
|
continue;
|
}
|
|
i++;
|
}
|
|
arr.sort(function (a, b) {
|
return a.orderNum - b.orderNum;
|
});
|
|
for (let i in arr) {
|
let children = [];
|
this.setTreeChildData(data, children, arr[i].id);
|
if (children.length) arr[i].children = children;
|
}
|
},
|
// 节点获得焦点事件
|
nodeBlur (node, data) {
|
if (!data.label.length) return this.$message.error("菜单名不可为空！");
|
if (data.isEdit) this.$set(data, "isEdit", false);
|
this.$nextTick(() => {
|
this.$refs["slotTreeInput" + data.id].$refs.input.focus();
|
});
|
},
|
// 鼠标左击事件
|
handleLeftclick (data, node) {
|
this.rmListener();
|
},
|
// 取消鼠标监听事件
|
rmListener () {
|
this.menuVisible = false;
|
// 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
|
document.removeEventListener("click", this.rmListener);
|
},
|
// 过滤节点
|
filterNode (value, data) {
|
if (!value) return true;
|
return data.cnName.indexOf(value) !== -1;
|
},
|
// 鼠标右击事件
|
rightClick (event, object, node, element) {
|
if (object.type == 1 || node.data.children != null) return;
|
|
this.currentNode = node;
|
this.currentData = object;
|
this.$store.state.propertiesName = object;
|
|
this.showProp = object.serveType == "WMS"; // 属性
|
this.shwoHistogram = this.showProp && object.enName == "s_explorationpoint"; // 钻孔柱状图
|
this.showLocal = ["Tileset", "3DML", "Mpt", "TMS", "DOM", "DEM"].indexOf(object.serveType) > -1; // 定位
|
this.showOpacity = ["Tileset", "3DML"].indexOf(object.serveType) > -1; // 不透明度
|
this.shwoTileDown = ["TMS", "DOM"].indexOf(object.serveType) > -1 && object.pubid; // 瓦片下载
|
this.menuVisible = this.showProp || this.shwoHistogram || this.showLocal || this.showOpacity || this.shwoTileDown; // 菜单
|
|
this.$refs.card.$el.style.left = event.pageX + 20 + "px";
|
this.$refs.card.$el.style.top = event.pageY + "px";
|
},
|
// 属性显示
|
showLayerAttribute (data) {
|
this.rmListener();
|
this.currentData = data ? data : this.currentData;
|
let layer = this.currentData.enName.replaceAll("_", "");
|
this.$store.state.mapSpaceQueryLayer = layer;
|
this.$store.state.showPopBoxFlag = true;
|
this.$store.state.mapPopBoxFlag = "2";
|
},
|
// 定位
|
async positioning () {
|
this.rmListener();
|
if (["Tileset", "3DML"].indexOf(this.currentData.serveType) > -1) {
|
for (let i in Viewer.scene.primitives._primitives) {
|
if (Viewer.scene.primitives._primitives[i].id == this.currentData.cnName) {
|
Viewer.flyTo(Viewer.scene.primitives._primitives[i]);
|
break;
|
}
|
}
|
return;
|
}
|
|
if (["TMS", "DOM", "DEM"].indexOf(this.currentData.serveType) > -1 && this.currentData.pubid) {
|
let data = await comprehensive_selectPubById({ id: this.currentData.pubid });
|
if (data.result && data.result.geom) {
|
let wkt = this.$wkt.parse(data.result.geom);
|
let height = this.getHeight(wkt.coordinates[2]);
|
Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], height), // 2000
|
});
|
}
|
return;
|
}
|
|
if ("Mpt" == this.currentData.serveType) {
|
viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(101.8, 37.9, 10000000.0) }); // 中国
|
}
|
},
|
// 钻孔柱状图
|
async histogram () {
|
this.rmListener();
|
let layer = this.currentData.enName.replaceAll("_", "");
|
this.$store.state.mapSpaceQueryLayer = layer;
|
this.$store.state.mapPopBoxFlag = "2";
|
this.$store.state.showPopBoxFlag = true;
|
},
|
// 透明度
|
pellucidity () {
|
this.rmListener();
|
for (let j in Viewer.scene.primitives._primitives) {
|
if (Viewer.scene.primitives._primitives[j].id == this.currentData.cnName) {
|
this.$store.state.setAlphaDity = this.currentData;
|
this.$bus.$emit("showPellucidity", true);
|
break;
|
}
|
}
|
},
|
// 获取高度
|
getHeight (level) {
|
if (level > -1 && level < 23) return this.levelArray[level];
|
|
return this.levelArray[this.levelArray.length - 1];
|
},
|
// 瓦片下载
|
tileDownload () {
|
this.rmListener();
|
|
var that = this;
|
sgworld.Creator.createSimpleGraphic(
|
"rectangle", {},
|
function (entity) {
|
that.getTileRectangle(entity);
|
sgworld.Creator.SimpleGraphic.clear();
|
}
|
);
|
},
|
// 获取瓦片四至范围
|
getTileRectangle (res) {
|
var value = res.rectangle.coordinates.getValue();
|
var val = {
|
pubid: this.currentData.pubid,
|
pwd: "",
|
title: "",
|
xmax: Cesium.Math.toDegrees(value.east),
|
xmin: Cesium.Math.toDegrees(value.west),
|
ymax: Cesium.Math.toDegrees(value.north),
|
ymin: Cesium.Math.toDegrees(value.south)
|
}
|
this.$bus.$emit("titleDown", val);
|
},
|
// 图层选中事件
|
handleCheckChange (data, checked) {
|
if (this.isBusy) return;
|
|
let nodes = [];
|
this.getNodes(data, nodes);
|
let obj = { WMS: [], Tileset: [], TMS: [], Mpt: [], DEM: [] };
|
|
for (let i = 0, c = nodes.length; i < c; i++) {
|
let node = nodes[i];
|
switch (node.serveType) {
|
case "WMS":
|
obj.WMS.push(node);
|
break;
|
case "3DML":
|
case "Tileset":
|
obj.Tileset.push(node);
|
break;
|
case "TMS":
|
obj.TMS.push(node);
|
break;
|
case "Mpt":
|
obj.Mpt.push(node);
|
break;
|
case "DEM":
|
obj.DEM.push(node);
|
break;
|
}
|
}
|
|
if (obj.DEM.length) this.setChangeDEM(obj.DEM, checked);
|
if (obj.TMS.length) this.setChangeTMS(obj.TMS, checked);
|
if (obj.Mpt.length) this.setChangeMpt(obj.Mpt, checked);
|
if (obj.Tileset.length) this.setChangeTileset(obj.Tileset, checked);
|
if (obj.WMS.length) this.setChangeWMS(obj.WMS, checked);
|
},
|
// 获取子节点
|
getNodes (data, arr) {
|
if (data.children) {
|
for (let i = 0, c = data.children.length; i < c; i++) {
|
let node = data.children[i];
|
if (node.children) {
|
this.getNodes(node, arr)
|
} else {
|
arr.push(node);
|
}
|
}
|
} else {
|
arr.push(data);
|
}
|
},
|
// 获取节点ID
|
getCheckNodesIds () {
|
let nodes = this.$refs.tree.getCheckedNodes();
|
let ids = [];
|
for (let i in nodes) {
|
ids.push(nodes[i].id);
|
}
|
|
return ids;
|
},
|
// 切换WMS服务
|
setChangeWMS (layers, checked) {
|
let value = this.$refs.tree.getCheckedNodes();
|
this.$bus.$emit("showMenuLayer", value);
|
},
|
// 切换Tileset
|
setChangeTileset (layers, checked) {
|
let ids = this.getCheckNodesIds(), arr = [];
|
for (let k in layers) {
|
let layer = layers[k];
|
if (ids.indexOf(layer.id) > -1) {
|
arr.push(layer);
|
continue;
|
}
|
|
for (let j in Viewer.scene.primitives._primitives) {
|
if (Viewer.scene.primitives._primitives[j].id == layer.cnName) {
|
Viewer.scene.primitives.remove(Viewer.scene.primitives._primitives[j]);
|
break;
|
}
|
}
|
|
let list = this.$store.state.setAlphaList;
|
for (let i = 0; i < list.length; i++) {
|
if (list[i].name == layer.cnName) {
|
list.splice(i, 1);
|
}
|
}
|
}
|
|
if (arr.length) this.addTilesetLayers(arr);
|
},
|
// 添加Tileset图层
|
addTilesetLayers (layers) {
|
for (let i in layers) {
|
let res = layers[i];
|
let url = res.url.indexOf("{host}") > -1 ? res.url.replace("{host}", iisHost) : modelUrl + "/" + res.url;
|
|
let tileset = Viewer.scene.primitives.add(
|
new Cesium.Cesium3DTileset({
|
name: res.cnName,
|
url: url,
|
skipLevelOfDetail: true, // 在遍历时候跳过详情：false
|
baseScreenSpaceError: 1024,
|
maximumScreenSpaceError: url.indexOf("/pnts/") > -1 ? 16 : 64, // 最大屏幕空间错误：16，数值加大能让最终成像变模糊
|
skipScreenSpaceErrorFactor: 16,
|
skipLevels: 1,
|
immediatelyLoadDesiredLevelOfDetail: false,
|
loadSiblings: true, // 自动从中心开始超清化模型：false
|
cullWithChildrenBounds: true, // 使用子项边界体积的并集来剔除图块：true
|
cullRequestsWhileMoving: true,
|
cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除：60
|
preloadWhenHidden: true,
|
preferLeaves: true, // 预装子节点：false
|
maximumMemoryUsage: 768, // 内存分配变小有利于内存回收，提升性能体验
|
progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊
|
dynamicScreenSpaceErrorDensity: 0.5, // 数值加大，能让周边加载变快
|
dynamicScreenSpaceErrorFactor: 2, // 动态屏幕空间误差的系数
|
dynamicScreenSpaceError: true, // 减少离相机较远的屏幕空间错误：false，全屏加载完之后才清晰化房屋
|
})
|
);
|
tileset.readyPromise.then((tileset) => {
|
tileset.id = res.cnName;
|
tileset.layerId = res.id;
|
tileset.pubid = res.pubid;
|
|
if (res.serveType != '3DML') {
|
// Cesium.Matrix4.equals(a,b) 判断矩阵是否相等，整个根节点模型矩阵，该tileSet=>世界坐标系，单位矩阵对角线值为1.0的4*4矩阵
|
if (!Cesium.Matrix4.equals(tileset.root.transform, Cesium.Matrix4.IDENTITY)) {
|
// 获取模型的世界坐标(笛卡尔)，Cesium.Matrix4.getTranslation 通过仿射变换矩阵获取该tileSet的世界坐标
|
const transformCenter = Cesium.Matrix4.getTranslation(tileset.root.transform, new Cesium.Cartesian3());
|
// 将笛卡尔坐标转换为WGS84经纬度坐标（模型的）
|
const transformCartographic = Cesium.Cartographic.fromCartesian(transformCenter);
|
// 将笛卡尔坐标转换为WGS84经纬度坐标（截面的）
|
const boundingSphereCartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
|
const height = boundingSphereCartographic.height - transformCartographic.height;
|
// 从一个Cartesian3对象生成Matrix4变换矩阵（裁切面的）
|
window.modelHeight = height;
|
} else {
|
window.modelHeight = 0;
|
}
|
this.setTilesetArgs(tileset, res);
|
}
|
});
|
}
|
},
|
// 切换TMS
|
setChangeTMS (layers, checked) {
|
let ids = this.getCheckNodesIds(), arr = [];
|
for (let j in layers) {
|
let layer = layers[j];
|
if (ids.indexOf(layer.id) > -1) {
|
arr.push(layer);
|
continue;
|
}
|
|
for (let i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
|
if (window.Viewer.imageryLayers._layers[i].name == layer.cnName) {
|
window.Viewer.imageryLayers.remove(window.Viewer.imageryLayers._layers[i]);
|
break;
|
}
|
}
|
}
|
|
if (arr.length) this.addTMSLayers(arr);
|
},
|
// 添加TMS图层
|
addTMSLayers (layers) {
|
for (let i in layers) {
|
let res = layers[i];
|
res.url = res.url.indexOf("{host}") > -1 ? res.url.replace("{host}", iisHost) : res.url;
|
|
if (res.pubid) {
|
this.setTMSLayerByPubid(res);
|
continue;
|
}
|
|
let layer = Viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
|
url: res.url,
|
maximumLevel: 22,
|
enablePickFeatures: false
|
}), 1);
|
layer.id = res.id;
|
layer.name = res.cnName;
|
}
|
},
|
// 切换Mpt
|
setChangeMpt (layers, checked) {
|
let ids = this.getCheckNodesIds(), arr = [];
|
for (let j in layers) {
|
let layer = layers[j];
|
if (ids.indexOf(layer.id) != -1) {
|
arr.push(layer);
|
continue;
|
}
|
|
for (let i in this.mptLayer) {
|
if (this.mptLayer[i].treeobj.name == layer.cnName) {
|
this.mptLayer[i].deleteObject();
|
this.mptLayer.splice(i, 1);
|
}
|
}
|
}
|
|
if (arr.length) this.addMptLayers(arr);
|
},
|
// 添加Mpt图层
|
addMptLayers (layers) {
|
for (let i in layers) {
|
let res = layers[i];
|
if (res.url.indexOf("{host}") > -1) res.url = res.url.replace("{host}", iisHost);
|
|
let urls = res.url.split(';');
|
var ops = {
|
url: urls[0],
|
layers: urls[1]
|
};
|
if (res && res.json) {
|
var rs = JSON.parse(res.json);
|
ops.rectangle = Cesium.Rectangle.fromDegrees(rs.west, rs.south, rs.east, rs.north);
|
}
|
|
let layer = sgworld.Creator.createImageryProvider(res.cnName, "wms", ops, "0", undefined, true, "");
|
this.mptLayer.push(layer);
|
}
|
},
|
// 切换DEM
|
setChangeDEM (layers, checked) {
|
let ids = this.getCheckNodesIds(), arr = [];
|
for (let i in layers) {
|
let layer = layers[i];
|
if (ids.indexOf(layer.id) != -1) {
|
arr.push(layer.url);
|
continue;
|
}
|
}
|
|
let url = arr.length ? arr[arr.length - 1] : null;
|
this.addDEMLayers(url, null == url);
|
},
|
// 添加DEM图层
|
addDEMLayers (url, useSG) {
|
if (useSG) {
|
if (Viewer.terrainProvider._isMPT) return;
|
|
let option = {
|
url: window.sceneConfig.SGUrl,
|
layerName: window.sceneConfig.mptName,
|
requestVertexNormals: true
|
};
|
sgworld.Creator.sfsterrainprovider("", option, "", true, "");
|
return;
|
}
|
|
if (url.indexOf("{host}") > -1) url = url.replace("{host}", iisHost);
|
Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
|
url: url,
|
requestVertexNormals: true
|
});
|
},
|
// 设置Tileset参数
|
async setTilesetArgs (tileset, res) {
|
if (res.serveType == '3DML' || !res.pubid) {
|
this.setTilesetHeigth(tileset, parseFloat(res.elev));
|
return;
|
}
|
|
const data = await comprehensive_selectPubById({ id: res.pubid })
|
if (data.code == 200 && data.result.json) this.setTilesetCoord(tileset, data.result.json);
|
},
|
// 设置Tileset高度
|
setTilesetHeigth (tileset, height) {
|
//3dtile模型的边界球体
|
let boundingSphere = tileset.boundingSphere;
|
//迪卡尔空间直角坐标=>地理坐标（弧度制）
|
let cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center);
|
//地理坐标（弧度制）=>迪卡尔空间直角坐标
|
let Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height);
|
let Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, height);
|
//获得地面和offset的转换
|
let translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());
|
//修改模型矩阵
|
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
|
// Viewer.flyTo(tileset);
|
},
|
// 设置Tileset坐标
|
setTilesetCoord (tileset, json) {
|
let vm = JSON.parse(json);
|
let pos = Cesium.Cartesian3.fromDegrees(vm.lon, vm.lat, vm.height);
|
let converter = Cesium.Transforms.eastNorthUpToFixedFrame;
|
let hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(vm.yaw), 0, 0);
|
let matrix = Cesium.Transforms.headingPitchRollToFixedFrame(pos, hpr, Cesium.Ellipsoid.WGS84, converter);
|
tileset._root.transform = matrix;
|
// Viewer.flyTo(tileset);
|
},
|
// 根据Pubid设置TMS图层
|
async setTMSLayerByPubid (res) {
|
const data = await comprehensive_selectPubById({ id: res.pubid });
|
if (!data || data.code != 200) return;
|
|
let provider = data.result.max > 0 ?
|
new Cesium.UrlTemplateImageryProvider({
|
url: res.url,
|
minimumLevel: data.result.min,
|
maximumLevel: data.result.max,
|
enablePickFeatures: false
|
}) :
|
new Cesium.UrlTemplateImageryProvider({
|
url: res.url,
|
minimumLevel: data.result.min,
|
enablePickFeatures: false
|
});
|
|
let layer = Viewer.imageryLayers.addImageryProvider(provider, 1);
|
layer.name = res.cnName;
|
|
// if (data.result.geom) {
|
// let wkt = this.$wkt.parse(data.result.geom);
|
// Viewer.camera.flyTo({
|
// destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], 2000)
|
// });
|
// }
|
},
|
// 切换项目
|
prjChanged (code) {
|
|
this.$store.state.pigCode = code;
|
|
//if (code) {
|
this.isBusy = true;
|
let checkedLayers = this.getCheckedLayersByCode(code);
|
|
let checkedKeys = [];
|
for (let i in checkedLayers) {
|
checkedKeys.push(checkedLayers[i].id);
|
}
|
|
this.treeData = this.getNewTreeData(code);
|
this.$store.state.treeData = this.treeData;
|
this.$refs.tree.setCheckedKeys(checkedKeys);
|
sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers));
|
this.isBusy = false;
|
//}
|
|
for (let i = 0, c = this.treeData.length; i < c; i++) {
|
this.handleCheckChange(this.treeData[i], true);
|
}
|
},
|
// 根据项目编码获取选中图层
|
getCheckedLayersByCode (code) {
|
let layers = [];
|
for (let i = 0, c = this.treeData.length; i < c; i++) {
|
this.getCheckedChildLayersByCode(this.treeData[i], code, layers, false);
|
}
|
|
return layers;
|
},
|
// 根据项目编码获取选中子图层
|
getCheckedChildLayersByCode (data, code, layers, isPrj) {
|
if (data.children && data.children.length) {
|
for (let i = 0, c = data.children.length; i < c; i++) {
|
let layer = data.children[i];
|
if (layer.children && layer.children.length) {
|
let flag = layer.type == 1 && layer.isProject && layer.enName == code;
|
this.getCheckedChildLayersByCode(layer, code, layers, flag);
|
continue;
|
}
|
|
//if (layer.type == 2 && (layer.isProject || isPrj)) {
|
// layers.push(layer);
|
//}
|
if (code) {
|
if (layer.type == 2 && (layer.isProject || isPrj)) layers.push(layer);
|
} else {
|
if (layer.isShow) layers.push(layer);
|
}
|
}
|
return;
|
}
|
|
if (data.type == 2 && (data.isProject || isPrj)) {
|
layers.push(data);
|
}
|
},
|
// 获取新树数据
|
getNewTreeData (code) {
|
let data = JSON.parse(JSON.stringify(this.sourceData));
|
if (!code) return data;
|
|
this.setSubTreeData(data, code);
|
this.rmPrjTreeData(data, code);
|
|
return data;
|
},
|
// 设置树数据子节点
|
setSubTreeData (data, code) {
|
let j = 0;
|
while (j < data.length) {
|
let d = data[j];
|
if (d.type == 1 && d.isProject && d.enName != code) {
|
data.splice(j, 1);
|
continue;
|
}
|
|
j++;
|
}
|
|
for (let i = 0, c = data.length; i < c; i++) {
|
if (data[i].children && data[i].children.length) {
|
this.setSubTreeData(data[i].children, code);
|
}
|
}
|
},
|
// 移除项目树数据
|
rmPrjTreeData (data, code) {
|
/*let j = 0;
|
while (j < data.length) {
|
let d = data[j];
|
if (d.type == 1 && d.isProject && d.enName == code) {
|
data.splice(j, 1);
|
data.concat(d.children);
|
continue;
|
}
|
|
j++;
|
}
|
|
for (let i = 0, c = data.length; i < c; i++) {
|
if (data[i].children && data[i].children.length) {
|
this.rmPrjTreeData(data[i].children, code);
|
}
|
}*/
|
|
let i = 0;
|
while (i < data.length) {
|
let d = data[i];
|
if (!d.children) {
|
i++;
|
continue;
|
}
|
if (!d.children.length) {
|
data.splice(i, 1);
|
continue;
|
}
|
|
let j = 0;
|
while (j < d.children.length) {
|
let e = d.children[j];
|
if (e.type == 1 && e.isProject && e.enName == code) {
|
d.children.splice(j, 1);
|
if (e.children && e.children.length) d.children = d.children.concat(e.children);
|
continue;
|
}
|
|
j++;
|
}
|
|
i++;
|
}
|
|
for (let i = 0, c = data.length; i < c; i++) {
|
if (data[i].children && data[i].children.length) {
|
this.rmPrjTreeData(data[i].children, code);
|
}
|
}
|
},
|
// 添加WFS图层 *
|
addWFSLayers (res) {
|
let url =
|
res.resource +
|
"?service=WFS&version=1.0.0&request=GetFeature&typeName=" +
|
res.url +
|
"&outputFormat=application%2Fjson";
|
$.ajax({
|
url: url,
|
cache: false,
|
async: true,
|
success: function (data) {
|
let datasource = Cesium.GeoJsonDataSource.load(data, {
|
stroke: Cesium.Color.YELLOW,
|
fill: Cesium.Color.YELLOW.withAlpha(0.1),
|
alpha: 0.1,
|
strokeWidth: 8,
|
clampToGround: true, //是否贴地
|
});
|
datasource.then((data) => {
|
data.name = res.cnName;
|
window.Viewer.dataSources.add(data);
|
});
|
},
|
error: function (data) {
|
console.log("error");
|
},
|
});
|
let vectorLayer = new VectorLayer({
|
name: res.cnName,
|
source: new VectorSource({
|
url: url,
|
format: new GeoJSON(),
|
}),
|
});
|
window.map.addLayer(vectorLayer);
|
}
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
/* 点击节点时的选中颜色 */
|
.tree-container /deep/.el-tree-node.is-current>.el-tree-node__content {
|
color: #409eff !important;
|
}
|
|
.tree-container /deep/ .el-tree-node__expand-icon.expanded {
|
-webkit-transform: rotate(90deg);
|
transform: rotate(90deg);
|
}
|
|
.tree-container /deep/ .el-icon-caret-right:before {
|
content: "\e791";
|
font-size: 18px;
|
}
|
|
.tree-container /deep/ .el-tree-node__expand-icon {
|
margin-left: 1px;
|
padding: 0px;
|
}
|
|
.tree-container /deep/ .el-tree-node__expand-icon.is-leaf {
|
margin-left: 0px;
|
}
|
|
.tree-container /deep/ .el-tree-node {
|
position: relative;
|
padding-left: 10px;
|
}
|
|
.tree-container /deep/ .el-tree-node__children {
|
padding-left: 16px;
|
}
|
|
.tree-container /deep/ .el-tree>.el-tree-node:before {
|
border-left: none;
|
}
|
|
.tree-container /deep/ .el-tree>.el-tree-node:after {
|
border-top: none;
|
}
|
|
.tree-container /deep/ .el-tree>.el-tree-node:before {
|
border-left: none;
|
}
|
|
.tree-container /deep/ .el-tree>.el-tree-node:after {
|
border-top: none;
|
}
|
|
.tree-container /deep/ .el-tree-node:before {
|
content: "";
|
left: 10px;
|
position: absolute;
|
right: auto;
|
border-width: 1px;
|
}
|
|
.tree-container /deep/ .el-tree-node:after {
|
content: "";
|
left: 10px;
|
position: absolute;
|
right: auto;
|
border-width: 1px;
|
}
|
|
.tree-container /deep/ .el-tree-node:before {
|
border-left: 1px dashed #ccc;
|
bottom: 0px;
|
height: 100%;
|
top: -19px;
|
width: 1px;
|
}
|
|
.tree-container /deep/ .el-tree-node:after {
|
border-top: 1px dashed #ccc;
|
height: 25px;
|
top: 20px;
|
width: 20px;
|
}
|
|
.el-tree-node :last-child:before {
|
height: 40px;
|
}
|
|
.tree-container {
|
margin: 10px;
|
}
|
|
.tree-container /deep/ .el-tree .el-tree-node {
|
position: relative;
|
}
|
|
.tree-container /deep/ .el-tree-node .el-tree-node__content {
|
height: 34px;
|
padding-left: 0px !important;
|
border: none;
|
}
|
|
.tree-container /deep/ .el-tree-node .el-tree-node__content::before {
|
border-left: 1px dashed #ccc;
|
height: 100%;
|
top: 0;
|
width: 1px;
|
margin-left: 1px;
|
margin-top: 0px;
|
z-index: 8;
|
}
|
|
.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::before {
|
border-left: 0px dashed #ccc;
|
height: 100%;
|
top: 0;
|
width: 1px;
|
margin-left: 1px;
|
margin-top: 0px;
|
z-index: 8;
|
}
|
|
.tree-container /deep/ .el-tree-node .el-tree-node__content::after {
|
border-top: 1px dashed #ccc;
|
height: 1px;
|
top: 18px;
|
width: 13px;
|
margin-left: 1px;
|
z-index: 8;
|
}
|
|
.tree-container /deep/ .el-tree-node {
|
.is-leaf+.el-checkbox .el-checkbox__inner {
|
display: inline-block;
|
}
|
|
.el-checkbox .el-checkbox__inner {
|
//display: none;
|
}
|
}
|
|
.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::after {
|
border-top: 0px dashed #ccc;
|
}
|
|
.tree-container .el-tree-node .el-tree-node__content::before,
|
.tree-container .el-tree-node .el-tree-node__content::after {
|
content: "";
|
position: absolute;
|
right: auto;
|
}
|
|
/deep/.el-table__placeholder {
|
padding-left: 8px;
|
}
|
|
/deep/.el-card__body {
|
padding: 10px !important;
|
|
>div {
|
padding-bottom: 10px;
|
border-bottom: 1px solid #ccc;
|
|
&:hover {
|
color: #409eff;
|
}
|
}
|
}
|
|
/deep/ .el-form .el-form-item {
|
padding-right: 0px !important;
|
}
|
|
/deep/ .el-form-item {
|
margin-bottom: 10px !important;
|
}
|
|
.text {
|
font-size: 14px;
|
}
|
|
.el-tree {
|
width: 100%;
|
margin-top: 10px;
|
}
|
|
.search {
|
width: 100%;
|
}
|
|
.item {
|
padding: 18px 0;
|
}
|
|
.add {
|
cursor: pointer;
|
margin-top: 10px;
|
}
|
|
.delete {
|
margin: 10px 0;
|
cursor: pointer;
|
}
|
|
.edit {
|
margin-bottom: 10px;
|
cursor: pointer;
|
}
|
|
.search {
|
cursor: pointer;
|
}
|
|
.box-card {
|
position: fixed;
|
display: block;
|
z-index: 10000;
|
padding: 0px 0px;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
</style>
|
