venue_box v0.3.13
安装
选座SDK已经放到私有仓库中@cyy/venue_box，可以通过npm导入，需要在项目中配置私有仓库http://registry.npm.juqitech.com/ npm i @cyy/venue_box --save
入门
新建index.html，在index.html中指定一个venuebox容器
新建index.js，并且初始化venuebox，并需要指定字体文件路径 const venuebox = new VenueBox('venuebox', { glyphs:
${window.location.origin}/example/assets/siyuanfonts/{fontstack}/{range}.pbf, });添加场馆组件component，可以使用内置的component，包括场馆边界，看台，舞台，座位等 // 添加场馆组件 // 这里使用内置的组件 venuebox.addDefaultComponents();
设置场馆数据和座位数据源，这里的venueData和seatData是一种geojson格式的数据集合，详细参考 // 设置场馆的geojson数据，包括看台，边框等信息 venuebox.setVenueFeatures(venueData);
// 设置座位的数据源，这里可以异步调用接口懒加载座位 venuebox.setSeatDataSource(async (zoneCodes) => { return seatData; });
调用onLoaded开始加载场馆图，可以添加一些回调事件 // 加载场馆图 venuebox.onLoaded(() => { console.info('map loaded'); }); // 监听选中座位的回调 venuebox.onClickSeat((feature) => { console.log(
click seat:${JSON.stringify(feature)}); });运行index.html就可以看到场馆图了，详细可以参考examples/下的demo
概念
venuebox是基于 mapbox 的封装，提供了场馆选座的能力，核心类图如下 暂时无法在文档外展示此内容
MapBox
- Map是最核心的地图类，负责图层渲染、手势交互、管理图层，。图层是地图上的基本单元，比如一条线，一个多边形等，Map负责管理所有的图层。
- Layer定义了图层的绘制规则，比如一条线的颜色，粗细等
- Source定义了图层的数据，比如一条线的起点和终点，Source中的数据是geojson格式的，具体可以参考 geojson
VenueBox
- VenueBox是最核心的场馆图类，对应mapbox的Map类。负责场馆组件VenueComponent的渲染和管理、根据加载策略Strategy加载座位
- VenueComponent是构成场馆图的基本组件，比如看台，舞台，座位等。组件内需要在draw方法中实现自身绘制，可以通过添加一个或多个图层来实现绘制。也支持通过实现respondToClickFeatures来决定是否要响应点击事件。
- 加载策略定义了如何加载座位、座位显示的缩放层级，以及对点击等事件的拦截。目前内置了分区加载InZoneStrategy，按区加载ByZoneStrategy，全量加载HallStrategy
GeoJSON属性格式
geojson的属性properties字段需要符合选座格式定义 1. 看台properties格式，可以使用封装的useZoneProperty方法 feature.properties = useZoneProperty({ id: zoneId, // 看台id code: zoneCode, // 看台code text, // 看台的描述文案 color, // 看台颜色 saleStatus, // 销售状态，在售，缺票等 enable, // 是否可售 // 也可以添加业务属性 foo, bar, });
座位properties格式，可以使用封装的useZoneProperty方法 feature.properties = useSeatProperty({ id, // 座位id seatPlanId, // 票面id zoneId, // 看台id color, // 座位颜色 enable, // 是否可售 opacity: 0.75, // 座位透明度，用于高亮 strokeOpacity: 1, // 座位边框透明度，用于高亮 // 也可以添加业务属性 bar, foor, });
看台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) {} }
- 在初始化venuebox后，添加自定义的组件 venuebox.addComponent(new CustomComponent('sourceName'));
自定义加载策略
自定义加载策略需要实现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);
}
- 在场馆图初始化时传入自定义的加载策略
const venuebox = new VenueBox('mapBox', {
glyphs:
${window.location.origin}/example/assets/siyuanfonts/{fontstack}/{range}.pbf, thumbnailContainer: 'thumbnail', strategy: new CustomStrategy(), });