安装

选座SDK已经放到私有仓库中@cyy/venue_box，可以通过npm导入，需要在项目中配置私有仓库http://registry.npm.juqitech.com/ npm i @cyy/venue_box --save

入门

1. 新建index.html，在index.html中指定一个venuebox容器

2. 新建index.js，并且初始化venuebox，并需要指定字体文件路径 const venuebox = new VenueBox('venuebox', { glyphs: ${window.location.origin}/example/assets/siyuanfonts/{fontstack}/{range}.pbf, });

3. 添加场馆组件component，可以使用内置的component，包括场馆边界，看台，舞台，座位等 // 添加场馆组件 // 这里使用内置的组件 venuebox.addDefaultComponents();

4. 设置场馆数据和座位数据源，这里的venueData和seatData是一种geojson格式的数据集合，详细参考 // 设置场馆的geojson数据，包括看台，边框等信息 venuebox.setVenueFeatures(venueData);

// 设置座位的数据源，这里可以异步调用接口懒加载座位 venuebox.setSeatDataSource(async (zoneCodes) => { return seatData; });

5. 调用onLoaded开始加载场馆图，可以添加一些回调事件 // 加载场馆图 venuebox.onLoaded(() => { console.info('map loaded'); }); // 监听选中座位的回调 venuebox.onClickSeat((feature) => { console.log(click seat:${JSON.stringify(feature)}); });

6. 运行index.html就可以看到场馆图了，详细可以参考examples/下的demo

概念

venuebox是基于 mapbox 的封装，提供了场馆选座的能力，核心类图如下 暂时无法在文档外展示此内容

MapBox

1. Map是最核心的地图类，负责图层渲染、手势交互、管理图层，。图层是地图上的基本单元，比如一条线，一个多边形等，Map负责管理所有的图层。
2. Layer定义了图层的绘制规则，比如一条线的颜色，粗细等
3. Source定义了图层的数据，比如一条线的起点和终点，Source中的数据是geojson格式的，具体可以参考 geojson

VenueBox

1. VenueBox是最核心的场馆图类，对应mapbox的Map类。负责场馆组件VenueComponent的渲染和管理、根据加载策略Strategy加载座位
2. VenueComponent是构成场馆图的基本组件，比如看台，舞台，座位等。组件内需要在draw方法中实现自身绘制，可以通过添加一个或多个图层来实现绘制。也支持通过实现respondToClickFeatures来决定是否要响应点击事件。
3. 加载策略定义了如何加载座位、座位显示的缩放层级，以及对点击等事件的拦截。目前内置了分区加载InZoneStrategy，按区加载ByZoneStrategy，全量加载HallStrategy

GeoJSON属性格式

geojson的属性properties字段需要符合选座格式定义

1. 看台properties格式，可以使用封装的useZoneProperty方法 feature.properties = useZoneProperty({ id: zoneId, // 看台id code: zoneCode, // 看台code text, // 看台的描述文案 color, // 看台颜色 saleStatus, // 销售状态，在售，缺票等 enable, // 是否可售 // 也可以添加业务属性 foo, bar, });

2. 座位properties格式，可以使用封装的useZoneProperty方法 feature.properties = useSeatProperty({ id, // 座位id seatPlanId, // 票面id zoneId, // 看台id color, // 座位颜色 enable, // 是否可售 opacity: 0.75, // 座位透明度，用于高亮 strokeOpacity: 1, // 座位边框透明度，用于高亮 // 也可以添加业务属性 bar, foor, });

3. 看台properties格式 feature.properties = { id, // 看台id text, // 看台的文案 }

进阶

自定义场馆组件

如果默认的场馆组件不符合需求，也可以使用自定义的场馆组件

1. 自定义组件需要继承自场馆组件，且实现draw方法来自定义图层 /**

• 基础场馆组件，所有自定义的组件都应继承自基础场馆组件，且实现draw方法 */ export class VenueComponent { sourceName: SourceEnum | string; onClicked: (feature: MapboxGeoJSONFeature) => void;

constructor(sourceName: SourceEnum | string) { this.sourceName = sourceName; } /**

• 响应点击事件，可以实现这个方法来响应点击事件
• @param features 点击区域内的features，可以从中查找是否有需要响应点击的feature
• @returns 当前组件响应点击的feature */ respondToClickFeatures(features: MapboxGeoJSONFeature[]): MapboxGeoJSONFeature { return null; }

/**

• 绘制方法，自定义组件可以在这里实现自己的layer绘制
• @param context 绘制的上下文，包括当前的venuebox和当前加载策略等 */ draw(context: VenueBoxContext) {} }

2. 在初始化venuebox后，添加自定义的组件 venuebox.addComponent(new CustomComponent('sourceName'));

自定义加载策略

1. 自定义加载策略需要实现Strategy接口，可以直接继承自BaseStrategy interface Strategy {

filterVenueFeatures(features: Feature<Geometries, Properties>[]): Feature<Geometries, Properties>[];

filterSeatFeatures(features: Feature<Geometries, Properties>[]): Feature<Geometries, Properties>[];

/**

• 获取当前的最小缩放比例，不同的加载策略可以重写这个方法，并不一定等于minZoom
• @returns 当前最小缩放比例 */ getMinZoom(): number;

/**

• 获取当前的最大缩放比例，不同的加载策略可以重写这个方法，并不一定等于maxZoom
• @returns 当前最大缩放比例 */ getMaxZoom(): number;

/**

• 获取图层可展示的缩放比例，当mapbox缩放比例不在这个范围内则不显示
• @param layerId 图层id
• @returns 可展示缩放比例，[min, max)，注意max是一个开区间，如果要在放大到最大也显示，记得max加上0.1 */ zoomRangeForLayer(layerId?: LayerIDEnum | string): [number, number];

loadSeats(venueBox: VenueBox, callback?:(seats: Feature[]) => void): void;

reset(venueBox: VenueBox): void;

beforeClick(venueBox: VenueBox, ev: MapEventType & EventData, clickedFeatures?: MapboxGeoJSONFeature[]): boolean;

afterClick(venueBox: VenueBox, ev: MapEventType & EventData, clickedFeatures?: MapboxGeoJSONFeature[]);

onMoveEnd(venueBox: VenueBox, ev: MapEventType & EventData);

onZoomEnd(venueBox: VenueBox, ev: MapEventType & EventData);

}

2. 在场馆图初始化时传入自定义的加载策略 const venuebox = new VenueBox('mapBox', { glyphs: ${window.location.origin}/example/assets/siyuanfonts/{fontstack}/{range}.pbf, thumbnailContainer: 'thumbnail', strategy: new CustomStrategy(), });