| | |
| | | id="mapView" |
| | | class="MapBox" |
| | | v-loading="loading" |
| | | |
| | | element-loading-background="rgba(0, 0, 0, 0.8)" |
| | | > |
| | | <div class="topMenu"> |
| | |
| | | v-show="lefMenuContent" |
| | | > |
| | | <el-tree |
| | | :data="data" |
| | | :data="treeData" |
| | | show-checkbox |
| | | node-key="id" |
| | | :props="defaultProps" |
| | |
| | | import mapviewVue from '../../components/mapview.vue'; |
| | | import { removeToken, getToken } from '@/utils/auth'; |
| | | import $ from 'jquery'; |
| | | import { exportSelectByPage } from '../../api/api.js'; |
| | | import { exportSelectByPage, perms_selectLayers } from '../../api/api.js'; |
| | | import moment from 'moment'; |
| | | import { image_layer } from '../../assets/js/index.js'; |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | { label: 'A6', value: 'A6' }, |
| | | ], |
| | | value: 'A4', |
| | | data: [ |
| | | { |
| | | id: 1, |
| | | label: '图层', |
| | | children: [ |
| | | { |
| | | id: 11, |
| | | label: '项目', |
| | | value: '项目', |
| | | layer: 'LF:bs_project', |
| | | isEdit: false, |
| | | }, |
| | | { |
| | | id: 12, |
| | | label: '站场', |
| | | value: '站场', |
| | | layer: 'LF:m_sitepoint', |
| | | isEdit: false, |
| | | }, |
| | | { |
| | | id: 13, |
| | | label: '管道中心线', |
| | | value: '管道中心线', |
| | | layer: 'LF:m_pipeline', |
| | | isEdit: false, |
| | | }, |
| | | { |
| | | id: 14, |
| | | label: '战略通道', |
| | | value: '战略通道', |
| | | layer: 'LF:th_strategic_channel', |
| | | isEdit: false, |
| | | }, |
| | | ], |
| | | }, |
| | | treeData: [ |
| | | |
| | | ], |
| | | arrList: [], |
| | | defaultProps: { |
| | |
| | | count: 0, |
| | | }; |
| | | }, |
| | | |
| | | mounted() { |
| | | this.LayerStart(); |
| | | this.initMap(); |
| | | this.showMapLayer(); |
| | | }, |
| | | methods: { |
| | | showMapLayer() { |
| | | var val = this.data[0].children; |
| | | async LayerStart() { |
| | | const data = await perms_selectLayers(); |
| | | if (data.code != 200) { |
| | | return this.$message.error("图层列表查询失败"); |
| | | } |
| | | var std = []; |
| | | for (var i = 0; i < val.length; i++) { |
| | | var layer2 = new Image({ |
| | | name: val[i].label, |
| | | source: new ImageWMS({ |
| | | crossOrigin: 'anonymous', |
| | | url: geoServerURl, |
| | | 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.showMapLayer(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) { |
| | | |
| | | params: { |
| | | FORMAT: 'image/png', |
| | | VERSION: '1.1.1', |
| | | LAYERS: val[i].layer, |
| | | }, |
| | | }), |
| | | }); |
| | | mapView.addLayer(layer2); |
| | | std.push(val[i].id); |
| | | if (val_id.imageryProvider.name == data.result[i].cnName) { |
| | | std.push(data.result[i].id); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | this.$refs.tree.setCheckedKeys(std); |
| | | }, |
| | | showMapLayer(val) { |
| | | var layer2 = new Image({ |
| | | name: val.label, |
| | | source: new ImageWMS({ |
| | | crossOrigin: 'anonymous', |
| | | url: geoServerURl, |
| | | |
| | | params: { |
| | | FORMAT: 'image/png', |
| | | VERSION: '1.1.1', |
| | | LAYERS: val.resource, |
| | | }, |
| | | }), |
| | | }); |
| | | mapView.addLayer(layer2); |
| | | }, |
| | | showLeftMenu(res) { |
| | | switch (res) { |
| | |
| | | var layers = mapView.getAllLayers(); |
| | | for (var i in layers) { |
| | | var layer = layers[i]; |
| | | var str = 0; |
| | | if (layer.values_.name == data.label) { |
| | | |
| | | layer.setVisible(nodes); //显示图层 |
| | | if (nodes == true) { |
| | | str++; |
| | | this.arrList.push({ |
| | | name: data.label, |
| | | }); |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | if (str == 0 && nodes == true) { |
| | | |
| | | this.showMapLayer(data) |
| | | this.arrList.push({ |
| | | name: data.label, |
| | | }); |
| | | } |
| | | |
| | | |
| | | this.tableData = this.arrList; |
| | | }, |
| | | setAddMapLayer() { |
| | |
| | | padding: 20px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | overflow: auto; |
| | | } |
| | | .CenDiv { |
| | | height: 40px; |
| | |
| | | /deep/.el-loading-spinner i { |
| | | color: #409eff !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> |