开始

创建地球

1. 引入标签

<script src="./public/static/Cesium/Cesium.js"></script>
<style>
  @import url(./public/static/Cesium/Widgets/widgets.css);
</style>

2. 初始化地球

var viewer = new Cesium.Viewer("cesiumContainer", {
  animation: false, //是否创建动画小器件，左下角仪表
  baseLayerPicker: false, //是否显示图层选择器
  fullscreenButton: false, //是否显示全屏按钮
  geocoder: false, //是否显示geocoder小器件，右上角查询按钮
  homeButton: false, //是否显示Home按钮
  infoBox: false, //是否显示信息框
  sceneModePicker: false, //是否显示3D/2D选择器
  selectionIndicator: false, //是否显示选取指示器组件
  timeline: false, //是否显示时间轴
  sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
  navigationHelpButton: false, //是否显示右上角的帮助按钮
  scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
  navigationInstructionsInitiallyVisible: false,
  showRenderLoopErrors: false, //是否显示渲染错误
  orderIndependentTranslucency: false,
  terrainProvider : Cesium.createWorldTerrain(), //地形
  contextOptions: {
    webgl: {
      alpha: true,
    },
  },
});
viewer.camera.flyTo({
	destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
});

绘制贴地点位

Entity模式

贴地可以使用CLAMP_TO_GROUND

// 绘制point
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
  point: {
    show: true, //是否展示
    pixelSize: 20, //点的大小
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //相对高度
    color: Cesium.Color.RED, //颜色
    outlineColor: Cesium.Color.SKYBLUE, //边框颜色
    outlineWidth: 5, //边框宽度
    // scaleByDistance:new Cesium.NearFarScalar(100, 5, 10000, 15), //缩放距离设置
    // translucencyByDistance:new Cesium.NearFarScalar(100, 0.2, 10000, 0.8),//点的半透明设置
    // distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1000, 10000),//点的显隐距离
    disableDepthTestDistance: false, //禁用深度测试距离
  },
});

坐标系

Cesium中的坐标系分为两种：笛卡尔坐标（x,y,z三系坐标）与经纬度

笛卡尔坐标系

获取点击坐标

clickMe(viewer) {
  let scene = viewer.scene;
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
  handler.setInputAction(function(event) {
    var wp = event.position;
    if (!Cesium.defined(wp)) {
      return;
    }
    // 笛卡尔坐标
    let cartesian = scene.pickPosition(wp);
    if (!Cesium.defined(cartesian)) {
      return;
    }
    // 经纬度坐标
    var ellipsoid = scene.globe.ellipsoid;
    var xyz = new Cesium.Cartesian3(cartesian.x, cartesian.y, cartesian.z);
    var wgs84 = ellipsoid.cartesianToCartographic(xyz);
    console.log(
      Cesium.Math.toDegrees(wgs84.longitude) +
      "," +
      Cesium.Math.toDegrees(wgs84.latitude) +
      "，高度:" +
      wgs84.height
    );
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},

转换为经纬度

var cartographic = Cesium.Cartographic.fromCartesian(position);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;

创建物体

entity

概念

entity方法与primitive方法都用于在cesium地球上创建物体，包括广告牌、平面物体与立方体。

使用

entity可以创建一个实体，如果需要创建多个实体，可以通过创建集合来统一管理

const dataSource = new Cesium.CustomDataSource();
dataSource.entities.add({
  name:xxx,
  id:xxx,
  position:xxx,
  material:xxx
});
viewer.dataSources.add(dataSource);

primitive

primitive有两个部分组成：

• Geometry（几何形状）：定义了Primitive的结构，例如三角形、线条、点等
• Appearance（外观）：定义Primitive的着色（Sharding），包括GLSL（OpenGL着色语言，OpenGL Shading Language）顶点着色器和片段着色器（ vertex and fragment shaders），以及渲染状态（render state）

下面代码是entity与primitive方式对比：

//entity方式
viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(110.20, 34.55, 111.20, 35.55),
    material: new Cesium.StripeMaterialProperty({
      evenColor: Cesium.Color.WHITE,
      oddColor: Cesium.Color.BLUE,
      repeat:5
    })
  }
});


//primitive方式
var instance = new Cesium.GeometryInstance({
  geometry: new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(105.20, 30.55, 106.20, 31.55),
    vertexFormat:Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
  })
});
viewer.scene.primitives.add(new Cesium.Primitive({
  geometryInstances: instance,
  appearance: new Cesium.EllipsoidSurfaceAppearance({
    material:Cesium.Material.fromType('Stripe')
  })
}));

构造函数：new Cesium.Primitive(options)

参数options：

