|
|
@@ -26,7 +26,7 @@
|
|
|
|
|
|
<script>
|
|
|
|
|
|
-import axios from "axios";
|
|
|
+import qs from "qs";
|
|
|
|
|
|
let viewer = null;
|
|
|
export default {
|
|
|
@@ -73,9 +73,11 @@ export default {
|
|
|
},
|
|
|
props: {
|
|
|
isShow: Boolean,
|
|
|
- item: String,
|
|
|
- extraParams: Object,
|
|
|
- type: Number, // 1-GeoJson、2-3DTiles、3-Gltf、33-Gltf、4-水面
|
|
|
+ type: Number, // 0-GeoJson、1-3DTiles、2-gltf/glb、21-批量加载摄像头、3-水面、4-点位(3DTiles)、5-点位(gltf/glb)
|
|
|
+ item: Object,
|
|
|
+ modelData: Object, // 点位数据 json数组
|
|
|
+ modelUrls: Object, // 模型地址 json数组
|
|
|
+ extraParams: Object, // 参数
|
|
|
close: Function
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -101,40 +103,41 @@ export default {
|
|
|
)
|
|
|
window.viewer = viewer
|
|
|
// 加载模型
|
|
|
- let type = app.type;
|
|
|
- if (app.item) {
|
|
|
- let url = app.item.split('?');
|
|
|
- if (url[0].indexOf('.gltf')===(url[0].length-5)) {
|
|
|
- type = 3;
|
|
|
- }
|
|
|
- }
|
|
|
- app.loadingEntities(type);
|
|
|
+ app.loadingEntities(app.type);
|
|
|
},
|
|
|
loadingEntities(type) {
|
|
|
let app = this;
|
|
|
- if (!type || type === '' || !app.item || app.item === '') {
|
|
|
+ if (!type || type === '') {
|
|
|
return;
|
|
|
}
|
|
|
// 加载GeoJson
|
|
|
- if (type === 1) {
|
|
|
+ if (type === 0) {
|
|
|
let obj = {"type": "Feature", "geometry": JSON.parse(app.item), "properties": {}}
|
|
|
this.addGeoJson(obj);
|
|
|
}
|
|
|
// 加载3DTiles
|
|
|
- if (type === 2) {
|
|
|
- app.add3DTiles(app.item)
|
|
|
+ else if (type === 1) {
|
|
|
+ app.add3DTiles(app.modelUrls)
|
|
|
}
|
|
|
- // 加载gltf
|
|
|
- if (type === 3) {
|
|
|
- app.addGltf(app.item)
|
|
|
+ // 加载gltf/glb
|
|
|
+ else if (type === 2) {
|
|
|
+ app.addGltf(app.modelUrls)
|
|
|
}
|
|
|
- // 批量加载gltf
|
|
|
- if (type === 33) {
|
|
|
- app.addGltfs(app.item)
|
|
|
+ // 批量加载摄像头
|
|
|
+ else if (type === 21) {
|
|
|
+ app.addGltfSxt(app.item)
|
|
|
}
|
|
|
// 加载水面
|
|
|
- if (type === 4) {
|
|
|
- app.addWater(app.item)
|
|
|
+ else if (type === 3) {
|
|
|
+ app.addWater(app.modelData)
|
|
|
+ }
|
|
|
+ // 加载点位(3DTiles)
|
|
|
+ else if (type === 4) {
|
|
|
+ app.addPositionTiles();
|
|
|
+ }
|
|
|
+ // 加载点位(gltf/glb)
|
|
|
+ else if (type === 5) {
|
|
|
+ app.addPositionGltf();
|
|
|
}
|
|
|
},
|
|
|
// 加载GeoJson
|
|
|
@@ -155,15 +158,24 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
// 添加模型
|
|
|
- add3DTiles(url) {
|
|
|
+ add3DTiles(urls) {
|
|
|
let app = this;
|
|
|
- let tileset = SkyScenery.add3DTilesData(url, viewer);
|
|
|
- tileset.tileFailed.addEventListener(function (err) {
|
|
|
- app.$message({message: '模型加载失败', type: 'error'});
|
|
|
+ let tile = undefined;
|
|
|
+ if (!urls || urls.length<1) {
|
|
|
+ app.$message.warning('请检查模型地址');
|
|
|
app.handleClose()
|
|
|
- })
|
|
|
- tileset.readyPromise.then(function () {
|
|
|
- viewer.zoomTo(tileset, {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ for (let i = 0; i < urls.length; i++) {
|
|
|
+ let url = this.addTokenToUrl(urls[i])
|
|
|
+ tile = SkyScenery.add3DTilesData(url, viewer);
|
|
|
+ tile.tileFailed.addEventListener(function (err) {
|
|
|
+ app.$message({message: '模型加载失败', type: 'error'});
|
|
|
+ app.handleClose()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ tile.readyPromise.then(function () {
|
|
|
+ viewer.zoomTo(tile, {
|
|
|
heading: 2.718565,
|
|
|
pitch: -0.415366,
|
|
|
roll: 0.0,
|
|
|
@@ -176,73 +188,106 @@ export default {
|
|
|
});
|
|
|
app.handleClose()
|
|
|
});
|
|
|
- return tileset;
|
|
|
+ return tile;
|
|
|
},
|
|
|
- // 添加gltf
|
|
|
- addGltf(url) {
|
|
|
- let app= this;
|
|
|
- let height = 1;
|
|
|
- let lon = 120.90685004033816;
|
|
|
- let lat = 27.918254593203912;
|
|
|
- let heading = 0;
|
|
|
- let pitch = 0;
|
|
|
- let roll = 0;
|
|
|
- let title = 'gltf';
|
|
|
- if (this.extraParams && this.extraParams.elevation && this.extraParams.elevation!=='') {
|
|
|
- height = Number(this.extraParams.elevation)
|
|
|
+ // 设置 gltf 参数
|
|
|
+ getGltfParams(params) {
|
|
|
+ let obj = {
|
|
|
+ lon: 120.90685004033816,
|
|
|
+ lat: 27.918254593203912,
|
|
|
+ height: 1,
|
|
|
+ heading: 0,
|
|
|
+ pitch: 0,
|
|
|
+ roll: 0,
|
|
|
+ title: '',
|
|
|
}
|
|
|
- if (this.extraParams && this.extraParams.lon && this.extraParams.lon!=='') {
|
|
|
- lon = Number(this.extraParams.lon)
|
|
|
+ if (!params) {
|
|
|
+ return obj;
|
|
|
}
|
|
|
- if (this.extraParams && this.extraParams.lat && this.extraParams.lat!=='') {
|
|
|
- lat = Number(this.extraParams.lat)
|
|
|
+ if (params.lon && params.lon!=='') {
|
|
|
+ obj.lon = Number(params.lon)
|
|
|
}
|
|
|
- if (this.extraParams && this.extraParams.heading && this.extraParams.heading!=='') {
|
|
|
- heading = Number(this.extraParams.heading)
|
|
|
+ if (params.lat && params.lat!=='') {
|
|
|
+ obj.lat = Number(params.lat)
|
|
|
}
|
|
|
- if (this.extraParams && this.extraParams.pitch && this.extraParams.pitch!=='') {
|
|
|
- pitch = Number(this.extraParams.pitch)
|
|
|
+ if (params.elevation && params.elevation!=='') {
|
|
|
+ obj.height = Number(params.elevation)
|
|
|
}
|
|
|
- if (this.extraParams && this.extraParams.roll && this.extraParams.roll!=='') {
|
|
|
- roll = Number(this.extraParams.roll)
|
|
|
+ if (params.heading && params.heading!=='') {
|
|
|
+ obj.heading = Number(params.heading)
|
|
|
}
|
|
|
- if (this.extraParams && this.extraParams.title && this.extraParams.title!=='') {
|
|
|
- title = this.extraParams.title;
|
|
|
+ if (params.pitch && params.pitch!=='') {
|
|
|
+ obj.pitch = Number(params.pitch)
|
|
|
}
|
|
|
-
|
|
|
- var modelObj = new SkyScenery.singleModelBindClick(viewer, {
|
|
|
- url: url,
|
|
|
- lon: lon,
|
|
|
- lat: lat,
|
|
|
- height: height,
|
|
|
- heading: heading,
|
|
|
- pitch: pitch,
|
|
|
- roll: roll,
|
|
|
- info: {
|
|
|
- log: lon,
|
|
|
- lat: lat,
|
|
|
- elevation: height,
|
|
|
- heading: heading,
|
|
|
- pitch: pitch,
|
|
|
- roll: roll,
|
|
|
- title: title
|
|
|
- }
|
|
|
- })
|
|
|
- let origin = SkyScenery.Cartesian3.fromDegrees(lon, lat, 2);
|
|
|
+ if (params.roll && params.roll!=='') {
|
|
|
+ obj.roll = Number(params.roll)
|
|
|
+ }
|
|
|
+ if (params.title && params.title!=='') {
|
|
|
+ obj.title = params.title;
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ // 添加gltf
|
|
|
+ addGltf(urls) {
|
|
|
+ let app = this;
|
|
|
+ let obj = this.getGltfParams(this.extraParams);
|
|
|
+ for (let i = 0; i < urls.length; i++) {
|
|
|
+ let url = this.addTokenToUrl(urls[i]);
|
|
|
+ let modelObj = new SkyScenery.singleModelBindClick(viewer, {
|
|
|
+ url: url,
|
|
|
+ lon: obj.lon,
|
|
|
+ lat: obj.lat,
|
|
|
+ height: obj.height,
|
|
|
+ heading: obj.heading,
|
|
|
+ pitch: obj.pitch,
|
|
|
+ roll: obj.roll,
|
|
|
+ info: obj
|
|
|
+ })
|
|
|
+ modelObj.openClick(info => {
|
|
|
+ app.msgInfo = info
|
|
|
+ app.isMessageShow = true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let origin = SkyScenery.Cartesian3.fromDegrees(obj.lon, obj.lat, 10);
|
|
|
viewer.camera.flyTo({
|
|
|
destination: origin,
|
|
|
orientation: {
|
|
|
- heading: SkyScenery.Math.toRadians(-30), // 方向
|
|
|
- pitch: SkyScenery.Math.toRadians(-10), // 倾斜角度
|
|
|
+ heading: SkyScenery.Math.toRadians(0), // 方向
|
|
|
+ pitch: SkyScenery.Math.toRadians(-90), // 倾斜角度
|
|
|
roll: SkyScenery.Math.toRadians(0),
|
|
|
},
|
|
|
});
|
|
|
- modelObj.openClick(info => {
|
|
|
- app.msgInfo = info
|
|
|
- app.isMessageShow = true
|
|
|
+ },
|
|
|
+ // 添加点位(3DTiles)
|
|
|
+ addPositionTiles() {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 添加点位(Gltf/glb)
|
|
|
+ addPositionGltf(jsonUrls, gltfUrls) {
|
|
|
+ let pos = {}
|
|
|
+ for (let i = 0; i < gltfUrls.length; i++) {
|
|
|
+ for (let j = 0; j < jsonUrls.length; j++) {
|
|
|
+ SkyScenery.addTree(jsonUrls[j],gltfUrls[i]).then((treeArr) => {
|
|
|
+ treeArr.map(function (item) {
|
|
|
+ viewer.scene.primitives.add(item);
|
|
|
+ pos.east = item.geometryInstances.geometry.rectangle.east;
|
|
|
+ pos.north = item.geometryInstances.geometry.rectangle.north;
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ viewer.camera.flyTo({
|
|
|
+ destination: SkyScenery.Cartesian3.fromDegrees(SkyScenery.Math.toDegrees(east),SkyScenery.Math.toDegrees(north), 300),
|
|
|
+ orientation: {
|
|
|
+ heading: SkyScenery.Math.toRadians(0),
|
|
|
+ pitch: SkyScenery.Math.toRadians(-90),
|
|
|
+ roll: 0,
|
|
|
+ }
|
|
|
})
|
|
|
+
|
|
|
},
|
|
|
- addGltfs(url) {
|
|
|
+ // 添加全部摄像头
|
|
|
+ addGltfSxt(url) {
|
|
|
let app = this;
|
|
|
let modelObj = new SkyScenery.loadModelBindClick(viewer, {
|
|
|
url: url,
|
|
|
@@ -263,33 +308,66 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
// 添加水面
|
|
|
- addWater(url) {
|
|
|
- let water = SkyScenery.WaterFromRequest(url, {
|
|
|
- frequency: 20.0, // 控制波数的数字。
|
|
|
- animationSpeed: 0.01, // 控制水的动画速度的数字。
|
|
|
- amplitude: 50.0, // 控制水波振幅的数字。
|
|
|
- specularIntensity: 0.8, // 控制镜面反射强度的数字。
|
|
|
- baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
|
|
|
- blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
|
|
|
- height: 0.2, // 水体下表面与地表之间的高度
|
|
|
- diffHeight: 1,// 水体高度
|
|
|
- clampToGround: false, //是否贴地
|
|
|
- opacity: 0.7, //透明度
|
|
|
- });
|
|
|
- water.then((waterObj) => {
|
|
|
- viewer.scene.primitives.add(waterObj);
|
|
|
- let east = waterObj.geometryInstances.geometry.rectangle.east;
|
|
|
- let north = waterObj.geometryInstances.geometry.rectangle.north;
|
|
|
- viewer.camera.flyTo({
|
|
|
- destination: SkyScenery.Cartesian3.fromDegrees(SkyScenery.Math.toDegrees(east),SkyScenery.Math.toDegrees(north), 338.8293456247198),
|
|
|
- orientation: {
|
|
|
- heading: SkyScenery.Math.toRadians(0),
|
|
|
- pitch: SkyScenery.Math.toRadians(-90),
|
|
|
- roll: 0,
|
|
|
+ addWater(urls) {
|
|
|
+ let app = this;
|
|
|
+ for (let i = 0; i < urls.length; i++) {
|
|
|
+ let url = this.addTokenToUrl(urls[i])
|
|
|
+ let water = SkyScenery.WaterFromRequest(url, {
|
|
|
+ frequency: 20.0, // 控制波数的数字。
|
|
|
+ animationSpeed: 0.01, // 控制水的动画速度的数字。
|
|
|
+ amplitude: 50.0, // 控制水波振幅的数字。
|
|
|
+ specularIntensity: 0.8, // 控制镜面反射强度的数字。
|
|
|
+ baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
|
|
|
+ blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
|
|
|
+ height: 0.2, // 水体下表面与地表之间的高度
|
|
|
+ diffHeight: 1,// 水体高度
|
|
|
+ clampToGround: false, //是否贴地
|
|
|
+ opacity: 0.7, //透明度
|
|
|
+ });
|
|
|
+ water.then((waterObj) => {
|
|
|
+ viewer.scene.primitives.add(waterObj);
|
|
|
+ if (i===0) {
|
|
|
+ app.flyToPrimitive(waterObj)
|
|
|
}
|
|
|
})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addTokenToUrl(url) {
|
|
|
+ try {
|
|
|
+ let obj = new URL(url);
|
|
|
+ let searchStr = obj.search;
|
|
|
+ if (searchStr.indexOf('?')===0) {
|
|
|
+ searchStr = searchStr.substring(1)
|
|
|
+ }
|
|
|
+ let params = qs.parse(searchStr)
|
|
|
+ if (!params['token'] || params['token']==='') {
|
|
|
+ params['token'] = this.$store.state.token;
|
|
|
+ }
|
|
|
+ let pathname = obj.pathname;
|
|
|
+ if(pathname==='/') {
|
|
|
+ pathname = '';
|
|
|
+ }
|
|
|
+ url = obj.origin + pathname + '?' + qs.stringify(params)
|
|
|
+ } catch (e) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ return url;
|
|
|
+ },
|
|
|
+ flyToPrimitive(obj) {
|
|
|
+ let east = obj.geometryInstances.geometry.rectangle.east;
|
|
|
+ let north = obj.geometryInstances.geometry.rectangle.north;
|
|
|
+ let west = obj.geometryInstances.geometry.rectangle.west;
|
|
|
+ let south = obj.geometryInstances.geometry.rectangle.south;
|
|
|
+ let lon = (east+west)/2;
|
|
|
+ let lat = (north+south)/2;
|
|
|
+ viewer.camera.flyTo({
|
|
|
+ destination: SkyScenery.Cartesian3.fromDegrees(SkyScenery.Math.toDegrees(lon),SkyScenery.Math.toDegrees(lat), 338.8293456247198),
|
|
|
+ orientation: {
|
|
|
+ heading: SkyScenery.Math.toRadians(0),
|
|
|
+ pitch: SkyScenery.Math.toRadians(-90),
|
|
|
+ roll: 0,
|
|
|
+ }
|
|
|
})
|
|
|
-
|
|
|
},
|
|
|
handleClose() {
|
|
|
this.close(false)
|
tianyabing