@wayz/react-gl/lib/gl/index.js

React Component for DeckGL, Base on AMap, Mapbox GL

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useRef, useCallback, useMemo, memo, } from 'react';
import { DeckGL } from '@deck.gl/react';
import { Map as StaticMap, ScaleControl } from 'react-map-gl';
import { MapGLContext } from '../context/MapGLContext';
import { diffSetLayer, quickSortLayerByZIndex, isFunction } from '../utils';
import useUpdate from '../hooks/useUpdate';
var MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoiZHJhZ29ueXVud2FuZyIsImEiOiJjanYwczlla20xMmpnNGVvNGppZG9vN2F6In0.VegKSG-PHekTitp0uMGUsA';
var INITIAL_VIEW_STATE = {
    longitude: 116.405285,
    latitude: 39.904989,
    zoom: 3,
    bearing: 0,
    pitch: 0,
};
var childrenWrapperStyle = {
    // position: 'absolute',
    zIndex: 1000,
};
var deckToolTipWrapperStyle = {
    zIndex: 1,
    position: 'absolute',
    pointerEvents: 'none',
    top: 0,
    left: 0,
};
export var MapGL = function (_a) {
    var children = _a.children, _b = _a.MAP_ACCESS_TOKEN, MAP_ACCESS_TOKEN = _b === void 0 ? MAPBOX_ACCESS_TOKEN : _b, _c = _a.mapStyle, mapStyle = _c === void 0 ? 'light' : _c, _d = _a.glOptions, glOptions = _d === void 0 ? {} : _d, scaleControl = _a.scaleControl, _e = _a.initialViewState, initialViewState = _e === void 0 ? INITIAL_VIEW_STATE : _e, onViewStateChange = _a.onViewStateChange, onWebGLInitialized = _a.onWebGLInitialized, debug = _a.debug, maxBounds = _a.maxBounds, rest = __rest(_a, ["children", "MAP_ACCESS_TOKEN", "mapStyle", "glOptions", "scaleControl", "initialViewState", "onViewStateChange", "onWebGLInitialized", "debug", "maxBounds"]);
    var _f = useState(), glContext = _f[0], setGLContext = _f[1];
    var _g = useState([]), layers = _g[0], _setLayers = _g[1];
    var _h = useState(function () {
        if (initialViewState.altitude === 0) {
            throw new Error('initialViewState.altitude 不能设置为0');
        }
        return initialViewState;
    }), viewState = _h[0], _setViewState = _h[1];
    var _j = useState(), hoverInfo = _j[0], _setHoverInfo = _j[1];
    var update = useUpdate();
    var deckRef = useRef(null);
    var mapRef = useRef(null);
    var viewStateRef = useRef(initialViewState);
    // 控制台输入, layers的状态
    debug && console.info("layers: ", layers);
    // 添加图层
    var _addLayer = useCallback(function (layer) {
        // 合并数组， 并按照zIndex排序
        _setLayers(function (layers) {
            return quickSortLayerByZIndex(__spreadArray(__spreadArray([], layers, true), (Array.isArray(layer) ? layer : [layer]), true));
        });
    }, []);
    // 移除图层
    var _removeLayer = useCallback(function (layer) {
        // 求差集
        _setLayers(function (layers) {
            return diffSetLayer(layers, Array.isArray(layer) ? layer : [layer]);
        });
    }, []);
    // 获取viewState
    var getViewState = useCallback(function () { return viewStateRef.current; }, []);
    // 设置viewState
    var setViewState = useCallback(function (viewState) {
        _setViewState(function (vs) {
            var _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;
            onViewStateChange === null || onViewStateChange === void 0 ? void 0 : onViewStateChange(_viewState);
            return _viewState;
        });
    }, [onViewStateChange, maxBounds]);
    // 设置hoverInfo
    var setHoverInfo = useCallback(function (info) {
        _setHoverInfo(info);
    }, []);
    // viewState changes
    var handleViewStateChange = useCallback(function (_a) {
        var viewState = _a.viewState;
        setViewState(viewState);
    }, [setViewState]);
    // get mapbox instance
    var onMapLoad = useCallback(function () { return update(); }, []);
    var handleWebGLInitialized = useCallback(function (gl) {
        setGLContext(gl);
        onWebGLInitialized === null || onWebGLInitialized === void 0 ? void 0 : onWebGLInitialized(gl);
    }, [setGLContext, onWebGLInitialized]);
    // glOptions
    var glOpts = useMemo(function () {
        return glOptions
            ? __assign(__assign({}, glOptions), { stencil: true }) : { stencil: true, preserveDrawingBuffer: false };
    }, [glOptions]);
    // scaleControl
    var _scaleControl = useMemo(function () {
        var _sControl = {
            style: {
                left: 20,
                bottom: 10,
            },
            unit: 'metric',
            maxWidth: 100,
        };
        return Object.assign(_sControl, scaleControl ? scaleControl : {});
    }, [scaleControl]);
    // map style
    var mapSty = useMemo(function () {
        return mapStyle
            ? typeof mapStyle === 'string'
                ? require("../mapStyle/".concat(mapStyle, ".json"))
                : mapStyle
            : 'blue';
    }, [mapStyle]);
    var MapGLContextValue = useMemo(function () {
        return {
            _addLayer: _addLayer,
            _removeLayer: _removeLayer,
            getViewState: getViewState,
            setViewState: setViewState,
            setHoverInfo: setHoverInfo,
            deck: deckRef.current,
            map: mapRef.current,
        };
    }, [
        _addLayer,
        _removeLayer,
        getViewState,
        setViewState,
        setHoverInfo,
        deckRef.current,
        mapRef.current,
    ]);
    return (_jsxs(_Fragment, { children: [_jsxs(DeckGL, __assign({}, rest, { layers: layers, ref: deckRef, viewState: viewState, controller: true, onWebGLInitialized: handleWebGLInitialized, onViewStateChange: handleViewStateChange, glOptions: glOpts }, { children: [glContext && (_jsx(StaticMap, __assign({ ref: mapRef, reuseMaps: true, onLoad: onMapLoad, mapboxAccessToken: MAP_ACCESS_TOKEN, mapStyle: mapSty, preserveDrawingBuffer: glOpts.preserveDrawingBuffer }, { children: (scaleControl === null || scaleControl === void 0 ? void 0 : scaleControl.show) ? _jsx(ScaleControl, __assign({}, _scaleControl)) : null }))), hoverInfo && hoverInfo.object && (_jsx("div", __assign({ style: __assign(__assign({}, deckToolTipWrapperStyle), { left: hoverInfo.x, top: hoverInfo.y }) }, { children: hoverInfo.html })))] })), _jsx(MapGLContext.Provider, __assign({ value: MapGLContextValue }, { children: _jsx("div", __assign({ className: "children-wrapper", style: childrenWrapperStyle }, { children: children })) }))] }));
};
export default memo(MapGL);