import React, { useEffect } from 'react'; // , useState
|
//import { PlayCircleOutlined } from '@ant-design/icons';
|
import setting from './setting';
|
import styles from './index.less';
|
import * as UE from "./UE";
|
|
function Terra ({
|
width, height, config = {}, data
|
}) {
|
// const [msg, setMsg] = useState('hello');
|
// const {
|
// theme, rectAngle = 30, angle = 45, backgroundColor = '#2949B1'
|
// } = config;
|
|
// let background = '';
|
// if (backgroundColor.indexOf('-') > 0) {
|
// background = `linear-gradient(${angle}deg, ${backgroundColor.replace('-', ',')})`;
|
// } else {
|
// background = backgroundColor;
|
// }
|
|
// const style = {
|
// width,
|
// height,
|
// background,
|
// fontSize: 32
|
// };
|
|
// if (theme === 'circle') {
|
// style.borderRadius = '50%';
|
// }
|
// if (theme === 'rect') {
|
// const rectLength = width - Math.floor(height * 0.578);
|
// style.transform = `skew(-${rectAngle}deg)`;
|
// style.marginLeft = Math.floor(height * 0.578 / 2);
|
// style.width = rectLength > 0 ? rectLength : 0;
|
// }
|
|
// 第一次加载
|
useEffect(() => {
|
// setTimeout(() => {
|
// setMsg('hello world');
|
// }, 3000);
|
|
// http://103.25.37.69:92/dist/tumap.js
|
// const script = document.createElement('script');
|
// script.src = setting.ueUrl + '/dist/tumap.js';
|
// document.body.appendChild(script);
|
|
// window.onload = function () {
|
// const script = document.createElement('script');
|
// script.src = 'tumap.js';
|
// document.body.appendChild(script);
|
// };
|
|
//let div = document.getElementById('tMap');
|
// var node = div.parentNode;
|
// while (true) {
|
// node.style.width = '100%';
|
// node.style.height = '100%';
|
// if (node.id == "root") break;
|
|
// node = node.parentNode;
|
// }
|
|
const div = document.getElementById('tMap');
|
div.parentNode.style.width = '100%';
|
div.parentNode.style.height = '100%';
|
div.parentNode.parentNode.parentNode.style.width = '100%';
|
div.parentNode.parentNode.parentNode.style.height = '100%';
|
|
window.UE = UE;
|
UE.init('tMap', (map) => {
|
window.UE.map = map;
|
console.log('UE.init => ', map);
|
});
|
|
}, []);
|
|
return (
|
// <div className={styles.box}>
|
// <div style={style}>
|
// {msg}
|
// {data && data.map(i => (
|
// <p key={`${i.name}-${i.value}`}>
|
// <PlayCircleOutlined />
|
// {`${i.name}-${i.value}`}
|
// </p>
|
// ))}
|
// {config.isProd ? 'production' : 'test'}
|
// </div>
|
// </div>
|
<div id="tMap" className={styles.box}></div>
|
);
|
}
|
Terra.setting = setting;
|
|
/**
|
* 自定义配置
|
* 1. 对于只有当前组件才使用的样式配置，可以集成自定义配置组件
|
* 2. 自定义配置组件 props 参数必须实现： value, onChange
|
*
|
*/
|
Terra.styleConfig = {
|
EnvSwitch: ({ value, onChange }) => (
|
<div onClick={() => { onChange(!value); }}>
|
{value ? 'production' : 'test'}
|
</div>
|
)
|
};
|
export default Terra;
|
