src/components/preview_map.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/Tools/LayerTree.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/components/preview_map.vue
@@ -1,205 +1,139 @@ <template> <div id="mapdiv" class="previewBox" > <div v-if="modelLayer" class="modelLayer box_divm" > <div id="mapdiv" class="previewBox"> <div v-if="modelLayer" class="modelLayer box_divm"> <div class="modelBox"> <div style="float:right" <div style="float:right" :title="$t('synthesis.undergroundMode')" @click="setUndergroundMode" > @click="setUndergroundMode"> <i class="el-icon-sunrise "></i> </div> </div> <div class="modelBox"> <el-tree :data="treeData" <el-tree :data="treeData" show-checkbox node-key="id" ref="tree" :default-expanded-keys="[1]" :props="defaultProps" @node-click="handleNodeClick" @check="handleCheckChange" > @check="handleCheckChange"> </el-tree> </div> </div> <div v-if="editModelFlag" class="modelLayer box_divm" > <el-form ref="form" <div v-if="editModelFlag" class="modelLayer box_divm"> <el-form ref="form" :model="modelForm" label-width="80px" > label-width="80px"> <el-form-item> <el-button <el-button size="small" @click="locateTo">定位</el-button> <el-button size="small" @click="showTileset">显隐</el-button> <el-button size="small" @click="underground">地下</el-button> <el-button v-if="$store.state.previewLayer.type != '3dml'" size="small" @click="locateTo" >定位</el-button> <el-button @click="pickupCoords">拾取</el-button> <el-button v-if="$store.state.previewLayer.type != '3dml'" size="small" @click="showTileset" >显隐</el-button> <el-button size="small" @click="underground" >地下</el-button> <el-button v-if="$store.state.previewLayer.type != '3dml'" size="small" @click="pickupCoords" >拾取</el-button> <el-button v-if="$store.state.previewLayer.type != '3dml'" size="small" @click="reload" > @click="reload"> 重载 </el-button> <el-button v-if="modelForm.modelid == null && $store.state.previewLayer.type != '3dml'" <el-button v-if="modelForm.modelid == null && $store.state.previewLayer.type != '3dml'" size="small" @click="getModeKeyId" >模型主键</el-button> <el-button v-if="$store.state.previewLayer.type != '3dml'" @click="getModeKeyId">模型主键</el-button> <el-button v-if="$store.state.previewLayer.type != '3dml'" size="small" @click="resave" >保存</el-button> @click="resave">保存</el-button> </el-form-item> <el-form-item label="经度:" v-if="$store.state.previewLayer.type != '3dml'" > <el-input size="small" <el-form-item label="经度:" v-if="$store.state.previewLayer.type != '3dml'"> <el-input size="small" v-model="modelForm.lon" @input="update" ></el-input> <el-slider v-model="modelForm.lon" @input="update"></el-input> <el-slider v-model="modelForm.lon" @input="update" :min="73" :step="0.001" :max="135" ></el-slider> :max="135"></el-slider> </el-form-item> <el-form-item label="纬度:" v-if="$store.state.previewLayer.type != '3dml'" > <el-input size="small" <el-form-item label="纬度:" v-if="$store.state.previewLayer.type != '3dml'"> <el-input size="small" v-model="modelForm.lat" @input="update" ></el-input> <el-slider v-model="modelForm.lat" @input="update"></el-input> <el-slider v-model="modelForm.lat" @input="update" :min="3" :step="0.001" :max="54" ></el-slider> :max="54"></el-slider> </el-form-item> <el-form-item label="高度:" v-if="$store.state.previewLayer.type != '3dml'" > <el-input size="small" <el-form-item label="高度:" v-if="$store.state.previewLayer.type != '3dml'"> <el-input size="small" v-model="modelForm.height" @input="update" ></el-input> <el-slider v-model="modelForm.height" @input="update"></el-input> <el-slider v-model="modelForm.height" :min="-800" :step="1" @input="update" :max="8800" ></el-slider> :max="8800"></el-slider> </el-form-item> <el-form-item label="角度:" v-if="$store.state.previewLayer.type != '3dml'" > <el-input size="small" <el-form-item label="角度:" v-if="$store.state.previewLayer.type != '3dml'"> <el-input size="small" v-model="modelForm.yaw" @input="update" ></el-input> <el-slider v-model="modelForm.yaw" @input="update"></el-input> <el-slider v-model="modelForm.yaw" :min="0" @input="update" :step="0.1" :max="360" ></el-slider> :max="360"></el-slider> </el-form-item> <el-form-item label="透明度:"> <el-input size="small" <el-input size="small" v-model="modelForm.alpha" @input="update" ></el-input> <el-slider v-model="modelForm.alpha" @input="update"></el-input> <el-slider v-model="modelForm.alpha" @input="update" :min="0" :step="0.01" :max="1" ></el-slider> :max="1"></el-slider> </el-form-item> </el-form> </div> <el-dialog :title="formInline.title" <el-dialog :title="formInline.title" :visible.sync="dialogVisible" :modal="false" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="handleClose" width="30%" > width="30%"> <div style="height:63vh"> <el-tabs v-model="activeName" @tab-click="handleClick" > <el-tab-pane label="属性" name="first" > <el-form ref="form" <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="属性" name="first"> <el-form ref="form" :model="formInline" label-width="80px" > label-width="80px"> <el-form-item :label="$t('common.name')"> <el-input v-model="formInline.name"></el-input> </el-form-item> <el-form-item :label="$t('common.type')"> <el-select v-model="formInline.type" style="width:100%" > <el-option v-for="item in options" <el-select v-model="formInline.type" style="width:100%"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > :value="item.value"> </el-option> </el-select> @@ -210,110 +144,78 @@ </el-form-item> <el-form-item> <el-button v-show="isShowModel" <el-button v-show="isShowModel" type="success" plain size="small" @click="InsertData" >{{$t('common.increase')}}</el-button> <el-button v-show="!isShowModel" @click="InsertData">{{$t('common.increase')}}</el-button> <el-button v-show="!isShowModel" type="info" plain size="small" @click="EditData" >{{$t('common.update')}}</el-button> @click="EditData">{{$t('common.update')}}</el-button> </el-form-item> </el-form> </el-tab-pane> <el-tab-pane label="附件" name="second" > <el-form :model="fromfile" class="demo-form-inline" > <el-tab-pane label="附件" name="second"> <el-form :model="fromfile" class="demo-form-inline"> <el-form-item> <el-input v-model="fromfile.file" <el-input v-model="fromfile.file" style="width: 300px; margin-right: 20px" :placeholder="$t('common.choose')" disabled ></el-input> <input name="file1" disabled></el-input> <input name="file1" type="file" id="insertFile" multiple="multiple" style="display: none" @change="insertFile( )" /> <el-link @click="getInsertFile( )" :underline="false" ><i class="el-icon-folder-opened"></i></el-link> @change="insertFile( )" /> <el-link @click="getInsertFile( )" :underline="false"><i class="el-icon-folder-opened"></i></el-link> </el-form-item> <el-form-item> <el-row> <el-col :span="3"> <el-link class="elLink" <el-link class="elLink" :underline="false" @click="setAttachInsert" >{{$t('common.append')}}</el-link> @click="setAttachInsert">{{$t('common.append')}}</el-link> </el-col> <el-col :span="3"> <el-link class="elLink" <el-link class="elLink" :underline="false" @click="setAttachDel" >{{$t('common.delete')}}</el-link> @click="setAttachDel">{{$t('common.delete')}}</el-link> </el-col> </el-row> </el-form-item> </el-form> <el-table :data="tableData" <el-table :data="tableData" ref="filterTable" height="calc(100% - 130px)" border style="width: 100%" @selection-change="handleAttatchChange" > <el-table-column type="selection" width="70" /> <el-table-column width="60" @selection-change="handleAttatchChange"> <el-table-column type="selection" width="70" /> <el-table-column width="60" type="index" :label="$t('common.index')" /> <el-table-column prop="name" :label="$t('common.name')" /> :label="$t('common.index')" /> <el-table-column prop="name" :label="$t('common.name')" /> <el-table-column prop="sizes" <el-table-column prop="sizes" :label="$t('common.size')" :formatter="statSizeChange" /> <el-table-column align="center" :formatter="statSizeChange" /> <el-table-column align="center" :label="$t('common.operate')" min-width="100" > min-width="100"> <template slot-scope="scope"> <el-link v-if="matchState(scope, /[]/)" <el-link v-if="matchState(scope, /[]/)" @click="setAttatchDetail(scope.$index, scope.row)" class="elLink" >{{ $t('common.see') }}</el-link> class="elLink">{{ $t('common.see') }}</el-link> </template> </el-table-column> @@ -336,66 +238,48 @@ <map-sdk v-if='showMapVisible'></map-sdk> </div> </el-dialog> --> <el-dialog title="预览" <el-dialog title="预览" :append-to-body="false" :visible.sync="dialog.dialogVisible" width="70%" :close-on-click-modal="false" > <div v-if="dialog.isPdf" class="pdfClass" > <iframe :src="dialog.src" :close-on-click-modal="false"> <div v-if="dialog.isPdf" class="pdfClass"> <iframe :src="dialog.src" type="application/x-google-chrome-pdf" width="100%" height="100%" > height="100%"> </iframe> </div> <div v-if="dialog.isJpg" class="pdfClass" > <div v-if="dialog.isJpg" class="pdfClass"> <el-image style="width:100%; height:100%" <el-image style="width:100%; height:100%" :src="dialog.src" :preview-src-list="[dialog.src]" > :preview-src-list="[dialog.src]"> </el-image> </div> </el-dialog> <div v-show="modelKeyFlag" <div v-show="modelKeyFlag" class="modelLayer box_divm" v-drag > <el-form ref="form" v-drag> <el-form ref="form" :model="modelForm" label-width="80px" > label-width="80px"> <el-form-item label="主键ID"> <el-select v-model="modelLayerId"> <el-option v-for="item in optionKey" <el-option v-for="item in optionKey" :key="item.value" :label="item.label" :value="item.value" > :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" <el-button type="primary" size="small" @click="setSureKeyModelKey" >{{$t('common.confirm')}}</el-button> @click="setSureKeyModelKey">{{$t('common.confirm')}}</el-button> </el-form-item> </el-form> </div> @@ -949,21 +833,25 @@ var type = res.type; if (type == 'DEM') { // window.terrainLayer.deleteObject(); Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(); window.terrainLayer = null; //Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(); //window.terrainLayer = null; window.terrainLayer = new Cesium.CesiumTerrainProvider({ url: res.url }); Viewer.terrainProvider = window.terrainLayer Viewer.camera.flyTo({ /*Viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(113.229279, 31.215949, 1000), orientation: { heading: 6.08434611923462, pitch: Cesium.Math.toRadians(-45.0), roll: 0.0 } });*/ var wkt = this.$wkt.parse(res.geom); var height = this.getHeight(wkt.coordinates[2]); Viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], height), }); } else if (type == 'DOM') { var wkt = this.$wkt.parse(res.geom); var height = this.getHeight(wkt.coordinates[2]) src/views/Tools/LayerTree.vue
@@ -58,18 +58,17 @@ v-show="menuVisible"> <div class="edit" @click="showLayerAttribute()" v-if="!showlocal && !shwoHistogram" v-show="!firstLevel"> v-if="showProp && !shwoHistogram"> <i class="el-icon-tickets"></i> 属性 </div> <div class="edit" @click="positioning()" v-if="showlocal"> v-if="showLocal"> <i class="el-icon-tickets"></i> 定位 </div> <div class="edit" @click="pellucidity()" v-if="showlocal"> v-if="showOpacity"> <i class="el-icon-tickets"></i> 透明度 </div> <div class="edit" @@ -95,13 +94,20 @@ components: { queryinfo }, data () { return { shwoHistogram: false, showlocal: false, showProp: false, // 属性 shwoHistogram: false, // 钻孔柱状图 showLocal: false, // 定位 showOpacity: false, // 不透明度 menuVisible: false, // 菜单 levelArray: [ // 调试数组 0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000, 250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200, 100, 50, 25, 10, 0, ], eleId: "", isShow: false, currentData: "", currentNode: "", menuVisible: false, firstLevel: false, filterText: "", appendNodetitle: "", @@ -193,7 +199,6 @@ let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID,分别上下级菜单,并返回数据 branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性,并赋值 // 属于同一对象问题,例如:令 a=b、c=1 ,然后再令 b.c=c ,那么 a.c=b.c=c=1 ;同理,后续令 c.d=2 ,那么 a.c.d 也是=2; // 由此循环多次后,就能形成相应的树形数据结构 return father.pid == 0; // 返回一级菜单 }); }, @@ -215,48 +220,25 @@ // 要及时关掉监听,不关掉的是一个坑,不信你试试,虽然前台显示的时候没有啥毛病,加一个alert你就知道了 document.removeEventListener("click", this.rmListener); }, //转孔柱状图 async histogram () { this.menuVisible = false var layer = this.currentData.enName.replaceAll("_", ""); this.$store.state.mapSpaceQueryLayer = layer; this.$store.state.mapPopBoxFlag = "2"; this.$store.state.showPopBoxFlag = true; // 过滤节点 filterNode (value, data) { if (!value) return true; return data.cnName.indexOf(value) !== -1; }, // 鼠标右击事件 rightClick (event, object, Node, element) { if (object.type == 1) { return } rightClick (event, object, node, element) { debugger if (object.type == 1 || node.data.children != null) return; this.currentNode = node; this.currentData = object; this.currentNode = Node; this.$store.state.propertiesName = object; this.$store.state.propertiesName = this.currentData; if (this.currentData.serveType == "Tileset" || this.currentData.serveType == "3DML") { this.showModelAttach = true; } else { this.showModelAttach = false; } if (this.currentData.enName == "s_explorationpoint") { this.shwoHistogram = true; } else { this.shwoHistogram = false; } if (Node.data.children == null) { this.firstLevel = false; } else { this.firstLevel = true; } if (Node.data.children == null && Node.data.serveType == "Tileset" || Node.data.serveType == "3DML") { this.showlocal = true; } else if (Node.data.children == null && Node.data.serveType != "Tileset" || Node.data.serveType == "3DML") { this.showlocal = false; } this.menuVisible = true; this.showProp = object.serveType == "WMS"; // 属性 this.shwoHistogram = this.showProp && object.enName == "s_explorationpoint"; // 钻孔柱状图 this.showLocal = ["Tileset", "3DML", "Mpt", "TMS", "DOM", "DEM"].indexOf(object.serveType) > -1; // 定位 this.showOpacity = ["Tileset", "3DML"].indexOf(object.serveType) > -1; // 不透明度 this.menuVisible = this.showProp || this.shwoHistogram || this.showLocal || this.showOpacity; // 菜单 this.$refs.card.$el.style.left = event.pageX + 20 + "px"; this.$refs.card.$el.style.top = event.pageY + "px"; @@ -264,14 +246,50 @@ // 属性显示 showLayerAttribute (data) { this.rmListener(); this.menuVisible = false this.currentData = data ? data : this.currentData; var layer = this.currentData.enName.replaceAll("_", ""); this.$store.state.mapSpaceQueryLayer = layer; this.$store.state.showPopBoxFlag = true; this.$store.state.mapPopBoxFlag = "2"; }, // 模型设置透明度 // 定位 async positioning () { this.menuVisible = false; if (["Tileset", "3DML"].indexOf(this.currentData.serveType) > -1) { for (var i in Viewer.scene.primitives._primitives) { if (Viewer.scene.primitives._primitives[i].id == this.currentData.cnName) { Viewer.flyTo(Viewer.scene.primitives._primitives[i]); break; } } return; } if (["TMS", "DOM", "DEM"].indexOf(this.currentData.serveType) > -1 && this.currentData.pubid) { var data = await comprehensive_selectPubById({ id: this.currentData.pubid }); if (data.result && data.result.geom) { var wkt = this.$wkt.parse(data.result.geom); var height = this.getHeight(wkt.coordinates[2]); Viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], height), // 2000 }); } return; } if ("Mpt" == this.currentData.serveType) { viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(101.8, 37.9, 10000000.0) }); // 中国 } }, // 钻孔柱状图 async histogram () { this.menuVisible = false var layer = this.currentData.enName.replaceAll("_", ""); this.$store.state.mapSpaceQueryLayer = layer; this.$store.state.mapPopBoxFlag = "2"; this.$store.state.showPopBoxFlag = true; }, // 透明度 pellucidity () { this.rmListener(); this.menuVisible = false @@ -284,82 +302,11 @@ } } }, // 模型定位 positioning () { this.menuVisible = false for (var i in Viewer.scene.primitives._primitives) { if ( Viewer.scene.primitives._primitives[i].id == this.currentData.cnName ) { Viewer.flyTo(Viewer.scene.primitives._primitives[i]); } } }, // 编辑节点 editNode (data) { this.rmListener(); this.menuVisible = false this.currentData = data ? data : this.currentData; if (!this.currentData.isEdit) { this.$set(this.currentData, "isEdit", true); } // 获取焦点 this.$nextTick(() => { this.$refs["slotTreeInput" + this.currentData.id].focus(); }); }, menuMoveF (type) { // 将变动之前的node备份 var node = this.currentNode; var data = this.currentData; let copyNode = this.currentNode; // 获取高度 getHeight (level) { if (level > -1 && level < 23) return this.levelArray[level]; let nodeData = {}; if (type === "up") { // 上移 if (node.previousSibling) { // 删除原先的node this.$refs.tree.remove(node.data); // 拿到copy的node // nodeData = CircularJSON.parse(window.sessionStorage.getItem('menuNode')) // // 复制该node到指定位置(参数:1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node) // this.$refs.tree.insertBefore(nodeData.data,nodeData.previousSibling.data) window.sessionStorage.removeItem("menuNode"); } else { this.$message.warning("该菜单已经是当前层最上级"); } } else { // 下移 if (node.nextSibling) { this.$refs.tree.remove(node.data); nodeData = CircularJSON.parse( window.sessionStorage.getItem("menuNode") ); // 参数:1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node this.$refs.tree.insertAfter(nodeData.data, nodeData.nextSibling.data); window.sessionStorage.removeItem("menuNode"); } else { this.$message.warning("该菜单已经是当前层最下级"); } } }, handleDragStart (node, ev) { console.log("drag start", node); }, handleDragEnter (draggingNode, dropNode, ev) { console.log("tree drag enter: ", dropNode.label); }, handleDragLeave (draggingNode, dropNode, ev) { console.log("tree drag leave: ", dropNode.label); }, handleDragOver (draggingNode, dropNode, ev) { console.log("tree drag over: ", dropNode.label); }, handleDragEnd (draggingNode, dropNode, dropType, ev) { console.log("tree drag end: ", dropNode && dropNode.label, dropType); }, handleDrop (draggingNode, dropNode, dropType, ev) { console.log("tree drop: ", dropNode.label, dropType); return this.levelArray[this.levelArray.length - 1]; }, handleCheckChange (data, checked, indeterminate) { if (data.type == 1) { @@ -737,10 +684,10 @@ layer.name = res.cnName; if (data.result.geom) { var wkt = this.$wkt.parse(data.result.geom); Viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], 2000), }); // var wkt = this.$wkt.parse(data.result.geom); // Viewer.camera.flyTo({ // destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], 2000), // }); } this.setChangeWMS(); } @@ -767,12 +714,6 @@ //修改模型矩阵 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); // Viewer.flyTo(tileset); }, // 查询 filterNode (value, data) { if (!value) return true; return data.cnName.indexOf(value) !== -1; }, async setproChange (res) { if (res) {