| | |
| | | <template> |
| | | <div |
| | | v-drag |
| | | class="layerBox" |
| | | > |
| | | <div v-drag class="layerBox"> |
| | | <div class="layerTitle"> |
| | | <div class="tileLeft"> |
| | | <div |
| | | @click="setCloseLayer" |
| | | class="titleImg" |
| | | > |
| | | <div @click="setCloseLayer" class="titleImg"> |
| | | <ArrowLeft /> |
| | | </div> |
| | | <div class="titleLable">图层管理</div> |
| | |
| | | </div> --> |
| | | </div> |
| | | <div class="layerContent"> |
| | | <el-tree |
| | | node-key="id" |
| | | :props="props" |
| | | :highlight-current="false" |
| | | :current-node-key="selectedNodeId" |
| | | :data="treeData" |
| | | :expand-on-click-node="false" |
| | | show-checkbox |
| | | @check="handleCheckChange" |
| | | ref="estreeRef" |
| | | v-if="treeData.length" |
| | | :default-checked-keys="DefaultId" |
| | | > |
| | | <el-tree node-key="id" :props="props" :highlight-current="false" :current-node-key="selectedNodeId" :data="treeData" |
| | | :expand-on-click-node="false" show-checkbox @check="handleCheckChange" ref="estreeRef" v-if="treeData.length" |
| | | :default-checked-keys="DefaultId"> |
| | | <template #default="{ node, data }"> |
| | | <span class="custom-tree-node"> |
| | | <span class="label">{{ node.label }}</span> |
| | |
| | | </el-tree> |
| | | </div> |
| | | </div> |
| | | <layer-set |
| | | v-if="layerSetIsshow" |
| | | @SETstate="SETstate" |
| | | :layerTree="treeData" |
| | | @addlayer="addlayer" |
| | | @delLayer="delLayer" |
| | | ></layer-set> |
| | | <attribute-list |
| | | v-if="layerAttributeIsshow" |
| | | :layerData="layerObjData" |
| | | @spatialClose="setSpatialClose" |
| | | ></attribute-list> |
| | | <layer-detail |
| | | :layerData="layerObjData" |
| | | v-if="layerDetailIsshow" |
| | | @detailClose="detailClose" |
| | | ></layer-detail> |
| | | <layer-set v-if="layerSetIsshow" @SETstate="SETstate" :layerTree="treeData" @addlayer="addlayer" |
| | | @delLayer="delLayer"></layer-set> |
| | | <attribute-list v-if="layerAttributeIsshow" :layerData="layerObjData" @spatialClose="setSpatialClose"></attribute-list> |
| | | <layer-detail :layerData="layerObjData" v-if="layerDetailIsshow" @detailClose="detailClose"></layer-detail> |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | |
| | | |
| | | let son = estreeRef.value.getCheckedNodes().reverse(); |
| | | rightServer.delLayerAll(); |
| | | |
| | | debugger |
| | | var setGeoWms = []; |
| | | var url = null; |
| | | for (var i in son) { |
| | |
| | | |
| | | var setGeoWms = []; |
| | | var url = null; |
| | | var terrainId = null; |
| | | for (var i in dt.result) { |
| | | var layer = dt.result[i]; |
| | | if (layer.category == 2 && layer.type == 3) { |
| | | if (layer.tab != "moon:geo_mappable_unit") { |
| | | setGeoWms.push(layer.tab); |
| | | url = layer.url; |
| | | if (layer.isShow == 1 & layer.isLayer == 1) { |
| | | if (layer.category == 2 && layer.type == 3) { |
| | | if (layer.tab != "moon:geo_mappable_unit") { |
| | | setGeoWms.push(layer.tab); |
| | | url = layer.url; |
| | | } |
| | | } else { |
| | | rightServer.addTreeData(layer); |
| | | } |
| | | } else { |
| | | rightServer.addTreeData(layer); |
| | | } |
| | | |
| | | // if (layer.isLayer == 1 && layer.isShow == 1) { |
| | | // if (layer.type == 1 && layer.data == 2) { |
| | | // if (!terrainId) { |
| | | // terrainId = res.id; |
| | | // std.push(layer.id); |
| | | // adLayer.push(layer); |
| | | // } |
| | | // } else { |
| | | // std.push(layer.id); |
| | | // adLayer.push(layer); |
| | | // } |
| | | // } |
| | | } |
| | | if (setGeoWms.length > 0) { |
| | | rightServer.addGeoServerMmsLayers(setGeoWms.reverse(), url); |
| | |
| | | width: 359px; |
| | | height: 680px; |
| | | right: calc(50% - 370px); |
| | | top: 105px; |
| | | top: 83px; |
| | | position: absolute; |
| | | z-index: 30; |
| | | background: rgba(7, 8, 14, 0.8); |
| | | box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); |
| | | |
| | | .layerTitle { |
| | | width: calc(100% - 27px); |
| | | height: 42px; |
| | |
| | | padding-left: 7px; |
| | | padding-right: 20px; |
| | | color: white; |
| | | |
| | | .tileLeft { |
| | | height: 100%; |
| | | display: flex; |
| | |
| | | color: #ffffff; |
| | | } |
| | | } |
| | | |
| | | .titleImg { |
| | | width: 20px; |
| | | height: 100%; |
| | |
| | | align-items: center; |
| | | color: rgba(104, 156, 255, 1); |
| | | } |
| | | |
| | | .set { |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | |
| | | .layerContent { |
| | | height: 625px; |
| | | padding: 0 8px; |
| | | overflow: auto; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .layerContent::-webkit-scrollbar { |
| | | width: 8px; |
| | | } |
| | | |
| | | .layerContent::-webkit-scrollbar-thumb { |
| | | border-radius: 10px; |
| | | background: rgba(0, 0, 0, 0.2); |
| | | } |
| | | |
| | | .layerContent::-webkit-scrollbar-track { |
| | | border-radius: 0; |
| | | background: rgba(0, 0, 0, 0); |
| | | } |
| | | |
| | | .el-tree { |
| | | width: 100%; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .layerContent .el-tree-node__content { |
| | | overflow: hidden; |
| | | } |
| | |
| | | flex-shrink: 0; |
| | | } |
| | | } |
| | | |
| | | .dropdown_box { |
| | | position: relative; |
| | | } |
| | |
| | | /deep/.el-select-dropdown__item { |
| | | font-size: 12px !important; |
| | | } |
| | | |
| | | .el-tree { |
| | | background: transparent; |
| | | } |
| | | |
| | | /deep/ .el-tree-node { |
| | | background: #0d131d; |
| | | color: #ffffff; |
| | |
| | | margin-top: 3px; |
| | | padding: 8px; |
| | | } |
| | | /deep/ .el-tree-node:focus > .el-tree-node__content { |
| | | |
| | | /deep/ .el-tree-node:focus>.el-tree-node__content { |
| | | background: transparent; |
| | | } |
| | | |
| | | /deep/ .el-tree-node__content:hover { |
| | | background: #0d131d; |
| | | } |
| | | |
| | | /deep/ .el-tree-node__children { |
| | | background: #1e2a3d; |
| | | |
| | | .el-tree-node { |
| | | background: #1e2a3d; |
| | | margin-top: 0; |
| | | padding: 4px; |
| | | } |
| | | } |
| | | /deep/ |
| | | .el-tree--highlight-current |
| | | .el-tree-node.is-current |
| | | > .el-tree-node__content { |
| | | |
| | | /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { |
| | | background: rgba(104, 156, 255, 0.5) !important; |
| | | } |
| | | |
| | | .highlight { |
| | | background: rgba(104, 156, 255, 0.5) !important; |
| | | } |
| | | |
| | | // .custom-tree-node { |
| | | // flex: 1; |
| | | // display: flex; |
| | |
| | | box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); |
| | | color: #fff; |
| | | border: 0; |
| | | |
| | | /deep/ .el-dropdown-menu__item { |
| | | color: #fff; |
| | | } |
| | | } |
| | | |
| | | /deep/ .el-dropdown-menu__item:not(.is-disabled):focus { |
| | | background-color: rgba(104, 156, 255, 0.5); |
| | | |
| | |
| | | .el-popper.is-light { |
| | | border: 1px solid rgba(7, 8, 14, 0.8) !important; |
| | | } |
| | | |
| | | .el-scrollbar { |
| | | border: 0 !important; |
| | | } |