模型、倾斜摄影引入
parent
1488f002b6
commit
1f59f84727
|
|
@ -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/)
|
||||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 19 MiB |
|
|
@ -1,6 +1,7 @@
|
||||||
import config from '../config';
|
import config from '../config';
|
||||||
import LayerMgr3D from './layermgr3d';
|
import LayerMgr3D from './layermgr3d';
|
||||||
import BaseMap from '../basemap';
|
import BaseMap from '../basemap';
|
||||||
|
import Demo3D from './demo'
|
||||||
import { ToolManager } from './ToolManager3D';
|
import { ToolManager } from './ToolManager3D';
|
||||||
|
|
||||||
const { Cesium } = window;
|
const { Cesium } = window;
|
||||||
|
|
@ -38,6 +39,7 @@ export default class Map3D extends BaseMap {
|
||||||
this._map = null; // openlayers map obj
|
this._map = null; // openlayers map obj
|
||||||
this.layerMgr = null;
|
this.layerMgr = null;
|
||||||
this.toolMgr = null;
|
this.toolMgr = null;
|
||||||
|
this.demo = null;
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const open = XMLHttpRequest.prototype.open;
|
const open = XMLHttpRequest.prototype.open;
|
||||||
|
|
@ -59,73 +61,31 @@ export default class Map3D extends BaseMap {
|
||||||
const tiandiKey = "efc861f25f96dc6e5f884f0403ebfefd"; //天地图key，官网申请
|
const tiandiKey = "efc861f25f96dc6e5f884f0403ebfefd"; //天地图key，官网申请
|
||||||
const baseUrl = "https://{s}.tianditu.gov.cn";//'https://t{0-7}.tianditu.gov.cn';
|
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, {
|
const viewer = new Cesium.Viewer(this.divid, {
|
||||||
terrainProvider: new Cesium.CesiumTerrainProvider({
|
terrain: Cesium.Terrain.fromWorldTerrain({
|
||||||
//url: 'http://res3dstatic5.cloudowr.cn/wufeng/terrain',
|
requestVertexNormals: true,
|
||||||
url:"/shzh/mapres/terrain",
|
}),
|
||||||
requestVertexNormals: true,
|
|
||||||
}),
|
scene3DOnly: true,//用于强制场景以 3D 模式运行，禁止切换至 2D 或 Columbus 视图
|
||||||
imageryProvider: new Cesium.UrlTemplateImageryProvider({
|
animation: false,//获取动画小部件。
|
||||||
//url: `http://res3dstatic{s}.cloudowr.cn/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`,
|
baseLayerPicker: false,//获取BaseLayerPicker。
|
||||||
url: baseUrl + '/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='+tiandiKey,
|
geocoder: false,//获取地理编码器
|
||||||
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
|
sceneModePicker: false,//Gets the SceneModePicker.
|
||||||
//minimumLevel:10,
|
fullscreenButton: false,
|
||||||
maximumLevel: 17,
|
homeButton: false,
|
||||||
}),
|
timeline: false,
|
||||||
scene3DOnly: true,
|
navigationHelpButton: false,//导航帮助按钮
|
||||||
animation: false,
|
shadows: false,//确定阴影是否由光源投射。
|
||||||
baseLayerPicker: false,
|
infoBox: false,
|
||||||
geocoder: false,
|
skyAtmosphere: false,//去掉球边缘
|
||||||
sceneModePicker: false,
|
|
||||||
fullscreenButton: false,
|
|
||||||
homeButton: false,
|
|
||||||
timeline: false,
|
|
||||||
navigationHelpButton: false,
|
|
||||||
shadows: false,
|
|
||||||
infoBox: false,
|
|
||||||
skyAtmosphere: false,//去掉球边缘
|
|
||||||
});
|
});
|
||||||
|
|
||||||
//设置地表透明
|
//设置地表透明
|
||||||
let globe = viewer.scene.globe;
|
let globe = viewer.scene.globe;
|
||||||
globe.depthTestAgainstTerrain = false;
|
globe.depthTestAgainstTerrain = false;//关闭深度测试
|
||||||
//viewer.scene.skyAtmosphere.show = false; //关闭大气层阴影
|
//viewer.scene.skyAtmosphere.show = false; //关闭大气层阴影
|
||||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
|
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
|
||||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 200000;
|
// viewer.scene.screenSpaceCameraController.maximumZoomDistance = 200000;
|
||||||
|
|
||||||
|
|
||||||
viewer.scene.globe.enableLighting = false; //关闭光照
|
viewer.scene.globe.enableLighting = false; //关闭光照
|
||||||
viewer.shadows = false;//关闭阴影
|
viewer.shadows = false;//关闭阴影
|
||||||
viewer.scene.globe.depthTestAgainstTerrain = false;//解决地形遮挡entity问题
|
viewer.scene.globe.depthTestAgainstTerrain = false;//解决地形遮挡entity问题
|
||||||
|
|
@ -136,34 +96,31 @@ export default class Map3D extends BaseMap {
|
||||||
viewer.scene.sun.show = false; //太阳
|
viewer.scene.sun.show = false; //太阳
|
||||||
viewer.scene.skyBox.show = false; //天空盒
|
viewer.scene.skyBox.show = false; //天空盒
|
||||||
viewer.resolutionScale = 1.0; //画面细度，默认值为1.0
|
viewer.resolutionScale = 1.0; //画面细度，默认值为1.0
|
||||||
|
|
||||||
viewer.scene.fxaa = false;
|
viewer.scene.fxaa = false;
|
||||||
viewer.scene.postProcessStages.fxaa.enabled = true;
|
viewer.scene.postProcessStages.fxaa.enabled = true;
|
||||||
viewer.scene.globe.depthTestAgainstTerrain = true;
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
||||||
viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;//设置球的基础色
|
viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;//设置球的基础色
|
||||||
viewer.scene.globe.undergroundColor= Cesium.Color.BLACK.withAlpha(0.5);//设置球的地下色
|
viewer.scene.globe.undergroundColor= Cesium.Color.BLACK.withAlpha(0.5);//设置球的地下色
|
||||||
viewer.scene.backgroundColor = Cesium.Color.BLACK;
|
viewer.scene.backgroundColor = Cesium.Color.BLACK;
|
||||||
|
|
||||||
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
|
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
|
||||||
Cesium.CameraEventType.RIGHT_DRAG, Cesium.CameraEventType.PINCH,
|
Cesium.CameraEventType.RIGHT_DRAG, Cesium.CameraEventType.PINCH,
|
||||||
{ eventType: Cesium.CameraEventType.LEFT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL },
|
{ eventType: Cesium.CameraEventType.LEFT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL },
|
||||||
{ eventType: Cesium.CameraEventType.RIGHT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL }
|
{ eventType: Cesium.CameraEventType.RIGHT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL }
|
||||||
];
|
];
|
||||||
|
|
||||||
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
|
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
|
||||||
Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH
|
Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
//加载倾斜摄影
|
//加载倾斜摄影
|
||||||
var tileset = new Cesium.Cesium3DTileset({
|
// var tileset = new Cesium.Cesium3DTileset({
|
||||||
//url: 'http://res3dstatic7.cloudowr.cn/wufeng/3dtile/tileset.json',
|
// //url: 'http://res3dstatic7.cloudowr.cn/wufeng/3dtile/tileset.json',
|
||||||
url: localStorage.getItem('address')==="wufeng"?
|
// url: localStorage.getItem('address')==="wufeng"?
|
||||||
'service2/kshdata/1221wtz-3dtile-all/tileset.json':
|
// 'service2/kshdata/1221wtz-3dtile-all/tileset.json':
|
||||||
"service2/kshdata/GRH/tileset.json",
|
// "service2/kshdata/GRH/tileset.json",
|
||||||
maximumScreenSpaceError: 32,
|
// maximumScreenSpaceError: 32,
|
||||||
maximumMemoryUsage: 100, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡
|
// maximumMemoryUsage: 100, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡
|
||||||
});
|
// });
|
||||||
|
|
||||||
// fetch(`${process.env.PUBLIC_URL}/data/geojson/${localStorage.getItem('address')}/boua.geojson`)
|
// fetch(`${process.env.PUBLIC_URL}/data/geojson/${localStorage.getItem('address')}/boua.geojson`)
|
||||||
// .then(resp => resp.json())
|
// .then(resp => resp.json())
|
||||||
|
|
@ -219,16 +176,7 @@ export default class Map3D extends BaseMap {
|
||||||
clampToGround: true,
|
clampToGround: true,
|
||||||
}));*/
|
}));*/
|
||||||
|
|
||||||
tileset.readyPromise.then(function () {
|
|
||||||
viewer.zoomTo(
|
|
||||||
tileset,
|
|
||||||
new Cesium.HeadingPitchRange(
|
|
||||||
0.0,
|
|
||||||
-0.5,
|
|
||||||
tileset.boundingSphere.radius * 10
|
|
||||||
)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
//监听地图移动完成事件
|
//监听地图移动完成事件
|
||||||
viewer.camera.moveEnd.addEventListener(() => {
|
viewer.camera.moveEnd.addEventListener(() => {
|
||||||
|
|
@ -241,6 +189,12 @@ export default class Map3D extends BaseMap {
|
||||||
});
|
});
|
||||||
|
|
||||||
this.layerMgr = new LayerMgr3D(viewer);
|
this.layerMgr = new LayerMgr3D(viewer);
|
||||||
|
this.demo = new Demo3D()
|
||||||
|
|
||||||
|
this.demo.getGltf(viewer)
|
||||||
|
this.demo.getQxsy(viewer)
|
||||||
|
|
||||||
|
|
||||||
viewer.scene.postRender.addEventListener(() => {
|
viewer.scene.postRender.addEventListener(() => {
|
||||||
this.dispatch.runtime.tickViewChanged();
|
this.dispatch.runtime.tickViewChanged();
|
||||||
this.layerMgr.frameUpdate();
|
this.layerMgr.frameUpdate();
|
||||||
|
|
@ -286,13 +240,13 @@ export default class Map3D extends BaseMap {
|
||||||
}
|
}
|
||||||
|
|
||||||
coordinateToPixel(lgtd, lttd, elev) {
|
coordinateToPixel(lgtd, lttd, elev) {
|
||||||
const pt = Cesium.Cartesian3.fromDegrees(lgtd, lttd, elev);
|
// const pt = Cesium.Cartesian3.fromDegrees(lgtd, lttd, elev);
|
||||||
const result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
// const result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||||||
this._map.scene, pt);
|
// this._map.scene, pt);
|
||||||
if (!result) {
|
// if (!result) {
|
||||||
return null
|
// return null
|
||||||
}
|
// }
|
||||||
return [result.x, result.y, pt.x, pt.y, pt.z];
|
// return [result.x, result.y, pt.x, pt.y, pt.z];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -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]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,78 +1,89 @@
|
||||||
|
const { Cesium } = window;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default class LayerMgr {
|
export default class LayerMgr {
|
||||||
constructor({ viewer }) {
|
constructor() {
|
||||||
this.viewer = viewer
|
// this.viewer = viewer
|
||||||
}
|
}
|
||||||
|
|
||||||
//加载模型
|
//加载模型
|
||||||
getGltf() {
|
getGltf(viewer) {
|
||||||
const model = this.viewer.scene.primitives.add(Cesium.Model.fromGltf({
|
viewer.entities.add({
|
||||||
url: `${process.env.PUBLIC_URL}/models/dam/scene.gltf`,
|
position: Cesium.Cartesian3.fromDegrees(114.97, 31.48),
|
||||||
modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
|
model: {
|
||||||
Cesium.Cartesian3.fromDegrees(114.97, 31.48) // 模型位置
|
uri: `${process.env.PUBLIC_URL}/models/dam/scene.gltf` ,
|
||||||
),
|
scale: 200,
|
||||||
scale: 100
|
runAnimations: false
|
||||||
}));
|
},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
getWater() {
|
getWater(viewer) {
|
||||||
let initialHeight = 130
|
// let initialHeight = 130
|
||||||
const geometry = new Cesium.PolygonGeometry({
|
// const geometry = new Cesium.PolygonGeometry({
|
||||||
polygonHierarchy: new Cesium.PolygonHierarchy(
|
// polygonHierarchy: new Cesium.PolygonHierarchy(
|
||||||
Cesium.Cartesian3.fromDegreesArray(positions)
|
// Cesium.Cartesian3.fromDegreesArray(positions)
|
||||||
),
|
// ),
|
||||||
extrudedHeight: initialHeight
|
// extrudedHeight: initialHeight
|
||||||
});
|
// });
|
||||||
const waterPrimitive = new Cesium.Primitive({
|
// const waterPrimitive = new Cesium.Primitive({
|
||||||
geometryInstances: new Cesium.GeometryInstance({ geometry }),
|
// geometryInstances: new Cesium.GeometryInstance({ geometry }),
|
||||||
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
// appearance: new Cesium.EllipsoidSurfaceAppearance({
|
||||||
aboveGround: true,
|
// aboveGround: true,
|
||||||
material: new Cesium.Material({
|
// material: new Cesium.Material({
|
||||||
fabric: {
|
// fabric: {
|
||||||
type: 'Water',
|
// type: 'Water',
|
||||||
uniforms: {
|
// uniforms: {
|
||||||
normalMap: Cesium.buildModuleUrl(
|
// normalMap: Cesium.buildModuleUrl(
|
||||||
`${process.env.PUBLIC_URL}/models/waternormals.jpg`
|
// `${process.env.PUBLIC_URL}/models/waternormals.jpg`
|
||||||
),
|
// ),
|
||||||
frequency: 1000.0,
|
// frequency: 1000.0,
|
||||||
animationSpeed: 0.01,
|
// animationSpeed: 0.01,
|
||||||
amplitude: 10,
|
// amplitude: 10,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
}),
|
// }),
|
||||||
}),
|
// }),
|
||||||
show: true,
|
// show: true,
|
||||||
// releaseGeometryInstances: false
|
// // releaseGeometryInstances: false
|
||||||
});
|
// });
|
||||||
this.viewer.scene.primitives.add(waterPrimitive);
|
// this.viewer.scene.primitives.add(waterPrimitive);
|
||||||
// 自动抬升
|
// // 自动抬升
|
||||||
let height = 0;
|
// let height = 0;
|
||||||
setInterval(() => {
|
// setInterval(() => {
|
||||||
if (height < 0.4) {
|
// if (height < 0.4) {
|
||||||
height += 0.001;
|
// height += 0.001;
|
||||||
// height += 0.02;
|
// // height += 0.02;
|
||||||
// waterPrimitive.extrudedHeight = height; // 触发setter
|
// // waterPrimitive.extrudedHeight = height; // 触发setter
|
||||||
var currentModelMatrix = Cesium.Matrix4.clone(waterPrimitive.modelMatrix);
|
// var currentModelMatrix = Cesium.Matrix4.clone(waterPrimitive.modelMatrix);
|
||||||
// 定义平移向量（例如，沿x轴平移100单位）
|
// // 定义平移向量（例如，沿x轴平移100单位）
|
||||||
var translation = new Cesium.Cartesian3(-height*0.7, height, height*0.8);
|
// var translation = new Cesium.Cartesian3(-height*0.7, height, height*0.8);
|
||||||
// 创建一个平移矩阵
|
// // 创建一个平移矩阵
|
||||||
var translationMatrix = Cesium.Matrix4.fromTranslation(translation);
|
// var translationMatrix = Cesium.Matrix4.fromTranslation(translation);
|
||||||
// 计算新的modelMatrix（将平移矩阵应用到当前模型矩阵上）
|
// // 计算新的modelMatrix（将平移矩阵应用到当前模型矩阵上）
|
||||||
var newModelMatrix = Cesium.Matrix4.multiply(translationMatrix, currentModelMatrix, new Cesium.Matrix4());
|
// var newModelMatrix = Cesium.Matrix4.multiply(translationMatrix, currentModelMatrix, new Cesium.Matrix4());
|
||||||
waterPrimitive.modelMatrix = newModelMatrix;
|
// waterPrimitive.modelMatrix = newModelMatrix;
|
||||||
}
|
// }
|
||||||
}, 100);
|
// }, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
getQxsy() {
|
async getQxsy(viewer) {
|
||||||
var tileset = new Cesium.Cesium3DTileset({
|
try {
|
||||||
// url: 'http://res3dstatic7.cloudowr.cn/wufeng/3dtile/tileset.json',
|
let tileset = await Cesium.Cesium3DTileset.fromUrl(
|
||||||
url:
|
|
||||||
// 'service2/kshdata/1221wtz-3dtile-all/tileset.json',
|
|
||||||
'http://res3d.oss-cn-shenzhen.aliyuncs.com/macheng/xiaoyutan/Scene/3DTILE.json',
|
'http://res3d.oss-cn-shenzhen.aliyuncs.com/macheng/xiaoyutan/Scene/3DTILE.json',
|
||||||
// "service2/kshdata/GRH/tileset.json",
|
{
|
||||||
maximumScreenSpaceError: 1, //精细程度越小越精细
|
maximumScreenSpaceError: 1, //精细程度越小越精细
|
||||||
maximumMemoryUsage: 1000, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡
|
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`)
|
// fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/boua.geojson`)
|
||||||
// .then(resp => resp.json())
|
// .then(resp => resp.json())
|
||||||
// .then(data => {
|
// .then(data => {
|
||||||
|
|
@ -117,32 +128,30 @@ export default class LayerMgr {
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
|
||||||
//添加到球体上
|
|
||||||
viewer.scene.primitives.add(tileset);
|
|
||||||
|
|
||||||
tileset.readyPromise.then(function () {
|
// tileset.readyPromise.then(function () {
|
||||||
viewer.zoomTo(
|
// viewer.zoomTo(
|
||||||
tileset,
|
// tileset,
|
||||||
new Cesium.HeadingPitchRange(
|
// new Cesium.HeadingPitchRange(
|
||||||
0,
|
// 0,
|
||||||
-0.7,
|
// -0.7,
|
||||||
2500
|
// 2500
|
||||||
// tileset.boundingSphere.radius * 10
|
// // tileset.boundingSphere.radius * 10
|
||||||
)
|
// )
|
||||||
);
|
// );
|
||||||
});
|
// });
|
||||||
|
|
||||||
//设置倾斜摄影Z轴高度
|
//设置倾斜摄影Z轴高度
|
||||||
tileset.readyPromise.then(function (tileset) {
|
// tileset.readyPromise.then(function (tileset) {
|
||||||
const offsetHeight = 15
|
// const offsetHeight = 15
|
||||||
const boundingSphere = tileset.boundingSphere
|
// const boundingSphere = tileset.boundingSphere
|
||||||
const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
|
// const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
|
||||||
const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)
|
// const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)
|
||||||
const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, offsetHeight)
|
// const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, offsetHeight)
|
||||||
const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
|
// const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
|
||||||
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
|
// tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
|
||||||
// viewer.flyTo(tileset)
|
// // viewer.flyTo(tileset)
|
||||||
})
|
// })
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -51,40 +51,39 @@ export default class LayerMgr3D extends LayerMgr {
|
||||||
*/
|
*/
|
||||||
addAppLayers(dispatch, visible, setting, otherParams) {
|
addAppLayers(dispatch, visible, setting, otherParams) {
|
||||||
visible = visible || {};
|
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]){
|
// if(visible[HLLayer3D.LayerName]){
|
||||||
this.addLayer(new RainLayer3D({ visible: visible[RainLayer3D.LayerName], setting, dispatch }));
|
// this.addLayer(new HLLayer3D({ visible: visible[HLLayer3D.LayerName], setting, dispatch }));
|
||||||
}else{
|
// }else{
|
||||||
//this.viewer.imageryLayers.removeAll();
|
// //this.viewer.imageryLayers.removeAll();
|
||||||
this.viewer.entities.removeAll();
|
// this.viewer.entities.removeAll();
|
||||||
}
|
// }
|
||||||
if(visible[RainLayer3DRadar.LayerName]){
|
// if(visible[XLYLayer3D.LayerName]){
|
||||||
this.addLayer(new RainLayer3DRadar({ visible: visible[RainLayer3DRadar.LayerName], setting, dispatch }));
|
// this.addLayer(new XLYLayer3D({ visible: visible[XLYLayer3D.LayerName], setting, dispatch }));
|
||||||
}else{
|
// }else{
|
||||||
//this.viewer.imageryLayers.removeAll();
|
// //this.viewer.imageryLayers.removeAll();
|
||||||
this.viewer.entities.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();
|
|
||||||
}
|
|
||||||
|
|
||||||
this._addAppMarkerLayers(dispatch, visible, setting, otherParams);
|
this._addAppMarkerLayers(dispatch, visible, setting, otherParams);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue