EntityLayer 实体图层

实体图层用于显示和管理实体对象， 实体对象包括：
billboard(广告牌)、box(盒)、corridor(走廊)、cylinder(圆柱)、ellipse(椭圆)、ellipsoid(椭球)、heatmap(热力图)、label(标签)、marker(标记)、plane(平面)、point(点)、polygon(多边形)、polyline(折线)、polylineVolume(折线体)、rectangle(矩形)、wall(墙) 。

演练场

引入

import { EntityLayer } from "@m-tech/gis-core";

new EntityLayer(options);

入参

参数	类型	默认值	描述
options	Object	-	图层可选参数
options.id	String	-	图层唯一标识
options.declutter	Boolean	false	是否启用聚合
options.overlays	Array	-	图层初始化时添加的实体对象
options.minZoom	number	0	图层最小显示层级
options.maxZoom	number	25	图层最大显示层级

属性

属性	类型	读/写	描述
id	string	读写	图层 id
show	boolean	读写	是否显示
attr	Object	读写	自定义属性
declutter	boolean	读写	是否启用聚合

方法

• addOverlay(overlay: Overlay)

添加覆盖物。

• addOverlays(overlays: Overlay[])

批量添加覆盖物。

• removeOverlay(overlay: Overlay)

移除覆盖物。

• getOverlay(id: string)

通过 id 获取覆盖物。

• getOverlaysByAttr(attrName: string, attrVal: string)

通过属性名和属性值获取覆盖物。

• eachOverlay(method: Function, context: any)

遍历每个覆盖物并将其作为参数传递给回调函数。

• getOverlays()

获取图层上所有覆盖物。

• addToViewer(viewer: Viewer)

将图层添加到 Viewer。

• clear()

清空图层。

示例

import {
  EntityLayer,
  Position,
  Billboard,
  Box,
  Corridor,
  Cylinder,
  Ellipse,
  Ellipsoid,
  Label,
  Marker,
  Plane,
  Point,
  Polygon,
  Polyline,
  PolylineVolume,
  Rectangle,
  Wall,
} from "@m-tech/gis-core";

const layer = new EntityLayer();
viewer.addLayer(layer);

// 添加一个 billboard 广告牌
const billboard = new Billboard(new Position(114.315782, 30.47449, 0));
billboard.addToLayer(layer);

// 添加一个 box
const box = new Box(new Position(114.320782, 30.47449, 0), {
  length: 100,
  width: 100,
  height: 100,
  material: Color.RED,
});
box.addToLayer(layer);

// 添加一个 corridor 走廊
const corridor = new Corridor(
  [
    new Position(114.325782, 30.47449, 0),
    new Position(114.325782, 30.47649, 0),
    new Position(114.326782, 30.47749, 0),
    new Position(114.324782, 30.47849, 0),
  ],
  {
    material: Color.GREEN,
    extrudedHeight: 100,
  },
);
corridor.addToLayer(layer);

// 添加一个 cylinder 圆柱
const cylinder = new Cylinder(new Position(114.330782, 30.47449, 0), {
  length: 100,
  topRadius: 100,
  bottomRadius: 100,
  material: Color.BLUE,
});
cylinder.addToLayer(layer);

// 添加一个 ellipse 椭圆
const ellipse = new Ellipse(new Position(114.335782, 30.47449, 0), {
  semiMajorAxis: 100,
  semiMinorAxis: 50,
  material: Color.YELLOW,
});
ellipse.addToLayer(layer);

// 添加一个 ellipsoid 椭球
const ellipsoid = new Ellipsoid(new Position(114.315782, 30.46949, 0), {
  radius: { x: 100, y: 100, z: 100 },
  material: Color.PURPLE,
});
ellipsoid.addToLayer(layer);

// 添加一个 label 标签
const label = new Label(new Position(114.320782, 30.46949, 0), {
  text: "I'm Label",
  font: "20px sans-serif",
  fillColor: Color.fromCssColorString("#00ff00"),
  showBackground: true,
  backgroundColor: Color.fromCssColorString("rgba(47, 53, 60, 0.8)"),
  scaleByDistance: new Cesium.NearFarScalar(0, 1, 15000, 0.5),
});
label.addToLayer(layer);

// 添加一个 marker 标记
const marker = new Marker(new Position(114.325782, 30.46949, 0), {
  billboard: {
    icon: new URL("../../assets/images/enterprise.png", import.meta.url).href,
  },
  label: {
    text: "I'm Marker",
    font: "20px sans-serif",
    fillColor: Color.fromCssColorString("#00ff00"),
    direction: "top-center",
    scaleByDistance: new Cesium.NearFarScalar(0, 1, 15000, 0.4),
  },
  model: {
    uri: new URL("../../assets/models/Cesium_Man.glb", import.meta.url).href,
    scale: 1,
    minimumPixelSize: 50,
  },
});
marker.addToLayer(layer);

// 添加一个 plane 平面
const plane = new Plane(new Position(114.330782, 30.46949, 0), {
  width: 100,
  height: 100,
  direction: { x: 0, y: 0, z: 1 },
  material: Color.fromCssColorString("#0000ff"),
});
plane.addToLayer(layer);

// 添加一个 point 点
const point = new Point(new Position(114.335782, 30.46949, 0), {
  color: Color.fromCssColorString("#ff0000"),
});
point.addToLayer(layer);

// 添加一个 polygon 多边形
const polygon = new Polygon(
  [
    new Position(114.315782, 30.46449, 0),
    new Position(114.317782, 30.46449, 0),
    new Position(114.317782, 30.46249, 0),
    new Position(114.315782, 30.46249, 0),
    new Position(114.313782, 30.46349, 0),
  ],
  {
    material: Color.PURPLE,
  },
);
polygon.addToLayer(layer);

// 添加一个 polyline 折线
const polyline = new Polyline(
  [
    new Position(114.320782, 30.46449, 0),
    new Position(114.322782, 30.46289, 0),
    new Position(114.320782, 30.46149, 0),
    new Position(114.321782, 30.46049, 0),
  ],
  {
    material: Color.RED,
  },
);
polyline.addToLayer(layer);

// 添加一个 polylineVolume 折线体
function computeCircle(radius: number) {
  const positions = [];
  for (let i = 0; i < 360; i++) {
    const radians = Cesium.Math.toRadians(i);
    positions.push({
      x: radius * Math.cos(radians),
      y: radius * Math.sin(radians),
    });
  }
  return positions;
}
const polylineVolume = new PolylineVolume(
  [
    new Position(114.325782, 30.46449, 0),
    new Position(114.327782, 30.46249, 0),
    new Position(114.324782, 30.46149, 0),
  ],
  {
    material: Color.GREEN,
    shape: computeCircle(3),
  },
);
polylineVolume.addToLayer(layer);

// 添加一个 rectangle 矩形
const rectangle = new Rectangle(
  [
    new Position(114.330782, 30.46449, 0),
    new Position(114.332782, 30.46249, 0),
  ],
  {
    material: Color.BLUE,
  },
);
rectangle.addToLayer(layer);

// 添加一个 wall 墙
const wall = new Wall(
  [
    new Position(114.335782, 30.46449, 0),
    new Position(114.337782, 30.46249, 0),
  ],
  {
    color: Color.PURPLE,
  },
);
wall.addToLayer(layer);