1.什么是实体

Entity对象可以表示各种地理实体，如点、线、面等，并具有位置、方向、模型、标牌等属性

2.Entity API

特点: 较为高级的, 不需要使用者对图形学有很深的理解，可以直接拿来使用的API

3.Primitive API

特点: 面向图形人员开发的，更为复杂的API，Entity API本质上是对Primitive API的二次封装

4.使用Entity API绘制基本图形

Entity，也称为实体，一般有两种方式:

(1) 直接添加:

this.viewer.entities.add({})来添加;

(2) 先创建后添加:

const point = new Cesium.Entity({});

viewer.entities.add(point);

本篇主要介绍使用Entity API绘制基本图形

参考文档

4-1 点Point

4-2 线Polyline

4-3 面Polygon

4-4 矩形Rectangle

4-5 椭圆Ellipse

4-6 圆柱Cylinder

4-7 盒子Box

4-8 模型加载

4-9 标签Label

this.entity = this.viewer.entities.add({
    //=>此对象的唯一标识符。如果未提供，则会生成 GUID。
    id: "1",
    //=>向用户显示的人类可读名称。它不必是唯一的。
    name: "",
    //=>是否显示
    show: true,
    //=>位置
    position: Cesium.Cartesian3.fromDegrees(lon, lat, 100),
    label: {
        //=>文本内容
        text: "标签",
        //=>文本字体(大小/字体)
        font: "500 20px MyFont",
        //=>文本样式
        style: Cesium.LabelStyle.FILL,
        outlineWidth: 2,
        //=>标签相对于其原点的像素偏移量
        eyeOffset: new Cesium.Cartesian3(0, 0, -50),
        //=>标签相对于相机位置的偏移量
        pixelOffset: new Cesium.Cartesian2(0, 4),
        //=>标签的水平原点，这里设置为中心
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        //=>标签的垂直原点，这里设置为底部
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        //=>标签的缩放比例
        scale: 1,
        //=>是否显示背景
        showBackground: true, 
        //=>背景颜色
        backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8),
    }
})

4-10 广告牌Billboard

this.entity = this.viewer.entities.add({
    //=>此对象的唯一标识符。如果未提供，则会生成 GUID
    id: "1",
    //=>向用户显示的人类可读名称。它不必是唯一的
    name: "",
    //=>是否显示
    show: true,
    //=>位置
    position: Cesium.Cartesian3.fromDegrees(lon, lat, 100),
    billboard: {
        //=>图片资源(require)
        image: "@/assets/img/my.png",
        //=>图片宽度(px)
        width: 88,
        //=>图片高度(px)
        height: 58,
        //=>图片显示位置
        verticalOrigin: Cesium.VerticalOrigin.TOP,
        //=>图片显示位置
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        // 与坐标位置的偏移距离
        eyeOffset: new Cesium.Cartesian3(0, 0, -10),
        // 颜色 
        color: Cesium.Color.RED,
        // 缩放比例
        scale: 1,
    },
})

5.批量添加实体到viewer中

addEntity(data) {
     data.forEach((item) => {
        // 坐标转换
        let coordtrans = coordtransform.gcj02towgs84(item.lon, item.lat);
        this.entity = this.viewer.entities.add({
          id: item.id,
          name: "billboard",
          position: Cesium.Cartesian3.fromDegrees(coordtrans[0], coordtrans[1], 100),
          label: {
              text: item.text,
              font: "500 20px MyFont",
              style: Cesium.LabelStyle.FILL,
              //=>设置文字的偏移量
              pixelOffset: new Cesium.Cartesian2(0, -30),
              //=>设置文字的显示位置,LEFT /RIGHT /CENTER
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              //=>设置文字的显示位置
              verticalOrigin: Cesium.VerticalOrigin.TOP,
              //=>显示背景
              showBackground: true,
              backgroundColor: new Cesium.Color.fromCssColorString("#3651CE")
          },
          billboard: {
            image: "./image.png",
            width: 88,
            height: 58,
            //=>设置广告牌的显示位置
            verticalOrigin: Cesium.VerticalOrigin.TOP,
            //=>设置广告牌的显示位置
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          }
        });
      }); 
}

6.性能优化

在批量添加或修改实体时, 可以使用viewer.entities.suspendEvents()和viewer.entities.resumeEvents()方法来提高性能, 这两个方法分别用于暂停和恢复Cesium实体集合的事件处理

//=>暂停事件处理
viewer.entities.suspendEvents();

//=>执行批量更新
data.forEach((item)=>{
    viewer.entities.add({
        id: item.id,
        position:Cesium.Cartesian3.fromDegrees(100, 100, 100),
        point: {
          pixelSize: 10,
          color: Cesium.Color.RED,
        },
      });
})

//=>恢复事件处理
viewer.entities.resumeEvents();

(1)当开发者调用viewer.entities.suspendEvents()的时候，Cesium会暂停实体集合的事件处理，这意味着在暂停期间，Cesium不会触发与实体相关的事件;

(2)但是在暂停事件处理期间，用户仍然可以继续向实体集合中添加、删除或更新实体。 这些操作不会受到暂停事件处理的影响

(3)当在场景中实例化并加载上万个entity时，加载速率和性能往往没有有效组织primitive来的高

7.坐标转换

在使用SDK时，其返回的坐标在地图上显示时，会有几百米的偏移，这是因为高德用的是火星坐标(GCJ02); 而不是(wgs84)坐标。为了消除偏移，将(GCJ02)转为(wgs84)即可，可通过coordtransform库来转换。

7-1.安装coordtransform

npm i -S coordtransform

7-2.引入

import coordtransform from 'coordtransform';

//=>坐标转换
const coordtrans = coordtransform.gcj02towgs84(lon, lat);
//=>创建实体
this.entity = this.viewer.entities.add({
    name: "我是实体",
    position: Cesium.Cartesian3.fromDegrees(coordtrans[0],coordtrans[1],100)，
    label: {},
    billboard: {}
})