@wayz/react-gl/lib/amapgl/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, useEffect, memo, } from 'react';
import { DeckGL } from '@deck.gl/react';
import { AMap as StaticMap } from '@wayz/react-amap-gl';
import '@amap/amap-jsapi-types';
import { MapGLContext } from '../context/MapGLContext';
import { diffSetLayer, isFunction, quickSortLayerByZIndex } from '../utils';
var INITIAL_VIEW_STATE = {
    longitude: 116.405285,
    latitude: 39.904989,
    zoom: 3,
};
var wrapperStyle = {
    zIndex: -1,
    position: 'absolute',
};
var childrenWrapperStyle = {
    // position: 'absolute',
    zIndex: 1000,
};
var deckToolTipWrapperStyle = {
    zIndex: 1,
    position: 'absolute',
    pointerEvents: 'none',
    top: 0,
    left: 0,
};
var AMapGL = function (_a) {
    var children = _a.children, MAP_ACCESS_TOKEN = _a.MAP_ACCESS_TOKEN, _b = _a.mapStyle, mapStyle = _b === void 0 ? 'light' : _b, glOptions = _a.glOptions, mapOptions = _a.mapOptions, _c = _a.initialViewState, initialViewState = _c === void 0 ? INITIAL_VIEW_STATE : _c, onViewStateChange = _a.onViewStateChange, onWebGLInitialized = _a.onWebGLInitialized, debug = _a.debug, scaleControl = _a.scaleControl, maxBounds = _a.maxBounds, rest = __rest(_a, ["children", "MAP_ACCESS_TOKEN", "mapStyle", "glOptions", "mapOptions", "initialViewState", "onViewStateChange", "onWebGLInitialized", "debug", "scaleControl", "maxBounds"]);
    var _d = useState(), glContext = _d[0], setGLContext = _d[1];
    var _e = useState([]), layers = _e[0], _setLayers = _e[1];
    var _f = useState(function () {
        if (initialViewState.altitude === 0) {
            throw new Error('initialViewState.altitude 不能设置为0');
        }
        return initialViewState;
    }), viewState = _f[0], _setViewState = _f[1];
    var _g = useState(), map = _g[0], setMap = _g[1];
    var _h = useState(), hoverInfo = _h[0], _setHoverInfo = _h[1];
    var deckRef = 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]);
        });
    }, []);
    // 设置高德地图状态
    var setterMap = useMemo(function () { return ({
        zoom: function (zoom) {
            map === null || map === void 0 ? void 0 : map.setZoom(zoom + 1);
        },
        zooms: function (minZoom, maxZoom) {
            map === null || map === void 0 ? void 0 : map.setZooms([minZoom, maxZoom]);
        },
        rotation: function (bearing) {
            map === null || map === void 0 ? void 0 : map.setRotation((360 - bearing) % 360);
        },
        center: function (center) {
            map === null || map === void 0 ? void 0 : map.setCenter(center);
        },
        pitch: function (pitch) {
            map === null || map === void 0 ? void 0 : map.setPitch(pitch);
        },
    }); }, [map]);
    // 同步高德viewState
    var setAMapViewState = useCallback(function (viewState) {
        var _a = viewState.pitch, pitch = _a === void 0 ? 0 : _a, _b = viewState.longitude, longitude = _b === void 0 ? 116.397428 : _b, _c = viewState.latitude, latitude = _c === void 0 ? 39.90923 : _c, _d = viewState.zoom, zoom = _d === void 0 ? 3 : _d, _e = viewState.maxZoom, maxZoom = _e === void 0 ? 22 : _e, _f = viewState.minZoom, minZoom = _f === void 0 ? 0 : _f, _g = viewState.bearing, bearing = _g === void 0 ? 0 : _g;
        var center = [longitude, latitude];
        setterMap.center(center);
        setterMap.zoom(zoom);
        setterMap.rotation(bearing);
        setterMap.zooms(minZoom, maxZoom);
        setterMap.pitch(pitch);
    }, [setterMap]);
    // 获取viewState
    var getViewState = useCallback(function () { return viewStateRef.current; }, []);
    // 设置viewState
    var setViewState = useCallback(function (viewState) {
        // debugger
        _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;
            // viewState改变时, 同步修改地图view
            setAMapViewState(_viewState);
            onViewStateChange === null || onViewStateChange === void 0 ? void 0 : onViewStateChange(_viewState);
            return _viewState;
        });
    }, [onViewStateChange, setAMapViewState, maxBounds]);
    // 设置hoverInfo
    var setHoverInfo = useCallback(function (info) {
        _setHoverInfo(info);
    }, []);
    // viewState changes
    var handleViewStateChange = useCallback(function (_a) {
        var viewState = _a.viewState;
        setViewState(viewState);
    }, [setViewState]);
    // get amap instance
    var onMapLoad = useCallback(function (ins) { return setMap(ins); }, []);
    var handleWebGLInitialized = useCallback(function (gl) {
        setGLContext(gl);
        onWebGLInitialized === null || onWebGLInitialized === void 0 ? void 0 : onWebGLInitialized(gl);
    }, [setGLContext, onWebGLInitialized]);
    // amap plugins
    var plugins = useMemo(function () {
        var plugins = [];
        if (scaleControl === null || scaleControl === void 0 ? void 0 : scaleControl.show) {
            plugins.push('AMap.Scale');
        }
        return plugins;
    }, [scaleControl]);
    // glOptions
    var glOpts = useMemo(function () {
        return glOptions
            ? __assign(__assign({}, glOptions), { stencil: true }) : { stencil: true, preserveDrawingBuffer: true };
    }, [glOptions]);
    // mapOptions
    var mapOpts = useMemo(function () {
        return mapOptions
            ? __assign(__assign({}, mapOptions), { 
                /* close animate  */ animateEnable: false, viewMode: '3D', jogEnable: false }) : { animateEnable: false, viewMode: '3D', jogEnable: false };
    }, [mapOptions]);
    var MapGLContextValue = useMemo(function () {
        return {
            _addLayer: _addLayer,
            _removeLayer: _removeLayer,
            getViewState: getViewState,
            setViewState: setViewState,
            setHoverInfo: setHoverInfo,
            deck: deckRef.current,
            map: map,
        };
    }, [_addLayer, _removeLayer, getViewState, setViewState, setHoverInfo, deckRef.current, map]);
    useEffect(function () {
        if (!map)
            return;
        if ((scaleControl === null || scaleControl === void 0 ? void 0 : scaleControl.show) && window.AMap.Scale) {
            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            map.addControl(new window.AMap.Scale());
        }
    }, [scaleControl, map]);
    useEffect(function () {
        // 初始化同步一次地图状态
        setAMapViewState(viewState);
    }, [map, setAMapViewState]);
    return (_jsxs(_Fragment, { children: [_jsxs(DeckGL, __assign({}, rest, { layers: layers, ref: deckRef, 
                // initialViewState={initialViewState}
                viewState: viewState, controller: true, 
                //   ContextProvider={MapContext.Provider}
                onWebGLInitialized: handleWebGLInitialized, onViewStateChange: handleViewStateChange, glOptions: glOpts }, { children: [glContext && (_jsx(StaticMap, { style: wrapperStyle, onLoad: onMapLoad, MAP_ACCESS_TOKEN: MAP_ACCESS_TOKEN, mapOption: mapOpts, mapStyle: mapStyle, plugins: plugins })), 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(AMapGL);