cesium学习之路(七)地图绘制圆点 线条

通过viewer.entities.add(option)建立

效果如下

 1.在地图中创建一个圆点。通常用于标记某地或物体所在位置

const entities = this.viewer.entities; //将enities方法保存到变量中
      entities.add({
        position: Cesium.Cartesian3.fromDegrees(104.07, 30.66), //实体的定位
        point: {
          pixelSize: 30, //圆的大小
          color: Cesium.Color.fromCssColorString(`rgba(255,0,255,1)`), //圆的颜色
          outlineWidth: 5, //圆的轮廓宽度
          outlineColor: Cesium.Color.fromCssColorString(`rgba(0,255,255,1)`), //圆的轮廓颜色
        },
      });

 

2.在地图中绘制一条线,通常用于标记实体行进轨迹

2(1).有高度的线

 

const entities = this.viewer.entities; //将enities方法保存到变量中  
entities.add({
        polyline: {
          positions: [
            Cesium.Cartesian3.fromDegreesArrayHeights([
              104.07, 30.66, 1000.0,
            ])[0],
            Cesium.Cartesian3.fromDegreesArrayHeights([
              105.08, 30.66, 1000.0,
            ])[0],
          ], //线折点的位置
          width: 10, //线的宽度
          material: Cesium.Color.fromCssColorString(`rgba(0,255,255,1)`), //线的颜色,
          clampToGround: false, //一个布尔属性,指定是否应将折线绘制到地面。
        },
      });

 

2(2).贴地面的线

const entities = this.viewer.entities; //将enities方法保存到变量中  
entities.add({
        polyline: {
          //线折点的位置
          positions: Cesium.Cartesian3.fromDegreesArray([
            104.07, 30.66, 103.07, 30.66,
          ]), //线折点的位置
          width: 10, //线的宽度
          material: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //线的颜色,
          clampToGround: true, //一个布尔属性,指定是否应将折线绘制到地面。
        },
      });

 

 

 

Cesium中,可以使用PolylinePrimitive或PolylineGeometry来绘制线条,如果需要指定线条的方向,可以通过设置PolylineGeometry的positions属性来实现。具体步骤如下: 1. 创建PolylineGeometry对象,并设置其positions属性为一个Cartesian3数组,用来指定线条的坐标点。 ``` var positions = [ Cesium.Cartesian3.fromDegrees(-75, 35), Cesium.Cartesian3.fromDegrees(-125, 35) ]; var polyline = new Cesium.PolylineGeometry({ positions: positions }); ``` 2. 创建GeometryInstance对象,并设置其geometry属性为PolylineGeometry对象,用来指定线条的几何形状。 ``` var instance = new Cesium.GeometryInstance({ geometry: polyline }); ``` 3. 创建PolylineMaterialAppearance对象,并设置其material属性为一个Material对象,用来指定线条的颜色、宽度等属性。 ``` var material = new Cesium.Material({ fabric : { type : 'Color', uniforms : { color : new Cesium.Color(1.0, 1.0, 0.0, 1.0) } } }); var appearance = new Cesium.PolylineMaterialAppearance({ material: material, lineWidth: 5.0 }); ``` 4. 创建Primitive对象,并设置其geometryInstances属性为GeometryInstance对象,设置其appearance属性为PolylineMaterialAppearance对象,用来指定线条的外观和材质。 ``` var primitive = new Cesium.Primitive({ geometryInstances: instance, appearance: appearance, allowPicking: false }); ``` 5. 将Primitive对象添加到场景中。 ``` viewer.scene.primitives.add(primitive); ``` 以上代码可以绘制一条从(-75,35)到(-125,35)的黄色线条,宽度为5.0。如果需要指定线条的方向,可以调整positions数组中的顺序或添加更多的坐标点。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m0_63701303

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值