名称	类型	默认值	描述
geometryInstances	Array.GeometryInstance > | GeometryInstance		用于渲染的一组或一个几何图形实例。
appearance	Appearance		用于渲染图元的外观。
depthFailAppearance	Appearance		当图元未通过深度测试时，用于对其进行着色的外观。
show	Boolean	true	是否显示图元。
modelMatrix	Matrix4	Matrix4.IDENTITY	将图元（所有几何体实例）从模型坐标转换为世界坐标的4x4变换矩阵。
vertexCacheOptimize	Boolean	false	如果为true，几何体顶点将针对顶点前和顶点后着色器缓存进行优化。
interleave	Boolean	false	如果为true，几何体顶点属性将交错，以稍微提高渲染性能，但会增加加载时间。
compressVertices	Boolean	true	如果为true，几何体顶点将被压缩，以节省内存。
releaseGeometryInstances	Boolean	true	如果为true，则图元不保留对输入几何实例的引用，以节省内存。
allowPicking	Boolean	true	如果为true，则每个几何体实例将只能使用Scene#pick 进行拾取；如果为false，则可节省GPU内存。
cull	Boolean	true	如果为true，则渲染器视锥和地平线基于图元的外包围盒剔除其commands；如果要手动剔除图元，将值设置为false可以获得较小的性能增益。
asynchronous	Boolean	true	确定是选择异步创建图元还是在准备就绪前一直阻塞。
debugShowBoundingVolume	Boolean	false	仅用于调试。是否显示图元commands的外包围盒。
shadows	ShadowMode	ShadowMode.DISABLED	确定图元是从光源投射阴影还是从光源接收阴影。

|

编辑实体

增加一个实体

//方法一
var entity = new Entity({
    id : 'uniqueId'
});
viewer.entities.add(entity);

//方法一 简写
viewer.entities.add({
    id : 'uniqueId'
});

//方法二
var entity = viewer.entities.getOrCreateEntity('uniqueId');

查找实体

var entity = viewer.entities.getById('uniqueId');

编辑实体

viewer.entities.getById("chart1").wall.material = Cesium.Color.RED;

删除实体

//方法一，先查后删
var entity = viewer.entities.getById('uniqueId');
viewer.entities.remove(entity) 
//方法二，直接删除
viewer.entities.removeById('uniqueId')
//方法三，删除所有
viewer.entities.removeAll()

材质（material）

在Cesium中通过material来设置材质，其官方也提供了多个材质API以供使用，有以下几种：

• ColorMaterialProperty
• CompositeMaterialProperty
• GridMaterialProperty
• ImageMaterialProperty
• PolylineGlowMaterialProperty
• PolylineOutlineMaterialProperty
• StripeMaterialProperty

ColorMaterialProperty（颜色材质）

颜色是最常见的材质，可以将几何形状修改为不同的纯色，达到区分的目的。使用比较简单，直接赋值颜色就可以了。

material:Cesium.Color.BLUE.withAlpha(0.5)

ImageMaterialProperty（图片）

图片纹理功能比较丰富，主要有下面属性：

• image：值可以是URL，Canvas,或者Video
• repeat：值为一个二位数，分别表示x,y方向的重复次数，例如new Cartesian2(2.0, 1.0)表示x方向重复2次，y方向重复1次
• color：设置颜色之后，会在图片上覆盖一层设置的颜色
• transparent：是否透明，纹理为png图片的时候可以设置

material: new Cesium.ImageMaterialProperty({
  image: "../../static/img/chart/pie-simple.png",
  color: Cesium.Color.BLUE,
  repeat : new Cesium.Cartesian2(4, 4),
  transparent: true
})

注意：如果在http网址中调用https网址的图片，有可能会调用失败

CheckerboardMaterialProperty（棋盘纹理）

共有三个属性：

• evenColor：默认白色，棋盘的第一个颜色
• oddColor：默认黑色，第二个颜色
• repeat：重复次数

material: new Cesium.CheckerboardMaterialProperty({
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : new Cesium.Cartesian2(4, 4)
});

StripeMaterialProperty（条纹纹理）

属性说明如下：

• evenColor：默认白色，棋盘的第一个颜色
• oddColor：默认黑色，第二个颜色
• repeat：条纹重复次数
• offset：偏移量
• orientation：水平或者垂直,默认水平

material: new Cesium.StripeMaterialProperty({
  evenColor: Cesium.Color.WHITE,
  oddColor: Cesium.Color.BLACK,
  repeat: 32,
  offset:20,
  orientation:Cesium.StripeOrientation.VERTICAL 
});

GridMaterialProperty（网格)

属性说明如下：

• color：网格颜色
• cellAlpha：单元格透明度
• lineCount：行列个数
• lineThickness：线粗细
• lineOffset：线偏移

material: new Cesium.StripeMaterialProperty({
  evenColor: Cesium.Color.WHITE,
  oddColor: Cesium.Color.BLACK,
  repeat: 32,
  offset:20,
  orientation:Cesium.StripeOrientation.VERTICAL 
});

PolylineGlowMaterialProperty（折线中心发光）

PolylineGlowMaterialProperty与PolylineOutlineMaterialProperty都是用于polyline中的材质类型
属性说明如下：

• color：发光的颜色(中心颜色为白色)
• glowPower：发光的长度，值为线宽的百分比(0~1.0)

material: new Cesium.PolylineGlowMaterialProperty({
  glowPower : 0.2,
  color : Cesium.Color.BLUE
});

PolylineOutlineMaterialProperty（折线轮廓）

属性说明如下：

• color：线的颜色
• outlineWidth：线纹理宽度
• outlineColor：线纹理颜色

material: new Cesium.PolylineOutlineMaterialProperty({
  color : Cesium.Color.ORANGE,
  outlineWidth : 3,
  outlineColor : Cesium.Color.BLACK
});