Skip to content

创建海量面

  • 支持独立事件绑定
typescript
const polygons = createPolygonCollection()
polygons.add(options)

可配置参数

typescript
type PolygonCollectionOptions = {
  add: {
    id?: string;
    positions: Positions[] | Positions | Hierarchy;
    show?: boolean;
    fillColor?: MapColor;
    /** 是否封闭上面 */
    closeTop?: boolean;
    /** 是否封闭下面  */
    closeBottom?: boolean;
    /** 开洞类型 */
    holes?: 'level' | 'deep';
    /** 相对于地面的高度 */
    height?: number;
    perPositionHeight?: boolean;
    /** 几何体本身的高度 */
    extrudedHeight?: number;
    shadows?: boolean;
    outline?: boolean;
    outlineColor?: MapColor;
    outlineWidth?: number;
    labelOffset?: [number, number];
    far?: number;
    near?: number;
    arcType?: 'GEODESIC' | 'RHUMB';
    property?: Record<string | symbol, any>;
  };
};

标签

typescript
const collection = createPolygonCollection()
const html = '<div style="color: orange; font-size:14px;">id: {{ id }} </div>'
collection.on('click', (ar, mark) => {
      if (mark === 'in') {
        collection.label.setHtml(viewer.template(html, { id: ar[1].id })) 
        collection.label.show = true
      } else collection.label.show = false
    })

image-20240618150233539

性能

如果同时要渲染大量的面,后期不需要修改样式的情况下,推荐在调用add方法时传递数组,可以提高渲染速度

配置