diff --git a/src/views/Home/MapCtrl/Map3D/Map3D.js b/src/views/Home/MapCtrl/Map3D/Map3D.js index 2fcdccd19..d224da02a 100644 --- a/src/views/Home/MapCtrl/Map3D/Map3D.js +++ b/src/views/Home/MapCtrl/Map3D/Map3D.js @@ -61,6 +61,38 @@ 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, { // terrain: Cesium.Terrain.fromWorldTerrain({ // requestVertexNormals: true, @@ -79,13 +111,15 @@ export default class Map3D extends BaseMap { 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.screenSpaceCameraController.maximumZoomDistance = 200000; + + viewer.scene.globe.enableLighting = false; //关闭光照 viewer.shadows = false;//关闭阴影 viewer.scene.globe.depthTestAgainstTerrain = false;//解决地形遮挡entity问题 @@ -96,17 +130,20 @@ 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 ]; @@ -176,7 +213,16 @@ 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(() => { @@ -249,10 +295,7 @@ export default class Map3D extends BaseMap { coordinateToPixel(lgtd, lttd, elev) { const pt = Cesium.Cartesian3.fromDegrees(lgtd, lttd, elev); - const result = Cesium.SceneTransforms. - // wgs84ToWindowCoordinates - worldToWindowCoordinates - ( + const result = Cesium.SceneTransforms.worldToWindowCoordinates( this._map.scene, pt); if (!result) { return null diff --git a/src/views/Home/MapCtrl/Map3D/Map3DOld.js b/src/views/Home/MapCtrl/Map3D/Map3DOld.js deleted file mode 100644 index 299ba0d35..000000000 --- a/src/views/Home/MapCtrl/Map3D/Map3DOld.js +++ /dev/null @@ -1,333 +0,0 @@ -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])); - } - } -} diff --git a/src/views/Home/MapCtrl/index.js b/src/views/Home/MapCtrl/index.js index 299b61791..05dbf5479 100644 --- a/src/views/Home/MapCtrl/index.js +++ b/src/views/Home/MapCtrl/index.js @@ -10,7 +10,7 @@ import { useLocation, useNavigate } from "react-router"; let id_factory_index = 1; -export default function MapCtrl() { +export default function MapCtrl({mode}) { const location = useLocation(); const pathname = location.pathname; const ctrlIdRef = useRef(`cloudowr_mapdiv_${id_factory_index++}`); @@ -67,7 +67,7 @@ export default function MapCtrl() { mapobj.destroy(); mapobjRef.current = null; } - }, [pathname]); + }, [mode,pathname]); useEffect(() => { if (layerVisible["ContourLayer"]) { @@ -94,7 +94,7 @@ export default function MapCtrl() { }, [layerSettingLoop, clickLoopBtn]); return ( -
+
{/**/}