多边形区域(Polygon)

向三维场景视图中添加多边形区域，用户可以自定义区域填充颜色、高度、是否闭合顶部等属性。

方法

批量/单个添加多边形区域

• 向三维场景中批量添加多边形区域
• 方法名：add
• 参数说明：

// 方法
add(region: PolygonOptions | Array<PolygonOptions>): this {}
// PolygonOptions 参数说明
export type PolygonOptions = {
  id: string; // 唯一 id
  groupId: string; // 分组 id
  coordinates: Array<Array<number>>; // 区域坐标串，暂不支持带洞的多边形
  fillOpacity?: number; // 填充透明度 [0,1]
  fillColor?: string | Array<number>; // 填充颜色
  closeTop?: boolean; // 是否闭合顶部
  height?: number; // 多边形立体高度（单位米）
  sideTilling?:number;// 立面纹理分块
  sideSpeed?:number;// 立面纹理移动速度
  sideBrightness?:number;// 立面纹理亮度
  sideStyle?:string;// 立面纹理样式
};

export class SideStyle {
  /**
   * 实线
   */
  static SOLID= 'Solid'as const;
  /**
   * 虚线
   */
  static DASHED= 'Dashed'as const;
  /**
   * 箭头
   */
  static ARROW='Arrow'as const;
  /**
   * 渐变
   */
  static GRADIENT='Gradient'as const;
}

• 示例参考：

async function addPolygon(count = 1) {
  viewer.polygon.removeByIds(['jjrrr']);
  for (let i = 0; i < count; i++) {
    const polygon = {
      id: 'jjrrr',
      fillColor: 'green',
      // fillOpacity: 0.7,
      closeTop: true,
      height: 200,
      coordinates: [
        [117.287288, 34.982504, 0],
        [117.287288, 34.932504, 0],
        [117.282288, 34.932504, 0],
        [117.282288, 34.982504, 0]
      ],
      sideStyle: PolylineStyle.SOLID,
      sideSpeed: 0,
      sideBrightness: 0.5,
      sideTilling: 3
    };
    viewer.polygon.add(polygon);
  }
}

根据分组 id 完成多边形区域移除

• 根据分组 id 移除三维场景中已添加的多边形区域
• 方法名：removeByGroupIds
• 参数说明：

// 方法 groupIds 分组 id 数组
  removeByGroupIds(groupIds: Array<string>) {}

• 示例参考：

viewer.polygon.removeByGroupIds(['test-group']);

根据 id 完成多边形区域移除

• 根据 id 移除三维场景中已添加的多边形区域
• 方法名：removeByIds
• 参数说明：

// id 数组
removeByIds(ids: Array<string>) {}

• 示例参考：

viewer.polygon.removeByIds(['test-id']);

清空所有多边形区域

• 清空三维场景中已添加的所有多边形区域
• 方法名：clear
• 参数说明：

// 方法
clear() {}

• 示例参考：

viewer.polygon.clear();

显示/隐藏所有多边形区域

• 显示/隐藏三维场景中已添加的所有多边形区域
• 方法名：setVisible
• 参数说明：

// 方法
setVisible(visible: boolean): this {}

• 示例参考：

viewer.polygon.setVisible(false);

根据分组 id 显示/隐藏多边形区域

• 根据分组 id 显示/隐藏三维场景中已添加的多边形区域
• 方法名：setVisibleByGroupIds
• 参数说明：

// 方法
setVisibleByGroupIds(groupIds: Array<string>, visible: boolean): this {}

• 示例参考：

viewer.polygon.setVisibleByGroupIds(['test-group-0'], false);

根据 id 显示/隐藏多边形区域

• 根据 id 显示/隐藏三维场景中已添加的多边形区域
• 方法名：setVisibleByIds
• 参数说明：

// 方法
setVisibleByIds(ids: Array<string>, visible: boolean): this {}

• 示例参考：

viewer.polygon.setVisibleByIds(['test-id'], false);

多边形区域事件

• 目前支持响应三维场景中已添加的多边形区域的点击事件
• 方法名：on/off
• 参数说明：

// 开启多边形区域点击事件监听
on(type: RegionEventType, callback, context) {}

// 关闭多边形区域点击事件监听
off(type: RegionEventType, callback, context): boolean {}

// RegionEventType 参数说明
export class RegionEventType {
  static Click = 'click' as const;
}

• 示例参考：

viewer.polygon.on(RegionEventType.Click, (evt: any) => {
  console.log(evt);
});

• 回调的数据格式说明:

{
    eventName: 'OnPolygonClick',
    datas: {
      fillColor: [0, 0.501960813999176, 0, 1],
      fillOpacity: 0.699999988079071,
      id: 'jjrrr',
      groupId: '',
      closeTop: true,
      height: 40.0
    }
  }