feat: mapbox添加fitBoundsOptions

This commit is contained in:
聆一 2020-03-27 10:36:03 +08:00
parent 5a5aa49fa1
commit b7f0689fd5
9 changed files with 29 additions and 17 deletions

View File

@ -155,7 +155,7 @@ export interface ILayer {
destroy(): void;
source(data: any, option?: ISourceCFG): ILayer;
setData(data: any, option?: ISourceCFG): ILayer;
fitBounds(): ILayer;
fitBounds(fitBoundsOptions?: mapboxgl.FitBoundsOptions): ILayer;
/**
*
* @param plugin
@ -222,6 +222,7 @@ export interface ILayerConfig {
visible: boolean;
zIndex: number;
autoFit: boolean;
fitBoundsOptions?: mapboxgl.FitBoundsOptions;
name: string; //
blend: keyof typeof BlendType;
pickedFeatureID: number;

View File

@ -50,7 +50,7 @@ export interface IMapService<RawMap = {}> {
zoomOut(): void;
panTo(p: Point): void;
panBy(pixel: Point): void;
fitBounds(bound: Bounds): void;
fitBounds(bound: Bounds, fitBoundsOptions?: mapboxgl.FitBoundsOptions): void;
setZoomAndCenter(zoom: number, center: Point): void;
setCenter(center: [number, number]): void;
setPitch(pitch: number): void;

View File

@ -654,7 +654,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
/**
* zoom to layer Bounds
*/
public fitBounds(): ILayer {
public fitBounds(fitBoundsOptions?: mapboxgl.FitBoundsOptions): ILayer {
if (!this.inited) {
this.updateLayerConfig({
autoFit: true,
@ -663,10 +663,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
const source = this.getSource();
const extent = source.extent;
this.mapService.fitBounds([
[extent[0], extent[1]],
[extent[2], extent[3]],
]);
this.mapService.fitBounds(
[
[extent[0], extent[1]],
[extent[2], extent[3]],
],
fitBoundsOptions,
);
return this;
}
@ -876,9 +879,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
private sourceEvent = () => {
this.dataState.dataSourceNeedUpdate = true;
const { autoFit } = this.getLayerConfig();
const { autoFit, fitBoundsOptions } = this.getLayerConfig();
if (autoFit) {
this.fitBounds();
this.fitBounds(fitBoundsOptions);
}
this.emit('dataUpdate');

View File

@ -11,10 +11,10 @@ export default class LayerStylePlugin implements ILayerPlugin {
layer.hooks.afterInit.tap('LayerStylePlugin', () => {
// 更新图层默认状态
layer.updateLayerConfig({});
const { autoFit } = layer.getLayerConfig();
const { autoFit, fitBoundsOptions } = layer.getLayerConfig();
if (autoFit) {
setTimeout(() => {
layer.fitBounds();
layer.fitBounds(fitBoundsOptions);
}, 100);
}
});

View File

@ -157,8 +157,11 @@ export default class MapboxService
this.panTo(pixel);
}
public fitBounds(bound: Bounds): void {
this.map.fitBounds(bound);
public fitBounds(
bound: Bounds,
fitBoundsOptions?: mapboxgl.FitBoundsOptions,
): void {
this.map.fitBounds(bound, fitBoundsOptions);
}
public setMaxZoom(max: number): void {

View File

@ -18,7 +18,7 @@ export default React.memo(function Chart(props: ISourceProps) {
layer.setData(data, sourceOption);
}
if (sourceOption.autoFit) {
layer.fitBounds();
layer.fitBounds(sourceOption && sourceOption.fitBoundsOptions);
}
}, [data, JSON.stringify(sourceOption)]);
return null;

View File

@ -60,6 +60,8 @@ export interface ISourceOptions extends ISourceCFG {
data: any;
// 每次更新数据之后是否自适应缩放
autoFit?: boolean;
// Mapbox 自适应的参数
fitBoundsOptions?: any;
}
export interface IActiveOptions {

View File

@ -49,7 +49,7 @@ export default interface IMapController {
/**
*
*/
fitBounds(bound: Bounds): void;
fitBounds(bound: Bounds, fitBoundsOptions?: mapboxgl.FitBoundsOptions): void;
setRotation(rotation: number): void;

View File

@ -270,8 +270,11 @@ class Scene
public setZoom(zoom: number): void {
this.mapService.setZoom(zoom);
}
public fitBounds(bound: Bounds): void {
this.mapService.fitBounds(bound);
public fitBounds(
bound: Bounds,
fitBoundsOptions?: mapboxgl.FitBoundsOptions,
): void {
this.mapService.fitBounds(bound, fitBoundsOptions);
}
public setZoomAndCenter(zoom: number, center: Point): void {