Cesium

Introduction

Cesiumopen in new window is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.

Cesiumopen in new window 是一个用于在 Web 浏览器中创建 3D 地球和 2D 地图的 JavaScript 库，无需插件。它使用 WebGL 进行硬件加速图形，并且是跨平台，跨浏览器，并针对动态数据可视化进行了优化。

Installation

npm install cesium

Usage

import Cesium from "cesium/Cesium";
// 引入Cesium的样式
import "cesium/Build/Cesium/Widgets/widgets.css";

Reference

• Cesiumopen in new window

• CesiumJS APIopen in new window

加载 3D 资源

// 加载3D资源
const viewer = new Cesium.Viewer("cesiumContainer", {
  // cesium 的配置
});

加载 3D 模型

// 加载3D模型
const entity = viewer.entities.add({
  name: "3D模型",
  position: Cesium.Cartesian3.fromDegrees(116.397428, 39.90923, 100),
  model: {
    uri: "tileset.json地址",
  },
});

加载 3D 瓦片

// 加载3D瓦片
const tileset = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: "tileset.json地址",
  })
);

加载 shp

// 加载shp
const shp = viewer.dataSources.add(Cesium.GeoJsonDataSource.load("shp地址"));

加载 s3m

可以参考这里open in new window。

加载 geojson

// 加载geojson
const geojson = viewer.dataSources.add(
  Cesium.GeoJsonDataSource.load("geojson地址")
);

标注上图

添加点

// 添加点
const point = viewer.entities.add({
  name: "点",
  position: Cesium.Cartesian3.fromDegrees(116.397428, 39.90923, 100),
  point: {
    pixelSize: 10,
    color: Cesium.Color.RED,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 2,
  },
});

添加线

// 添加线
const line = viewer.entities.add({
  name: "线",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      116.397428, 39.90923, 100, 116.397428, 39.90923, 200,
    ]),
    width: 5,
    material: Cesium.Color.RED,
  },
});

添加面

// 添加面
const polygon = viewer.entities.add({
  name: "面",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      116.397428, 39.90923, 100, 116.397428, 39.90923, 200,
    ]),
    material: Cesium.Color.RED.withAlpha(0.5),
  },
});

事件

Name	类型	描述
LEFT_DOWN	Number	Represents a mouse left button down event.
LEFT_UP	Number	Represents a mouse left button up event.
LEFT_CLICK	Number	Represents a mouse left click event.
LEFT_DOUBLE_CLICK	Number	Represents a mouse left double click event.
RIGHT_DOWN	Number	Represents a mouse left button down event.
RIGHT_UP	Number	Represents a mouse right button up event.
RIGHT_CLICK	Number	Represents a mouse right click event.
MIDDLE_DOWN	Number	Represents a mouse middle button down event.
MIDDLE_UP	Number	Represents a mouse middle button up event.
MIDDLE_CLICK	Number	Represents a mouse middle click event.
MOUSE_MOVE	Number	Represents a mouse move event.
WHEEL	Number	Represents a mouse wheel event.
PINCH_START	Number	Represents the start of a two-finger event on a touch surface.
PINCH_END	Number	Represents the end of a two-finger event on a touch surface.
PINCH_MOVE	Number	Represents a change of a two-finger event on a touch surface.

示例代码（点击事件）

// 点击事件
viewer.screenSpaceEventHandler.setInputAction((event) => {
  const pickedObject = viewer.scene.pick(event.position);
  if (Cesium.defined(pickedObject)) {
    const entity = pickedObject.id;
    console.log(entity);
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

交互

鼠标滚轮缩放

// 鼠标滚轮缩放
viewer.scene.screenSpaceCameraController.enableZoom = true;

鼠标拖拽旋转

// 鼠标拖拽旋转
viewer.scene.screenSpaceCameraController.enableRotate = true;

鼠标拖拽平移

// 鼠标拖拽平移
viewer.scene.screenSpaceCameraController.enableTranslate = true;

双指缩放

// 双指缩放
viewer.scene.screenSpaceCameraController.enableTilt = true;

双指旋转

// 双指旋转
viewer.scene.screenSpaceCameraController.enableLook = true;

三维分析

裁剪

// 裁剪
const clippingPlanes = new Cesium.ClippingPlaneCollection({
  planes: [
    new Cesium.ClippingPlane(
      new Cesium.Cartesian3(0.0, 0.0, 1.0),
      0.0,
      Cesium.ClippingPlaneOrientation.BACK
    ),
  ],
  edgeWidth: 1.0,
  edgeColor: Cesium.Color.WHITE,
  modelMatrix: Cesium.Matrix4.IDENTITY,
  unionClippingRegions: true,
  enabled: true,
});
viewer.scene.globe.clippingPlanes = clippingPlanes;

测量

// 测量
const measurement = new Cesium.Measurement({
  scene: viewer.scene,
  ellipsoid: viewer.scene.globe.ellipsoid,
});
measurement.startMeasureDistance();

量算

// 量算
const measurement = new Cesium.Measurement({
  scene: viewer.scene,
  ellipsoid: viewer.scene.globe.ellipsoid,
});
measurement.startMeasureArea();