| | |
| | | <template> |
| | | <div |
| | | @click="showLeftMenu" |
| | | :class="{ leftmenu: !isShowLeftPanel, leftmenu_active: isShowLeftPanel }" |
| | | class="leftmenustyle" |
| | | > |
| | | <div @click="showLeftMenu" :class="{ leftmenu: !isShowLeftPanel, leftmenu_active: isShowLeftPanel }" |
| | | class="leftmenustyle"> |
| | | <span class="closeLeftMenu" v-if="isShowLeftPanel" @click.stop="hideLeftMenu">×</span> |
| | | <img class="openLeftMenu" v-else src="@/assets/img/left/souselist4.png" /> |
| | | <div class="layerTreeContainer" v-show="isShowLeftPanel"> |
| | |
| | | <!-- <div @click="setTreeDataChange(1)">业务</div> |
| | | <div @click="setTreeDataChange(2)">业务</div>--> |
| | | </div> |
| | | |
| | | <hr /> |
| | | <!-- <div style="padding: 5px"> |
| | | <el-button size="small" @click="setTreeDataChange(1)">图层1</el-button> |
| | | <el-button size="small" @click="setTreeDataChange(2)">图层2</el-button> |
| | | </div>--> |
| | | <div class="layerTree"> |
| | | <el-tree |
| | | :data="treeData" |
| | | node-key="id" |
| | | ref="tree" |
| | | :default-checked-keys="arr" |
| | | style="min-width: 160px" |
| | | show-checkbox |
| | | :render-content="renderContent" |
| | | :default-expanded-keys="defaultExpanded" |
| | | @check="check" |
| | | :filter-node-method="filterNode" |
| | | ></el-tree> |
| | | <el-tree :data="treeData" node-key="id" ref="tree" :default-checked-keys="arr" style="min-width: 160px" |
| | | show-checkbox :render-content="renderContent" :default-expanded-keys="defaultExpanded" @check="check" |
| | | @node-click="handleNodeDoubleClick" :filter-node-method="filterNode"></el-tree> |
| | | </div> |
| | | |
| | | <hr /> |
| | | <div class="canelAllCheck"> |
| | | <el-link type="info" @click="setClearAllCheck()" style="color:white;font-size: 14px;">取消全部所选</el-link> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import { getmenu } from "../../api/api"; |
| | | import keys from "@/assets/poiKeys1"; |
| | | import store from "@/utils/store"; |
| | | |
| | | |
| | | let colorTool; |
| | | let projectTreeData = []; |
| | |
| | | console.log("获取样式配置失败!"); |
| | | } |
| | | ) |
| | | .catch(function(error) { |
| | | .catch(function (error) { |
| | | console.log(error); |
| | | }); |
| | | return de; |
| | |
| | | this.setVisiable(treeNode.data, isCheck); |
| | | } |
| | | }, |
| | | handleNodeDoubleClick(data, node, event) { |
| | | if (data.flyTo) { |
| | | const coord = data.flyTo; |
| | | sgworld.Navigate.flyToPointsInterest({ |
| | | destination: Cesium.Cartesian3.fromDegrees( |
| | | coord[0], |
| | | coord[1], |
| | | coord[2] |
| | | ), |
| | | orientation: { |
| | | heading: Cesium.Math.toRadians(coord[3] ? coord[3] : 0), |
| | | pitch: Cesium.Math.toRadians(coord[4] ? coord[4] : -90), |
| | | roll: Cesium.Math.toRadians(0.0) |
| | | }, |
| | | duration: 2 //飞行时间8s |
| | | }); |
| | | } |
| | | |
| | | }, |
| | | setClearAllCheck() { |
| | | // let treeNode = this.$refs.tree.getNode(1); |
| | | // if (treeNode && treeNode.data) { |
| | | // this.setVisiable(treeNode, false); |
| | | // } |
| | | const nodes = this.$refs.tree.getCheckedNodes(); |
| | | const ids = ["18B25A94", "47EC9636"]; |
| | | const checkId = []; |
| | | nodes.map(item => { |
| | | if (ids.indexOf(item.id) > -1) { |
| | | checkId.push(item.id) |
| | | } else { |
| | | this.setVisiable(item, false) |
| | | } |
| | | }) |
| | | this.$refs.tree.setCheckedKeys(checkId); |
| | | }, |
| | | check(treeNode, data) { |
| | | //关闭右侧信息弹窗 |
| | | Bus.$emit("closeRightPop", true); |
| | |
| | | height: 310, |
| | | url: "./static/html/layerProp.html", |
| | | fn: { |
| | | end: function() {} |
| | | end: function () { } |
| | | } |
| | | }); |
| | | } else if (data._children) { |
| | |
| | | rectangle: Cesium.Rectangle.MAX_VALUE |
| | | }); |
| | | if (treeNode.addLevel && treeNode.addLevel === 2) { |
| | | geotil.positionToTileXY = function(position, level, result) { |
| | | geotil.positionToTileXY = function (position, level, result) { |
| | | level > 0 && level++; |
| | | var rectangle = this._rectangle; |
| | | if (!Cesium.Rectangle.contains(rectangle, position)) { |
| | |
| | | result.y = yTileCoordinate; |
| | | return result; |
| | | }; |
| | | geotil.tileXYToRectangle = function(x, y, level, result) { |
| | | geotil.tileXYToRectangle = function (x, y, level, result) { |
| | | level > 0 && level++; |
| | | var rectangle = this._rectangle; |
| | | |
| | |
| | | axios |
| | | .get( |
| | | treeNode.urls + |
| | | "?version=1.3.0&request=GetFeature&format=json&typename=" + |
| | | treeNode.layer |
| | | "?version=1.3.0&request=GetFeature&format=json&typename=" + |
| | | treeNode.layer |
| | | ) |
| | | .then(data => { |
| | | let features = data.data.features; |
| | |
| | | de, |
| | | "0", |
| | | true, |
| | | function(data) { |
| | | function (data) { |
| | | if (treeNode.flow) { |
| | | let lines = data.entities.values; |
| | | lines.forEach(line => { |
| | |
| | | clampToGround: sgworld.Core.defaultValue( |
| | | treeNode.clampToGround, |
| | | treeNode.extrudedHeight === undefined && |
| | | treeNode.height === undefined |
| | | treeNode.height === undefined |
| | | ), |
| | | classificationType: treeNode.classificationType, |
| | | near: sgworld.Core.defaultValue(treeNode.near, 0), |
| | |
| | | de, |
| | | "0", |
| | | treeNode.checked, |
| | | function() {} |
| | | function () { } |
| | | ); |
| | | } else if (treeNode.class === "polylineVolume") { |
| | | de = { |
| | |
| | | de, |
| | | "0", |
| | | treeNode.checked, |
| | | function() {} |
| | | function () { } |
| | | ); |
| | | } else if (treeNode.class === "polyline") { |
| | | de = { |
| | |
| | | de, |
| | | "0", |
| | | treeNode.checked, |
| | | function() {} |
| | | function () { } |
| | | ); |
| | | } else if (treeNode.class === "polygon") { |
| | | de = { |
| | |
| | | de, |
| | | "0", |
| | | treeNode.checked, |
| | | function() {} |
| | | function () { } |
| | | ); |
| | | } else if (treeNode.class === "model") { |
| | | de = { |
| | |
| | | de, |
| | | "0", |
| | | treeNode.checked, |
| | | function() {} |
| | | function () { } |
| | | ); |
| | | } |
| | | layer && (treeNode.id = layer.treeobj.id); |
| | |
| | | layer = sgworld.Creator.createS3MLayer( |
| | | treeNode.urls, |
| | | sgworld._Viewer.scene, |
| | | function() {} |
| | | function () { } |
| | | ); |
| | | break; |
| | | case "gltf": |
| | |
| | | let imgUrl; |
| | | new Cesium.GeoJsonDataSource.load( |
| | | treeNode.urls + |
| | | "?version=1.3.0&request=GetFeature&format=json&typename=" + |
| | | treeNode.layer |
| | | "?version=1.3.0&request=GetFeature&format=json&typename=" + |
| | | treeNode.layer |
| | | ).then(dataSource => { |
| | | // that.$set(treeNode, "disabled", false); |
| | | Viewer.dataSources.add(dataSource); |
| | |
| | | }); |
| | | |
| | | // 添加监听函数 |
| | | dataSource.clustering.clusterEvent.addEventListener(function( |
| | | dataSource.clustering.clusterEvent.addEventListener(function ( |
| | | clusteredEntities, |
| | | cluster |
| | | ) { |
| | |
| | | transition: 1s; |
| | | z-index: 9999; |
| | | } |
| | | |
| | | .switchbox { |
| | | margin-top: 5px; |
| | | } |
| | | |
| | | .closeLeftMenu:hover { |
| | | cursor: pointer; |
| | | transform: rotateZ(90deg); |
| | | } |
| | | |
| | | .canelAllCheck { |
| | | |
| | | flex: end; |
| | | } |
| | | |
| | | .layerTree { |
| | | flex: 1; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .layerTree .el-tree /deep/ .el-checkbox__inner { |
| | |
| | | .leftmenu:hover { |
| | | background-image: url("~@/assets/img/new/treeClose-y.png"); |
| | | } |
| | | |
| | | .leftmenu { |
| | | background-image: url("~@/assets/img/new/treeClose.png"); |
| | | background-size: 100% 100%; |
| | |
| | | width: 270px; |
| | | height: 550px; |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | /* margin: 20px 0; */ |
| | | } |
| | | |
| | |
| | | background-color: rgba(255, 255, 255, 0.4) !important; |
| | | } |
| | | |
| | | .el-tree /deep/ .is-current > .el-tree-node__content { |
| | | .el-tree /deep/ .is-current>.el-tree-node__content { |
| | | background-color: rgba(255, 255, 255, 0.4) !important; |
| | | font-size: 14px; |
| | | } |