顾名思义就是贴着地画一条线,用到的组件是polyline,这里和Threejs的用法不大相同,cesium通常都用类似json的方式设置组件属性,类似百度echarts里设置图表的用法。下这里给线设置点,点是有经纬度组成,组件会根据点的顺序连接成一条线。并且可以设置线的宽度,颜色等。下面是源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// 设置token
Cesium.Ion.defaultAccessToken = 'token';
// 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器,这里不传ID传DO .
const viewer = new Cesium.Viewer('cesiumContainer');
//添加一个线的组价
var yellowLine = viewer.entities.add({
name: 'Red line',//线的名称
polyline: {
//这里添加线的经纬度,两个为一组一个经度一个维度
positions: Cesium.Cartesian3.fromDegreesArray([
116.751937,36.553571,
118.76873,34.11446,
120.807120,31.351219,
86.041075,44.305886
]),
width: 2,//设置线段恶宽
material: Cesium.Color.YELLOW//设置线的颜色
}
});
</script>
</div>
</body>
</html>
效果图 如有问题可以在评论区留言