@wayz/react-gl/esm/bmapgl/index.js

React Component for DeckGL, Base on AMap, Mapbox GL

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useRef, useCallback, useMemo } from 'react';
import { DeckGL } from '@deck.gl/react';
import { BMap as StaticMap } from '@wayz/react-bmap';
import { MapGLContext } from '../context/MapGLContext';
import { diffSetLayer, isFunction, quickSortLayerByZIndex } from '../utils';
import dark from '../mapStyle/bmap_dark.json';
const AMAP_ACCESS_TOKEN = '9bdc414a469c99e7e85b78f341a535c1';
const INITIAL_VIEW_STATE = {
    longitude: 116.405285,
    latitude: 39.904989,
    zoom: 3,
};
const wrapperStyle = {
    zIndex: -1,
    position: 'absolute',
};
const childrenWrapperStyle = {
    position: 'absolute',
    zIndex: 1,
};
const deckToolTipWrapperStyle = {
    zIndex: 1,
    position: 'absolute',
    pointerEvents: 'none',
    top: 0,
    left: 0,
};
const theme = {
    dark: dark,
    normal: {},
};
const BMapGL = ({ children, MAP_ACCESS_TOKEN = AMAP_ACCESS_TOKEN, mapStyle = 'light', glOptions, mapOptions, initialViewState = INITIAL_VIEW_STATE, onViewStateChange, debug, scriptUrl, maxBounds, ...rest }) => {
    const [glContext, setGLContext] = useState();
    const [layers, _setLayers] = useState([]);
    const [viewState, _setViewState] = useState(() => {
        if (initialViewState.altitude === 0) {
            throw new Error('initialViewState.altitude 不能设置为0');
        }
        return initialViewState;
    });
    const [map, setMap] = useState();
    const [hoverInfo, _setHoverInfo] = useState();
    const deckRef = useRef(null);
    const viewStateRef = useRef(initialViewState);
    // TODO https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom
    // https://developer.baidu.com/map/custom/list.htm
    const mstyle = useMemo(() => {
        if (!mapStyle) {
            mapStyle = 'normal';
        }
        if (typeof mapStyle === 'string') {
            // @ts-ignore
            return { styleJson: theme[mapStyle] || theme.normal };
        }
        return mapStyle;
    }, [mapStyle]);
    // 控制台输入, layers的状态
    debug && console.info(`layers: `, layers);
    // 添加图层
    const _addLayer = useCallback((layer) => {
        // 合并数组， 并按照zIndex排序
        _setLayers((layers) => {
            return quickSortLayerByZIndex([...layers, ...(Array.isArray(layer) ? layer : [layer])]);
        });
    }, []);
    // 移除图层
    const _removeLayer = useCallback((layer) => {
        // 求差集
        _setLayers((layers) => {
            return diffSetLayer(layers, Array.isArray(layer) ? layer : [layer]);
        });
    }, []);
    // 获取viewState
    const getViewState = useCallback(() => viewStateRef.current, []);
    // 设置viewState
    const setViewState = useCallback((viewState) => {
        _setViewState((vs) => {
            const _viewState = Object.assign({}, vs, isFunction(viewState) ? viewState(vs) : viewState);
            // 设置 maxBounds
            if (maxBounds) {
                _viewState.longitude = Math.min(maxBounds[2], Math.max(maxBounds[0], _viewState.longitude));
                _viewState.latitude = Math.min(maxBounds[3], Math.max(maxBounds[1], _viewState.latitude));
            }
            viewStateRef.current = _viewState;
            // viewState改变是, 同步修改地图view
            // setAMapViewState(_viewState)
            onViewStateChange === null || onViewStateChange === void 0 ? void 0 : onViewStateChange(_viewState);
            return _viewState;
        });
    }, [onViewStateChange, maxBounds]);
    // 设置hoverInfo
    const setHoverInfo = useCallback((info) => {
        _setHoverInfo(info);
    }, []);
    // viewState changes
    const handleViewStateChange = useCallback(({ viewState }) => {
        setViewState(viewState);
    }, [setViewState]);
    // get amap instance
    const onMapLoad = useCallback((ins) => setMap(ins), []);
    // glOptions
    const glOpts = useMemo(() => {
        return glOptions
            ? { ...glOptions, /* To render vector tile polygons correctly */ stencil: true }
            : { stencil: true, preserveDrawingBuffer: true };
    }, [glOptions]);
    // mapOptions
    const mapOpts = useMemo(() => {
        return mapOptions
            ? {
                ...mapOptions,
                /* close animate  */ animateEnable: false,
                viewMode: '3D',
                jogEnable: false,
            }
            : { animateEnable: false, viewMode: '3D', jogEnable: false };
    }, [mapOptions]);
    const MapGLContextValue = useMemo(() => {
        return {
            _addLayer,
            _removeLayer,
            getViewState,
            setViewState,
            setHoverInfo,
            deck: deckRef.current,
            map,
        };
    }, [_addLayer, _removeLayer, getViewState, setViewState, setHoverInfo, deckRef.current, map]);
    return (_jsxs(_Fragment, { children: [_jsxs(DeckGL, { ...rest, layers: layers, ref: deckRef, 
                // initialViewState={initialViewState}
                viewState: viewState, controller: true, 
                //   ContextProvider={MapContext.Provider}
                onWebGLInitialized: setGLContext, onViewStateChange: handleViewStateChange, glOptions: glOpts, children: [glContext && (_jsx(StaticMap, { style: wrapperStyle, onLoad: onMapLoad, viewState: viewState, MAP_ACCESS_TOKEN: MAP_ACCESS_TOKEN, mapOption: mapOpts, mapStyle: mstyle, scriptUrl: scriptUrl })), hoverInfo && hoverInfo.object && (_jsx("div", { style: {
                            ...deckToolTipWrapperStyle,
                            left: hoverInfo.x,
                            top: hoverInfo.y,
                        }, children: hoverInfo.html }))] }), _jsx(MapGLContext.Provider, { value: MapGLContextValue, children: _jsx("div", { className: "children-wrapper", style: childrenWrapperStyle, children: children }) })] }));
};
export default BMapGL;