修改细节准备提交
parent
094de6683f
commit
513e64104c
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div id={ctrlIdRef.current} className="map2d3d">
|
||||
<div key={mode} id={ctrlIdRef.current} className="map2d3d">
|
||||
<FeaturePops mapobj={mapobjRef.current} />
|
||||
<FeatureTip />
|
||||
{/*<CoordsText />*/}
|
||||
|
|
|
|||
Loading…
Reference in New Issue