@wayz/react-gl
Version:
React Component for DeckGL, Base on AMap, Mapbox GL
164 lines (163 loc) • 7.79 kB
JavaScript
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 } 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';
var AMAP_ACCESS_TOKEN = '9bdc414a469c99e7e85b78f341a535c1';
var INITIAL_VIEW_STATE = {
longitude: 116.405285,
latitude: 39.904989,
zoom: 3,
};
var wrapperStyle = {
zIndex: -1,
position: 'absolute',
};
var childrenWrapperStyle = {
position: 'absolute',
zIndex: 1,
};
var deckToolTipWrapperStyle = {
zIndex: 1,
position: 'absolute',
pointerEvents: 'none',
top: 0,
left: 0,
};
var theme = {
dark: dark,
normal: {},
};
var BMapGL = function (_a) {
var children = _a.children, _b = _a.MAP_ACCESS_TOKEN, MAP_ACCESS_TOKEN = _b === void 0 ? AMAP_ACCESS_TOKEN : _b, _c = _a.mapStyle, mapStyle = _c === void 0 ? 'light' : _c, glOptions = _a.glOptions, mapOptions = _a.mapOptions, _d = _a.initialViewState, initialViewState = _d === void 0 ? INITIAL_VIEW_STATE : _d, onViewStateChange = _a.onViewStateChange, debug = _a.debug, scriptUrl = _a.scriptUrl, maxBounds = _a.maxBounds, rest = __rest(_a, ["children", "MAP_ACCESS_TOKEN", "mapStyle", "glOptions", "mapOptions", "initialViewState", "onViewStateChange", "debug", "scriptUrl", "maxBounds"]);
var _e = useState(), glContext = _e[0], setGLContext = _e[1];
var _f = useState([]), layers = _f[0], _setLayers = _f[1];
var _g = useState(function () {
if (initialViewState.altitude === 0) {
throw new Error('initialViewState.altitude 不能设置为0');
}
return initialViewState;
}), viewState = _g[0], _setViewState = _g[1];
var _h = useState(), map = _h[0], setMap = _h[1];
var _j = useState(), hoverInfo = _j[0], _setHoverInfo = _j[1];
var deckRef = useRef(null);
var viewStateRef = useRef(initialViewState);
// TODO https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom
// https://developer.baidu.com/map/custom/list.htm
var mstyle = useMemo(function () {
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);
// 添加图层
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;
// viewState改变是, 同步修改地图view
// setAMapViewState(_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 amap instance
var onMapLoad = useCallback(function (ins) { return setMap(ins); }, []);
// 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]);
return (_jsxs(_Fragment, { children: [_jsxs(DeckGL, __assign({}, 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", __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 BMapGL;