【Cesium入门教程】第七课:Primitive图元

Cesium丰富的空间数据可视化API分为两部分:primitive API面向三维图形开发者,更底层一些。

Entity API是数据驱动更高级一些。

javascript 复制代码
// entity
// 调用方便,封装完美
// 是基于primitive的封装

// primitive
// 更接近底层
// 可以绘制高级图形
// 由Geometry(几何形状)、(Appearance)外观组成
javascript 复制代码
const primitive = new Cesium.Primitive({
  geometryInstances: new Cesium.GeometryInstance({
    geometry: new Cesium.EllipseGeometry({
      center: Cesium.Cartesian3.fromDegrees(-100.0, 20.0),
      semiMinorAxis: 500000.0,
      semiMajorAxis: 1000000.0,
      rotation: Cesium.Math.PI_OVER_FOUR,
      vertexFormat: Cesium.VertexFormat.POSITION_AND_ST
    }),
  }),
  appearance: new Cesium.EllipsoidSurfaceAppearance({
    material: Cesium.Material.fromType('Stripe')
  })
})
viewer.scene.primitives.add(primitive);

组合图形

javascript 复制代码
<h1 id="m7WFT">组合图形</h1>
```javascript
const rectangleInstance = new Cesium.GeometryInstance({
  geometry: new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(-140.0, 30.0, -100.0, 40.0),
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  }),
  id: 'rectangle',
  attributes: {
    color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
  }
});

const ellipsoidInstance = new Cesium.GeometryInstance({
  geometry: new Cesium.EllipsoidGeometry({
    radii: new Cesium.Cartesian3(500000.0, 500000.0, 1000000.0),
    vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL
  }),
  modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
    Cesium.Cartesian3.fromDegrees(-95.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 500000.0), new Cesium.Matrix4()),
  id: 'ellipsoid',
  attributes: {
    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
  }
});

viewer.scene.primitives.add(new Cesium.Primitive({
  geometryInstances: [rectangleInstance, ellipsoidInstance],
  appearance: new Cesium.PerInstanceColorAppearance()
}));

点击事件

javascript 复制代码
<h1 id="qr6o4">点击事件:</h1>
<h3 id="XXD1c">添加地形图层后去画点</h3>
```javascript
let viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain()
})

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
  //返回一个笛卡尔坐标
  let position = viewer.scene.pickPosition(event.position);
  //如果有这个坐标
  if (Cesium.defined(position)) {
    console.log(position)
    viewer.entities.add({
      position: position,
      point: {
        color: Cesium.Color.BLUE,
        pixelSize: 20,
      },
    })
    console.log(viewer.entities)
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

事件注销

javascript 复制代码
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除左键点击事件

申明变量

javascript 复制代码
let pickModel

鼠标移动事件

javascript 复制代码
//添加建筑物
const city = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343),
    })
);
viewer.flyTo(city)

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
    //拾取模型
    const pick = viewer.scene.pick(event.endPosition);
    if (pick) {
        if (pickModel) {
            pickModel.color = Cesium.Color.WHITE;
        }
        pick.color = Cesium.Color.ORANGERED;
        pickModel = pick;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

注销事件

javascript 复制代码
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除左键点击事件
相关推荐
腾讯云大数据18 小时前
RayData赋能文旅:可视化产品提升四大场景运营效率
信息可视化
优秘智能UMI1 天前
私有化大模型架构解决方案构建指南
大数据·人工智能·深度学习·信息可视化·aigc
WJ.Polar1 天前
Python柱状图
python·信息可视化
一百天成为python专家1 天前
数据可视化
开发语言·人工智能·python·机器学习·信息可视化·numpy
SickeyLee2 天前
BI 系统数据看板全解析:让数据可视化驱动业务决策
信息可视化·数据挖掘·数据分析
医工交叉实验工坊2 天前
R 语言绘制六种精美热图:转录组数据可视化实践(基于 pheatmap 包)
开发语言·信息可视化·r语言
saadiya~2 天前
Vue + WebSocket 实时数据可视化实战:多源融合与模拟数据双模式设计
vue.js·websocket·信息可视化
云天徽上2 天前
【数据可视化-70】奶茶店销量数据可视化:打造炫酷黑金风格的可视化大屏
python·信息可视化·数据分析·数据可视化·pyecharts
JosieBook2 天前
【开源】WpfMap:一个基于WPF(Windows Presentation Foundation)技术构建的数据可视化大屏展示页面
信息可视化·wpf
大美B端工场-B端系统美颜师3 天前
实时数据可视化的“心跳”设计:毫秒级延迟下的动态图表抗闪烁优化方案
信息可视化·数据挖掘·数据分析