187 lines
12 KiB
Vue
187 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog v-model="show" append-to-body :close-on-click-modal="false"
|
|
:close-on-press-escape="false" :title="title" width="960px" modal-class="model-dialog-show">
|
|
<div :id="elId"></div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import useBimStore from '@/store/modules/bim'
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
title: '',
|
|
row: null,
|
|
bimStore: null,
|
|
elId: 'gis' + +new Date(),
|
|
defaults: {
|
|
serverIP: `model.jhncidg.com`, //服务IP地址 具体见引擎服务控制台
|
|
port: 8000, //HTTP端口 具体见引擎服务控制台
|
|
useHttps: true, //是否使用Https
|
|
container: `UEgineContainer`, //[必须]引擎场景容器ID
|
|
// Token 可从引擎工作站下载 （必须）不传入则无法加载模型
|
|
secretKey:
|
|
"cbe8c300dfb0280d71bf6546087c6d2fa49260085f53fca86c69755ac3a39199e08cb605efce617acfa509d5f3ee4d7f67a84d7c36cc175589405fde5d995a24258c47f45b34485a2edb350010e2f42cd5b388af45c6b070850288d284cbbbcd51e36f41b756a25f38d27dbe2e47e96b9eb56a96b59d61e02a467e881f70b21989b1a50685b6fc0265f528fc20b876d425a89c4bf6b33f829177fda27027e65b8a94867b381ae88ecd6668e8ca6b6d286dce7e5d799b0a1791905fc1eba1be4bd6b2a0d0983e9fd1184d8dbba49a8569257e195e636a849299be5a52d738b8218ae3e55ca95ec2999742c749dda98108ecfe0622c0e7fe1d76ad60b6c191c99adca5f9cf5e5f096c599f1874ee756fe16dce7e5d799b0a175d5afe5554a4332203e774bed8a045353e9bf5abfe83ffe0cca50ef6c618828a9d63dac2d06e44c19cc1e4d0220e60c6fb1ba2643538d1973ae24d1650ef196ed32b1cdbecb9bf3ae2651ff226b8a2383977aeaabb9225d76f8b62bd8891c29bfb1ba2643538d1973ae24d1650ef196ed32b1cdbecb9bf3aded264d2944b7de536ca05b5a67eccf9e531630520dbe46651d2e0212a534b5d37e40a524d2bbb8599a991777d21e7823e88c9264a91404ad3c355b1486472d2d33d2024825618176f3ca316f1c8864c67da113f439417e93a3a6e65f3b5b13e02b4cf797dd3ef437d453436628b776f17b592e82465766524d976e07cb995f7aeea64611acbe5c7afafd0506174e868b868cd5190eb2aca665e8d49164a81ede6cd674b6676107f753151533a277044030c6924517e4349b5024217bdf743a670fd5d571139e4f0e6cd674b6676107fc8b14b44ceeed441af4b194f05a9561933be0b316b16d035cf14829a5847f70377d6c12f1649400fcab44f4ff52989cf214f8b93be10da84253a49595b8ffa60e29586b86ee4d866c8ffcb81b934e9b51cd8670938da55d3ee5940a08809fab6f7c0a1702e2a8a95cc2ddffad05ffd7c7b7134e53eaa4f83b046182095e9d992f79b33aea9c3effbffbe7fd817b3e44233aa4802e15dfc49a29aa59c8f2497fa711bc068a62def563d8f10f7e48a08896850e0b312512643a819d6c108898dd8a2266bc2bd5ee75d866f1d98d020cafd7bd5f9c0972b08b652da3f7d8f2395dcf14e1860b5a41f63ca076947bd189a6df6b34a0d3b48e62299da383acb371030673a18f4f42a3e1ef21654bc56ed57d610df6c47a708c020420446a051fcfcfe2ec33e49302a9c7b920088012936f0e4972bd8f261f7b7345b2b4c07b28f439b8c363d561580eba60124eaa5aa0834e124254c2ea7e8b20334d705a519dd901833639d7019f49033c4bbb34a5481d3485125cdd7384aad1b3050717025af01dcfac91bea061f4ff485af667dd7ebaf4baeea64611acbe5c740e3c5229a33a810e6eb28a4163283ccebc424f09f933d0eb1a881ed05ca8d5c70958237eb5b91d4e574440ea0c9179a582dc966bcfc1f21cf3630a2823a9a2d22bd09a00b213aae3866768ae2f24dde59f3f21ab1f820a9d2bc9b9c79ecfe3a853fcb2bc95ee8056cd5b4826fa55926733ef859a5f169e6afafd0506174e86864d53d967da98ab0b0e08d14be6d452c753151533a2770444dc3bda33a30522cafafd0506174e868ad58c88e87a3bfc170e2ffb0f223e4e27d1f9f3c7343796941187054ec673ebdbd57ea3b34f9c6ccd2a3c00a7ba1a999546538785d7cc0b40a683a8bbd9cb842f96b87b99f2b3a0e241e69a6993bcca387380d5ea2d8e077753151533a277044c81e5b8a22ff6bdf23c4b6186d657cedfff99a50bc0729d1d320606a1d80beb0", //token
|
|
openearth: false, //[可选]是否开启GIS场景
|
|
bgcolor: "rgba(135 ,206 ,250,1)", //[可选]BIM模式场景背景色
|
|
},
|
|
// 此处传入模型访问地址 -可通过serverAPI接口获取该地址
|
|
modelPath:
|
|
"https://model.jhncidg.com:18086/Tools/output/model/4720827559401934284/root.glt",
|
|
// 模型ID 由用户自定义
|
|
modelID: "4720827559401934284",
|
|
}
|
|
},
|
|
mounted() {
|
|
this.bimStore = useBimStore()
|
|
window.xapp = this
|
|
},
|
|
methods: {
|
|
showDialog(row) {
|
|
this.elId = 'gis' + +new Date()
|
|
this.row = row
|
|
this.show = true
|
|
this.title = row.name
|
|
this.$nextTick(() => {
|
|
this.initCesium()
|
|
})
|
|
},
|
|
initCesium() {
|
|
window.api = new SAPI(
|
|
{
|
|
serverIP: `model.jhncidg.com`, //服务ip地址
|
|
port: 8000, //HTTP端口
|
|
useHttps: true, //使用Https
|
|
container: this.elId, //[必须]容器id
|
|
secretKey: "cbe8c300dfb0280d71bf6546087c6d2fa49260085f53fca86c69755ac3a39199e08cb605efce617acfa509d5f3ee4d7f67a84d7c36cc175589405fde5d995a24258c47f45b34485a2edb350010e2f42cd5b388af45c6b070850288d284cbbbcd51e36f41b756a25f38d27dbe2e47e96b9eb56a96b59d61e02a467e881f70b21989b1a50685b6fc0265f528fc20b876d425a89c4bf6b33f829177fda27027e65b8a94867b381ae88ecd6668e8ca6b6d286dce7e5d799b0a1791905fc1eba1be4bd6b2a0d0983e9fd1184d8dbba49a8569257e195e636a849299be5a52d738b8218ae3e55ca95ec2999742c749dda98108ecfe0622c0e7fe1d76ad60b6c191c99adca5f9cf5e5f096c599f1874ee756fe16dce7e5d799b0a175d5afe5554a4332203e774bed8a045353e9bf5abfe83ffe0cca50ef6c618828a9d63dac2d06e44c19cc1e4d0220e60c6fb1ba2643538d1973ae24d1650ef196ed32b1cdbecb9bf3ae2651ff226b8a2383977aeaabb9225d76f8b62bd8891c29bfb1ba2643538d1973ae24d1650ef196ed32b1cdbecb9bf3aded264d2944b7de536ca05b5a67eccf9e531630520dbe4663b2d265fe6a4c8877fcba7ce8189fbc216cdeb3ecbc1d365395fd220141d4e6d9fd317e3dac7bb223013404ec41c18c9cc748e652ce16fe7061c32d550edfda330c1555e0c08e51f698f96b91615d8229cf32d2e110ec91f1211e23c769b5bbe1aa9a9191a2d3da09800e6efdee12ee04fdc9df330134f94052efc320a8c1a143e939c0e3b1ad476cf3630a2823a9a2dc2a17ec077fd21bfa7550ed054853e32510f8a6ea5c1dff9c3d61f7cf5f649cb25f0dbad9f7f66e3b446946685cead0cfac91bea061f4ff49a2f853c245297edc3d61f7cf5f649cb0f9b84173857a7b67c27928b58b4a6a65f517a43f106335ecc43571d292f54baa4596f82cf86665b367e01045009c18a2b543696b93a5bd44ca8168b525235150ffadf3f628aa7e8a20b9e74d76bd3a1e26b026e5297005a780f011db11ddb55fbabdc0f876c1cdfa5ef7db74bbc52e19c6396ffcf10044da26ecd334722494fc515b205e9624a4468762f63f0143583d1eeaaa85ff95ee50d8f953f44140ab40f29957f914b2241fd1309b7be0d5f9e55207069d393244a5be14de83e99956e957e025b859c7dd3cebcdd4589bf15942a17f162a5b95af68b416632dbf24db069995334a82a49d6060f7a5b770b6e18ecf8cb01c0e21b608156b326e2f4461369f266ad62ac2edf64d1767ac6ea3d83c9ba33a4517541406791c384c597539cc1ffcdbe8f3563a125da5d3905c7f92abef0fe8b967e5bc2832940bf4230fe93bdd44267922427c4db140fd5cb164da87f17f480c39e9c1c17bd48d031e3ce8ab3a49456b48f3b49549c2da3f62d2a8da7d5f36e39ce04af5e3f8253971ef20b10b7b200fbc7c3d3f71e19f74e660313cf3630a2823a9a2d0acd9cb22f32e975d8b70082aab5ddbcb644d89a77efad286dee59796b124081510f8a6ea5c1dff9cb0f31d9a93422d1de95a0001376b8d685af667dd7ebaf4bdfc4840ac1126277417910a2ed0df6e3ca2026459a491059689206d702832f51afafd0506174e868c12cc462769b2e685be04514c976edd04ca2ef020dc56bee8321afe91a1dcbb1afafd0506174e8680f18f43fcd13957eef440c21db889c81888bce192514399191b48af868eda487753151533a27704469e5635404d6fdfb753151533a277044afdd825f7197f289753151533a27704484b9cf9eccaf749638930dbe9049f2ae36689b286e75a81e016aa63061505f57a8c1113b833628e3a18dff8ae8ac8eaae0e7c3406ae4dd4e10880b34c16e1b7405884ca1d5603015a7b0730878fafb08",
|
|
openEarth: false, //[可选]开启Gis场景
|
|
bgColor: 'rgba(135 ,206 ,250,1)', //[可选]bim场景背景色, 传值即为纯色天空盒
|
|
tintColor: 'rgba(255,255,0,1)', //[可选]osgb单体化颜色
|
|
sceneTime: ['13:00', '6:00', '18:00'], //[可选]分别为当前时间、日出时间、日落时间
|
|
cadMode: false, // 是否是Cad图纸预览模式
|
|
},
|
|
() => {
|
|
console.log(this.row)
|
|
//this.row.modelAccessAddress
|
|
console.log("场景初始化完成");
|
|
window.api.Public.setSkyBoxState(0);
|
|
this.addModels();
|
|
|
|
}
|
|
)
|
|
console.log('---->', api)
|
|
},
|
|
addModels() {
|
|
let modelPath=this.row.modelAccessAddress;
|
|
if(modelPath.indexOf("model.jhncidg.com")==-1){
|
|
modelPath="https://model.jhncidg.com:18086"+modelPath
|
|
}
|
|
window.api.Model.add(
|
|
// 此处传入模型访问地址 -可通过serverAPI接口获取该地址
|
|
modelPath,
|
|
// 模型ID 由用户自定义
|
|
this.row.lightweightName,
|
|
(res) => {
|
|
console.log("模型开始加载");
|
|
},
|
|
(res) => {
|
|
console.log("模型加载完毕");
|
|
},
|
|
{
|
|
FlyTo: true,
|
|
}
|
|
);
|
|
},
|
|
initCesium2() {
|
|
// const defaults = { ...this.bimStore.defaults }
|
|
let defaults = {
|
|
container: 'cesiumContainer', //[必须]容器id
|
|
showfps: false,
|
|
openterrain: true,
|
|
imageryprovider: 'tianditu_image',
|
|
openearth: false,
|
|
maxspaceerror: 2000,
|
|
loading: false,
|
|
bgcolor: '#87CEFA',
|
|
outlinecolor: '#000000',
|
|
outlineScaleVal: 1.001,
|
|
selectedcolor: '#ff0000',
|
|
sceneMode: 3,
|
|
TwoMapNavigationEnable: false,
|
|
throughwall: true,
|
|
searchbox: false,
|
|
mapbox: true,
|
|
secretkey: window.config.secretKey, //token.txt文件里的内容
|
|
editmode: false,
|
|
cadmode: false,
|
|
isRequestWebgl2: true,
|
|
requestRenderMode: true,
|
|
colorBlendMode: 2,
|
|
loadAnimation: false,
|
|
isStrictClip: true,
|
|
isMsaaSamples: true,
|
|
isOpenVR: false,
|
|
language: 'zh-CN',
|
|
}
|
|
|
|
defaults.container = this.elId
|
|
defaults.bgcolor = '#c6c9d1'
|
|
defaults.secretkey = window.config.secretKey
|
|
this.sapi_1 = new API(defaults)
|
|
let modelUrl = 'https://model.jhncidg.com:18086/Tools/output/model/5513993365509191778/root.glt'
|
|
//https://model.jhncidg.com:18086/Tools/output/model/5570926434042339486/root.glt
|
|
//this.sapi_1.Model.add(this.row.modelAccessAddress, this.row.lightweightName)
|
|
this.sapi_1.Model.add(modelUrl, this.row.lightweightName)
|
|
let mapOptions = {
|
|
imgs: {
|
|
// 六面图片
|
|
top: './Engine/Assets/Images/Navigation/bim/top.png',
|
|
bottom: './Engine/Assets/Images/Navigation/bim/under.png',
|
|
east: './Engine/Assets/Images/Navigation/bim/east.png',
|
|
south: './Engine/Assets/Images/Navigation/bim/south.png',
|
|
west: './Engine/Assets/Images/Navigation/bim/west.png',
|
|
north: './Engine/Assets/Images/Navigation/bim/north.png',
|
|
},
|
|
offset: {
|
|
// 屏幕坐标偏移
|
|
corner: GLENavigationCube.RightTop,
|
|
x: 25,
|
|
y: 20,
|
|
},
|
|
cube: {
|
|
hoverColor: '#7193dc', // 立方导航快鼠标移过显示颜色
|
|
size: 75, // 导航立方尺寸
|
|
hotPointSize: 7, // 导航立方棱角热点区域尺寸
|
|
cubeTextColor: '#4c4c4ccc', // cube 各个面文字颜色
|
|
cubeStrokeColor: '#374769cc', // cube 各个面边框颜色
|
|
cubeFillColor: '#374769cc', // cube 各个面填充颜色
|
|
},
|
|
zoomRatios: 1, // 缩放倍率
|
|
show: true, // 是否显示
|
|
showAxes: true, // 是否显示XYZ轴线
|
|
}
|
|
this.sapi_1.Plugin.initNavCube(mapOptions)
|
|
this.sapi_1.Public.setDisableMouseState(false)
|
|
this.sapi_1.Public.setIsflipUnderground(false)
|
|
this.sapi_1.Public.event('LEFT_CLICK', (click) => {
|
|
this.sapi_1.Feature.getByEvent(click.position, (json) => {
|
|
if (json != undefined) {
|
|
console.log(json)
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.model-dialog-show{
|
|
iframe{
|
|
height: 800px !important;
|
|
}
|
|
}
|
|
</style> |