| | |
| | | <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 |
| | | class="titleImg set" |
| | | @click="layerSetBox" |
| | | > |
| | | <div class="titleImg set" @click="layerSetBox"> |
| | | <Setting /> |
| | | </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" |
| | | :default-expanded-keys="defaultExpanded" :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> |
| | |
| | | <a style="margin-left: 8px" @click="remove(node, data)"> |
| | | Delete |
| | | </a> |
| | | </span> --> |
| | | <span |
| | | class="button" |
| | | v-if="data.isLayer == 1" |
| | | > |
| | | </span>--> |
| | | <span class="button" v-if="!data.isTemporaryLayer"> |
| | | <el-dropdown trigger="click"> |
| | | <span class="el-dropdown-link"> |
| | | <el-icon class="el-icon--right"> |
| | |
| | | </span> |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <el-dropdown-item @click.native="clickdropdown(1, data)">详细</el-dropdown-item> |
| | | <el-dropdown-item |
| | | v-if="data.type == 3" |
| | | @click.native="clickdropdown(2, data)" |
| | | >属性</el-dropdown-item> |
| | | <el-dropdown-item v-if="data.type != 6 && data.isLayer == 1" |
| | | @click.native="clickdropdown(1, data)">详细</el-dropdown-item> |
| | | <el-dropdown-item v-if="data.type == 6 && data.isLayer == 1">删除</el-dropdown-item> |
| | | <el-dropdown-item v-if="data.type == 3 && data.isLayer == 1" |
| | | @click.native="clickdropdown(2, data)">属性</el-dropdown-item> |
| | | <el-dropdown-item v-if="data.isLayer == 0" |
| | | @click.native="clickdropdown(3, data)">透明度</el-dropdown-item> |
| | | <el-dropdown-item v-if="data.shpType == 'temporaryLayer'" |
| | | @click.native="clickdTemporary(1, data)">编辑</el-dropdown-item> |
| | | <el-dropdown-item v-if="data.shpType == 'temporaryLayer'" |
| | | @click.native="clickdTemporary(2, data)">删除</el-dropdown-item> |
| | | <el-dropdown-item v-if="data.shpType == 'temporaryLayer'" |
| | | @click.native="clickdTemporary(3, data)">定位</el-dropdown-item> |
| | | <el-dropdown-item v-if="data.shpType == 'temporaryLayer'" @click.native="clickdTemporary(4, data)">下载 |
| | | [ Shp ]</el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </template> |
| | | </el-dropdown> |
| | |
| | | </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" |
| | | @onSubmit="editLayer"></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> |
| | |
| | | nextTick, |
| | | watch, |
| | | } from "vue"; |
| | | import $ from "jquery"; |
| | | import layerSet from "./layerSet"; |
| | | import attributeList from "./attributeList"; |
| | | import layerDetail from "./layerDetail"; |
| | | import { useStore } from "vuex"; // 引入useStore 方法 |
| | | import { perms_selectLayers } from "@/api/api"; |
| | | import { |
| | | perms_selectLayers, |
| | | mark_selectByPageAndCount, |
| | | mark_insert, |
| | | mark_deletes, |
| | | mark_update, |
| | | comprehensive_downloadShp, |
| | | } from "@/api/api"; |
| | | import server from "@/assets/js/Map/server"; |
| | | import { ElMessage } from "element-plus"; |
| | | import temporaryTool from "@/assets/js/Map/temporaryTools"; |
| | | import json from "@/assets/js/colorValue"; |
| | | import menuTool from "@/assets/js/Map/menuTool"; |
| | | import { removeToken, getToken } from "@/utils/auth"; |
| | | const store = useStore(); // 该方法用于返回store 实例 |
| | | const stretchValue = ref(""); |
| | | |
| | | const emits = defineEmits(["setCloseLayer"]); |
| | | let estreeRef = ref(); |
| | | const setLayer = ref(); |
| | | const transparence = ref(0); |
| | | var treeData = ref([]); |
| | | var layerListData = ref([]); |
| | | let menuOption = reactive([]); |
| | | |
| | | const defaultExpanded = ref([]); |
| | | const layerSetIsshow = ref(false); |
| | | const layerAttributeIsshow = ref(false); |
| | | const layerDetailIsshow = ref(false); |
| | |
| | | const layerObjData = ref(null); |
| | | // 当前选中的节点 id |
| | | const selectedNodeId = ref(null as any); //做类型断言处理 |
| | | const emits = defineEmits(["setCloseLayer"]); |
| | | |
| | | //默认选中id |
| | | const DefaultId = ref([]); |
| | | //图层设置弹框 |
| | |
| | | layerSetIsshow.value = res; |
| | | }; |
| | | const setCloseLayer = () => { |
| | | store.state.setLayerManager = false; |
| | | emits("setCloseLayer", false); |
| | | }; |
| | | const temporary = ref(new Date().getTime()); |
| | | const clickdTemporary = async (res, data) => { |
| | | if (res == 1) { |
| | | let son = estreeRef.value.getCheckedKeys(); |
| | | if (son.indexOf(data.id) < 0) { |
| | | return ElMessage(data.cnName + "图层没有勾选,无法进行编辑"); |
| | | } |
| | | if (store.state.editTemporaryId) { |
| | | var id = store.state.editTemporaryId; |
| | | var edit_id = sgworld.Creator.SimpleGraphic.SimpleGraphicObj.indexOf(id); |
| | | if (edit_id > -1) { |
| | | sgworld.Creator.SimpleGraphic.SimpleGraphicObj.splice(edit_id, 1); |
| | | store.state.editTemporaryId = null; |
| | | } |
| | | } |
| | | store.state.editTemporaryId = data.id; |
| | | sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(data.id); |
| | | sgworld.Creator.SimpleGraphic.edit(true, { |
| | | editProp: false, |
| | | tipText: { |
| | | ActiveText: "点击激活编辑", |
| | | }, |
| | | enableDelete: false, |
| | | }); |
| | | } else if (res == 2) { |
| | | var layerId = []; |
| | | layerId.push(data.sid); |
| | | const data1 = await mark_deletes({ ids: layerId.toString() }); |
| | | if (data1.code != 200) return; |
| | | temporaryTool.removeTemporaryLayer(data); |
| | | |
| | | // estreeRef.value.setCheckedKeys(checkedKeys, true); |
| | | // for (var i in keys) { |
| | | // checkedKeys.push(keys[i]); |
| | | // } |
| | | var keys = estreeRef.value.getCheckedKeys(); |
| | | var val = treeData.value[0].children; |
| | | for (var i = 0; i < val.length; i++) { |
| | | if (val[i].id == data.id) { |
| | | val.splice(i, 1); |
| | | } |
| | | } |
| | | |
| | | var std = []; |
| | | for (var i in keys) { |
| | | var layer_res = estreeRef.value.getNode(keys[i]).data; |
| | | if (layer_res.shpType && layer_res.shpType == 'temporaryLayer') { |
| | | std.push(keys[i]); |
| | | } else if (layer_res.isLayer == 1) { |
| | | std.push(keys[i]); |
| | | } |
| | | } |
| | | estreeRef.value.setCheckedKeys([], true); |
| | | console.log(data.id); |
| | | nextTick(() => { |
| | | console.log(std); |
| | | estreeRef.value.setCheckedKeys(std, true); |
| | | }); |
| | | } else if (res == 3) { |
| | | let son = estreeRef.value.getCheckedKeys(); |
| | | if (son.indexOf(data.id) < 0) { |
| | | return ElMessage(data.cnName + "图层没有勾选,无法进行定位"); |
| | | } |
| | | temporaryTool.locationTemporaryLayer(data); |
| | | } else if (res == 4) { |
| | | var name = null; |
| | | if (res.type == 'label') { |
| | | name = data.text; |
| | | |
| | | } else { |
| | | name = data.cnName; |
| | | } |
| | | var obj = { |
| | | bak: null, |
| | | fillColor: data.material, |
| | | id: data.sid, |
| | | name: name, |
| | | opacity: data.materialAlpha, |
| | | type: data.type, |
| | | wkt: temporaryTool.getWKT(data), |
| | | } |
| | | downLoadShp(obj) |
| | | |
| | | } |
| | | }; |
| | | const downLoadShp = (res) => { |
| | | |
| | | $.ajax({ |
| | | url: config.proxy + "/comprehensive/downloadShp?token=" + getToken(), |
| | | type: "POST", |
| | | data: JSON.stringify([res]), |
| | | dataType: "json", // html、json、jsonp、script、text |
| | | contentType: "application/json", // "application/x-www-form-urlencoded" |
| | | success: (rs) => { |
| | | if (rs && rs.code == 200) { |
| | | var a = document.createElement("a"); // 创建一个a标签元素 |
| | | a.style.display = "none"; // 设置元素不可见 |
| | | |
| | | a.href = |
| | | config.proxy + |
| | | "/comprehensive/downloadFile?token=" + |
| | | getToken() + |
| | | "&guid=" + |
| | | rs.result; |
| | | |
| | | document.body.appendChild(a); // 加入 |
| | | a.click(); // 触发点击,下载 |
| | | document.body.removeChild(a); // 释放 |
| | | } |
| | | }, |
| | | error: function (e) { }, |
| | | }); |
| | | |
| | | } |
| | | //选择图层 |
| | | const handleCheckChange = (data, checked) => { |
| | | layerAttributeIsshow.value = false; |
| | | layerDetailIsshow.value = false; |
| | | // let isCheck = checked.checkedKeys.indexOf(data.id) > -1; |
| | | |
| | | let isCheck = checked.checkedKeys.indexOf(data.id) > -1; |
| | | // this.setVisiable(data, isCheck); |
| | | |
| | | let son = estreeRef.value.getCheckedNodes().reverse(); |
| | | let son = estreeRef.value.getCheckedNodes(); |
| | | store.commit("SET_CHECKLAYER", son); |
| | | temporaryTool.removeTemporaryLayerAll(); |
| | | server.delLayerAll(); |
| | | var alphaGroup = []; |
| | | var idGroup = []; |
| | | for (var i in server.layerList) { |
| | | const layerData = server.layerList[i]; |
| | | if (layerData.layerData && layerData.id != server.wmsLayerId) { |
| | | alphaGroup.push(layerData.layerData.alpha); |
| | | idGroup.push(layerData.layerData.id); |
| | | } |
| | | } |
| | | server.delLayerAll(); |
| | | |
| | | var setGeoWms = []; |
| | | var url = null; |
| | | for (var i in son) { |
| | | var layerArr = son[i]; |
| | | layerArr.checked = true; |
| | | if (layerArr.category == 2 && layerArr.type == 3) { |
| | | if (layerArr.tab != "moon:geo_mappable_unit") { |
| | | setGeoWms.push(layerArr.tab); |
| | | url = layerArr.url; |
| | | } |
| | | var geoUrl = null; |
| | | var layerTreeDate = estreeRef.value.getCheckedNodes().reverse(); |
| | | for (var i in layerTreeDate) { |
| | | var layerArr = layerTreeDate[i]; |
| | | if (layerArr.shpType && layerArr.shpType == "temporaryLayer") { |
| | | temporaryTool.addTemporaryTool(layerArr); |
| | | } else { |
| | | server.addTreeData(layerArr); |
| | | if (layerArr.isLayer == 1) { |
| | | if (layerArr.category == 2 && layerArr.type == 3) { |
| | | if (layerArr.tab != "moon:geo_mappable_unit") { |
| | | var id = layerArr.id; |
| | | if (idGroup.indexOf(id) > -1) { |
| | | var alpha = alphaGroup[idGroup.indexOf(id)]; |
| | | if (alpha == 1) { |
| | | setGeoWms.push(layerArr.tab); |
| | | geoUrl = layerArr.url; |
| | | } else { |
| | | server.setAddGeoWmsLayer(layerArr, alpha); |
| | | } |
| | | } else { |
| | | setGeoWms.push(layerArr.tab); |
| | | geoUrl = layerArr.url; |
| | | } |
| | | } |
| | | } else { |
| | | server.addTreeData(layerArr); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | if (setGeoWms.length > 0) { |
| | | console.log(setGeoWms); |
| | | server.addGeoServerMmsLayers(setGeoWms.reverse(), url); |
| | | server.addGeoServerMmsLayers(setGeoWms, geoUrl); |
| | | } |
| | | store.commit("SET_CHECKLAYER", son); |
| | | // setVisiable(data, isCheck); |
| | | |
| | | // |
| | | menuTool.setImageLayerChange(); |
| | | }; |
| | | const setVisiable = (treeNode, checked) => { |
| | | if (checked !== undefined) { |
| | |
| | | const clickdropdown = (res, e) => { |
| | | layerAttributeIsshow.value = false; |
| | | layerDetailIsshow.value = false; |
| | | layerObjData.value = e; |
| | | |
| | | store.state.spatialTitle = e.cnName; |
| | | if (res == 2) { |
| | | layerAttributeIsshow.value = true; |
| | | store.state.tab = e; |
| | | } else { |
| | | var val = estreeRef.value!.getCheckedKeys(false); |
| | | if (val.indexOf(e.id) > -1) { |
| | | nextTick(() => { |
| | | layerObjData.value = e; |
| | | store.state.spatialTitle = e.cnName; |
| | | if (res == 2) { |
| | | layerAttributeIsshow.value = true; |
| | | store.state.tab = e; |
| | | } else if (res == 3) { |
| | | let son = estreeRef.value.getCheckedKeys(); |
| | | var layerId = getCheckedLayerPID(e, son); |
| | | if (layerId.length <= 0) { |
| | | return ElMessage.error("请先勾选图层"); |
| | | } |
| | | layerDetailIsshow.value = true; |
| | | store.state.layerGroups = { |
| | | id: e.id, |
| | | layerIds: layerId, |
| | | }; |
| | | } else { |
| | | return ElMessage.error("请先勾选图层"); |
| | | var val = estreeRef.value!.getCheckedKeys(false); |
| | | if (val.indexOf(e.id) > -1) { |
| | | layerDetailIsshow.value = true; |
| | | } else { |
| | | return ElMessage.error("请先勾选图层"); |
| | | } |
| | | } |
| | | } |
| | | }); |
| | | }; |
| | | const getCheckedLayerPID = (res, result) => { |
| | | var temp = []; |
| | | var ids = result; |
| | | |
| | | let forFn = (data) => { |
| | | if (data.children) { |
| | | data.children.forEach((item) => { |
| | | if (item.children) { |
| | | forFn(item); |
| | | } else { |
| | | if (ids.indexOf(item.id) > -1) { |
| | | temp.push(item); |
| | | } |
| | | } |
| | | }); |
| | | } else { |
| | | if (ids.indexOf(data.id) > -1) { |
| | | temp.push(data); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | forFn(res); |
| | | return temp; |
| | | }; |
| | | |
| | | const getCheckedLayerChildren = (res) => { |
| | | var temp2 = []; |
| | | let forFn = (data) => { |
| | | if (data.children) { |
| | | data.children.forEach((item) => { |
| | | if (item.children) { |
| | | forFn(item); |
| | | } else { |
| | | temp2.push(item); |
| | | } |
| | | }); |
| | | } else { |
| | | temp2.push(data); |
| | | } |
| | | }; |
| | | forFn(res); |
| | | return temp2; |
| | | }; |
| | | |
| | | const setSpatialClose = (res) => { |
| | | layerAttributeIsshow.value = res; |
| | | }; |
| | | const detailClose = (res) => { |
| | | layerDetailIsshow.value = res; |
| | | if (res.type == 0) { |
| | | estreeRef.value.getNode(store.state.layerGroups.id).data.alpha = res.val; |
| | | } |
| | | layerDetailIsshow.value = res.flag; |
| | | }; |
| | | //编辑图层树 |
| | | const addlayer = (res) => { |
| | |
| | | node = estreeRef.value.getNode(e); |
| | | } |
| | | }); |
| | | |
| | | var checKey = estreeRef.value.getCheckedKeys(); |
| | | let checkid = []; |
| | | for (var i in checKey) { |
| | | if (estreeRef.value.getNode(checKey[i]).data.isLayer == 1) { |
| | | checkid.push(checKey[i]) |
| | | } |
| | | } |
| | | // 将变动之前的node备份 |
| | | estreeRef.value.setCheckedKeys([], true); |
| | | let copyNode = { ...node }; |
| | | copyNode.previousSibling = { ...node.previousSibling }; |
| | | copyNode.nextSibling = { ...node.nextSibling }; |
| | |
| | | estreeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data); |
| | | } |
| | | } |
| | | estreeRef.value.setCheckedKeys(checkid, true); |
| | | }; |
| | | //删除图层树 |
| | | const delLayer = (res) => { |
| | |
| | | // }); |
| | | // treeData = handleTree(menuOption, "id", "pid", "children"); |
| | | }; |
| | | const editLayer = () => { |
| | | var layer = store.state.chekNowLayers; |
| | | var std = []; |
| | | for (var i in layer) { |
| | | if (layer[i].isLayer == 1) { |
| | | std.push(layer[i].id) |
| | | } |
| | | } |
| | | estreeRef.value.setCheckedKeys([], true); |
| | | nextTick(() => { |
| | | estreeRef.value.setCheckedKeys(std, true); |
| | | }) |
| | | |
| | | } |
| | | const setRestLayerData = () => { |
| | | let son = estreeRef.value.getCheckedNodes().reverse(); |
| | | |
| | | var setGeoWms = []; |
| | | var geoUrl = null; |
| | | for (var i in son) { |
| | | var layerArr = son[i]; |
| | | console.log(layerArr.isLayer); |
| | | layerArr.checked = true; |
| | | if (layerArr.category == 2 && layerArr.type == 3) { |
| | | if (layerArr.tab != "moon:geo_mappable_unit") { |
| | | setGeoWms.push(layerArr.tab); |
| | | geoUrl = layerArr.url; |
| | | // server.addTreeData(layerArr); |
| | | } |
| | | } else { |
| | | server.addTreeData(layerArr); |
| | | } |
| | | } |
| | | if (setGeoWms.length > 0) { |
| | | server.addGeoServerMmsLayers(setGeoWms, geoUrl); |
| | | } |
| | | store.commit("SET_CHECKLAYER", son); |
| | | }; |
| | | const getLayer = async () => { |
| | | store.state.restLayer = false; |
| | | server.delLayerAll(); |
| | | // server.delLayerAll(); |
| | | const dt = await perms_selectLayers(); |
| | | if (dt.code == 200) { |
| | | treeData.value = setTreeData(dt.result).sort(function (a, b) { |
| | | var va_data = dt.result.filter((res) => { |
| | | if (res.isLayer == 0) { |
| | | res.alpha = 1; |
| | | } |
| | | return res; |
| | | }); |
| | | treeData.value = setTreeData(va_data).sort(function (a, b) { |
| | | return a.orderNum - b.orderNum; |
| | | }); |
| | | const comperLayer = await mark_selectByPageAndCount({ |
| | | pageIndex: 1, |
| | | pageSize: 100000, |
| | | name: null, |
| | | }); |
| | | var children = []; |
| | | if (comperLayer.code == 200 && comperLayer.result) { |
| | | for (var i in comperLayer.result) { |
| | | var layer = comperLayer.result[i] |
| | | if (layer.wkt && layer.wkt.indexOf("shpType") > -1 && layer.wkt.indexOf("shpType") > -1) { |
| | | |
| | | var slayer = JSON.parse(comperLayer.result[i].wkt); |
| | | |
| | | slayer.sid = comperLayer.result[i].id; |
| | | children.push(slayer); |
| | | |
| | | } |
| | | } |
| | | } |
| | | |
| | | treeData.value.unshift({ |
| | | cnName: "自定义图层", |
| | | level: 1, |
| | | pid: 0, |
| | | isLayer: 0, |
| | | type: 6, |
| | | id: temporary.value, |
| | | isTemporaryLayer: true, |
| | | children: children, |
| | | }); |
| | | |
| | | var std = []; |
| | | var terrainId = null; |
| | | var adLayer = []; |
| | | dt.result.filter((res) => { |
| | | if (res.isLayer == 1 && res.isShow == 1) { |
| | | if (res.type == 1 && res.data == 2) { |
| | | if (!terrainId) { |
| | | terrainId = res.id; |
| | | std.push(res.id); |
| | | adLayer.push(res); |
| | | } |
| | | } else { |
| | | std.push(res.id); |
| | | adLayer.push(res); |
| | | } |
| | | } |
| | | }); |
| | |
| | | //添加默认选中图层 |
| | | layerListData.value = dt.result; |
| | | defaultLayer(dt.result); |
| | | var setGeoWms = []; |
| | | var url = 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; |
| | | } |
| | | } else { |
| | | server.addTreeData(layer); |
| | | } |
| | | } |
| | | if (setGeoWms.length > 0) { |
| | | console.log(setGeoWms); |
| | | server.addGeoServerMmsLayers(setGeoWms.reverse(), url); |
| | | } |
| | | //; |
| | | |
| | | nextTick(() => { |
| | | let son = estreeRef.value.getCheckedNodes(); |
| | | |
| | | setRestLayerData(); |
| | | store.commit("SET_CHECKLAYER", son); |
| | | }); |
| | | } |
| | |
| | | return father.pid == 0; // 返回一级菜单 |
| | | }); |
| | | } |
| | | const addTemporaryLayer = async (res) => { |
| | | var obj = { |
| | | name: res.cnName, |
| | | wkt: JSON.stringify(res), |
| | | }; |
| | | var checkedKeys = estreeRef.value.getCheckedKeys(); |
| | | const data = await mark_insert(obj); |
| | | if (data.code != 200 || !data.result) return; |
| | | store.state.temporaryLayer = null; |
| | | res.sid = data.result; |
| | | treeData.value[0].children.push(res); |
| | | |
| | | |
| | | nextTick(() => { |
| | | var std = [res.id]; |
| | | for (var i in checkedKeys) { |
| | | var layer_res = estreeRef.value.getNode(checkedKeys[i]).data; |
| | | if (layer_res.shpType && layer_res.shpType == 'temporaryLayer') { |
| | | std.push(checkedKeys[i]); |
| | | } else if (layer_res.isLayer == 1) { |
| | | std.push(checkedKeys[i]); |
| | | } |
| | | } |
| | | estreeRef.value.setCheckedKeys([], true); |
| | | estreeRef.value.setCheckedKeys(std, true); |
| | | temporaryTool.addTemporaryTool(res); |
| | | }); |
| | | }; |
| | | const editTemporaryLayerName = (res) => { |
| | | if (!store.state.editTemporaryId) return; |
| | | var id = store.state.editTemporaryId; |
| | | var val = treeData.value[0].children; |
| | | |
| | | for (var i = 0; i < val.length; i++) { |
| | | if (val[i].id == id) { |
| | | val[i].cnName = res; |
| | | setEditLayerChange(val[i]); |
| | | } |
| | | } |
| | | defaultExpanded.value = [treeData.value[0].id]; |
| | | }; |
| | | const editTemporaryBackById = (res) => { |
| | | var obj = temporaryTool.getEntityObj(res); |
| | | var val = treeData.value[0].children; |
| | | var checkedKeys = estreeRef.value.getCheckedKeys(); |
| | | if (checkedKeys.indexOf(temporary.value) > -1) { |
| | | checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1); |
| | | } |
| | | for (var i = 0; i < val.length; i++) { |
| | | if (val[i].id == res) { |
| | | obj.sid = val[i].sid; |
| | | val[i] = obj; |
| | | setEditLayerChange(obj); |
| | | } |
| | | } |
| | | nextTick(() => { |
| | | estreeRef.value.setCheckedKeys(checkedKeys, true); |
| | | }); |
| | | }; |
| | | const setEditLayerChange = async (res) => { |
| | | var obj = { |
| | | id: res.sid, |
| | | name: res.cnName, |
| | | wkt: JSON.stringify(res), |
| | | }; |
| | | const data = await mark_update(obj); |
| | | if (data.code != 200) return; |
| | | }; |
| | | watch( |
| | | () => store.state.restLayer, |
| | | (nVal, oVal) => { |
| | | if (nVal) { |
| | | getLayer(); |
| | | |
| | | setRestLayerData(); |
| | | } |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | // getLayer(); |
| | | watch( |
| | | () => store.state.temporaryLayer, |
| | | (nVal, oVal) => { |
| | | if (nVal) { |
| | | |
| | | addTemporaryLayer(nVal); |
| | | } |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | watch( |
| | | () => store.state.editTemporarName, |
| | | (nVal, oVal) => { |
| | | if (nVal) { |
| | | |
| | | editTemporaryLayerName(nVal); |
| | | } |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | watch( |
| | | () => store.state.editTemporaryback, |
| | | (nVal, oVal) => { |
| | | if (nVal) { |
| | | |
| | | editTemporaryBackById(nVal); |
| | | } |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | |
| | | onMounted(() => { |
| | | window.setLayer = getLayer; |
| | | }); |
| | |
| | | background: rgba(7, 8, 14, 0.8); |
| | | box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); |
| | | z-index: 40; |
| | | |
| | | .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; |
| | | } |