feat: 位置搜索 LocationSearch 新增配置私钥 privateKey 能力

docs/guide/index.md

@@ -64,7 +64,7 @@ export default () => {
       style: 'light',
       center: [120.210792, 30.246026],
       zoom: 9,
-      // token: 'xxxx - token',
+      // token: '你的 token',
     },
   };
   const APP = React.createElement(LarkMap, {

package.json

@@ -42,6 +42,7 @@
     "classnames": "^2.3.1",
     "color": "^4.2.3",
     "lodash-es": "^4.17.21",
+    "md5": "^2.3.0",
     "rc-select": "^14.1.13"
   },
   "devDependencies": {
@@ -53,6 +54,7 @@
     "@types/geojson": "^7946.0.8",
     "@types/jest": "^27.0.0",
     "@types/lodash-es": "^4.17.6",
+    "@types/md5": "^2.3.5",
     "@umijs/fabric": "^3.0.0",
     "antd": "^4.22.3",
     "dumi": "^1.1.40",

src/components/Control/LogoControl/demos/default.tsx

@@ -8,7 +8,6 @@ const config: LarkMapProps = {
     style: 'light',
     center: [120.210792, 30.246026],
     zoom: 9,
-    // token: 'xxxx - token',
   },
   style: {
     height: '200px',

src/components/LarkMap/demos/default.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
 import type { LarkMapProps } from '@antv/larkmap';
 import { LarkMap } from '@antv/larkmap';
+import React from 'react';
 
 const config: LarkMapProps = {
   mapType: 'Gaode',
   mapOptions: {
     style: 'light',
     center: [120.210792, 30.246026],
     zoom: 9,
-    // token: 'xxxx - token',
+    // token: '你申请的 Key',
   },
 };
 

src/components/LarkMap/index.md

@@ -24,7 +24,44 @@ LarkMap 是地图容器组件，相关地图组件与 Hooks 需放到容器组
 
 #### 通过实例生成地图
 
-<code src="./demos/map-instance.tsx" compact defaultShowCode></code>
+```tsx | pure
+import AMapLoader from '@amap/amap-jsapi-loader';
+import { GaodeMap } from '@antv/l7';
+import { LarkMap } from '@antv/larkmap';
+import React from 'react';
+
+/**
+ * 实例化
+ */
+// const mapInstance = new GaodeMap({
+//   style: 'dark',
+//   center: [120.210792, 30.246026],
+//   zoom: 10,
+//   // token: '你申请的 Key',
+// });
+
+/**
+ * 或者通过 AMapLoader
+ */
+const getMapInstance = () => {
+  return AMapLoader.load({
+    key: '你申请的 Key', // 申请好的 Web 端开发者 Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+  }).then((AMap) => {
+    return new GaodeMap({
+      mapInstance: new AMap.Map('container', {
+        zoom: 16, //初始化地图层级
+        center: [116.397428, 39.90923], //初始化地图中心点
+      }),
+    });
+  });
+};
+
+export default () => {
+  return <LarkMap id="container" map={getMapInstance} style={{ height: '300px' }} />;
+};
+```
 
 ### API
 

src/components/LocationSearch/index.md

@@ -38,9 +38,10 @@ nav:
 
 #### GaodeLocationSearchParams
 
-| 属性值 | 描述                              | 类型     | 默认值 |
-| ------ | --------------------------------- | -------- | ------ |
-| key    | 高德 Web API 服务的 key 值 (必传) | `string` | -      |
+| 属性值     | 描述                              | 类型                      | 默认值      |
+| ---------- | --------------------------------- | ------------------------- | ----------- |
+| key        | 高德 Web API 服务的 key 值 (必传) | `string`                  | -           |
+| privateKey | 高德 Web API 服务数字签名私钥     | `string | undefined` | `undefined` |
 
 该其他配置可以查看高德的 [输入提示](https://lbs.amap.com/api/webservice/guide/api/inputtips)
 

src/components/LocationSearch/index.tsx

@@ -1,6 +1,7 @@
 import { useDebounceFn } from 'ahooks';
+import md5 from 'md5';
 import React, { useCallback, useEffect, useState } from 'react';
-import { urlStringify } from '../../utils';
+import { getQueryString } from '../../utils';
 import { CLS_PREFIX, GAO_DE_API_URL } from './constant';
 import './index.less';
 import Select from './Select';
@@ -28,10 +29,15 @@ export const LocationSearch: React.FC<LocationSearchProps> = ({
         setOptions([]);
         return;
       }
-      const url = urlStringify(GAO_DE_API_URL, {
-        ...searchParams,
-        keywords: [...(searchParams.keywords ?? '').split('|'), searchText].filter((item) => !!item).join('|'),
-      });
+      const { keywords, privateKey, ...otherParams } = searchParams;
+      const params = {
+        ...otherParams,
+        keywords: [...(keywords ?? '').split('|'), searchText].filter((item) => !!item).join('|'),
+      };
+      if (privateKey) {
+        params.sig = md5(getQueryString(params, false) + privateKey);
+      }
+      const url = `${GAO_DE_API_URL}?${getQueryString(params, true)}`;
       const res = await (await fetch(url)).json();
       setOptions(
         (res?.tips ?? [])

src/components/LocationSearch/types.ts

@@ -39,6 +39,7 @@ export type GaodeLocationSearchParams = {
   citylimit?: boolean;
   sig?: string;
   datatype?: string;
+  privateKey?: string;
   [key: string]: any;
 };
 

src/utils/url.ts

@@ -1,11 +1,28 @@
+/**
+ * 将 params 参数对象转换成 query string
+ * @param params
+ * @param encode
+ * @returns
+ */
+export function getQueryString(params: Record<string, any>, encode = false) {
+  return Object.entries(params)
+    .sort(([key1], [key2]) => key1.localeCompare(key2))
+    .map(([key, value]) => {
+      let valueStr = String(value);
+      if (encode) {
+        valueStr = window.encodeURI(String(value));
+      }
+      return `${key}=${valueStr}`;
+    })
+    .join('&');
+}
+
 /**
  * 将 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('&')}`;
+  return `${baseUrl}?${getQueryString(params, true)}`;
 }