react-admin: react版本
import { useState,useEffect } from 'react'
import './Secene.css'
import { Checkbox } from "antd";
import* as turf from '@turf/turf';
import type { CheckboxProps } from 'antd';
// const onChange: CheckboxProps['onChange'] = (e) => {
// console.log(`checked = ${e.target.checked}`);
// util.tools({viewer:vie,val:"经纬网格"},true)
// };
let pg={
"px":"./skybox/px.jpg",
"nx":"./skybox/nx.jpg",
"pz":"./skybox/pz.jpg",
"nz":"./skybox/nz.jpg",
"py":"./skybox/py.jpg",
"ny":"./skybox/ny.jpg"
}
function Scene() {
const [count, setCount] = useState(false)
const [vie, setCvie] = useState(0)
const [util, setCutils] = useState(0)
let esc,map,utils;
useEffect(() => {
// let LMap = new easyLeafLet.init();
// map = LMap.addMap({L:L,opts:{center: [39.891584, 115.883789],
// zoom: 5},id:"container"})
// LMap.addLayer({L:L,url:'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',map:map})
// LMap.addPop({L:L,map:map})
if(!map){
let LMap = new easyLeafLet.init();
map = LMap.addMap({L:L,opts:{center: [39.891584, 115.883789],
zoom: 5},id:"container"})
LMap.addLayer({L:L,url:'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',map:map})
// 传值 L map pdpoint 是否需要判断在某个面上 latlngs 如果要判断是否点击的位置在某个面上，必传面
LMap.addPop({L:L,map:map,pdpoint:true,latlngs:[
[38.177206, 103.447266], // 注意：polygon首尾坐标要一致
[37.134214, 111.577148],
[23.419828, 111.796875],
[33.03936, 102.65625],
[38.177206, 103.447266]
],turf:turf})
}
return () => {
// console.log('组件卸载',esc,viewer,utils);
};
}, [count]); // 空数组保证了这个effect只会在组件挂载时执行一次
return (
<>
<div id="container" className="mainMap2"></div>
<div className='checkboxs'>{count}<Checkbox onChange={ (e) => {
setCount((count)=>{
console.log(e.target.checked)
// utils.tools({viewer:viewer,val:"经纬网格"},count)
// util.tools({viewer:window.viewer,val:"经纬网格"},e.target.checked)
// if(e.target.checked){
// util.tools({viewer:window.viewer,val:"大气圈效果"},e.target.checked)
// }else{
// util.tools({viewer:window.viewer,val:"天空盒"},e.target.checked)
// }
return count = e.target.checked;
})
// console.log(window.viewer)
// console.log("vie::::",easyCesium,new easyCesium.init().utils(),new easyCesium.init().utils().tools({viewer:window.viewer,val:"经纬网格"},true))
// console.log(`checked = ${e.target.checked}`);
// window.viewer.imageryLayers.removeAll()
// this.forceUpdate()
}}>Checkbox</Checkbox></div>
</>
)
}
export default Scene
