mapboxgl-syncto-any

mapboxgl-syncto-any is an open-source map view synchronization tool based on Mapbox GL JS. It provides synchronization capabilities with any other map views. By default, it offers full-view synchronization between Mapbox GL JS and CesiumJS.

DOCUMENTTATION

$3

- mpboxViewer: mapbox-gl instance
- cesiumViewer: Cesium.Viewer instance
- options: Be identical to options of the mapViewSync method

$3

- mapboxContext: { map, Handler }, map represents the mapbox-gl map instance, and Handler is the type that implements both IEventHandler and EventHandlerConstructor interfaces.
- anyContext: { map, Handler } map represents the other map instance
- options:
- initFrom: The initial source for synchronization, 0:mapbox，1: others
- direction: The direction of view synchronization
- 0 for bidirectional synchronization
- 1 for Mapbox -> other
- 2 for other -> Mapbox.
- mapboxAllowPitch: true|false, Indicates whether pitch updating is supported by the Mapbox map.
- anyAllowPitch: true|false, Indicates whether pitch updating is supported by the other map.

Example

Example code can be found in the examples directory. To run the example, execute the following commands:
``


cd examples
npm install
npm run dev

$3


const mapboxMap = await mapboxSetup({ container: mboxMapEle.value });
const anyMap = await anyMapSetup({ container: anyMapEle.value });
const synchronizer = mapboxViewSyncWithCesium(mapboxMap, anyMap, { initFrom: 'mapbox', direction: 0 })

// synchronizer.setDirection(SyncDirection.Both); Change the synchronization direction dynamically. By default, it's bidirectional. Enum SyncDirection includes: Both, MapToAny, AnyToMapbox. // synchronizer.destroy(); Destroy the synchronizer`

`$3`


const mapboxMap = await mapboxSetup({ container: mboxMapEle.value });
const anyMap = await anyMapSetup({ container: anyMapEle.value });

const synchronizer = mapViewSync({ map: mapboxMap, Handler: MapboxEventHander, }, { map: anyMap, Handler: CesiumEventHandler }, { initFrom: 'mapbox', direction: SyncDirection.MapToAny })`

`Code`


IEventHandler:


export interface IEventHandler {
    moveStart: (e?: any) => void;
    moveEnd: (e?: any) => void;
    updateView(e: ViewUpdateEvent): void;   
    destroy(): void;
}


EventHandlerConstructor:


export interface EventHandlerConstructor {
    new (params: EventHandlerParams): IEventHandler;
};


To achieve synchronization between other maps and mapbox-gl, all you need to do is implement the IEventHandler interface, similar to creating a synchronization handler for Cesium. Here's a conceptual example of how you might approach this:


export class CesiumEventHandler implements IEventHandler {
    private viewer: Viewer;
    private onTrigger: (e: TriggerEvent) => void;
    private onUpdateView: (e: ViewUpdateEvent) => void;
    private getFrom: () => EventFrom;
    constructor(params: EventHandlerParams) {
        this.viewer = params.map;
        this.viewer.scene.screenSpaceCameraController.tiltEventTypes = [CameraEventType.RIGHT_DRAG];
	    this.viewer.scene.screenSpaceCameraController.zoomEventTypes = [CameraEventType.WHEEL];
        this.onTrigger = params.onTrigger;
        this.getFrom = params.getFrom;
        this.onUpdateView = params.onUpdateView;
        this.viewer.canvas.addEventListener('mousemove', (this.moveEnd = this.moveEnd.bind(this)));
        const handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas);
        this.moveStart = this.moveStart.bind(this);
        handler.setInputAction(this.moveStart, ScreenSpaceEventType.LEFT_DOWN);
        handler.setInputAction(this.moveStart, ScreenSpaceEventType.MIDDLE_DOWN);
        // this.viewer.scene.camera.moveEnd.addEventListener((this.moveEnd = this.moveEnd.bind(this)));
    }
    updateView(e: ViewUpdateEvent): void {
        const { bearing, center, pitch, elevation  } = e;
        if (!center || !_.isNumber(bearing) || !_.isNumber(pitch)) {
            return;
        }
        const heading = CMath.toRadians(bearing);
		const lookTarget = Cartesian3.fromDegrees(...center);
		const cameraPitch = CMath.toRadians(pitch - 90 + 0.01); 
		const range = elevation / Math.sin(((90 - pitch) * Math.PI) / 180);
		
		
        this.viewer.camera.lookAt(
			lookTarget,
			new HeadingPitchRange(heading, cameraPitch, range  Math.sin(((90 - pitch)  Math.PI) / 180))
		);
    }
    destroy(): void {
    }
    moveStart(e: any) {
        this.onTrigger({ eventFrom: EventFrom.Other });
		this.viewer.camera.lookAtTransform(Matrix4.IDENTITY);
    }
    moveEnd(e: any) {
        if (this.getFrom() !== EventFrom.Other) {
            return;
        }
        // const { z } = this.viewer.camera.position;
        const bearing = (this.viewer.camera.heading / Math.PI) * 180;
        const pitch = (this.viewer.camera.pitch / Math.PI) * 180 + 90;
        // const center = getCenter(this.viewer);
        const center = new Cartesian2(this.viewer.container.clientWidth / 2, this.viewer.container.clientHeight / 2);
        let z: number = 0;
        const centerWC = this.viewer.scene.camera.pickEllipsoid(center);
        if(defined(centerWC)) {
            z = Cartesian3.distance(centerWC, this.viewer.scene.camera.positionWC);
        }
        const mapCenter = getCenter(this.viewer);

this.onUpdateView({ eventFrom: this.getFrom(), center: mapCenter, elevation: z, bearing, pitch }); } }``