Merge branch 'main' of https://github.com/antvis/LarkMap into feat/syb

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/larkmap",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "A React toolkit for geospatial visualization based on L7",
   "license": "MIT",
   "main": "lib/index.js",

src/components/LarkMap/hooks/use-scene-event/index.ts

@@ -5,7 +5,11 @@ import { SceneEventList, SceneEventMap } from './constant';
 
 export const useSceneEvent = (scene: Scene, props: SceneEventProps) => {
   useTrackedEffect(
-    (changeIndexList: number[], previousDeps: SceneEventCallback[] = [], currentDeps: SceneEventCallback[] = []) => {
+    (
+      changeIndexList: number[],
+      previousDeps: [Scene, ...SceneEventCallback[]],
+      currentDeps: [Scene, ...SceneEventCallback[]],
+    ) => {
       if (!scene) {
         return;
       }
@@ -19,8 +23,8 @@ export const useSceneEvent = (scene: Scene, props: SceneEventProps) => {
 
       eventIndexList.forEach((index) => {
         const eventName = SceneEventMap[SceneEventList[index]] as string;
-        const previousCallback = previousDeps[index + 1];
-        const currentCallback = currentDeps[index + 1];
+        const previousCallback = previousDeps[index + 1] as SceneEventCallback;
+        const currentCallback = currentDeps[index + 1] as SceneEventCallback;
         // 分别注销旧的事件回调并绑定新的事件
         if (previousCallback) {
           scene.off(eventName, previousCallback);
@@ -46,3 +50,5 @@ export const useSceneEvent = (scene: Scene, props: SceneEventProps) => {
     });
   });
 };
+
+type a = [number, ...string[]];

src/components/LocationSearch/Select/index.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
-import type { SelectProps as RcSelectProps, BaseSelectRef } from 'rc-select';
+import { omit } from 'lodash-es';
+import type { BaseSelectRef, SelectProps as RcSelectProps } from 'rc-select';
 import RcSelect, { OptGroup, Option } from 'rc-select';
 import type { OptionProps } from 'rc-select/lib/Option';
 import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
-import { omit } from 'lodash-es';
 import * as React from 'react';
 import './index.less';
 
@@ -51,7 +51,6 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     listItemHeight = 24,
     disabled,
     notFoundContent,
-    showArrow,
     ...props
   }: SelectProps<OptionType>,
   ref: React.Ref<BaseSelectRef>,
@@ -92,7 +91,6 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
       className={mergedClassName}
       getPopupContainer={getPopupContainer}
       dropdownClassName={popupClassName}
-      showArrow={showArrow}
       disabled={disabled}
     />
   );

src/components/LocationSearch/index.tsx

@@ -1,10 +1,10 @@
 import { useDebounceFn } from 'ahooks';
 import React, { useCallback, useEffect, useState } from 'react';
+import { urlStringify } from '../../utils';
 import { CLS_PREFIX, GAO_DE_API_URL } from './constant';
 import './index.less';
 import Select from './Select';
 import type { LocationSearchOption, LocationSearchProps } from './types';
-import { urlStringify } from './utils';
 
 const { Option } = Select;
 

src/components/RegionLocation/constant.ts

@@ -0,0 +1,4 @@
+/** 组件名称, 前缀 */
+export const CLS_PREFIX = 'larkmap-administrative-location';
+
+export const GAO_DE_API_URL = 'https://restapi.amap.com/v3/geocode/regeo';

src/components/RegionLocation/demos/default.tsx

@@ -0,0 +1,14 @@
+import { CustomControl, LarkMap, RegionLocation } from '@antv/larkmap';
+import React from 'react';
+
+export default () => {
+  return (
+    <>
+      <LarkMap mapType="Gaode" style={{ height: '300px' }}>
+        <CustomControl position="topleft">
+          <RegionLocation searchParams={{ key: '98d10f05a2da96697313a2ce35ebf1a2' }} />
+        </CustomControl>
+      </LarkMap>
+    </>
+  );
+};

src/components/RegionLocation/index.less

@@ -0,0 +1,6 @@
+@cls-prefix: larkmap-administrative-location;
+
+.@{cls-prefix} {
+  background-color: #fff;
+  padding: 4px;
+}

src/components/RegionLocation/index.md

@@ -0,0 +1,38 @@
+---
+toc: content
+order: 5
+group:
+  title: 分析组件
+  order: 3
+nav:
+  title: 组件
+  path: /components
+---
+
+## 行政区域定位 - RegionLocation
+
+### 介绍
+
+展示当前地图所在的行政区域，默认情况下会拾取地图展示区域左上和右下角的经纬度，通过高德 API 分别获取两点对应行政区域（省/市/区/街道），然后自下而上取交集拼接生成行政区域文本。
+
+### 代码演示
+
+<code src="./demos/default.tsx" defaultShowCode compact></code>
+
+### API
+
+| 属性值 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| searchParams | 调用高德查询接口时传递的参数，必传 | [GaodeRegionLocationParams](#gaodeRegionLocationparams) | - |
+| transformBounds | 对地图搜索区域对应左上和右下点进行自定义，默认不传则展示整个地图展示区域 | `(bounds: Bounds) => Bounds` | - |
+| className | 控件容器自定义样式 | `string` | - |
+| style | 控件容器自定义 style | `CSSProperties` | - |
+| onChange | 当展示的行政区域发生变更时的回调函数 | `(result: string, bounds: Bounds) => void` | - |
+
+#### GaodeRegionLocationParams
+
+| 属性值 | 描述                              | 类型     | 默认值 |
+| ------ | --------------------------------- | -------- | ------ |
+| key    | 高德 Web API 服务的 key 值 (必传) | `string` | -      |
+
+该其他配置可以查看高德的 [逆地理编码](https://lbs.amap.com/api/webservice/guide/api/georegeo#/regeo)

src/components/RegionLocation/index.tsx

@@ -0,0 +1,72 @@
+import classNames from 'classnames';
+import { debounce, intersection } from 'lodash-es';
+import React, { useEffect, useState } from 'react';
+import { urlStringify } from '../../utils';
+import { useScene } from '../LarkMap/hooks';
+import { CLS_PREFIX, GAO_DE_API_URL } from './constant';
+import './index.less';
+import type { RegionLocationProps } from './types';
+
+export const RegionLocation: React.FC<RegionLocationProps> = ({
+  className,
+  style,
+  searchParams,
+  transformBounds,
+  onChange,
+}) => {
+  const scene = useScene();
+  const [text, setText] = useState('-');
+
+  useEffect(() => {
+    const onMapChange = async () => {
+      if (!scene) {
+        return;
+      }
+      const getPointAddress = (lng: number, lat: number) => {
+        return new Promise<string[]>((resolve, reject) => {
+          fetch(
+            urlStringify(GAO_DE_API_URL, {
+              ...searchParams,
+              location: `${lng},${lat}`,
+            }),
+          )
+            .then((res) => res.json())
+            .then((data) => {
+              if (data.status === '1') {
+                const { country, province, city, district, township } = data.regeocode.addressComponent;
+                resolve(
+                  [country, province, city, district, township].filter((item) => typeof item === 'string' && item),
+                );
+              } else {
+                reject(data);
+              }
+            });
+        });
+      };
+      let [point1, point2] = scene.getBounds();
+      if (transformBounds) {
+        [point1, point2] = transformBounds([point1, point2]);
+      }
+      const [address1, address2] = await Promise.all([getPointAddress(...point1), getPointAddress(...point2)]);
+      const newText = address1.length && address2.length ? intersection(address1, address2).join(' ') : '-';
+      setText(newText);
+      onChange?.(newText, [point1, point2]);
+    };
+
+    const onDebounceMapChange = debounce(onMapChange, 500, {
+      maxWait: 500,
+    });
+
+    onMapChange();
+    scene?.on('mapchange', onDebounceMapChange);
+    return () => {
+      scene?.off('mapchange', onDebounceMapChange);
+    };
+  }, [onChange, scene, searchParams, transformBounds]);
+
+  return (
+    <div className={classNames([className, CLS_PREFIX])} style={style}>
+      {text}
+    </div>
+  );
+};

src/components/RegionLocation/types.ts

@@ -0,0 +1,38 @@
+import type { Bounds } from '@antv/l7';
+
+export type GaodeRegionLocationParams = {
+  /**
+   * 高德 Web API 服务的 key 值 (必传)
+   */
+  key: string;
+
+  [key: string]: any;
+};
+
+export type RegionLocationProps = {
+  /**
+   * 调用高德查询接口时传递的参数
+   */
+  searchParams: GaodeRegionLocationParams;
+  /**
+   * class 名称
+   */
+  className?: string;
+  /**
+   * 内敛样式
+   */
+  style?: React.CSSProperties;
+  /**
+   * 自定义识别区域
+   * @param bounds
+   * @returns
+   */
+  transformBounds?: (bounds: Bounds) => Bounds;
+  /**
+   * 展示区域发生变更的回调函数
+   * @param result 展示的行政区域文本
+   * @param bounds 当前地图展示区域
+   * @returns
+   */
+  onChange?: (result: string, bounds: Bounds) => void;
+};

src/index.ts

@@ -35,6 +35,8 @@ export type {
   LocationSearchOption,
   GaodeLocationSearchParams,
 } from './components/LocationSearch/types';
+export { RegionLocation } from './components/RegionLocation';
+export type { RegionLocationProps } from './components/RegionLocation/types';
 
 /**
  * 图例组件
@@ -56,7 +58,6 @@ export { useDrawGroup } from './components/Draw/use-draw-group';
 // export { DrawControl } from './components/Draw/DrawControl';
 // export type { DrawControlProps } from './components/Draw/DrawControl/types';
 
-
 /**
  * 版本号
  */

src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './layer-manager';
 export * from './style';
+export * from './url';

src/utils/url.ts

@@ -0,0 +1,11 @@
+/**
+ * 将 baseUrl 和 query 拼接成 url
+ * @param baseUrl
+ * @param params
+ * @returns
+ */
+export function urlStringify(baseUrl: string, params: Record<string, any>) {
+  return `${baseUrl}?${Object.entries(params)
+    .map(([key, value]) => `${key}=${window.encodeURIComponent(String(value))}`)
+    .join('&')}`;
+}

src/version.ts

@@ -1 +1 @@
-export default '1.4.2';
+export default '1.4.3';