import { jsx as _jsx } from 'react/jsx-runtime'; import { createContext, forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react'; import { Spin } from 'antd'; import loadScript from './load'; import { useNetwork } from 'ahooks'; import { getAMapLoader } from '../getAMapLoader'; export const MapContext = createContext(null); const loadingCss = { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }; // @ts-ignore window['offlineMap'] = { baseUrl: '/', domain: '/', }; export const GDMap = forwardRef(function (props, ref) { const { containerClass, children, options = {}, aMapUI = false, aMapLoca = false, loadedCallBack, zoomchange, clickchange, loadingStyle = {}, } = props; const optionsRef = useRef(options || {}); const mapRef = useRef(null); const containerEle = useRef(null); const [loading, setLoading] = useState('unset'); const { online } = useNetwork(); useEffect(() => { setLoading('loading'); if (!online) { // @ts-ignore if (!window['AMap']) { // @ts-ignore loadScript( '/local_map/js/amap.1.4.6.js?rnd=' + Math.random(), (err) => { if (err) { setLoading('error'); throw err; } else { // @ts-ignore if (window['AMap']) { setTimeout(() => { setLoading('ready'); }, 1000); } } }, ); } else { setLoading('ready'); } } else { getAMapLoader({ aMapUI, aMapLoca, }).then(() => { setLoading('ready'); }); } }, []); useEffect(() => { if (loading === 'ready') { if (!online) { delete optionsRef.current.mapStyle; if (!optionsRef.current.zooms) { optionsRef.current.zooms = [1, 15]; } optionsRef.current.layers = [ new AMap.TileLayer({ tileUrl: function (x, y, z) { // 本地存储时,从磁盘加载瓦片 return '/local_map/tiles/' + z + '/' + x + '/' + y + '.png'; }, zIndex: 0, }), ]; } mapRef.current = new AMap.Map(containerEle.current, optionsRef.current); if (zoomchange) { mapRef.current.on('zoomchange', zoomchange); } if (clickchange) { mapRef.current.on('click', clickchange); } loadedCallBack && loadedCallBack(mapRef.current); } }, [loading]); useImperativeHandle(ref, () => { return { getMap() { return mapRef.current; }, // 设置地图显示的中心点 setCenter(center) { return mapRef.current.setCenter(center); }, // 设置地图显示的缩放级别,在PC上,参数zoom可设范围:[3,18] setZoom(zoom) { return mapRef.current.setZoom(zoom); }, // 获取当前地图缩放级别 getZoom() { return mapRef.current.getZoom(); }, // 地图缩放至指定级别并以指定点为地图显示中心点 setZoomAndCenter(zoom, center) { return mapRef.current.setZoomAndCenter(zoom, center); }, // 按照行政区名称或adcode来设置地图显示的中心点。行政区名称支持中国、省、市、区/县名称,如遇重名的情况,会按城市编码表顺序返回第一个。 setCity(cityName, callback) { return mapRef.current.setCity(cityName, callback); }, // 根据地图上添加的覆盖物分布情况,自动缩放地图到合适的视野级别,参数均可缺省。 setFitView(params = []) { return mapRef.current.setFitView(params); }, // 返回地图对象的容器 getContainer() { return mapRef.current.getContainer(); }, // 获取地图中心点所在区域,回调函数返回对象属性分别对应为{省,市,区/县} getCity(callback) { return mapRef.current.getCity(callback); }, // 删除地图上所有的覆盖物 clearMap() { return mapRef.current.clearMap(); }, // 注销地图对象,并清空地图容器 destroy() { return mapRef.current.destroy(); }, // 设置当前地图显示状态,包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转(rotateEnable)、是否可双击放大地图、是否可以通过键盘控制地图旋转(keyboardEnable)等 setStatus(obj) { return mapRef.current.setStatus(obj); }, // 地图放大一级显示 zoomIn() { return mapRef.current.zoomIn(); }, // 地图缩小一级显示 zoomOut() { return mapRef.current.zoomOut(); }, // 地图中心点平移至指定点位置 panTo(positon) { return mapRef.current.panTo(positon); }, // 插件加载方法.参数name中指定需要加载的插件类型,同时加载多个插件时,以字符串数组的形式添加。在Callback回调函数中进行地图插件的创建、插件事件的绑定等操作;插件为地图功能的扩展,按需加载; plugin(name, callback) { return mapRef.current.plugin(name, callback); }, // 添加控件。参数可以是插件列表中的任何插件对象,如:ToolBar、OverView、Scale等 addControl(obj) { return mapRef.current.addControl(obj); }, // 移除地图上的指定控件 removeControl(obj) { return mapRef.current.removeControl(obj); }, // 清除地图上的信息窗体。 clearInfoWindow() { return mapRef.current.clearInfoWindow(); }, // 设置地图的显示样式 setMapStyle(style) { return mapRef.current.setMapStyle(style); }, // 获取地图显示样式 getMapStyle() { return mapRef.current.getMapStyle(); }, // 设置地图上显示的元素种类,支持bg(地图背景)、point(兴趣点)、road(道路)、building(建筑物) setFeatures(features) { return mapRef.current.setFeatures(features); }, // 获取地图显示元素种类 getFeatures() { return mapRef.current.getFeatures(); }, // 设置俯仰角,3D视图有效(自V1.4.0开始支持) setPitch(pitch) { return mapRef.current.setPitch(pitch); }, // 获取俯仰角(自V1.4.0开始支持) getPitch() { return mapRef.current.getPitch(); }, }; }); return _jsx( 'div', Object.assign( { className: containerClass, ref: containerEle }, { children: loading === 'ready' ? _jsx( MapContext.Provider, Object.assign( { value: mapRef.current }, { children: children }, ), ) : _jsx( 'div', Object.assign( { style: Object.assign( Object.assign({}, loadingCss), loadingStyle, ), }, { children: _jsx(Spin, { size: 'large' }) }, ), ), }, ), ); });