import React, {Component} from 'react'
|
import './ExampleDrawPage.css'
|
import {GIS, Bp} from "iclient3d-plot-diy";
|
import {interval, take} from "rxjs";
|
|
const Cesium = window['Cesium'];
|
|
export default class ExampleFlyPage extends Component {
|
|
constructor(props) {
|
super(props);
|
this.state = {
|
htmlString: '<h3>正在加载中...</h3>',
|
};
|
}
|
|
componentDidMount() {
|
|
fetch('./example/ExampleFlyPage.md')
|
.then(response => response.text())
|
.then(mdText => {
|
this.setState({htmlString: window.marked.parse(mdText)});
|
});
|
this.showData();
|
//监听拨盘事件
|
this.mapFunction.addBpListener(function (id, dom) {
|
if (id && dom) {
|
dom.innerHTML = '';
|
const newElement = document.createElement('canvas');
|
newElement.id = 'bpCanvas';
|
dom.append(newElement);
|
|
const bpConfig = {
|
canvasId: 'bpCanvas',
|
items: [
|
{name: '图标1', img: './project3d/icon/bpImgs/icon-1.png'},
|
{name: '图标2', img: './project3d/icon/bpImgs/icon-2.png'},
|
{name: '图标3', img: './project3d/icon/bpImgs/icon-3.png'},
|
{name: '图标4', img: './project3d/icon/bpImgs/icon-4.png'},
|
]
|
};
|
this.setState({
|
bp: new Bp(bpConfig)
|
})
|
this.state.bp.createBp();
|
this.state.bp.listenClick((index) => {
|
this.setState({
|
clickBpIndex: index
|
});
|
});
|
}
|
}, this);
|
}
|
|
showData() {
|
|
let centerCartesian = Cesium.Cartesian3.fromDegrees(102.73181802939419, 30.982754659441543);
|
// 中心点坐标
|
const ellipsoid = Cesium.Ellipsoid.WGS84;
|
const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(centerCartesian, ellipsoid);
|
|
let endRad = Cesium.Math.toRadians(360);
|
let angleStep = Cesium.Math.toRadians(3);
|
let points = this.generateSectorPositions(centerCartesian, 100, 0, endRad, angleStep, enuMatrix, true);
|
|
let arr = points.map(point => {
|
let car = Cesium.Cartographic.fromCartesian(point);
|
return {
|
lon: Cesium.Math.toDegrees(car.longitude),
|
lat: Cesium.Math.toDegrees(car.latitude),
|
height: 5000
|
};
|
});
|
|
let option = {
|
"bz": true,
|
"code": "ccccc",
|
"bzlx": "simple",
|
"jbwb": "R:00017",
|
"type": "2010",
|
"useModify": false,
|
"lon": arr[0].lon,
|
"lat": arr[0].lat,
|
"height": arr[0].height || 0,
|
points: []
|
}
|
this.mapFunction.mapApiService.showDrawDatas([option]);
|
|
interval(300).pipe(take(120)).subscribe(number => {
|
this.mapFunction.mapApiService.updateDraw("ccccc", {
|
lon: arr[number].lon,
|
lat: arr[number].lat,
|
points: arr.slice(0, number)
|
});
|
});
|
}
|
|
render() {
|
return (
|
<div className={"example_draw_container"}>
|
<h3>军标绘制拨盘功能</h3>
|
<div className={"map_wrapper"}>
|
<GIS refs={
|
e => {
|
this.mapFunction = e
|
}
|
}
|
useSvgIcon={true}
|
plotUrl={this.state.plotUrl}
|
mapRef={this}
|
showDefaultLayer={true}
|
/>
|
</div>
|
<div className={"code_wrapper"}>
|
<div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
|
</div>
|
</div>
|
)
|
}
|
|
/**
|
* 生成扇形边界点坐标
|
*/
|
generateSectorPositions(center, radius, startRad, endRad, angleStep, enuMatrix, isFullCircle) {
|
const positions = [];
|
|
// 如果不是完整圆，添加起点到中心的线
|
if (!isFullCircle) {
|
positions.push(center);
|
}
|
|
// 生成弧线上的点
|
for (let angle = startRad; angle <= endRad; angle += angleStep) {
|
const east = radius * Math.sin(angle); // 东方向对应sin
|
const north = radius * Math.cos(angle); // 北方向对应cos
|
|
const localOffset = new Cesium.Cartesian3(east, north, 0);
|
const worldPosition = Cesium.Matrix4.multiplyByPoint(
|
enuMatrix,
|
localOffset,
|
new Cesium.Cartesian3()
|
);
|
positions.push(worldPosition);
|
}
|
|
// 确保包含终点
|
const finalEast = radius * Math.sin(endRad);
|
const finalNorth = radius * Math.cos(endRad);
|
const finalOffset = new Cesium.Cartesian3(finalEast, finalNorth, 0);
|
const finalPosition = Cesium.Matrix4.multiplyByPoint(
|
enuMatrix,
|
finalOffset,
|
new Cesium.Cartesian3()
|
);
|
positions.push(finalPosition);
|
|
// 如果不是完整圆，添加回到中心的线
|
if (!isFullCircle) {
|
positions.push(center);
|
} else {
|
// 完整圆则闭合环
|
positions.push(positions[0]);
|
}
|
|
return positions;
|
}
|
}
|
