| | |
| | | <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="setproChange" |
| | | @change="prjChanged" |
| | | placeholder="请选择项目" |
| | | > |
| | | <el-option |
| | | v-for="item in optionts" |
| | | v-for="item in menus" |
| | | :key="item.code" |
| | | :label="item.name" |
| | | :value="item.code" |
| | |
| | | > |
| | | <span v-show="!data.isEdit"> |
| | | <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{ |
| | | node.label |
| | | }}</span> |
| | | node.label |
| | | }}</span> |
| | | </span> |
| | | <span v-show="data.isEdit"> |
| | | <el-input |
| | |
| | | autofocus |
| | | v-model="data.label" |
| | | :ref="'slotTreeInput' + data.id" |
| | | @blur.stop="NodeBlur(node, data)" |
| | | @keydown.native.enter="NodeBlur(node, data)" |
| | | @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 |
| | | @click="addSameLevelNode()" |
| | | v-show="firstLevel" |
| | | > |
| | | <i class="el-icon-plus"></i> 添加图层组 |
| | | </div> --> |
| | | <!-- <div |
| | | class="add" |
| | | @click="addChildNode()" |
| | | > |
| | | <i class="el-icon-plus"></i> 添加图层 |
| | | </div> --> |
| | | <!-- <div |
| | | class="delete" |
| | | @click="deleteNode()" |
| | | > |
| | | <i class="el-icon-delete"></i> 删除 |
| | | </div> --> |
| | | <!-- <div |
| | | class="edit" |
| | | @click="editNode()" |
| | | > |
| | | <i class="el-icon-edit"></i> 重命名 |
| | | </div> --> |
| | | <div |
| | | class="edit" |
| | | @click="showLayerAttribute()" |
| | | v-if="!showlocal && !shwoHistogram" |
| | | v-show="!firstLevel" |
| | | v-if="showProp && !shwoHistogram" |
| | | > |
| | | <i class="el-icon-tickets"></i> 属性 |
| | | </div> |
| | | <div |
| | | class="edit" |
| | | @click="positioning()" |
| | | v-if="showlocal" |
| | | v-if="showLocal" |
| | | > |
| | | <i class="el-icon-tickets"></i> 定位 |
| | | </div> |
| | | <div |
| | | class="edit" |
| | | @click="pellucidity()" |
| | | v-if="showopaque" |
| | | v-if="showOpacity" |
| | | > |
| | | <i class="el-icon-tickets"></i> 透明度 |
| | | </div> |
| | |
| | | > |
| | | <i class="el-icon-tickets"></i> 钻孔柱状图 |
| | | </div> |
| | | <!-- <div |
| | | <div |
| | | class="edit" |
| | | v-show="showModelAttach" |
| | | @click="modelAttach()" |
| | | v-show="shwoTileDown" |
| | | @click="tileDownload()" |
| | | > |
| | | <i class="el-icon-tickets"></i> 模型属性 |
| | | </div> --> |
| | | <!-- <div |
| | | class="edit" |
| | | @click="menuMoveF( 'up')" |
| | | > |
| | | <i class="el-icon-top"></i> 上移 |
| | | <i class="el-icon-download"></i> 瓦片下载 |
| | | </div> |
| | | <div |
| | | class="edit" |
| | | @click="menuMoveF( 'down')" |
| | | v-show="shwoAnnex" |
| | | @click="annexDownload()" |
| | | > |
| | | <i class="el-icon-bottom"></i> 下移 |
| | | </div> --> |
| | | <i class="el-icon-tickets"></i> 附件 |
| | | </div> |
| | | </el-card> |
| | | <el-dialog |
| | | :title="appendNodetitle" |
| | | :visible.sync="dialogVisible" |
| | | width="30%" |
| | | top="20vh" |
| | | :modal="false" |
| | | :before-close="handleClose" |
| | | > |
| | | <el-form |
| | | ref="form" |
| | | :model="addFormServer" |
| | | label-width="100px" |
| | | > |
| | | <el-form-item label="服务类型"> |
| | | <!-- <el-input v-model="addFormServer.type"></el-input> --> |
| | | <el-select |
| | | style="width: 100%" |
| | | :popper-append-to-body="false" |
| | | v-model="addFormServer.serveType" |
| | | placeholder="请选择" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="图层名称"> |
| | | <el-input v-model="addFormServer.cnName"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="服务名称"> |
| | | <el-input v-model="addFormServer.url"></el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="服务地址"> |
| | | <el-input v-model="addFormServer.resource"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="透明度"> |
| | | <el-slider v-model="addFormServer.opacity"></el-slider> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span |
| | | slot="footer" |
| | | class="dialog-footer" |
| | | > |
| | | <el-button |
| | | type="primary" |
| | | @click="setAddServer" |
| | | >确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { image_layer } from "../../assets/js/index.js"; |
| | | import ImageWMS from "ol/source/ImageWMS"; |
| | | import Image from "ol/layer/Image"; |
| | | import GeoJSON from "ol/format/GeoJSON.js"; |
| | | import Map from "ol/Map.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"; |
| | | |
| | | import View from "ol/View.js"; |
| | | import { Fill, Stroke, Style } from "ol/style.js"; |
| | | import { |
| | | perms_selectLayers, inquiry_selectDomains, comprehensive_selectPubById, |
| | | project_selectDirAll, project_selectByDirid, dataQuerySelectWktById |
| | | } from "../../api/api.js"; |
| | | export default { |
| | | name: "tree", |
| | | components: { queryinfo }, |
| | | data() { |
| | | return { |
| | | shwoHistogram: false, |
| | | showlocal: false, |
| | | showopaque: false, |
| | | eleId: "", |
| | | isShow: false, |
| | | currentData: "", |
| | | currentNode: "", |
| | | menuVisible: false, |
| | | firstLevel: false, |
| | | filterText: "", |
| | | appendNodetitle: "", |
| | | maxexpandId: 4, |
| | | rightClickMenuStyle: {}, |
| | | handleTreeCheck: [], |
| | | dialogVisible: false, |
| | | showModelAttach: false, |
| | | addFormServer: { |
| | | opacity: 100, |
| | | serveType: "WMS", |
| | | type: 2, |
| | | }, |
| | | isBusy: false, // 正忙 |
| | | lastPrjCode: "", // 最后选择项目编码 |
| | | showProp: false, // 属性 |
| | | shwoHistogram: false, // 钻孔柱状图 |
| | | showLocal: false, // 定位 |
| | | showOpacity: false, // 不透明度 |
| | | shwoTileDown: false, // 瓦片下载 |
| | | menuVisible: false, // 菜单 |
| | | shwoAnnex: 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: [], |
| | | defaultProps: { |
| | | treeData: [], // 树数据 |
| | | sourceData: [], // 源数据 |
| | | defaultProps: { // 默认属性值 |
| | | children: "children", |
| | | label: "cnName", |
| | | }, |
| | | options: [ |
| | | { |
| | | value: "WMS", |
| | | label: "WMS", |
| | | }, |
| | | { |
| | | value: "WFS", |
| | | label: "WFS", |
| | | }, |
| | | ], |
| | | childOption: [], |
| | | mptLayer: [], |
| | | optionts: [], |
| | | proValue: null, |
| | | mptLayer: [], // Mpt图层 |
| | | menus: [] // 菜单项 |
| | | }; |
| | | }, |
| | | methods: { |
| | | |
| | | //转孔柱状图 |
| | | async histogram() { |
| | | this.menuVisible = false |
| | | var layer = this.currentData.enName.replaceAll("_", ""); |
| | | this.$store.state.mapSpaceQueryLayer = layer; |
| | | this.$store.state.mapPopBoxFlag = "2"; |
| | | this.$store.state.showPopBoxFlag = true; |
| | | }, |
| | | modelAttach() { |
| | | this.menuVisible = false; |
| | | this.$store.state.attachinfo = this.currentData; |
| | | this.$store.state.attachModel = true; |
| | | |
| | | |
| | | }, |
| | | NodeBlur(Node, data) { |
| | | if (data.label.length === 0) { |
| | | this.$message.error("菜单名不可为空!"); |
| | | return false; |
| | | } else { |
| | | if (data.isEdit) { |
| | | this.$set(data, "isEdit", false); |
| | | } |
| | | this.$nextTick(() => { |
| | | this.$refs["slotTreeInput" + data.id].$refs.input.focus(); |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | |
| | | allowDrop(draggingNode, dropNode, type) { |
| | | if (dropNode.data.label === "二级 3-1") { |
| | | return type !== "inner"; |
| | | } else { |
| | | return true; |
| | | } |
| | | }, |
| | | allowDrag(draggingNode) { |
| | | return draggingNode.data.label.indexOf("三级 3-2-2") === -1; |
| | | }, |
| | | // 鼠标右击事件 |
| | | rightClick(event, object, Node, element) { |
| | | if (object.type == 1) { |
| | | return |
| | | } |
| | | this.currentData = object; |
| | | this.currentNode = Node; |
| | | |
| | | this.$store.state.propertiesName = this.currentData; |
| | | this.showModelAttach = false; |
| | | this.shwoTitle = false; |
| | | this.menuVisible = true; |
| | | |
| | | if (this.currentData.serveType == 'TMS') { |
| | | this.shwoTitle = true |
| | | } else if (this.currentData.serveType == "Tileset" || this.currentData.serveType == "3DML") { |
| | | this.showModelAttach = true; |
| | | } else if (this.currentData.serveType == "DEM" || this.currentData.serveType == "DOM" || this.currentData.serveType == "MPT") { |
| | | this.menuVisible = false; |
| | | } |
| | | if (this.currentData.enName == "s_explorationpoint") { |
| | | this.shwoHistogram = true; |
| | | } else { |
| | | this.shwoHistogram = false; |
| | | } |
| | | |
| | | if (Node.data.children == null) { |
| | | this.firstLevel = false; |
| | | } else { |
| | | this.firstLevel = true; |
| | | } |
| | | if (Node.data.children == null && Node.data.serveType == "Tileset" || Node.data.serveType == "3DML") { |
| | | this.showlocal = true; |
| | | this.showopaque = true; |
| | | } else if (Node.data.children == null && Node.data.serveType == "TMS") { |
| | | this.showlocal = true; |
| | | this.showopaque = false; |
| | | } else if (Node.data.children == null && Node.data.serveType != "Tileset") { |
| | | this.showlocal = false; |
| | | this.showopaque = false; |
| | | } |
| | | |
| | | |
| | | this.$refs.card.$el.style.left = event.pageX + 20 + "px"; |
| | | this.$refs.card.$el.style.top = event.pageY + "px"; |
| | | }, |
| | | // 鼠标左击事件 |
| | | handleLeftclick(data, node) { |
| | | this.foo(); |
| | | if (node.checked == true) { |
| | | for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) { |
| | | var val_id = |
| | | window.Viewer.imageryLayers._layers[i].imageryProvider.name; |
| | | if (val_id == data.label) { |
| | | const img_layer = window.Viewer.imageryLayers._layers[i]; |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | // 取消鼠标监听事件 菜单栏 |
| | | foo() { |
| | | this.menuVisible = false; |
| | | // 要及时关掉监听,不关掉的是一个坑,不信你试试,虽然前台显示的时候没有啥毛病,加一个alert你就知道了 |
| | | document.removeEventListener("click", this.foo); |
| | | }, |
| | | // 增加同级节点事件 |
| | | addSameLevelNode() { |
| | | this.menuVisible = false |
| | | this.foo(); |
| | | if (this.currentNode.level == 2) { |
| | | this.appendNodetitle = this.currentData.label; |
| | | this.dialogVisible = true; |
| | | } else { |
| | | let id = Math.ceil(Math.random() * 100); |
| | | var data = { id: id, label: "新增节点" }; |
| | | this.$refs.tree.append(data, this.currentNode.parent); |
| | | } |
| | | }, |
| | | // 增加子级节点事件 |
| | | addChildNode() { |
| | | this.foo(); |
| | | this.menuVisible = false |
| | | // if (this.currentNode.level >= 2) { |
| | | // this.$message.error("最多只支两级!"); |
| | | // return false; |
| | | // } |
| | | this.appendNodetitle = this.currentData.label; |
| | | this.dialogVisible = true; |
| | | }, |
| | | handleClose() { |
| | | this.dialogVisible = false; |
| | | this.addFormServer = { |
| | | opacity: 100, |
| | | serveType: "WMS", |
| | | type: 2, |
| | | }; |
| | | }, |
| | | setAddServer() { |
| | | var val = this.currentNode; |
| | | if (this.currentNode.level == 2) { |
| | | val = this.currentNode.parent; |
| | | } |
| | | var data = this.addFormServer; |
| | | data.id = Math.ceil(Math.random() * 100); |
| | | this.$refs.tree.append(data, val); |
| | | this.handleClose(); |
| | | }, |
| | | // 删除节点 |
| | | deleteNode() { |
| | | this.foo(); |
| | | this.menuVisible = false |
| | | var label = this.currentNode.data.cnName; |
| | | if (this.currentNode.data.serveType == "WMS") { |
| | | var value = this.$refs.tree.getCheckedNodes(); |
| | | |
| | | this.$bus.$emit("showMenuLayer", value); |
| | | |
| | | } else if (this.currentNode.data.serveType == "WFS") { |
| | | for (var i in window.Viewer.dataSources._dataSources) { |
| | | if (window.Viewer.dataSources._dataSources[i].name == label) { |
| | | window.Viewer.dataSources.remove( |
| | | window.Viewer.dataSources._dataSources[i] |
| | | ); |
| | | } |
| | | } |
| | | } else if (this.currentNode.data.serveType == "Tileset") { |
| | | for (var i in Viewer.scene.primitives._primitives) { |
| | | // Viewer.scene.primitives._primitives[i].show = checked; |
| | | if (Viewer.scene.primitives._primitives[i].id == label) { |
| | | Viewer.scene.primitives.remove( |
| | | Viewer.scene.primitives._primitives[i] |
| | | ); |
| | | } |
| | | } |
| | | var list = this.$store.state.setAlphaList; |
| | | for (var i = 0; i < list.length; i++) { |
| | | if (list[i].name == label) { |
| | | list.splice(i, 1) |
| | | } |
| | | } |
| | | |
| | | } |
| | | var layers_ol = window.map.getAllLayers(); |
| | | for (var i in layers_ol) { |
| | | var layerOl = layers_ol[i]; |
| | | if (layerOl.values_.name == label) { |
| | | window.map.removeLayer(layerOl); //显示图层 |
| | | } |
| | | } |
| | | |
| | | this.$refs.tree.remove(this.currentNode); |
| | | }, |
| | | //属性显示 |
| | | showLayerAttribute(data) { |
| | | this.foo(); |
| | | this.menuVisible = false |
| | | this.currentData = data ? data : this.currentData; |
| | | var layer = this.currentData.enName.replaceAll("_", ""); |
| | | this.$store.state.mapSpaceQueryLayer = layer; |
| | | this.$store.state.showPopBoxFlag = true; |
| | | this.$store.state.mapPopBoxFlag = "2"; |
| | | |
| | | |
| | | }, |
| | | //模型设置透明度 |
| | | pellucidity() { |
| | | this.foo(); |
| | | this.menuVisible = false |
| | | var tile = this.currentData |
| | | for (var j in Viewer.scene.primitives._primitives) { |
| | | if (Viewer.scene.primitives._primitives[j].id == tile.cnName) { |
| | | this.$store.state.setAlphaDity = this.currentData; |
| | | this.$bus.$emit("showPellucidity", true); |
| | | break; |
| | | } |
| | | } |
| | | }, |
| | | |
| | | |
| | | |
| | | //模型定位 |
| | | async positioning() { |
| | | this.menuVisible = false |
| | | if (this.currentData.serveType == 'Tileset' || this.currentData.serveType == '3DML') { |
| | | for (var i in Viewer.scene.primitives._primitives) { |
| | | if ( |
| | | Viewer.scene.primitives._primitives[i].id == this.currentData.cnName |
| | | ) { |
| | | Viewer.flyTo(Viewer.scene.primitives._primitives[i]); |
| | | } |
| | | } |
| | | } else if (this.currentData.serveType == 'TMS' && this.currentData.pubid) { |
| | | const data = await comprehensive_selectPubById({ id: this.currentData.pubid }) |
| | | if (data.result.geom) { |
| | | var wkt = this.$wkt.parse(data.result.geom); |
| | | Viewer.camera.flyTo({ |
| | | destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], 2000), |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | // 编辑节点 |
| | | editNode(data) { |
| | | this.foo(); |
| | | this.menuVisible = false |
| | | this.currentData = data ? data : this.currentData; |
| | | if (!this.currentData.isEdit) { |
| | | this.$set(this.currentData, "isEdit", true); |
| | | } |
| | | // 获取焦点 |
| | | this.$nextTick(() => { |
| | | this.$refs["slotTreeInput" + this.currentData.id].focus(); |
| | | }); |
| | | }, |
| | | |
| | | menuMoveF(type) { |
| | | // 将变动之前的node备份 |
| | | var node = this.currentNode; |
| | | var data = this.currentData; |
| | | let copyNode = this.currentNode; |
| | | |
| | | // copyNode.previousSibling = {...node. } |
| | | // copyNode.nextSibling = {...node.nextSibling} |
| | | // window.sessionStorage.setItem('menuNode',CircularJSON.stringify(copyNode)) |
| | | let nodeData = {}; |
| | | if (type === "up") { |
| | | // 上移 |
| | | if (node.previousSibling) { |
| | | // 删除原先的node |
| | | this.$refs.tree.remove(node.data); |
| | | // 拿到copy的node |
| | | // nodeData = CircularJSON.parse(window.sessionStorage.getItem('menuNode')) |
| | | // // 复制该node到指定位置(参数:1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node) |
| | | // this.$refs.tree.insertBefore(nodeData.data,nodeData.previousSibling.data) |
| | | window.sessionStorage.removeItem("menuNode"); |
| | | } else { |
| | | this.$message.warning("该菜单已经是当前层最上级"); |
| | | } |
| | | } else { |
| | | // 下移 |
| | | if (node.nextSibling) { |
| | | this.$refs.tree.remove(node.data); |
| | | nodeData = CircularJSON.parse( |
| | | window.sessionStorage.getItem("menuNode") |
| | | ); |
| | | // 参数:1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node |
| | | this.$refs.tree.insertAfter(nodeData.data, nodeData.nextSibling.data); |
| | | window.sessionStorage.removeItem("menuNode"); |
| | | } else { |
| | | this.$message.warning("该菜单已经是当前层最下级"); |
| | | } |
| | | } |
| | | }, |
| | | |
| | | handleDragStart(node, ev) { |
| | | console.log("drag start", node); |
| | | }, |
| | | handleDragEnter(draggingNode, dropNode, ev) { |
| | | console.log("tree drag enter: ", dropNode.label); |
| | | }, |
| | | handleDragLeave(draggingNode, dropNode, ev) { |
| | | console.log("tree drag leave: ", dropNode.label); |
| | | }, |
| | | handleDragOver(draggingNode, dropNode, ev) { |
| | | console.log("tree drag over: ", dropNode.label); |
| | | }, |
| | | handleDragEnd(draggingNode, dropNode, dropType, ev) { |
| | | console.log("tree drag end: ", dropNode && dropNode.label, dropType); |
| | | }, |
| | | handleDrop(draggingNode, dropNode, dropType, ev) { |
| | | console.log("tree drop: ", dropNode.label, dropType); |
| | | }, |
| | | handleCheckChange(data, checked, indeterminate) { |
| | | if (data.type == 1) { |
| | | this.childOption = []; |
| | | this.getchilds(data); |
| | | var listWMS = []; |
| | | var listWFS = []; |
| | | var listTileset = []; |
| | | var listTMS = []; |
| | | var listMpt = []; |
| | | for (var i in this.childOption) { |
| | | switch (this.childOption[i].serveType) { |
| | | case 'WMS': |
| | | listWMS.push(this.childOption[i]) |
| | | break; |
| | | case 'WFS': |
| | | listWFS.push(this.childOption[i]) |
| | | break; |
| | | case '3DML': |
| | | listTileset.push(this.childOption[i]) |
| | | break; |
| | | case 'Tileset': |
| | | listTileset.push(this.childOption[i]) |
| | | break; |
| | | case 'Mpt': |
| | | listMpt.push(this.childOption[i]) |
| | | break; |
| | | case 'TMS': |
| | | listTMS.push(this.childOption[i]) |
| | | break; |
| | | } |
| | | } |
| | | this.setChangeWMS(listWMS, checked); |
| | | this.setChangeWFS(listWFS, checked); |
| | | this.setChangeTileset(listTileset, checked); |
| | | this.setChangeTMS(listTMS, checked); |
| | | this.setChangeMpt(listMpt, checked); |
| | | } else if (data.type == 2) { |
| | | if (data.serveType == "WMS") { |
| | | this.setChangeWMS([data], checked); |
| | | } else if (data.serveType == "Tileset" || data.serveType == "3DML") { |
| | | this.setChangeTileset([data], checked); |
| | | } else if (data.serveType == "TMS") { |
| | | this.setChangeTMS([data], checked); |
| | | } else if (data.serveType == "Mpt") { |
| | | this.setChangeMpt([data], checked); |
| | | } |
| | | } |
| | | // if (data.type != 2) return; |
| | | |
| | | |
| | | |
| | | |
| | | // if (data.serveType == "WFS") { |
| | | // if (window.Viewer.dataSources._dataSources.length == 0) { |
| | | // this.setAddLayers(data); |
| | | // } else { |
| | | |
| | | // } |
| | | // } else if (data.serveType == "Tileset") { |
| | | |
| | | // if (Viewer.scene.primitives._primitives.length == 0) { |
| | | // this.setAddLayers(data); |
| | | // } else { |
| | | // var std = []; |
| | | // for (var i in Viewer.scene.primitives._primitives) { |
| | | // Viewer.scene.primitives._primitives[i].show = checked; |
| | | // if (Viewer.scene.primitives._primitives[i].id == data.cnName) { |
| | | // std.push(data.id); |
| | | // Viewer.flyTo(Viewer.scene.primitives._primitives[i]); |
| | | // } |
| | | // } |
| | | // } |
| | | // if (std.length == 0 && checked == true) { |
| | | // this.setAddLayers(data); |
| | | // } else { |
| | | // window.map.getLayers().getArray().forEach(item => { |
| | | // if (item.get("name") == data.cnName) { |
| | | // item.setVisible(checked); |
| | | |
| | | // } |
| | | // }); |
| | | // } |
| | | // } else if (data.serveType == "TMS") { |
| | | |
| | | // if (data.pubid) { |
| | | |
| | | // } else { |
| | | // var res; |
| | | // if (data.url.indexOf("{host}") != -1) { |
| | | // res = data.url.replace("{host}", iisHost); |
| | | // } else { |
| | | // res = data.url |
| | | // } |
| | | // var url = res.split(';') |
| | | |
| | | // window.sgworld.Creator.createImageryProvider('mpt影像', "wms", { |
| | | // url: url[0], |
| | | // layers: url[1] |
| | | // }, "0", undefined, true, ""); |
| | | // } |
| | | |
| | | // } |
| | | |
| | | |
| | | |
| | | |
| | | // var layers_ol = window.map.getAllLayers(); |
| | | // for (var i in layers_ol) { |
| | | // var layerOl = layers_ol[i]; |
| | | // if (layerOl.values_.name == data.label) { |
| | | // layerOl.setVisible(checked); //显示图层 |
| | | // } |
| | | // } |
| | | }, |
| | | setChangeWMS(result, checked) { |
| | | var value = this.$refs.tree.getCheckedNodes(); |
| | | this.$bus.$emit("showMenuLayer", value); |
| | | }, |
| | | setChangeWFS(result, checked) { |
| | | var value = this.$refs.tree.getCheckedNodes(); |
| | | var std = []; |
| | | for (var i in value) { |
| | | std.push(value[i].id) |
| | | } |
| | | for (var i in result) { |
| | | var tile = result[i] |
| | | if (std.indexOf(tile.id) != -1) { |
| | | this.setAddLayers(tile) |
| | | } else { |
| | | for (var i in window.Viewer.dataSources._dataSources) { |
| | | if (window.Viewer.dataSources._dataSources[i].name == tile.cnName) { |
| | | window.Viewer.dataSources.remove(window.Viewer.dataSources._dataSources[i]); |
| | | } |
| | | } |
| | | |
| | | var layers_ol = window.map.getAllLayers(); |
| | | for (var i in layers_ol) { |
| | | var layerOl = layers_ol[i]; |
| | | if (layerOl.values_.name == tile.cnName) { |
| | | window.map.removeLayer(layerOl) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | setChangeTileset(result, checked) { |
| | | var value = this.$refs.tree.getCheckedNodes(); |
| | | var std = []; |
| | | for (var i in value) { |
| | | std.push(value[i].id) |
| | | } |
| | | for (var i in result) { |
| | | var tile = result[i] |
| | | if (std.indexOf(tile.id) != -1) { |
| | | this.setAddLayers(tile) |
| | | } else { |
| | | for (var j in Viewer.scene.primitives._primitives) { |
| | | if (Viewer.scene.primitives._primitives[j].id == tile.cnName) { |
| | | Viewer.scene.primitives.remove(Viewer.scene.primitives._primitives[j]) |
| | | } |
| | | } |
| | | var list = this.$store.state.setAlphaList; |
| | | for (var i = 0; i < list.length; i++) { |
| | | if (list[i].name == tile.cnName) { |
| | | list.splice(i, 1) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | // if (checked.checkedKeys) { |
| | | // for (var i in result) { |
| | | // |
| | | // } |
| | | // } else { |
| | | |
| | | // for (var j in result) { |
| | | // console.log(result[j]) |
| | | // // |
| | | // } |
| | | // } |
| | | }, |
| | | setChangeMpt(result, checked) { |
| | | var value = this.$refs.tree.getCheckedNodes(); |
| | | var std = []; |
| | | for (var i in value) { |
| | | std.push(value[i].id) |
| | | } |
| | | for (var i in result) { |
| | | var tile = result[i] |
| | | if (std.indexOf(tile.id) != -1) { |
| | | this.setAddLayers(tile) |
| | | |
| | | } else { |
| | | for (var i in this.mptLayer) { |
| | | if (this.mptLayer[i].treeobj.name == tile.cnName) { |
| | | this.mptLayer[i].deleteObject(); |
| | | this.mptLayer.splice(i, 1) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | setChangeTMS(result, checked) { |
| | | var value = this.$refs.tree.getCheckedNodes(); |
| | | var std = []; |
| | | for (var i in value) { |
| | | std.push(value[i].id) |
| | | } |
| | | for (var i in result) { |
| | | var tile = result[i] |
| | | if (std.indexOf(tile.id) != -1) { |
| | | this.setAddLayers(tile) |
| | | |
| | | } else { |
| | | for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) { |
| | | var val_id = window.Viewer.imageryLayers._layers[i].name; |
| | | if (val_id == tile.cnName) { |
| | | window.Viewer.imageryLayers.remove( |
| | | window.Viewer.imageryLayers._layers[i] |
| | | ); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | getchilds(source) { |
| | | if (source.children) { |
| | | var child = source.children |
| | | for (var i in child) { |
| | | if (child[i].children) { |
| | | this.getchilds(child[i]) |
| | | } else { |
| | | this.childOption.push(child[i]) |
| | | } |
| | | } |
| | | } else { |
| | | this.childOption.push(source) |
| | | } |
| | | }, |
| | | |
| | | async setAddLayers(res) { |
| | | |
| | | if (res.serveType == "WMS") { |
| | | var resource = geoServerURl; |
| | | if (res.resource != null && res.resource != undefined) { |
| | | resource = res.resource; |
| | | } |
| | | var imageryLayers = window.Viewer.scene.imageryLayers; |
| | | let layerWMS = new Cesium.WebMapServiceImageryProvider({ |
| | | url: resource, |
| | | layers: res.url, |
| | | parameters: { |
| | | transparent: true, |
| | | format: "image/png", |
| | | srs: "EPSG:4490", |
| | | styles: "", |
| | | }, |
| | | tileWidth: 512, |
| | | tileHeight: 512, |
| | | }); |
| | | layerWMS.name = res.cnName; |
| | | //透明度 |
| | | var tdtAnnoLayer = imageryLayers.addImageryProvider(layerWMS); |
| | | if (res.opacity) { |
| | | tdtAnnoLayer.alpha = parseInt(res.opacity) / 100; |
| | | } |
| | | var layer2 = new Image({ |
| | | name: res.cnName, |
| | | source: new ImageWMS({ |
| | | crossOrigin: "anonymous", |
| | | url: resource, |
| | | params: { |
| | | FORMAT: "image/png", |
| | | VERSION: "1.1.1", |
| | | LAYERS: res.url, |
| | | }, |
| | | }), |
| | | }); |
| | | if (res.opacity) { |
| | | layer2.setOpacity(parseInt(res.opacity) / 100); |
| | | } |
| | | window.map.addLayer(layer2); |
| | | } else if (res.serveType == "WFS") { |
| | | var 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) { |
| | | var 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"); |
| | | }, |
| | | }); |
| | | |
| | | var vectorLayer = new VectorLayer({ |
| | | name: res.cnName, |
| | | source: new VectorSource({ |
| | | url: url, |
| | | format: new GeoJSON(), |
| | | }), |
| | | }); |
| | | window.map.addLayer(vectorLayer); |
| | | } else if (res.serveType == "Tileset" || res.serveType == "3DML") { |
| | | var url; |
| | | if (res.url.indexOf("{host}") != -1) { |
| | | url = res.url.replace("{host}", iisHost); |
| | | } else { |
| | | url = modelUrl + "/" + res.url |
| | | } |
| | | |
| | | var tileset = Viewer.scene.primitives.add( |
| | | new Cesium.Cesium3DTileset({ |
| | | name: res.cnName, |
| | | url: url, //192.168.20.106,to4 |
| | | maximumScreenSpaceError: 64, // 最大屏幕空间错误:16 |
| | | maximumMemoryUsage: 768, // 最大内存:512 |
| | | dynamicScreenSpaceError: true, // 减少离相机较远的屏幕空间错误:false |
| | | skipLevelOfDetail: 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.getTilesetArgs(tileset, res); |
| | | } |
| | | }); |
| | | this.$store.state.setAlphaList.push({ |
| | | name: res.cnName, |
| | | alpha: 1 |
| | | }) |
| | | window.model = tileset |
| | | } else if (res.serveType == "TMS") { |
| | | var url = res.url; |
| | | if (res.url.indexOf("{host}") != -1) { |
| | | url = res.url.replace("{host}", iisHost); |
| | | } |
| | | |
| | | if (res.pubid) { |
| | | this.setQueryPubid(res); |
| | | } else { |
| | | |
| | | var layer = Viewer.imageryLayers.addImageryProvider( |
| | | new Cesium.UrlTemplateImageryProvider({ |
| | | url: url, |
| | | maximumLevel: 22, |
| | | }) |
| | | ); |
| | | layer.name = res.cnName; |
| | | this.setChangeWMS(); |
| | | } |
| | | |
| | | } else if (res.serveType == "Mpt") { |
| | | |
| | | if (res.url.indexOf("{host}") != -1) { |
| | | res.url = res.url.replace("{host}", iisHost); |
| | | } |
| | | var url = res.url.split(';') |
| | | |
| | | var layer = sgworld.Creator.createImageryProvider(res.cnName, "wms", { |
| | | url: url[0], |
| | | layers: url[1] |
| | | }, "0", undefined, true, ""); |
| | | this.mptLayer.push(layer) |
| | | setTimeout(() => { |
| | | this.setChangeWMS(); |
| | | }, 500); |
| | | } |
| | | |
| | | }, |
| | | async getTilesetArgs(tileset, res) { |
| | | if (res.pubid > 0) { |
| | | const data = await comprehensive_selectPubById({ id: res.pubid }) |
| | | if (data.code != 200) { |
| | | |
| | | } else { |
| | | if (res.serveType != '3DML') { |
| | | this.reload(tileset, data.result.json) |
| | | } else { |
| | | this.tileSet(tileset, parseFloat(res.elev)) |
| | | } |
| | | |
| | | } |
| | | } else { |
| | | this.tileSet(tileset, parseFloat(res.elev)) |
| | | |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | }, |
| | | async setQueryPubid(res) { |
| | | const data = await comprehensive_selectPubById({ id: res.pubid }) |
| | | if (data.code != 200) { |
| | | |
| | | } else { |
| | | var url = data.result.url; |
| | | |
| | | if (res.url.indexOf("{host}") != -1) { |
| | | url = res.url.replace("{host}", iisHost); |
| | | } |
| | | var min = data.result.min; |
| | | var max = data.result.max; |
| | | var layer; |
| | | if (max > 0) { |
| | | layer = Viewer.imageryLayers.addImageryProvider( |
| | | new Cesium.UrlTemplateImageryProvider({ |
| | | url: url, |
| | | minimumLevel: min, |
| | | maximumLevel: max, |
| | | |
| | | }) |
| | | ); |
| | | } else { |
| | | layer = Viewer.imageryLayers.addImageryProvider( |
| | | new Cesium.UrlTemplateImageryProvider({ |
| | | url: url, |
| | | minimumLevel: min, |
| | | }) |
| | | ); |
| | | } |
| | | |
| | | layer.name = res.cnName; |
| | | |
| | | if (data.result.geom) { |
| | | // var wkt = this.$wkt.parse(data.result.geom); |
| | | // Viewer.camera.flyTo({ |
| | | // destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], 2000), |
| | | // }); |
| | | } |
| | | this.setChangeWMS(); |
| | | } |
| | | }, |
| | | reload(tileset, res) { |
| | | var vm = JSON.parse(res) |
| | | var pos = Cesium.Cartesian3.fromDegrees(vm.lon, vm.lat, vm.height); |
| | | var converter = Cesium.Transforms.eastNorthUpToFixedFrame; |
| | | var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(vm.yaw), 0, 0); |
| | | var matrix = Cesium.Transforms.headingPitchRollToFixedFrame(pos, hpr, Cesium.Ellipsoid.WGS84, converter); |
| | | tileset._root.transform = matrix; |
| | | // Viewer.flyTo(tileset); |
| | | }, |
| | | tileSet(tileset, height) { |
| | | //3dtile模型的边界球体 |
| | | var boundingSphere = tileset.boundingSphere; |
| | | //迪卡尔空间直角坐标=>地理坐标(弧度制) |
| | | var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center); |
| | | //地理坐标(弧度制)=>迪卡尔空间直角坐标 |
| | | var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height); |
| | | var Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, height); |
| | | //获得地面和offset的转换 |
| | | var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3()); |
| | | //修改模型矩阵 |
| | | tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); |
| | | // Viewer.flyTo(tileset); |
| | | }, |
| | | 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; // 返回一级菜单 |
| | | }); |
| | | }, |
| | | async layersStart() { |
| | | const data = await perms_selectLayers(); |
| | | if (data.code != 200) { |
| | | return this.$message.error("图层列表查询失败"); |
| | | } |
| | | var std = data.result; |
| | | var that = this; |
| | | var checkKey = []; |
| | | let checkedLayers = []; |
| | | var val = std.filter((str) => { |
| | | if (str.type == 1) { |
| | | return str; |
| | | } |
| | | if (str.url != null && str.type == 2) { |
| | | if (str.isShow == 1) { |
| | | checkKey.push(str.id); |
| | | // that.setAddLayers(str); |
| | | if (str.serveType == "WMS" && str.url) { |
| | | checkedLayers.push(str); |
| | | } |
| | | } |
| | | return str; |
| | | } |
| | | }); |
| | | |
| | | //存储选中图层 |
| | | sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers)); |
| | | var res = this.setTreeData(val); |
| | | |
| | | // for (var i in res) { |
| | | // res[i].children = res[i].children.filter((val) => { |
| | | // if (val.children != null) { |
| | | // return val; |
| | | // } |
| | | // }); |
| | | // } |
| | | this.treeData = res; |
| | | this.$refs.tree.setCheckedKeys(checkKey); |
| | | }, |
| | | async treelayersStart() { |
| | | const data = await perms_selectLayers(); |
| | | if (data.code != 200) { |
| | | return this.$message.error("图层列表查询失败"); |
| | | } |
| | | var std = []; |
| | | var layer_list = []; |
| | | var layer_groups = []; |
| | | for (var i in data.result) { |
| | | if (data.result[i].type == 1) { |
| | | layer_groups.push({ |
| | | id: data.result[i].id, |
| | | label: data.result[i].cnName, |
| | | type: data.result[i].type, |
| | | isEdit: false, |
| | | children: [], |
| | | }); |
| | | } else if (data.result[i].type == 2) { |
| | | if (data.result[i].url != null) { |
| | | var layer_entity = { |
| | | id: data.result[i].id, |
| | | pid: data.result[i].pid, |
| | | label: data.result[i].cnName, |
| | | resource: data.result[i].url, |
| | | type: data.result[i].type, |
| | | isEdit: false, |
| | | }; |
| | | layer_list.push(layer_entity); |
| | | } |
| | | } |
| | | } |
| | | for (var i in layer_list) { |
| | | for (var j in layer_groups) { |
| | | if (layer_list[i].pid === layer_groups[j].id) { |
| | | layer_groups[j].children.push(layer_list[i]); |
| | | } |
| | | } |
| | | } |
| | | layer_groups = layer_groups.filter((res) => { |
| | | if (res.children && res.children.length != 0) { |
| | | return res; |
| | | } |
| | | }); |
| | | this.treeData = layer_groups; |
| | | |
| | | for (var i in data.result) { |
| | | if (data.result[i].type == 2 && data.result[i].url != null) { |
| | | for (var j = 0; j < window.Viewer.imageryLayers._layers.length; j++) { |
| | | var val_id = window.Viewer.imageryLayers._layers[j]; |
| | | if (val_id.show == true) { |
| | | if (val_id.imageryProvider.name == data.result[i].cnName) { |
| | | std.push(data.result[i].id); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | this.$refs.tree.setCheckedKeys(std); |
| | | }, |
| | | // 查询 |
| | | filterNode(value, data) { |
| | | |
| | | if (!value) return true; |
| | | return data.cnName.indexOf(value) !== -1; |
| | | }, |
| | | |
| | | async setproChange(res) { |
| | | if (res) { |
| | | this.setCheeckedLayer = this.$refs.tree.getCheckedKeys(); |
| | | |
| | | this.$store.state.pigCode = res; |
| | | var st_code = this.optionts.filter(rs => { |
| | | if (rs.code == res) { |
| | | return rs |
| | | } |
| | | }) |
| | | |
| | | var val = this.$store.state.oldTree.filter(rs => { |
| | | if (rs.enName == st_code[0].code) { |
| | | return rs |
| | | } |
| | | }) |
| | | this.removeAllLayer(); |
| | | var obj = { |
| | | dirid: res, |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | } |
| | | |
| | | const data = await project_selectByDirid(obj); |
| | | if (data.code != 200) { |
| | | this.$message.error("列表获取失败"); |
| | | return; |
| | | } |
| | | |
| | | if (data.result[0]) { |
| | | var geom = data.result[0].geom |
| | | if (geom) { |
| | | var wkt = this.$wkt.parse(geom) |
| | | Viewer.camera.flyTo({ |
| | | destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[0].toFixed(6), wkt.coordinates[1].toFixed(6), 5000), |
| | | }); |
| | | } |
| | | |
| | | } |
| | | this.cannelTerrainLayer(); |
| | | this.setTerrainMptLayer(); |
| | | //清空图层树选中状态 |
| | | this.$refs.tree.setCheckedKeys([]); |
| | | |
| | | |
| | | if (val.length > 0) { |
| | | |
| | | if (val[0].type == 1 && val[0].isProject == 1) {//项目分类 |
| | | |
| | | var std_check = []; |
| | | for (var i in val) { |
| | | var std_val = this.getNewTree([this.$refs.tree.getNode(val[i].id).data], []) |
| | | for (var j in std_val) { |
| | | std_check.push(std_val[j]) |
| | | } |
| | | } |
| | | |
| | | |
| | | var value = this.$store.state.isProjectLayer; |
| | | for (var i in value) { |
| | | |
| | | std_check.push(value[i]) |
| | | } |
| | | this.setProjectLayer(std_check); |
| | | } else { |
| | | this.setChangeProLayer(); |
| | | } |
| | | } else { |
| | | this.setChangeProLayer(); |
| | | } |
| | | } else { |
| | | this.removeAllLayer(); |
| | | this.$store.state.pigCode = null; |
| | | this.$refs.tree.setCheckedKeys(this.setCheeckedLayer); |
| | | var std = []; |
| | | for (var i in this.setCheeckedLayer) { |
| | | std.push(this.$refs.tree.getNode(this.setCheeckedLayer[i]).data) |
| | | } |
| | | this.setProjectLayer(std); |
| | | } |
| | | }, |
| | | removeAllLayer() { |
| | | for (var j in Viewer.scene.primitives._primitives) { |
| | | Viewer.scene.primitives.remove(Viewer.scene.primitives._primitives[j]) |
| | | } |
| | | for (var i in window.Viewer.dataSources._dataSources) { |
| | | window.Viewer.dataSources.remove( |
| | | window.Viewer.dataSources._dataSources[i] |
| | | ); |
| | | } |
| | | for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) { |
| | | var val_id = window.Viewer.imageryLayers._layers[i].id; |
| | | if (val_id == 'TMS') { |
| | | window.Viewer.imageryLayers.remove( |
| | | window.Viewer.imageryLayers._layers[i] |
| | | ); |
| | | } |
| | | } |
| | | for (var i in this.mptLayer) { |
| | | this.mptLayer[i].deleteObject(); |
| | | this.mptLayer.splice(i, 1) |
| | | } |
| | | this.mptLayer = []; |
| | | }, |
| | | setProjectLayer(res) { |
| | | var layerid = []; |
| | | for (var i in res) { |
| | | layerid.push(res[i].id) |
| | | } |
| | | this.$refs.tree.setCheckedKeys(layerid); |
| | | // var value = this.$refs.tree.getCheckedNodes(); |
| | | // this.$bus.$emit("showMenuLayer", value); |
| | | |
| | | var listWMS = []; |
| | | var listWFS = []; |
| | | var listTileset = []; |
| | | var listTMS = []; |
| | | var listMpt = []; |
| | | for (var i in res) { |
| | | if (res[i].type == 2) { |
| | | switch (res[i].serveType) { |
| | | case 'WMS': |
| | | listWMS.push(res[i]) |
| | | break; |
| | | case 'WFS': |
| | | listWFS.push(res[i]) |
| | | break; |
| | | case '3DML': |
| | | case 'Tileset': |
| | | listTileset.push(res[i]) |
| | | break; |
| | | case 'Mpt': |
| | | listMpt.push(res[i]) |
| | | break; |
| | | case 'TMS': |
| | | listTMS.push(res[i]) |
| | | break; |
| | | |
| | | } |
| | | } |
| | | } |
| | | // this.setChangeProLayer(); |
| | | this.setChangeWMS(listWMS, true); |
| | | this.setChangeWFS(listWFS, true); |
| | | this.setChangeTileset(listTileset, true); |
| | | this.setChangeTMS(listTMS, true); |
| | | this.setChangeMpt(listMpt, true); |
| | | }, |
| | | getNewTree(obj, result) { |
| | | for (const i in obj) { |
| | | console.log(obj[i].cnName) |
| | | result.push(obj[i]) |
| | | if (obj[i].children && obj[i].children.length > 0) { |
| | | this.getNewTree(obj[i].children, result) |
| | | } |
| | | } |
| | | return result |
| | | }, |
| | | cannelTerrainLayer() { |
| | | //清空地形 |
| | | if (window.terrainMptLayer) { |
| | | window.terrainMptLayer.deleteObject(); |
| | | window.terrainMptLayer = null; |
| | | } |
| | | if (window.terrainDemLayer) { |
| | | Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(); |
| | | window.terrainDemLayer = null; |
| | | } |
| | | }, |
| | | setTerrainMptLayer() { |
| | | // //默认地形MPT |
| | | // var option = { |
| | | // url: window.sceneConfig.SGUrl, |
| | | // layerName: window.sceneConfig.mptName, |
| | | // requestVertexNormals: true, |
| | | // }; |
| | | // window.terrainMptLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, ""); |
| | | window.terrainDemLayer = new Cesium.CesiumTerrainProvider({ |
| | | // url: LFData + '/3d/terrain/dem20230321' |
| | | url: demLayer |
| | | }); |
| | | Viewer.terrainProvider = window.terrainDemLayer |
| | | }, |
| | | setChangeProLayer() { |
| | | var value = this.$store.state.isProjectLayer; |
| | | if (value.length != 0) { |
| | | |
| | | var std = []; |
| | | for (var i in value) { |
| | | std.push(value[i].id) |
| | | } |
| | | this.$refs.tree.setCheckedKeys(std); |
| | | this.$bus.$emit("showMenuLayer", value); |
| | | } |
| | | |
| | | |
| | | }, |
| | | |
| | | async getMenuProject() { |
| | | const data = await project_selectDirAll(); |
| | | if (data.code != 200) { |
| | | return |
| | | } |
| | | this.optionts = data.result; |
| | | }, |
| | | }, |
| | | watch: { |
| | | filterText(val) { |
| | |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.getMenuProject() |
| | | 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 == true) { |
| | | 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.shwoAnnex = ['DEM', 'TMS'].indexOf(object.serveType) > -1;//附件 |
| | | 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) { |
| | | if (this.currentData.json) { |
| | | var json = JSON.parse(this.currentData.json); |
| | | if (json.west) { |
| | | Viewer.camera.flyTo({ |
| | | destination: Cesium.Rectangle.fromDegrees(json.west, json.south, json.east, json.north) |
| | | }) |
| | | } |
| | | } else { |
| | | |
| | | 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]; |
| | | }, |
| | | //附件下载 |
| | | annexDownload() { |
| | | this.$bus.$emit('annexDownload', this.currentData) |
| | | }, |
| | | |
| | | // 瓦片下载 |
| | | 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) { |
| | | debugger |
| | | 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; |
| | | if (is_production) { |
| | | Viewer.imageryLayers.raiseToTop(layer);//将图层上移一层 |
| | | Viewer.imageryLayers.lower(layer);//将图层上移一层 |
| | | } |
| | | |
| | | } |
| | | }, |
| | | // 切换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 (is_production) { |
| | | Viewer.imageryLayers.raiseToTop(layer);//将图层上移一层 |
| | | Viewer.imageryLayers.lower(layer);//将图层上移一层 |
| | | } |
| | | // 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); |
| | | } |
| | | }, |
| | | }; |
| | |
| | | .tree-container /deep/ .el-tree-node { |
| | | position: relative; |
| | | padding-left: 10px; |
| | | // text-indent: 16px; |
| | | } |
| | | |
| | | .tree-container /deep/ .el-tree-node__children { |
| | |
| | | .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 { |
| | | 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%; |
| | |
| | | margin-top: 0px; |
| | | z-index: 8; |
| | | } |
| | | |
| | | .tree-container |
| | | /deep/ |
| | | .el-tree-node |
| | |
| | | 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; |
| | | } |
| | | /*.lalala {*/ |
| | | /*position: relative;*/ |
| | | /*}*/ |
| | | |
| | | .text { |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .el-tree { |
| | | width: 100%; |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | .search { |
| | | width: 100%; |
| | | } |