ccic-web/packages/component.amap/lib/mapMarker/map.js

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' }) },
								),
						  ),
			},
		),
	);
});