| | |
| | | <template> |
| | | <div |
| | | class="mapBox" |
| | | v-loading="loading" |
| | | :element-loading-text="loadingText" |
| | | element-loading-background="rgba(0, 0, 0, 0.8)" |
| | | > |
| | | <div class="mapBox"> |
| | | <div id="mapdiv"> |
| | | <div |
| | | class="menu_Top box_divm" |
| | |
| | | <el-form |
| | | ref="form" |
| | | :model="coordFrom" |
| | | label-width="50px" |
| | | > |
| | | <el-form-item label="经度:"> |
| | | <el-input |
| | | v-model="coordFrom.lon" |
| | | placeholder="请输入经度" |
| | | ></el-input> |
| | | <el-input v-model="coordFrom.lon"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="纬度:"> |
| | | <el-input |
| | | v-model="coordFrom.lat" |
| | | placeholder="请输入纬度" |
| | | ></el-input> |
| | | <el-input v-model="coordFrom.lat"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="高度:"> |
| | | <el-input |
| | | v-model="coordFrom.height" |
| | | placeholder="请输入高度" |
| | | ></el-input> |
| | | <el-input v-model="coordFrom.height"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button |
| | |
| | | </div> |
| | | <!-- <div style="display: flex;">--> |
| | | <div |
| | | style=" position: absolute; |
| | | bottom: 84px; |
| | | right: 46px; |
| | | height: 30px; |
| | | width: 30px; |
| | | z-index: 101; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | border: 1px solid rgba(255, 255, 255, 0.5);" |
| | | class="changeTerrain" |
| | | @click="changeTerrainLayer" |
| | | > |
| | | <div |
| | |
| | | <!-- class="center CenDiv"--> |
| | | <div |
| | | @click="changeMenulayer" |
| | | style=" position: absolute; |
| | | bottom: 116px; |
| | | right: 46px; |
| | | height: 30px; |
| | | width: 30px; |
| | | z-index: 101; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | border: 1px solid rgba(255, 255, 255, 0.5);" |
| | | class="changeLayer" |
| | | > |
| | | <div |
| | | title="底图切换" |
| | |
| | | |
| | | <div |
| | | @click="changeMapType" |
| | | style=" position: absolute; |
| | | bottom: 52px; |
| | | right: 46px; |
| | | height: 30px; |
| | | width: 30px; |
| | | z-index: 101; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | border: 1px solid rgba(255, 255, 255, 0.5);" |
| | | class="changeMapType" |
| | | > |
| | | <div |
| | | title="2/3维切换" |
| | |
| | | |
| | | </div> |
| | | </el-dialog> |
| | | <el-dialog |
| | | title="瓦片下载" |
| | | :append-to-body="false" |
| | | :visible.sync="downTitleFlag" |
| | | :close-on-click-modal="false" |
| | | :show-close="false" |
| | | width="30%" |
| | | > |
| | | <el-form |
| | | :model="ruleForm" |
| | | status-icon |
| | | :rules="rules" |
| | | ref="ruleForm" |
| | | label-width="100px" |
| | | class="demo-ruleForm" |
| | | > |
| | | <el-form-item |
| | | label="名称" |
| | | prop="title" |
| | | > |
| | | <el-input |
| | | v-model="ruleForm.title" |
| | | size="small" |
| | | placeholder="请输入数据名称..." |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | label="密码" |
| | | prop="pass" |
| | | > |
| | | <el-input |
| | | show-password |
| | | type="password" |
| | | v-model="ruleForm.pass" |
| | | autocomplete="off" |
| | | size="small" |
| | | placeholder="请输入密码..." |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | label="确认密码" |
| | | prop="checkPass" |
| | | > |
| | | <el-input |
| | | show-password |
| | | type="password" |
| | | v-model="ruleForm.checkPass" |
| | | autocomplete="off" |
| | | size="small" |
| | | placeholder="确认密码..." |
| | | ></el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <el-button |
| | | type="primary" |
| | | size="small" |
| | | @click='submitTitleDown("ruleForm")' |
| | | >提交</el-button> |
| | | <el-button |
| | | size="small" |
| | | @click='cannelTitleDown("ruleForm")' |
| | | >取消</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-dialog> |
| | | <!-- <div--> |
| | | <!-- @click="changeMenulayer"--> |
| | | <!-- class="center CenDiv"--> |
| | |
| | | |
| | | </div> |
| | | <model-property ref='modelProperty'></model-property> |
| | | <iframe |
| | | id="downFrame" |
| | | src="" |
| | | style="display: none; border: 0; padding: 0; height: 0; width: 0" |
| | | ></iframe> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | comprehensive_selectRoute, |
| | | dataLib_selectFiles, dataQuery_selectFields, dataQuery_selectDomains, |
| | | dataQuery_selectByPage, |
| | | comprehensive_selectPubById, comprehensive_selectModelByGuid, decr, |
| | | encr, inquiry_downloadTiles, sign_getPublicKey |
| | | comprehensive_selectPubById, comprehensive_selectModelByGuid |
| | | } from '../api/api' |
| | | import { getToken } from '@/utils/auth' |
| | | |
| | |
| | | } |
| | | } |
| | | } |
| | | callback(); |
| | | } |
| | | }; |
| | | var checkAge = (rule, value, callback) => { |
| | | if (!value) { |
| | | return callback(new Error('数据名称不能为空')); |
| | | } |
| | | callback(); |
| | | |
| | | }; |
| | | var validatePass = (rule, value, callback) => { |
| | | if (value === '') { |
| | | callback(new Error('请输入密码')); |
| | | } else { |
| | | var passwordreg = |
| | | /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$/ |
| | | |
| | | if (!passwordreg.test(value)) { |
| | | callback(new Error("密码必须由数字、字母、特殊字符组合,请输入13-20位")) |
| | | } |
| | | callback(); |
| | | } |
| | | }; |
| | | var validatePass2 = (rule, value, callback) => { |
| | | if (value === '') { |
| | | callback(new Error('请再次输入密码')); |
| | | } else if (value !== this.ruleForm.pass) { |
| | | callback(new Error('两次输入密码不一致!')); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | |
| | | message: "坐标点经纬度错误,坐标应在[116.xxx, 39.yyy]范围", |
| | | }, |
| | | ], |
| | | pass: [ |
| | | { validator: validatePass, trigger: 'blur' } |
| | | ], |
| | | checkPass: [ |
| | | { validator: validatePass2, trigger: 'blur' } |
| | | ], |
| | | title: [ |
| | | { validator: checkAge, trigger: 'blur' } |
| | | ] |
| | | }, |
| | | bufFrom: { |
| | | val: 50, |
| | | }, |
| | | coordFrom: { |
| | | lon: "", |
| | | lat: "", |
| | | height: "", |
| | | lon: 116.3911, |
| | | lat: 39.9115, |
| | | height: 100000, |
| | | }, |
| | | listData: { |
| | | name: null, |
| | |
| | | valueX: 0, |
| | | valueY: 0, |
| | | terrainflag: false, |
| | | downTitleFlag: false, |
| | | downTitleData: null, |
| | | ruleForm: { |
| | | pass: '', |
| | | checkPass: '', |
| | | title: '' |
| | | }, |
| | | loadingText: '', |
| | | loading: false, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | }); |
| | | //模型捕捉 |
| | | this.catchmodel() |
| | | this.$bus.$on("titleDown", res => { |
| | | this.setDownLoadTitle(res); |
| | | }) |
| | | |
| | | window.localStorage.setItem('slider_x', this.valueX); |
| | | window.localStorage.setItem('slider_y', this.valueY); |
| | | window.localStorage.setItem('slider_z', this.valueZ); |
| | | }, |
| | | methods: { |
| | | setDownLoadTitle(res) { |
| | | this.signGetPublicKey() |
| | | this.downTitleFlag = true; |
| | | this.downTitleData = res; |
| | | |
| | | }, |
| | | async signGetPublicKey() { |
| | | const res = await sign_getPublicKey() |
| | | if (res && res.code == 200) { |
| | | window.encrypt = new JSEncrypt() |
| | | encrypt.setPublicKey(res.result) |
| | | } |
| | | }, |
| | | submitTitleDown(formName) { |
| | | this.$refs[formName].validate((valid) => { |
| | | if (valid) { |
| | | |
| | | this.downTitleData.title = this.ruleForm.title |
| | | // this.downTitleData.pwd = encr(this.ruleForm.pass) |
| | | this.downTitleData.pwd = encrypt.encrypt(this.ruleForm.pass) |
| | | this.getDownLoadTile(this.downTitleData); |
| | | this.cannelTitleDown(); |
| | | } else { |
| | | |
| | | console.log('error submit!!'); |
| | | return false; |
| | | } |
| | | }); |
| | | }, |
| | | async getDownLoadTile(res) { |
| | | this.loading = true; |
| | | this.loadingText = "数据下载中,请稍等..." |
| | | $.ajax({ |
| | | url: BASE_URL + "/inquiry/downloadTiles?token=" + getToken(), |
| | | type: "POST", |
| | | data: JSON.stringify(res), |
| | | dataType: 'json', // html、json、jsonp、script、text |
| | | contentType: "application/json", // "application/x-www-form-urlencoded" |
| | | success: (data) => { |
| | | var token = getToken() |
| | | var url = BASE_URL + "/dataLib/downloadFile?token=" + token + "&guid=" + data.result + "&pwd=" + res.pwd; |
| | | $("#downFrame").attr("src", url).click(); |
| | | this.loading = false; |
| | | this.loadingText = "" |
| | | }, |
| | | error: function (e) { |
| | | } |
| | | }); |
| | | }, |
| | | cannelTitleDown(formName) { |
| | | this.downTitleFlag = false; |
| | | // this.$refs[formName].resetFields(); |
| | | this.ruleForm = { |
| | | pass: '', |
| | | checkPass: '', |
| | | title: '' |
| | | } |
| | | }, |
| | | catchmodel() { |
| | | var that = this; |
| | | window.pickedFeature; |
| | | window.pickedColor; |
| | | window.modeCatchHandler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); |
| | | window.modeCatchHandler.setInputAction((event) => { |
| | | if (window.pickedColor) { |
| | | window.pickedFeature && (window.pickedFeature.color = window.pickedColor); |
| | | } |
| | | window.pickedFeature && (window.pickedFeature.color = window.pickedColor); |
| | | window.pickedFeature = sgworld.Viewer.scene.pick(event.position); |
| | | if (Cesium.defined(window.pickedFeature)) { |
| | | if (window.pickedFeature.primitive instanceof Cesium.Cesium3DTileset) { |
| | | if (window.pickedFeature && window.pickedFeature.getProperty) { |
| | | if (window.pickedFeature) { |
| | | window.pickedColor = window.pickedFeature.color |
| | | window.pickedFeature.color = Cesium.Color.RED.withAlpha(0.3); |
| | | |
| | |
| | | }, Cesium.ScreenSpaceEventType.LEFT_CLICK) |
| | | }, |
| | | async setModelInfoData(result) { |
| | | var modelKey = 'id' |
| | | if (result.tileset.pubid > 0) { |
| | | const data = await comprehensive_selectPubById({ id: result.tileset.pubid }) |
| | | if (data.code != 200) { |
| | | return |
| | | var modelKey = 'id'; |
| | | debugger |
| | | var modelid; |
| | | if (result.tileset) { |
| | | if (result.tileset.pubid > 0) { |
| | | |
| | | const data = await comprehensive_selectPubById({ id: result.tileset.pubid }) |
| | | if (data.code != 200) { |
| | | return |
| | | } else { |
| | | debugger |
| | | modelKey = JSON.parse(data.result.json).modelid |
| | | } |
| | | if (!modelKey) { |
| | | return this.$message('没有模型主键ID,无法查询数据'); |
| | | } |
| | | modelid = pickedFeature.getProperty(modelKey); |
| | | } |
| | | if (!JSON.parse(data.result.json)) { |
| | | return this.$message('没有数据,无法获取主键ID'); |
| | | } |
| | | modelKey = JSON.parse(data.result.json).modelid |
| | | if (!modelKey) { |
| | | return this.$message('没有模型主键ID,无法查询数据'); |
| | | } |
| | | } else { |
| | | modelid = '3dml' + result.primitive.id; |
| | | } |
| | | var that = this |
| | | |
| | | var obj = { |
| | | layerid: pickedFeature.primitive.layerId, |
| | | modelid: pickedFeature.getProperty(modelKey) |
| | | modelid: modelid |
| | | } |
| | | |
| | | const data1 = await comprehensive_selectModelByGuid(obj); |
| | |
| | | } |
| | | |
| | | that.$store.state.catModelInfo = { |
| | | id: pickedFeature.getProperty(modelKey), |
| | | id: modelid, |
| | | name: name, |
| | | type: type, |
| | | bak: bak, |
| | |
| | | changeTerrainLayer() { |
| | | if (this.terrainflag) { |
| | | Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(); |
| | | window.terrainDemLayer = null; |
| | | var option = { |
| | | url: window.sceneConfig.SGUrl, |
| | | layerName: window.sceneConfig.mptName, |
| | | requestVertexNormals: true, |
| | | }; |
| | | window.terrainMptLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, ""); |
| | | window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, ""); |
| | | Viewer.camera.flyTo({ |
| | | destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000), |
| | | }); |
| | | |
| | | } else { |
| | | window.terrainMptLayer.deleteObject(); |
| | | window.terrainMptLayer = null; |
| | | window.terrainLayer.deleteObject(); |
| | | window.terrainLayer = null; |
| | | |
| | | window.terrainDemLayer = new Cesium.CesiumTerrainProvider({ |
| | | window.terrainLayer = new Cesium.CesiumTerrainProvider({ |
| | | url: LFData + '/3d/terrain/dem20230321' |
| | | }); |
| | | Viewer.terrainProvider = window.terrainDemLayer |
| | | Viewer.terrainProvider = window.terrainLayer |
| | | Viewer.camera.flyTo({ |
| | | destination: Cesium.Cartesian3.fromDegrees(113.229279, 31.215949, 1000), |
| | | orientation: { |
| | |
| | | }, |
| | | //定位 |
| | | setCoordLocal() { |
| | | var lon = parseFloat(this.coordFrom.lon); |
| | | var lat = parseFloat(this.coordFrom.lat); |
| | | var height = parseFloat(this.coordFrom.height); |
| | | var lon = parseFloat(this.coordFrom.lon) |
| | | var lat = parseFloat(this.coordFrom.lat) |
| | | var height = parseFloat(this.coordFrom.height) == NaN ? parseFloat(this.coordFrom.height) : 100; |
| | | |
| | | var position = { |
| | | X: lon, |
| | | Y: lat, |
| | |
| | | z-index: 40; |
| | | position: absolute; |
| | | right: 8%; |
| | | bottom: 10%; |
| | | bottom: 1%; |
| | | } |
| | | .propertiesPop { |
| | | width: 350px; |