| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { image_layer } from '../../assets/js/index.js'; |
| | | import ImageWMS from 'ol/source/ImageWMS'; |
| | | import Image from 'ol/layer/Image'; |
| | | import { perms_selectLayers } from '../../api/api.js' |
| | | export default { |
| | | name: 'tree', |
| | | data() { |
| | |
| | | 'm_sitepoint', |
| | | ], |
| | | treeData: [ |
| | | { |
| | | id: 1, |
| | | label: 'LF', |
| | | isEdit: false, |
| | | children: [ |
| | | { |
| | | id: 11, |
| | | label: '管道中心线', |
| | | resource: 'LF:m_pipeline', |
| | | isEdit: false, |
| | | }, |
| | | { |
| | | id: 12, |
| | | label: '战略通道', |
| | | resource: 'LF:th_strategic_channel', |
| | | isEdit: false, |
| | | }, |
| | | { |
| | | id: 13, |
| | | label: '项目', |
| | | resource: 'LF:bs_project', |
| | | isEdit: false, |
| | | }, |
| | | { |
| | | id: 14, |
| | | label: '站场', |
| | | resource: 'LF:m_sitepoint', |
| | | isEdit: false, |
| | | }, |
| | | ], |
| | | }, |
| | | |
| | | ], |
| | | defaultProps: { |
| | | children: 'children', |
| | |
| | | console.log('tree drop: ', dropNode.label, dropType); |
| | | }, |
| | | handleCheckChange(data, checked, indeterminate) { |
| | | if (data.children != null) return; |
| | | |
| | | if (data.type != 2) return; |
| | | var std = []; |
| | | var layers_ol = window.map.getAllLayers(); |
| | | for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) { |
| | |
| | | img_layer.show = checked; |
| | | } |
| | | } |
| | | |
| | | if (std.length == 0 && checked == true) { |
| | | this.setAddLayers(data) |
| | | } |
| | |
| | | } |
| | | }, |
| | | setAddLayers(res) { |
| | | |
| | | let layerWMS = new Cesium.WebMapServiceImageryProvider({ |
| | | url: geoServerURl, |
| | | layers: res.resource, |
| | |
| | | layerWMS.name = res.label; |
| | | window.Viewer.imageryLayers.addImageryProvider(layerWMS); |
| | | |
| | | var layer2 = new Image({ |
| | | name: res.label, |
| | | source: new ImageWMS({ |
| | | crossOrigin: 'anonymous', |
| | | url: geoServerURl, |
| | | |
| | | params: { |
| | | FORMAT: 'image/png', |
| | | VERSION: '1.1.1', |
| | | LAYERS: res.resource, |
| | | }, |
| | | }), |
| | | }); |
| | | window.map.addLayer(layer2); |
| | | }, |
| | | async layersStart() { |
| | | 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) |
| | | |
| | | if (data.result[i].isShow == 1) { |
| | | std.push(data.result[i].id); |
| | | this.setAddLayers(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]) |
| | | } |
| | | } |
| | | } |
| | | this.treeData = layer_groups; |
| | | this.$refs.tree.setCheckedKeys(std); |
| | | }, |
| | | 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]) |
| | | } |
| | | } |
| | | } |
| | | 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); |
| | | |
| | | } |
| | | }, |
| | | watch: { |
| | | filterText(val) { |
| | |
| | | }, |
| | | }, |
| | | mounted() { |
| | | var std = []; |
| | | var val = this.treeData[0].children; |
| | | |
| | | |
| | | if (this.$store.state.showAllLayers == true) { |
| | | for (var j = 0; j < val.length; j++) { |
| | | if (val[j].id != 13 && val[j].id != 14) { |
| | | std.push(val[j].id); |
| | | this.setAddLayers(val[j]); |
| | | } |
| | | |
| | | } |
| | | this.layersStart(); |
| | | this.$store.state.showAllLayers = false; |
| | | |
| | | |
| | | } else { |
| | | for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) { |
| | | var val_id = window.Viewer.imageryLayers._layers[i]; |
| | | if (val_id.show == true) { |
| | | for (var j = 0; j < val.length; j++) { |
| | | if (val_id.imageryProvider.name == val[j].label) { |
| | | std.push(val[j].id); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | this.treelayersStart(); |
| | | |
| | | this.$refs.tree.setCheckedKeys(std); |
| | | } |
| | | |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | display: block; |
| | | z-index: 10000; |
| | | |
| | | background-color: #fff; |
| | | padding: 10px 0; |
| | | border: 1px solid #ebeef5; |
| | | border-radius: 4px; |
| | |
| | | color: #fff !important; |
| | | border: 1px solid !important; |
| | | } |
| | | /deep/.el-tree .el-tree-node__content:hover { |
| | | background-color: transparent !important; |
| | | } |
| | | /deep/.el-tree { |
| | | color: white !important; |
| | | background: transparent !important; |
| | | } |
| | | /deep/.el-tree-node:focus > .el-tree-node__content { |
| | | background: transparent !important; |
| | | } |
| | | </style> |