lishenfeng
/
tsg-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

模型、倾斜摄影引入

qzc-dev-demo
秦子超 2025-08-07 18:42:39 +08:00
parent 1488f002b6
commit 1f59f84727
8 changed files with 1694 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/models/dam/license.txt Normal file
View File

@ -0,0 +1,11 @@
Model Information:
* title: El Pontón de la Oliva | PATONES, MADRID
* source: https://sketchfab.com/3d-models/el-ponton-de-la-oliva-patones-madrid-eb3cb2b70a8d439aa8abf598989315c3
* author: Arqueomodel3D (https://sketchfab.com/juanbrualla)
Model License:
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
* requirements: Author must be credited. Commercial use is allowed.
If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
This work is based on "El Pontón de la Oliva | PATONES, MADRID" (https://sketchfab.com/3d-models/el-ponton-de-la-oliva-patones-madrid-eb3cb2b70a8d439aa8abf598989315c3) by Arqueomodel3D (https://sketchfab.com/juanbrualla) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)

BIN
public/models/dam/scene.bin Normal file
View File

Binary file not shown.

1178
public/models/dam/scene.gltf Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/models/dam/textures/PONTON_OLIVA.1001_baseColor.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 MiB

132
src/views/Home/MapCtrl/Map3D/Map3D.js
View File

@ -1,6 +1,7 @@
import config from '../config';
import LayerMgr3D from './layermgr3d';
import BaseMap from '../basemap';
import Demo3D from './demo'
import { ToolManager } from './ToolManager3D';
const { Cesium } = window;
@ -38,6 +39,7 @@ export default class Map3D extends BaseMap {
this._map = null; // openlayers map obj
this.layerMgr = null;
this.toolMgr = null;
this.demo = null;
// @ts-ignore
const open = XMLHttpRequest.prototype.open;
@ -59,73 +61,31 @@ export default class Map3D extends BaseMap {
const tiandiKey = "efc861f25f96dc6e5f884f0403ebfefd"; //天地图key，官网申请
const baseUrl = "https://{s}.tianditu.gov.cn";//'https://t{0-7}.tianditu.gov.cn';
/*const viewer = new Cesium.Viewer(this.divid, {
animation: false,
baseLayerPicker: false,
geocoder: false,
sceneModePicker: false,
fullscreenButton: false,
homeButton: false,
timeline: false,
navigationHelpButton: false,
// scene3DOnly: true,
shadows: false,
infoBox: false,
terrainProvider: new Cesium.CesiumTerrainProvider({
//url: config.baseDemUrl,
url: 'http://res3dstatic5.cloudowr.cn/wufeng/terrain',
requestVertexNormals: true,
}),
sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
//url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali',
// url: 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd',
url: `http://res3dstatic{s}.cloudowr.cn/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`,
// url: `http://112.35.144.31:8888/lfdzspd/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`,
/!*subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
maximumLevel: 18,*!/
subdomains: ['1', '2', '3'],
maximumLevel: 17,
}),
// targetFrameRate: 10,
});*/
const viewer = new Cesium.Viewer(this.divid, {
terrainProvider: new Cesium.CesiumTerrainProvider({
//url: 'http://res3dstatic5.cloudowr.cn/wufeng/terrain',
url:"/shzh/mapres/terrain",
requestVertexNormals: true,
}),
imageryProvider: new Cesium.UrlTemplateImageryProvider({
//url: `http://res3dstatic{s}.cloudowr.cn/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`,
url: baseUrl + '/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='+tiandiKey,
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
//minimumLevel:10,
maximumLevel: 17,
}),
scene3DOnly: true,
animation: false,
baseLayerPicker: false,
geocoder: false,
sceneModePicker: false,
fullscreenButton: false,
homeButton: false,
timeline: false,
navigationHelpButton: false,
shadows: false,
infoBox: false,
skyAtmosphere: false,//去掉球边缘
});
terrain: Cesium.Terrain.fromWorldTerrain({
requestVertexNormals: true,
}),
scene3DOnly: true,//用于强制场景以 3D 模式运行，禁止切换至 2D 或 Columbus 视图
animation: false,//获取动画小部件。
baseLayerPicker: false,//获取BaseLayerPicker。
geocoder: false,//获取地理编码器
sceneModePicker: false,//Gets the SceneModePicker.
fullscreenButton: false,
homeButton: false,
timeline: false,
navigationHelpButton: false,//导航帮助按钮
shadows: false,//确定阴影是否由光源投射。
infoBox: false,
skyAtmosphere: false,//去掉球边缘
});
//设置地表透明
let globe = viewer.scene.globe;
globe.depthTestAgainstTerrain = false;
globe.depthTestAgainstTerrain = false;//关闭深度测试
//viewer.scene.skyAtmosphere.show = false; //关闭大气层阴影
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 200000;
// viewer.scene.screenSpaceCameraController.maximumZoomDistance = 200000;
viewer.scene.globe.enableLighting = false; //关闭光照
viewer.shadows = false;//关闭阴影
viewer.scene.globe.depthTestAgainstTerrain = false;//解决地形遮挡entity问题
@ -136,34 +96,31 @@ export default class Map3D extends BaseMap {
viewer.scene.sun.show = false; //太阳
viewer.scene.skyBox.show = false; //天空盒
viewer.resolutionScale = 1.0; //画面细度，默认值为1.0
viewer.scene.fxaa = false;
viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;//设置球的基础色
viewer.scene.globe.undergroundColor= Cesium.Color.BLACK.withAlpha(0.5);//设置球的地下色
viewer.scene.backgroundColor = Cesium.Color.BLACK;
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
Cesium.CameraEventType.RIGHT_DRAG, Cesium.CameraEventType.PINCH,
{ eventType: Cesium.CameraEventType.LEFT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL },
{ eventType: Cesium.CameraEventType.RIGHT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL }
];
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH
];
//加载倾斜摄影
var tileset = new Cesium.Cesium3DTileset({
//url: 'http://res3dstatic7.cloudowr.cn/wufeng/3dtile/tileset.json',
url: localStorage.getItem('address')==="wufeng"?
'service2/kshdata/1221wtz-3dtile-all/tileset.json':
"service2/kshdata/GRH/tileset.json",
maximumScreenSpaceError: 32,
maximumMemoryUsage: 100, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡
});
// var tileset = new Cesium.Cesium3DTileset({
// //url: 'http://res3dstatic7.cloudowr.cn/wufeng/3dtile/tileset.json',
// url: localStorage.getItem('address')==="wufeng"?
// 'service2/kshdata/1221wtz-3dtile-all/tileset.json':
// "service2/kshdata/GRH/tileset.json",
// maximumScreenSpaceError: 32,
// maximumMemoryUsage: 100, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡
// });
// fetch(`${process.env.PUBLIC_URL}/data/geojson/${localStorage.getItem('address')}/boua.geojson`)
// .then(resp => resp.json())
@ -219,16 +176,7 @@ export default class Map3D extends BaseMap {
clampToGround: true,
}));*/
tileset.readyPromise.then(function () {
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 10
)
);
});
//监听地图移动完成事件
viewer.camera.moveEnd.addEventListener(() => {
@ -241,6 +189,12 @@ export default class Map3D extends BaseMap {
});
this.layerMgr = new LayerMgr3D(viewer);
this.demo = new Demo3D()
this.demo.getGltf(viewer)
this.demo.getQxsy(viewer)
viewer.scene.postRender.addEventListener(() => {
this.dispatch.runtime.tickViewChanged();
this.layerMgr.frameUpdate();
@ -286,13 +240,13 @@ export default class Map3D extends BaseMap {
}
coordinateToPixel(lgtd, lttd, elev) {
const pt = Cesium.Cartesian3.fromDegrees(lgtd, lttd, elev);
const result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
this._map.scene, pt);
if (!result) {
return null
}
return [result.x, result.y, pt.x, pt.y, pt.z];
// const pt = Cesium.Cartesian3.fromDegrees(lgtd, lttd, elev);
// const result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
// this._map.scene, pt);
// if (!result) {
// return null
// }
// return [result.x, result.y, pt.x, pt.y, pt.z];
}
/**

333
src/views/Home/MapCtrl/Map3D/Map3DOld.js Normal file
View File

@ -0,0 +1,333 @@
import config from '../config';
import LayerMgr3D from './layermgr3d';
import BaseMap from '../basemap';
import { ToolManager } from './ToolManager3D';
const { Cesium } = window;
function __prepare_ces(dispatch) {
Cesium.CesiumWidget.prototype.showErrorPanel = function (title) {
dispatch && dispatch.map.setMode('2d');
if (title && title.indexOf('constructing') >= 0) {
alert('无法初始化三维场景，如果一直出现此问题，请尝试下载最新的chrome浏览器');
} else {
alert('三维场景渲染出现问题');
}
};
}
/*根据camera高度近似计算当前层级*/
const heightToZoom = ( height) => {
var A = 40487.57;
var B = 0.00007096758;
var c = 91610.74;
var D = -40467.74;
return Math.round(D+(A-D)/(1+Math.pow( height/c,B)) );
}
/**
* OL 封装
*/
export default class Map3D extends BaseMap {
constructor({ divid, dispatch }) {
super();
this.dispatch = dispatch;
this.divid = divid; // div element id
this._map = null; // openlayers map obj
this.layerMgr = null;
this.toolMgr = null;
// @ts-ignore
const open = XMLHttpRequest.prototype.open;
// @ts-ignore
XMLHttpRequest.prototype.open = function (method, url, ...rest) {
if (url.startsWith('http://res3dstatic7')) {
url = url.replaceAll('+', '%2B');
}
return open.call(this, method, url, ...rest);
};
}
/**
* 初始化地图、图层
*/
init() {
__prepare_ces(this.dispatch);
const tiandiKey = "efc861f25f96dc6e5f884f0403ebfefd"; //天地图key，官网申请
const baseUrl = "https://{s}.tianditu.gov.cn";//'https://t{0-7}.tianditu.gov.cn';
/*const viewer = new Cesium.Viewer(this.divid, {
animation: false,
baseLayerPicker: false,
geocoder: false,
sceneModePicker: false,
fullscreenButton: false,
homeButton: false,
timeline: false,
navigationHelpButton: false,
// scene3DOnly: true,
shadows: false,
infoBox: false,
terrainProvider: new Cesium.CesiumTerrainProvider({
//url: config.baseDemUrl,
url: 'http://res3dstatic5.cloudowr.cn/wufeng/terrain',
requestVertexNormals: true,
}),
sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
//url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali',
// url: 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd',
url: `http://res3dstatic{s}.cloudowr.cn/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`,
// url: `http://112.35.144.31:8888/lfdzspd/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`,
/!*subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
maximumLevel: 18,*!/
subdomains: ['1', '2', '3'],
maximumLevel: 17,
}),
// targetFrameRate: 10,
});*/
const viewer = new Cesium.Viewer(this.divid, {
terrainProvider: new Cesium.CesiumTerrainProvider({
//url: 'http://res3dstatic5.cloudowr.cn/wufeng/terrain',
url:"/shzh/mapres/terrain",
requestVertexNormals: true,
}),
imageryProvider: new Cesium.UrlTemplateImageryProvider({
//url: `http://res3dstatic{s}.cloudowr.cn/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`,
url: baseUrl + '/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='+tiandiKey,
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
//minimumLevel:10,
maximumLevel: 17,
}),
scene3DOnly: true,
animation: false,
baseLayerPicker: false,
geocoder: false,
sceneModePicker: false,
fullscreenButton: false,
homeButton: false,
timeline: false,
navigationHelpButton: false,
shadows: false,
infoBox: false,
skyAtmosphere: false,//去掉球边缘
});
//设置地表透明
let globe = viewer.scene.globe;
globe.depthTestAgainstTerrain = false;
//viewer.scene.skyAtmosphere.show = false; //关闭大气层阴影
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 200000;
viewer.scene.globe.enableLighting = false; //关闭光照
viewer.shadows = false;//关闭阴影
viewer.scene.globe.depthTestAgainstTerrain = false;//解决地形遮挡entity问题
//优化项--关闭相关特效
viewer.scene.moon.show = false; //月亮
viewer.scene.fog.enabled = false; //雾
viewer.scene.sun.show = false; //太阳
viewer.scene.skyBox.show = false; //天空盒
viewer.resolutionScale = 1.0; //画面细度，默认值为1.0
viewer.scene.fxaa = false;
viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;//设置球的基础色
viewer.scene.globe.undergroundColor= Cesium.Color.BLACK.withAlpha(0.5);//设置球的地下色
viewer.scene.backgroundColor = Cesium.Color.BLACK;
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
Cesium.CameraEventType.RIGHT_DRAG, Cesium.CameraEventType.PINCH,
{ eventType: Cesium.CameraEventType.LEFT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL },
{ eventType: Cesium.CameraEventType.RIGHT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL }
];
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH
];
//加载倾斜摄影
var tileset = new Cesium.Cesium3DTileset({
//url: 'http://res3dstatic7.cloudowr.cn/wufeng/3dtile/tileset.json',
url: localStorage.getItem('address')==="wufeng"?
'service2/kshdata/1221wtz-3dtile-all/tileset.json':
"service2/kshdata/GRH/tileset.json",
maximumScreenSpaceError: 32,
maximumMemoryUsage: 100, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡
});
// fetch(`${process.env.PUBLIC_URL}/data/geojson/${localStorage.getItem('address')}/boua.geojson`)
// .then(resp => resp.json())
// .then(data => {
// let features = data.features;
// let positionArray = [];
// // 获取区域的经纬度坐标
// for (let i = 0; i < features[0].geometry.coordinates[0].length; i++) {
// let coor = features[0].geometry.coordinates[0][i];
// positionArray.push(coor[0]);
// positionArray.push(coor[1]);
// }
// // 遮罩
// let polygonEntity = new Cesium.Entity({
// polygon: {
// hierarchy: {
// // 添加外部区域为1/4半圆，设置为180会报错 [0, 0, 0, 90, 179, 90, 179, 0]
// positions: Cesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 150, 89, 150, 0]),
// // 中心挖空的“洞”
// holes: [{
// positions: Cesium.Cartesian3.fromDegreesArray(positionArray)
// }]
// },
// material: Cesium.Color.BLACK.withAlpha(0.7) //new Cesium.Color(236,242,249, 1)
// }
// });
// // 边界线
// let lineEntity = new Cesium.Entity({
// polyline: {
// positions: Cesium.Cartesian3.fromDegreesArray(positionArray),
// width: 7,
// material: Cesium.Color.fromCssColorString('#7AE3C8'),//边界线颜色//Cesium.Color.YELLOW //new Cesium.Color(122,227,200, 1)
// clampToGround: true,
// zIndex: 10
// }
// });
// viewer.entities.add(polygonEntity);
// viewer.entities.add(lineEntity);
// //viewer.flyTo(lineEntity);
// });
//添加到球体上
// viewer.scene.primitives.add(tileset);
/*viewer.dataSources.add(Cesium.GeoJsonDataSource.load('http://res3dstatic4.cloudowr.cn/wufeng/geojson/boua.geojson', {
stroke: Cesium.Color.PINK,
strokeWidth: 3,
clampToGround: true,
}));*/
tileset.readyPromise.then(function () {
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 10
)
);
});
//监听地图移动完成事件
viewer.camera.moveEnd.addEventListener(() => {
//获取当前相机高度
let height = Math.ceil(viewer.camera.positionCartographic.height);
let zoom = heightToZoom(height);
console.log('地图变化监听事件',zoom);
});
this.layerMgr = new LayerMgr3D(viewer);
viewer.scene.postRender.addEventListener(() => {
this.dispatch.runtime.tickViewChanged();
this.layerMgr.frameUpdate();
});
this.toolMgr = new ToolManager(viewer, this.dispatch);
this.toolMgr.init();
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(...config.homeCenter3D),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-35.0),
roll: 0.0
}
});
// 限制相机高度
// 相机最低高度
const minimumHeight = 120;
// 在渲染阶段前添加事件监听器
viewer.scene.preRender.addEventListener(function () {
var eye = viewer.camera.positionCartographic;
// 判断相机坐标是否小于阈值，若小于阈值，则保持视点方位，修改相机高度
if (eye.height < minimumHeight) {
viewer.camera.setView({
destination: Cesium.Cartesian3.fromRadians(eye.longitude, eye.latitude, minimumHeight),
orientation: {
direction: viewer.camera.direction,
up: viewer.camera.up
}
});
}
});
this._map = viewer;
const toremove = document.getElementsByClassName('cesium-widget-credits');
if (toremove && toremove[0]) {
toremove[0].style.display = 'none';
}
}
coordinateToPixel(lgtd, lttd, elev) {
const pt = Cesium.Cartesian3.fromDegrees(lgtd, lttd, elev);
const result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
this._map.scene, pt);
if (!result) {
return null
}
return [result.x, result.y, pt.x, pt.y, pt.z];
}
/**
* 组件卸载时，需要销毁map对象
*/
destroy() {
console.log('##############destroy##############');
if (!this.layerMgr) {
return;
}
this.layerMgr.destroy();
if (this._map) {
this._map.destroy();
this._map = null;
}
}
/**
* get layer obj
*/
getLayer(name) {
return this.layerMgr.getLayer(name);
}
zoomTo(cameraTarget) {
if (cameraTarget.center) {
this._map.camera.flyToBoundingSphere(new Cesium.BoundingSphere(
Cesium.Cartesian3.fromDegrees(cameraTarget.center[0], cameraTarget.center[1], cameraTarget.center[2] || 0),
800)
);
} else if (cameraTarget.bound) {
const b = cameraTarget.bound;
const p1 = Cesium.Cartesian3.fromDegrees(...b[0]);
const p2 = Cesium.Cartesian3.fromDegrees(...b[1]);
this._map.camera.flyToBoundingSphere(Cesium.BoundingSphere.fromPoints([p1, p2]));
}
}
}

