import React, { useEffect, useState, useRef } from 'react' import { Input, Button, Modal, message } from 'antd' import { gcj_decrypt, exetent2AmapPoint, lngLat2WebMercator } from '@/utils/transformUtil' import { GetAllConfig, GetMetaData } from '@/services/platform/gis' const pdCesium = require('@wisdom-cesium/cesium') const Cesium = require('cesium/Cesium') const { Search } = Input; let pdViewer, viewer, extent, orientation, position; const MapScope = props => { const { visible, confirmModal,item } = props; const [options, setOptions] = useState([]) let el = useRef(null); const [loading, setLoading] = useState(false); let buttonEl = useRef(null); useEffect(() => { if (visible) { let lon = 114.31,lat=30.52 pdViewer = new pdCesium.PdRender({ el: el.current, }); if(item){ lon =item.mapSettings.camera.position.lon lat =item.mapSettings.camera.position.lat } viewer = pdViewer.viewer; pdViewer.viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(lon, lat, 15000.0), //武汉 }); var cesiumBottom = document.getElementsByClassName('cesium-viewer-bottom')[0] cesiumBottom.style.display = 'none' } }, [visible]); function getOrientation() { const { heading, pitch, roll } = viewer.camera; const headingDegrees = Cesium.Math.toDegrees(heading); const pitchDegrees = Cesium.Math.toDegrees(pitch); const rollDegrees = Cesium.Math.toDegrees(roll); return { heading: headingDegrees, pitch: pitchDegrees, roll: rollDegrees, }; } /* 获取camera高度 */ function getHeight() { if (viewer) { var scene = viewer.scene; var ellipsoid = scene.globe.ellipsoid; var height = ellipsoid.cartesianToCartographic(viewer.camera.position) .height; return height; } } /* 获取camera中心点坐标 */ function getCenterPosition() { var result = viewer.camera.pickEllipsoid( new Cesium.Cartesian2( viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2, ), ); var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result); var lon = (curPosition.longitude * 180) / Math.PI; var lat = (curPosition.latitude * 180) / Math.PI; var height = getHeight(); return { lon: lon, lat: lat, height: height, }; } function getCurrentExtent() { // 范围对象 var extent = {}; // 得到当前三维场景 var scene = viewer.scene; // 得到当前三维场景的椭球体 var ellipsoid = scene.globe.ellipsoid; var canvas = scene.canvas; // canvas左上角 var car3_lt = viewer.camera.pickEllipsoid( new Cesium.Cartesian2(0, 0), ellipsoid, ); // canvas右下角 var car3_rb = viewer.camera.pickEllipsoid( new Cesium.Cartesian2(canvas.width, canvas.height), ellipsoid, ); // 当canvas左上角和右下角全部在椭球体上 if (car3_lt && car3_rb) { var carto_lt = ellipsoid.cartesianToCartographic(car3_lt); var carto_rb = ellipsoid.cartesianToCartographic(car3_rb); extent.xmin = Cesium.Math.toDegrees(carto_lt.longitude); extent.ymax = Cesium.Math.toDegrees(carto_lt.latitude); extent.xmax = Cesium.Math.toDegrees(carto_rb.longitude); extent.ymin = Cesium.Math.toDegrees(carto_rb.latitude); } // 当canvas左上角不在但右下角在椭球体上 else if (!car3_lt && car3_rb) { var car3_lt2 = null; var yIndex = 0; do { // 这里每次10像素递加,一是10像素相差不大,二是为了提高程序运行效率 yIndex <= canvas.height ? (yIndex += 10) : canvas.height; car3_lt2 = viewer.camera.pickEllipsoid( new Cesium.Cartesian2(0, yIndex), ellipsoid, ); } while (!car3_lt2); var carto_lt2 = ellipsoid.cartesianToCartographic(car3_lt2); var carto_rb2 = ellipsoid.cartesianToCartographic(car3_rb); extent.xmin = Cesium.Math.toDegrees(carto_lt2.longitude); extent.ymax = Cesium.Math.toDegrees(carto_lt2.latitude); extent.xmax = Cesium.Math.toDegrees(carto_rb2.longitude); extent.ymin = Cesium.Math.toDegrees(carto_rb2.latitude); } // 获取高度 extent.height = Math.ceil(viewer.camera.positionCartographic.height); return [extent.xmin, extent.ymin, extent.xmax, extent.ymax]; } const onSubmit = () => { let propertyData = document.getElementsByClassName("cesium-geocoder-input cesium-geocoder-input-wide")[0] if (propertyData && propertyData.value) { position = getCenterPosition(); extent = getCurrentExtent(); orientation = getOrientation(); var areaName = propertyData.value; let mapSettings = { camera: { mode: '3d', position, orientation }, areaName, extent } confirmModal && confirmModal(mapSettings) } else { message.info("未选择视角,请先选择区域") } } const filter = (inputValue, path) => { return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1) } return ( <Modal title='视角选择' bodyStyle={{ width: '100%', minHeight: '400px' }} style={{ top: '180px' }} width="700px" destroyOnClose maskClosable={false} cancelText="取消" okText="确认" {...props} onOk={() => onSubmit()} confirmLoading={loading} forceRender={true} getContainer={false} > {visible && (<> <div ref={el} style={{ width: '100%', height: '400px' }} > </div></>)}</Modal> ); } export default MapScope