import React, {Component} from 'react'
|
import './ExampleDrawPage.css'
|
import {GIS} from "iclient3d-plot-diy";
|
|
export default class ExampleAggregatorPage extends Component {
|
|
|
constructor(props) {
|
super(props);
|
this.state = {
|
htmlString: '<h3>正在加载中...</h3>',
|
};
|
}
|
|
componentDidMount() {
|
fetch('./example/ExampleAggregatorPage.md')
|
.then(response => response.text())
|
.then(mdText => {
|
this.setState({htmlString: window.marked.parse(mdText)});
|
});
|
|
const randomPoints = this.generateRandomPointsInRadius(35.9042, 112.4074, 10, 200);
|
|
let options = [];
|
for (let i = 0; i < randomPoints.length; i++) {
|
options.push({
|
type: "2002",
|
useModify: false,
|
lon: randomPoints[i].lng,
|
lat: randomPoints[i].lat,
|
});
|
}
|
this.mapFunction.mapApiService.showDrawDatas(options);
|
}
|
|
/**
|
* 生成指定中心点周围100公里内的2000个随机点
|
* @param {number} centerLat - 中心点纬度（度）
|
* @param {number} centerLng - 中心点经度（度）
|
* @param {number} radiusKm - 半径（公里）
|
* @param {number} count - 生成点数
|
* @returns {Array<{lat: number, lng: number}>} 随机点数组
|
*/
|
generateRandomPointsInRadius(centerLat, centerLng, radiusKm = 100, count = 2000) {
|
const points = [];
|
const earthRadius = 6371; // 地球半径（公里）
|
|
for (let i = 0; i < count; i++) {
|
// 1. 生成随机方向（0-2π）
|
const angle = Math.random() * 2 * Math.PI;
|
|
// 2. 生成随机距离（考虑平方根确保均匀分布）
|
const distance = Math.sqrt(Math.random()) * radiusKm;
|
|
// 3. 将距离转换为弧度
|
const distanceRad = distance / earthRadius;
|
|
// 4. 计算新点坐标（哈弗辛公式）
|
const latRad = centerLat * Math.PI / 180;
|
const lngRad = centerLng * Math.PI / 180;
|
|
const newLat = Math.asin(
|
Math.sin(latRad) * Math.cos(distanceRad) +
|
Math.cos(latRad) * Math.sin(distanceRad) * Math.cos(angle)
|
);
|
|
const newLng = lngRad + Math.atan2(
|
Math.sin(angle) * Math.sin(distanceRad) * Math.cos(latRad),
|
Math.cos(distanceRad) - Math.sin(latRad) * Math.sin(newLat)
|
);
|
|
// 5. 转换为度数并存储
|
points.push({
|
lat: newLat * 180 / Math.PI,
|
lng: newLng * 180 / Math.PI
|
});
|
}
|
|
return points;
|
}
|
|
render() {
|
return (
|
<div className={"example_draw_container"}>
|
<h3>自动聚合</h3>
|
<div className={"map_wrapper"}>
|
<GIS refs={e => {
|
this.mapFunction = e
|
}}
|
useSvgIcon={true}
|
mapRef={this}
|
global={[112, 35, 113, 36]}
|
/>
|
</div>
|
<div className={"code_wrapper"}>
|
<div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
|
</div>
|
</div>
|
)
|
}
|
}
|