187
src/views/Home/MapCtrl/Map3D/demo.js
View File

@ -1,78 +1,89 @@
const { Cesium } = window;
export default class LayerMgr {
constructor({ viewer }) {
this.viewer = viewer
constructor() {
// this.viewer = viewer
}
//加载模型
getGltf() {
const model = this.viewer.scene.primitives.add(Cesium.Model.fromGltf({
url: `${process.env.PUBLIC_URL}/models/dam/scene.gltf`,
modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(114.97, 31.48) // 模型位置
),
scale: 100
}));
getGltf(viewer) {
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(114.97, 31.48),
model: {
uri: `${process.env.PUBLIC_URL}/models/dam/scene.gltf` ,
scale: 200,
runAnimations: false
},
});
}
getWater() {
let initialHeight = 130
const geometry = new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray(positions)
),
extrudedHeight: initialHeight
});
const waterPrimitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({ geometry }),
appearance: new Cesium.EllipsoidSurfaceAppearance({
aboveGround: true,
material: new Cesium.Material({
fabric: {
type: 'Water',
uniforms: {
normalMap: Cesium.buildModuleUrl(
`${process.env.PUBLIC_URL}/models/waternormals.jpg`
),
frequency: 1000.0,
animationSpeed: 0.01,
amplitude: 10,
},
},
}),
}),
show: true,
// releaseGeometryInstances: false
});
this.viewer.scene.primitives.add(waterPrimitive);
// 自动抬升
let height = 0;
setInterval(() => {
if (height < 0.4) {
height += 0.001;
// height += 0.02;
// waterPrimitive.extrudedHeight = height; // 触发setter
var currentModelMatrix = Cesium.Matrix4.clone(waterPrimitive.modelMatrix);
// 定义平移向量（例如，沿x轴平移100单位）
var translation = new Cesium.Cartesian3(-height*0.7, height, height*0.8);
// 创建一个平移矩阵
var translationMatrix = Cesium.Matrix4.fromTranslation(translation);
// 计算新的modelMatrix（将平移矩阵应用到当前模型矩阵上）
var newModelMatrix = Cesium.Matrix4.multiply(translationMatrix, currentModelMatrix, new Cesium.Matrix4());
waterPrimitive.modelMatrix = newModelMatrix;
}
}, 100);
getWater(viewer) {
// let initialHeight = 130
// const geometry = new Cesium.PolygonGeometry({
// polygonHierarchy: new Cesium.PolygonHierarchy(
// Cesium.Cartesian3.fromDegreesArray(positions)
// ),
// extrudedHeight: initialHeight
// });
// const waterPrimitive = new Cesium.Primitive({
// geometryInstances: new Cesium.GeometryInstance({ geometry }),
// appearance: new Cesium.EllipsoidSurfaceAppearance({
// aboveGround: true,
// material: new Cesium.Material({
// fabric: {
// type: 'Water',
// uniforms: {
// normalMap: Cesium.buildModuleUrl(
// `${process.env.PUBLIC_URL}/models/waternormals.jpg`
// ),
// frequency: 1000.0,
// animationSpeed: 0.01,
// amplitude: 10,
// },
// },
// }),
// }),
// show: true,
// // releaseGeometryInstances: false
// });
// this.viewer.scene.primitives.add(waterPrimitive);
// // 自动抬升
// let height = 0;
// setInterval(() => {
// if (height < 0.4) {
// height += 0.001;
// // height += 0.02;
// // waterPrimitive.extrudedHeight = height; // 触发setter
// var currentModelMatrix = Cesium.Matrix4.clone(waterPrimitive.modelMatrix);
// // 定义平移向量（例如，沿x轴平移100单位）
// var translation = new Cesium.Cartesian3(-height*0.7, height, height*0.8);
// // 创建一个平移矩阵
// var translationMatrix = Cesium.Matrix4.fromTranslation(translation);
// // 计算新的modelMatrix（将平移矩阵应用到当前模型矩阵上）
// var newModelMatrix = Cesium.Matrix4.multiply(translationMatrix, currentModelMatrix, new Cesium.Matrix4());
// waterPrimitive.modelMatrix = newModelMatrix;
// }
// }, 100);
}
getQxsy() {
var tileset = new Cesium.Cesium3DTileset({
// url: 'http://res3dstatic7.cloudowr.cn/wufeng/3dtile/tileset.json',
url:
// 'service2/kshdata/1221wtz-3dtile-all/tileset.json',
async getQxsy(viewer) {
try {
let tileset = await Cesium.Cesium3DTileset.fromUrl(
'http://res3d.oss-cn-shenzhen.aliyuncs.com/macheng/xiaoyutan/Scene/3DTILE.json',
// "service2/kshdata/GRH/tileset.json",
maximumScreenSpaceError: 1, //精细程度越小越精细
maximumMemoryUsage: 1000, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡
});
{
maximumScreenSpaceError: 1, //精细程度越小越精细
maximumMemoryUsage: 1000, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡
}
);
viewer.scene.primitives.add(tileset);
} catch (error) {
console.error(`Error creating tileset: ${error}`);
}
// fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/boua.geojson`)
// .then(resp => resp.json())
// .then(data => {
@ -117,32 +128,30 @@ export default class LayerMgr {
// });
//添加到球体上
viewer.scene.primitives.add(tileset);
tileset.readyPromise.then(function () {
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0,
-0.7,
2500
// tileset.boundingSphere.radius * 10
)
);
});
// tileset.readyPromise.then(function () {
// viewer.zoomTo(
// tileset,
// new Cesium.HeadingPitchRange(
// 0,
// -0.7,
// 2500
// // tileset.boundingSphere.radius * 10
// )
// );
// });
//设置倾斜摄影Z轴高度
tileset.readyPromise.then(function (tileset) {
const offsetHeight = 15
const boundingSphere = tileset.boundingSphere
const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)
const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, offsetHeight)
const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
// viewer.flyTo(tileset)
})
// tileset.readyPromise.then(function (tileset) {
// const offsetHeight = 15
// const boundingSphere = tileset.boundingSphere
// const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
// const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)
// const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, offsetHeight)
// const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
// tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
// // viewer.flyTo(tileset)
// })
}
}

