【Cesium三维地球上添加点、线、面、文字、图标(图片)、模型等标绘】

Cesium-Vue

  • Cesium
    • 1.创建 点 线 面 模型对象
      • 1.1 点实体对象
        • 1.1.1创建实体再添加
        • 1.1.2 直接添加
      • 1.2 线实体对象
      • 1.3 Label实体对象
      • 1.4 面实体对象
      • 1.5 模型glb对象
      • 1.6 移除实体方法
    • 3. 瓦片3Dtitles
    • 4. 样式
    • 5. cesium 经纬度变换

Cesium

教学:
https://blog.csdn.net/weixin_45782925/article/details/123269490

1.创建 点 线 面 模型对象

Cesium三维地球上添加点、线、面、文字、图标(图片)、模型等标绘

链接: 其他博主链接

1.1 点实体对象

1.1.1创建实体再添加
// 创建一个点实体
var entity = new Cesium.Entity({
  name: 'Sample Point',
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  point: {
      pixelSize: 10,
      color: Cesium.Color.RED
  }
});
// 将点实体添加到场景中
viewer.entities.add(entity);

1.1.2 直接添加
var entity= viewer.entities.add({
name: 'Sample Point',
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  point: {
    color: new Cesium.Color(1.0, 1.0, 0.0, 0.3), // 设置点内部为黄色的半透明
    outlineColor: Cesium.Color.YELLOW, //设置外边为黄色
    outlineWidth: 4,
    pixelSize: 16,
    }, 
  label: {
    font: "16px sans-serif",
    // text: "航点",
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    pixelOffset: new Cesium.Cartesian2(0, -10) // 文字偏移
    },
})

上述两种 大致一样, 打印log entity 输出的实体对象应该是一样的

1.2 线实体对象

// 创建一个线实体对象
var lineEntity = new Cesium.Entity({
  name: 'Sample Line',
  polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([
          -75.59777, 40.03883,
          -80.23456, 45.67890
      ]),
      width: 2,
      material: Cesium.Color.RED
  }
});
// 将线实体对象添加到场景中
viewer.entities.add(lineEntity);

1.3 Label实体对象

// 创建一个 Label 实体对象
var labelEntity = new Cesium.Entity({
  name: 'Sample Label',
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  label: {
      text: 'Hello, World!',
      fillColor: Cesium.Color.YELLOW,
      showBackground: true,
      backgroundColor: Cesium.Color.BLACK
  }
});
// 将 Label 实体对象添加到场景中
viewer.entities.add(labelEntity);

1.4 面实体对象

var polygonEntity = new Cesium.Entity({
  name: 'Sample Polygon',
  polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
          -115.0, 37.0,
          -115.0, 32.0,
          -107.0, 33.0,
          -102.0, 31.0,
          -102.0, 35.0
      ]),
      material: Cesium.Color.RED.withAlpha(0.5)
  }
});
// 将面实体对象添加到场景中
viewer.entities.add(polygonEntity);

1.5 模型glb对象

   var entity = new Cesium.Entity({
      name: 't8',
      show: true,
      position: Cesium.Cartesian3.fromDegrees(114, 39, height),
      model: {
        uri: "./imagery/model/wrji.glb",
        scale: 3
      },
      orientation:orientation,
      description: `
                

这是entity的属性信息,entity的description里面可以写一段html

苹果园dog

`
}); viewer.entities.add(entity);

1.6 移除实体方法

  • 获取实体
  //通过id 获取实体
 const entity =  viewer.entities,getById('point')
  • 移除实体对象
    let viewer = window.viewer;
    viewer.entities.remove(this.vehicleEntity);
    this.vehicleEntity = null;
  • id 移除实体对象
  viewer.entities.removeById("polyline"); // 已知实体的id为polyline
  • 循环移除
  // 获取所有实体的数组
  var entities = viewer.entities.values;
  for (let index = 0; index < entities.length; index++) {
    const entity = entities[index];
    if (entity.id && entity.id.indexOf('polygon')!==-1) {
      viewer.entities.remove(entity)
      i--; //移除时,
      viewer.scene.requestRender();
    }
  }
  • 移除所有实体对象
viewer.eviewer.entities.removeAll()

3. 瓦片3Dtitles

在这里插入代码片

4. 样式

   let material=
    Cesium.Color.fromCssColorString('rgba(0,255,0,0.8)');

5. cesium 经纬度变换

经纬度变换博客: link

你可能感兴趣的:(cesium,vue.js,前端)