368 lines
7.4 KiB
HTML
368 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|
<script src="./js/lightline2.js"></script>
|
|
<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
|
|
<style>
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|
html,
|
|
body,
|
|
#cesiumContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js"></script> -->
|
|
<!-- <link href="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
|
|
</head>
|
|
<body>
|
|
<div id="cesiumContainer"></div>
|
|
<script type="module">
|
|
|
|
// import './js/lightline2.js'
|
|
// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
|
var viewer = new Cesium.Viewer('cesiumContainer',{
|
|
terrainProvider: Cesium.createWorldTerrain()
|
|
});
|
|
create()
|
|
//
|
|
function create(){
|
|
//创建射线
|
|
|
|
var data = {
|
|
|
|
center: {
|
|
|
|
id: 0,
|
|
|
|
lon: 114.302312702,
|
|
|
|
lat: 30.598026044,
|
|
|
|
size: 20,
|
|
|
|
color: Cesium.Color.PURPLE
|
|
|
|
},
|
|
|
|
points: [
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
lon: 115.028495718,
|
|
|
|
lat: 30.200814617,
|
|
|
|
color: Cesium.Color.YELLOW,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 2,
|
|
|
|
lon: 110.795000473,
|
|
|
|
lat: 32.638540762,
|
|
|
|
color: Cesium.Color.RED,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 3,
|
|
|
|
lon: 111.267729446,
|
|
|
|
lat: 30.698151246,
|
|
|
|
color: Cesium.Color.BLUE,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 4,
|
|
|
|
lon: 112.126643144,
|
|
|
|
lat: 32.058588576,
|
|
|
|
color: Cesium.Color.GREEN,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 5,
|
|
|
|
lon: 114.885884938,
|
|
|
|
lat: 30.395401912,
|
|
|
|
color: Cesium.Color.BLUE,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 6,
|
|
|
|
lon: 112.190419415,
|
|
|
|
lat: 31.043949588,
|
|
|
|
color: Cesium.Color.BLUE,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 7,
|
|
|
|
lon: 113.903569642,
|
|
|
|
lat: 30.93205405,
|
|
|
|
color: Cesium.Color.BLUE,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 8,
|
|
|
|
lon: 112.226648859,
|
|
|
|
lat: 30.367904255,
|
|
|
|
color: Cesium.Color.BLUE,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 9,
|
|
|
|
lon: 114.86171677,
|
|
|
|
lat: 30.468634833,
|
|
|
|
color: Cesium.Color.BLUE,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 10,
|
|
|
|
lon: 114.317846048,
|
|
|
|
lat: 29.848946148,
|
|
|
|
color: Cesium.Color.BLUE,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 11,
|
|
|
|
lon: 113.371985426,
|
|
|
|
lat: 31.70498833,
|
|
|
|
color: Cesium.Color.BLUE,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 12,
|
|
|
|
lon: 109.468884533,
|
|
|
|
lat: 30.289012191,
|
|
|
|
color: Cesium.Color.BLUE,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 13,
|
|
|
|
lon: 113.414585069,
|
|
|
|
lat: 30.368350431,
|
|
|
|
color: Cesium.Color.SALMON,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 14,
|
|
|
|
lon: 112.892742589,
|
|
|
|
lat: 30.409306203,
|
|
|
|
color: Cesium.Color.WHITE,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 15,
|
|
|
|
lon: 113.16085371,
|
|
|
|
lat: 30.667483468,
|
|
|
|
color: Cesium.Color.SALMON,
|
|
|
|
size: 15
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 16,
|
|
|
|
lon: 110.670643354,
|
|
|
|
lat: 31.74854078,
|
|
|
|
color: Cesium.Color.PINK,
|
|
|
|
size: 15
|
|
|
|
}
|
|
|
|
],
|
|
|
|
options: {
|
|
|
|
name: "",
|
|
|
|
polyline: {
|
|
|
|
width: 2,
|
|
|
|
material: [Cesium.Color.GREEN, 3000]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
createFlyLines(data);
|
|
}
|
|
function createFlyLines(data){
|
|
const center = data.center;
|
|
const cities = data.points;
|
|
const startPoint = Cesium.Cartesian3.fromDegrees(center.lon,center.lat,0);
|
|
viewer.entities.add({
|
|
position: startPoint,
|
|
point: {
|
|
pixelSize: center.size,
|
|
color: center.color
|
|
}
|
|
});
|
|
//大批量操作时，临时禁用事件可以提高性能
|
|
viewer.entities.suspendEvents();
|
|
//散点
|
|
cities.map(city => {
|
|
let material = new Cesium.PolylineTrailMaterialProperty({
|
|
color: Cesium.Color.GREEN,
|
|
duration: 3000,
|
|
trailImage: "/data/images/Blue10x10.png"
|
|
});
|
|
const endPoint = Cesium.Cartesian3.fromDegrees(city.lon, city.lat, 0);
|
|
viewer.entities.add({
|
|
position: endPoint,
|
|
point: {
|
|
pixelSize: city.size - 10,
|
|
color: city.color
|
|
}
|
|
});
|
|
viewer.entities.add({
|
|
polyline: {
|
|
positions: generateCurve(startPoint, endPoint),
|
|
width: 2,
|
|
material: material
|
|
}
|
|
});
|
|
});
|
|
viewer.entities.resumeEvents();
|
|
viewer.flyTo(viewer.entities);
|
|
}
|
|
function generateCurve(startPoint, endPoint){
|
|
let addPointCartesian = new Cesium.Cartesian3();
|
|
Cesium.Cartesian3.add(startPoint, endPoint, addPointCartesian);
|
|
|
|
let midPointCartesian = new Cesium.Cartesian3();
|
|
Cesium.Cartesian3.divideByScalar(addPointCartesian, 2, midPointCartesian);
|
|
|
|
let midPointCartographic = Cesium.Cartographic.fromCartesian(
|
|
midPointCartesian
|
|
);
|
|
midPointCartographic.height = Cesium.Cartesian3.distance(startPoint, endPoint) / 5;
|
|
let midPoint = new Cesium.Cartesian3();
|
|
Cesium.Ellipsoid.WGS84.cartographicToCartesian(
|
|
midPointCartographic,
|
|
midPoint
|
|
);
|
|
let spline = new Cesium.CatmullRomSpline({
|
|
times: [0.0, 0.5, 1.0],
|
|
points: [startPoint, midPoint, endPoint]
|
|
});
|
|
let curvePoints = [];
|
|
for (let i = 0, len = 200; i < len; i++) {
|
|
curvePoints.push(spline.evaluate(i / len));
|
|
}
|
|
return curvePoints;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|