63
src/views/Home/MapCtrl/Map3D/layermgr3d.js
View File

@ -51,40 +51,39 @@ export default class LayerMgr3D extends LayerMgr {
*/
addAppLayers(dispatch, visible, setting, otherParams) {
visible = visible || {};
// this.addLayer(new BouaLayer3D({ visible: visible[BouaLayer3D.LayerName], setting, dispatch }));
this.addLayer(new BouaLayer3D({ visible: visible[BouaLayer3D.LayerName], setting, dispatch }));
// if(visible[RainLayer3D.LayerName]){
// this.addLayer(new RainLayer3D({ visible: visible[RainLayer3D.LayerName], setting, dispatch }));
// }else{
// //this.viewer.imageryLayers.removeAll();
// this.viewer.entities.removeAll();
// }
// if(visible[RainLayer3DRadar.LayerName]){
// this.addLayer(new RainLayer3DRadar({ visible: visible[RainLayer3DRadar.LayerName], setting, dispatch }));
// }else{
// //this.viewer.imageryLayers.removeAll();
// this.viewer.entities.removeAll();
// }
// if(visible[RainLayer3DRh.LayerName]){
// this.addLayer(new RainLayer3DRh({ visible: visible[RainLayer3DRh.LayerName], setting, dispatch }));
// }else{
// //this.viewer.imageryLayers.removeAll(); RainLayer3DRh
// this.viewer.entities.removeAll();
// }
if(visible[RainLayer3D.LayerName]){
this.addLayer(new RainLayer3D({ visible: visible[RainLayer3D.LayerName], setting, dispatch }));
}else{
//this.viewer.imageryLayers.removeAll();
this.viewer.entities.removeAll();
}
if(visible[RainLayer3DRadar.LayerName]){
this.addLayer(new RainLayer3DRadar({ visible: visible[RainLayer3DRadar.LayerName], setting, dispatch }));
}else{
//this.viewer.imageryLayers.removeAll();
this.viewer.entities.removeAll();
}
if(visible[RainLayer3DRh.LayerName]){
this.addLayer(new RainLayer3DRh({ visible: visible[RainLayer3DRh.LayerName], setting, dispatch }));
}else{
//this.viewer.imageryLayers.removeAll(); RainLayer3DRh
this.viewer.entities.removeAll();
}
if(visible[HLLayer3D.LayerName]){
this.addLayer(new HLLayer3D({ visible: visible[HLLayer3D.LayerName], setting, dispatch }));
}else{
//this.viewer.imageryLayers.removeAll();
this.viewer.entities.removeAll();
}
if(visible[XLYLayer3D.LayerName]){
this.addLayer(new XLYLayer3D({ visible: visible[XLYLayer3D.LayerName], setting, dispatch }));
}else{
//this.viewer.imageryLayers.removeAll();
this.viewer.entities.removeAll();
}
// if(visible[HLLayer3D.LayerName]){
// this.addLayer(new HLLayer3D({ visible: visible[HLLayer3D.LayerName], setting, dispatch }));
// }else{
// //this.viewer.imageryLayers.removeAll();
// this.viewer.entities.removeAll();
// }
// if(visible[XLYLayer3D.LayerName]){
// this.addLayer(new XLYLayer3D({ visible: visible[XLYLayer3D.LayerName], setting, dispatch }));
// }else{
// //this.viewer.imageryLayers.removeAll();
// this.viewer.entities.removeAll();
// }
this._addAppMarkerLayers(dispatch, visible, setting, otherParams);
}