feat: 资产支持个性图标展示 (#116)

* fix: 图层图标 * fix: 图标更新 * fix: 图标更新 * fix: 图标大小 * fix: 图标大小问题 --------- Co-authored-by: yxh01132861 <[email protected]>
antvis · Jan 9, 2024 · 99e3b1c · 99e3b1c
1 parent 9a2f5fd
commit 99e3b1c
Show file tree

Hide file tree

Showing 67 changed files with 402 additions and 111 deletions.
diff --git a/packages/li-analysis-assets/src/widgets/AdministrativeSelectControl/constant.ts b/packages/li-analysis-assets/src/widgets/AdministrativeSelectControl/constant.ts
diff --git a/packages/li-analysis-assets/src/widgets/AdministrativeSelectControl/constant.tsx b/packages/li-analysis-assets/src/widgets/AdministrativeSelectControl/constant.tsx
@@ -0,0 +1,62 @@
+import type { TooltipPlacement } from 'antd/es/tooltip';
+import React from 'react';
+
+export const CLS_PREFIX = 'li-administrative-select';
+
+// 城市列表
+export const CityUrl = 'https://npm.elemecdn.com/static-geo-atlas@latest/geo-data/administrative-data/area-tree.json';
+
+// 边界数据
+export const BoundsUrl = 'https://unpkg.com/static-geo-atlas@latest/geo-data/choropleth-data/';
+
+export const POPOVER_PLACEMENT_LEGEND = new Map<string | undefined, TooltipPlacement>([
+  ['topleft', 'bottomLeft'],
+  ['lefttop', 'bottomLeft'],
+  ['topright', 'bottomRight'],
+  ['righttop', 'bottomRight'],
+  ['bottomleft', 'topLeft'],
+  ['leftbottom', 'topLeft'],
+  ['bottomright', 'topRight'],
+  ['rightbottom', 'topRight'],
+  [undefined, 'rightTop'],
+]);
+
+export const HotCityList = [
+  { adcode: '100000', name: '全国', level: 'country' },
+  { adcode: '110000', name: '北京', level: 'province' },
+  { adcode: '120000', name: '天津', level: 'province' },
+  { adcode: '210100', name: '沈阳', level: 'city' },
+  { adcode: '210200', name: '大连', level: 'city' },
+  { adcode: '310000', name: '上海', level: 'province' },
+  { adcode: '320100', name: '南京', level: 'city' },
+  { adcode: '320500', name: '苏州', level: 'city' },
+  { adcode: '330100', name: '杭州', level: 'city' },
+  { adcode: '370200', name: '青岛', level: 'city' },
+  { adcode: '410100', name: '郑州', level: 'city' },
+  { adcode: '420100', name: '武汉', level: 'city' },
+  { adcode: '430100', name: '长沙', level: 'city' },
+  { adcode: '440100', name: '广州', level: 'city' },
+  { adcode: '440300', name: '深圳', level: 'city' },
+  { adcode: '500000', name: '重庆', level: 'province' },
+  { adcode: '510100', name: '成都', level: 'city' },
+  { adcode: '610100', name: '西安', level: 'city' },
+  { adcode: '810000', name: '香港', level: 'province' },
+  { adcode: '820000', name: '澳门', level: 'province' },
+];
+
+export const ICON = () => {
+  return (
+    <svg viewBox="0 0 64 64" width="1em" height="1em" fill="currentColor">
+      <path
+        stroke="null"
+        id="svg_35"
+        d="m18.31054,37.412798l11.449967,11.647569c0.598296,0.609274 1.394195,0.938612 2.239495,0.938612s1.641198,-0.334826 2.239495,-0.938612l11.449967,-11.647569c1.838801,-1.866246 3.260441,-4.05634 4.226498,-6.493437c0.933123,-2.354763 1.405173,-4.841261 1.405173,-7.394313c0,-2.552366 -0.47205,-5.038864 -1.405173,-7.393627c-0.966057,-2.442586 -2.393186,-4.627192 -4.226498,-6.493437c-1.838801,-1.871735 -3.990473,-3.32082 -6.394636,-4.308832c-2.321829,-0.94959 -4.775394,-1.432618 -7.294825,-1.432618s-4.972996,0.483028 -7.294825,1.438107c-2.404164,0.988012 -4.555835,2.437097 -6.394636,4.308832c-1.838801,1.866246 -3.260441,4.05634 -4.226498,6.493437c-0.933123,2.354763 -1.405173,4.841261 -1.405173,7.393627s0.47205,5.038864 1.405173,7.393627c0.971546,2.437784 2.393186,4.622389 4.226498,6.488635zm2.349274,-25.463963c3.018927,-3.068328 7.042333,-4.758927 11.340187,-4.758927s8.32126,1.690599 11.340187,4.758927c3.024416,3.079305 4.68757,7.191221 4.68757,11.576213c0,4.385678 -1.663154,8.502396 -4.68757,11.576213l-10.752869,10.945669c-0.323849,0.329337 -0.850789,0.329337 -1.174637,0l-10.752869,-10.94018c-3.024416,-3.079305 -4.68757,-7.190535 -4.68757,-11.576213s1.663154,-8.502396 4.68757,-11.581702zm0,0"
+      />
+      <path
+        stroke="null"
+        id="svg_36"
+        d="m32.000002,32.76914c4.841261,0 8.782333,-3.941072 8.782333,-8.782333s-3.941072,-8.782333 -8.782333,-8.782333s-8.782333,3.941072 -8.782333,8.782333c0,4.840575 3.941072,8.782333 8.782333,8.782333zm0,-14.271291c3.024416,0 5.488958,2.464542 5.488958,5.488958s-2.464542,5.488958 -5.488958,5.488958s-5.488958,-2.464542 -5.488958,-5.488958c0,-3.025102 2.464542,-5.488958 5.488958,-5.488958zm22.115012,28.717543c-1.300883,-0.960568 -3.123217,-1.805867 -5.401135,-2.513943c-1.289905,-0.400694 -2.706056,-0.751987 -4.210031,-1.048391c-1.015457,-0.197602 -1.965047,0.576341 -1.965047,1.613754c0,0.784921 0.554385,1.465552 1.328328,1.613754c1.388706,0.268959 2.684101,0.592807 3.869715,0.960568c4.396655,1.377728 5.560315,2.876214 5.560315,3.479999c0,0.603785 -1.163659,2.102271 -5.560315,3.47451c-4.182586,1.300883 -9.770345,2.014448 -15.736843,2.014448c-5.966497,0 -11.554257,-0.713565 -15.736843,-2.014448c-4.396655,-1.37224 -5.560315,-2.870725 -5.560315,-3.47451c0,-0.603785 1.163659,-2.102271 5.560315,-3.47451c1.185615,-0.36776 2.481009,-0.691609 3.869715,-0.960568c0.768454,-0.148202 1.328328,-0.828833 1.328328,-1.613754c0,-1.037413 -0.94959,-1.816845 -1.965047,-1.613754c-1.503975,0.296404 -2.920126,0.642208 -4.210031,1.048391c-2.283407,0.708076 -4.100252,1.553375 -5.401135,2.513943c-1.130725,0.82403 -2.47552,2.212736 -2.47552,4.100252c0,1.888202 1.344795,3.276908 2.47552,4.105741c1.300883,0.960568 3.123217,1.805867 5.401135,2.513943c4.489968,1.394195 10.423531,2.162649 16.713877,2.162649s12.22391,-0.768454 16.713877,-2.162649c2.283407,-0.708076 4.100252,-1.553375 5.401135,-2.513943c1.130725,-0.828833 2.47552,-2.217539 2.47552,-4.105741c0,-1.887515 -1.344795,-3.276222 -2.47552,-4.105741zm0,0"
+      />
+    </svg>
+  );
+};
diff --git a/packages/li-analysis-assets/src/widgets/AdministrativeSelectControl/index.ts b/packages/li-analysis-assets/src/widgets/AdministrativeSelectControl/index.ts
@@ -1,6 +1,7 @@
 import { implementWidget } from '@antv/li-sdk';
 import component from './Component/index';
 import registerForm from './registerForm';
+import { ICON } from './constant';
 
 export default implementWidget({
   version: 'v0.1',
@@ -10,6 +11,7 @@ export default implementWidget({
     description: '选择行政名地图切换到行政区域',
     type: 'Auto',
     category: 'MapControl',
+    icon: ICON,
   },
   defaultProperties: {
     position: 'lefttop',

diff --git a/packages/li-analysis-assets/src/widgets/AnalysisLayout/Component/constant.ts b/packages/li-analysis-assets/src/widgets/AnalysisLayout/Component/constant.ts
diff --git a/packages/li-analysis-assets/src/widgets/AnalysisLayout/Component/constants.tsx b/packages/li-analysis-assets/src/widgets/AnalysisLayout/Component/constants.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+/** 组件名称, 前缀 */
+export const CLS_PREFIX = 'li-analysis-layout';
+
+export const ICON = () => {
+  return (
+    <svg viewBox="0 0 64 64" width="1em" height="1em" fill="currentColor">
+      <path
+        fill="currentColor"
+        transform="rotate(90 31.999999999999996,32.00000000000001) "
+        d="m60.033438,3.966562l-56.066875,0l0,56.066875l56.066875,0l0,-28.033438l0,-28.033438zm-3.759586,52.307289l-11.932601,0l0,-48.547703l11.932601,0l0,48.547703zm-15.692188,-48.547703l0,11.916255l-32.855515,0l0,-11.916255l32.855515,0zm0,15.675841l0,32.871861l-32.855515,0l0,-32.871861l32.855515,0z"
+      />
+    </svg>
+  );
+};
diff --git a/packages/li-analysis-assets/src/widgets/AnalysisLayout/Component/index.tsx b/packages/li-analysis-assets/src/widgets/AnalysisLayout/Component/index.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { useEffect, useMemo, useState } from 'react';
 import FloatPanel from '../FloatPanel';
 import type { Properties } from '../registerForm';
-import { CLS_PREFIX } from './constant';
+import { CLS_PREFIX } from './constants';
 import useStyle from './style';
 
 export interface AnalysisLayoutProps

diff --git a/packages/li-analysis-assets/src/widgets/AnalysisLayout/index.tsx b/packages/li-analysis-assets/src/widgets/AnalysisLayout/index.tsx
@@ -1,6 +1,7 @@
 import { implementWidget } from '@antv/li-sdk';
 import component from './Component';
 import registerForm from './registerForm';
+import { ICON } from './Component/constants';
 
 export default implementWidget({
   version: 'v0.1',
@@ -10,6 +11,7 @@ export default implementWidget({
     description: '用于分析场景的布局，带有侧边栏、底部栏、折叠面板',
     type: 'Layout',
     category: 'Layout',
+    icon: ICON,
   },
   defaultProperties: {
     showSidePanel: false,

diff --git a/packages/li-analysis-assets/src/widgets/DrawControl/index.tsx b/packages/li-analysis-assets/src/widgets/DrawControl/index.tsx
@@ -1,6 +1,7 @@
 import { implementWidget } from '@antv/li-sdk';
 import component from './Component/index';
 import registerForm from './registerForm';
+import { DrawIcon } from './Component/contants';
 
 export default implementWidget({
   version: 'v0.1',
@@ -10,6 +11,7 @@ export default implementWidget({
     description: '地图上绘制点、线、面、圆数据',
     type: 'Auto',
     category: 'MapControl',
+    icon: DrawIcon,
   },
   defaultProperties: {
     position: 'topright',

diff --git a/packages/li-analysis-assets/src/widgets/FilterControl/constants.tsx b/packages/li-analysis-assets/src/widgets/FilterControl/constants.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ICON = () => {
+  return (
+    <svg viewBox="64 64 896 896" data-icon="filter" width="1em" height="1em" fill="currentColor">
+      <path d="M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z" />
+    </svg>
+  );
+};
diff --git a/packages/li-analysis-assets/src/widgets/FilterControl/index.tsx b/packages/li-analysis-assets/src/widgets/FilterControl/index.tsx
@@ -1,6 +1,7 @@
 import { implementWidget } from '@antv/li-sdk';
 import component from './Component';
 import registerForm from './registerForm';
+import { ICON } from './constants';
 
 export default implementWidget({
   version: 'v0.1',
@@ -10,6 +11,7 @@ export default implementWidget({
     description: '在地图上的实时筛选数据，支持默认值设置',
     type: 'Auto',
     category: 'DataAnalysis',
+    icon: ICON,
   },
   defaultProperties: {
     defaultFilters: [],

diff --git a/packages/li-analysis-assets/src/widgets/FilterWidget/constants.tsx b/packages/li-analysis-assets/src/widgets/FilterWidget/constants.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const ICON = () => {
+  return (
+    <svg viewBox="0 0 64 64" width="1em" height="1em" fill="currentColor">
+      <path
+        fill="currentColor"
+        d="m35.63888,60.067458c-1.093537,0 -1.822562,-0.364512 -2.551587,-0.729025l-7.290249,-4.009637c-1.822562,-1.093537 -2.9161,-2.9161 -2.9161,-4.738662l0,-22.964284c0,-0.364512 0,-0.729025 -0.364512,-0.729025l-16.767573,-13.486961l0,-0.364512c-1.822562,-1.45805 -2.187075,-3.645124 -1.45805,-5.832199c0.729025,-1.822562 2.9161,-3.280612 5.103174,-3.280612l44.835031,0c2.187075,0 4.009637,1.093537 5.103174,3.280612c0.729025,1.822562 0.364512,4.374149 -1.093537,5.832199l-0.364512,0.364512l-16.767573,13.486961c-0.364512,0.364512 -0.364512,0.364512 -0.364512,0.729025l0,26.609409c0.364512,3.280612 -2.187075,5.832199 -5.103174,5.832199zm-26.973921,-49.938205l16.767573,13.122448c1.45805,1.093537 2.187075,2.551587 2.187075,4.374149l0,22.964284c0,0.364512 0,0.729025 0.364512,1.093537l7.290249,4.009637l1.093537,0c0.364512,-0.364512 0.364512,-0.729025 0.364512,-1.093537l0,-26.973921c0,-1.822562 0.729025,-3.280612 2.187075,-4.374149l16.40306,-13.122448c0.364512,-0.364512 0.364512,-0.729025 0,-1.093537c0,-0.364512 -0.729025,-0.729025 -1.093537,-0.729025l-44.835031,0c-0.364512,0 -0.729025,0.364512 -1.093537,0.729025c0,0.364512 0,0.729025 0.364512,1.093537zm49.20918,22.599772l-11.664398,0c-1.093537,0 -2.187075,-1.093537 -2.187075,-2.187075s1.093537,-2.187075 2.187075,-2.187075l11.664398,0c1.093537,0 2.187075,1.093537 2.187075,2.187075c0,1.45805 -1.093537,2.187075 -2.187075,2.187075zm0,8.383786l-11.664398,0c-1.093537,0 -2.187075,-1.093537 -2.187075,-2.187075s1.093537,-2.187075 2.187075,-2.187075l11.664398,0c1.093537,0 2.187075,1.093537 2.187075,2.187075s-1.093537,2.187075 -2.187075,2.187075zm0,8.383786l-11.664398,0c-1.093537,0 -2.187075,-1.093537 -2.187075,-2.187075s1.093537,-2.187075 2.187075,-2.187075l11.664398,0c1.093537,0 2.187075,1.093537 2.187075,2.187075s-1.093537,2.187075 -2.187075,2.187075z"
+      />
+    </svg>
+  );
+};
diff --git a/packages/li-analysis-assets/src/widgets/FilterWidget/index.tsx b/packages/li-analysis-assets/src/widgets/FilterWidget/index.tsx
@@ -1,6 +1,7 @@
 import { implementWidget } from '@antv/li-sdk';
 import component from './Component/index';
 import registerForm from './registerForm';
+import { ICON } from './constants';
 
 export default implementWidget({
   version: 'v0.1',
@@ -10,6 +11,7 @@ export default implementWidget({
     description: '用于动态添加筛选条件来过滤数据',
     type: 'Atom',
     category: 'DataAnalysis',
+    icon: ICON,
   },
   defaultProperties: {
     showAddFilter: false,

diff --git a/packages/li-analysis-assets/src/widgets/LegendWidget/index.tsx b/packages/li-analysis-assets/src/widgets/LegendWidget/index.tsx
@@ -1,6 +1,7 @@
 import { implementWidget } from '@antv/li-sdk';
 import component from './Component';
 import registerForm from './registerForm';
+import { LegendWidgetSvg } from './constants';
 
 export default implementWidget({
   version: 'v0.1',
@@ -10,6 +11,7 @@ export default implementWidget({
     description: '显示地图上图层的图例信息',
     type: 'Auto',
     category: 'MapControl',
+    icon: LegendWidgetSvg,
   },
   defaultProperties: {
     position: 'bottomright',

diff --git a/packages/li-analysis-assets/src/widgets/LocationSearchControl/constants.ts b/packages/li-analysis-assets/src/widgets/LocationSearchControl/constants.ts
diff --git a/packages/li-analysis-assets/src/widgets/LocationSearchControl/constants.tsx b/packages/li-analysis-assets/src/widgets/LocationSearchControl/constants.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+/** 组件名称, 前缀 */
+export const CLS_PREFIX = 'li-analysis-location-search-control';
+
+export const ICON = () => {
+  return (
+    <svg viewBox="0 0 64 64" width="1em" height="1em" fill="currentColor">
+      <path
+        fill="currentColor"
+        d="m19.59835,4.395687l-1.432583,0l0,16.472185l-13.607018,0l0,1.432583c0,1.575337 1.289109,2.864446 2.864446,2.864446l12.175156,0c1.575337,0 2.864446,-1.289109 2.864446,-2.864446l0,-15.039601c0,-1.576058 -1.289109,-2.865167 -2.864446,-2.865167z"
+      />
+      <path
+        fill="currentColor"
+        d="m58.045102,54.994944l-7.232084,-6.58674c0.713022,-1.154645 1.188143,-2.478829 1.426045,-3.870693c1.018603,-6.00976 -3.05581,-11.679757 -9.099751,-12.698361c-6.043941,-0.984422 -11.713939,3.05581 -12.732542,9.06557c-1.018603,6.00976 3.05581,11.679757 9.099751,12.698361c3.021629,0.509302 5.975578,-0.2714 8.284868,-1.935346l7.266265,6.620922c0.916743,0.814883 2.308606,0.747204 3.123489,-0.136042c0.814883,-0.950924 0.74652,-2.342788 -0.136042,-3.15767zm-9.099751,-11.035098c-0.713022,4.210455 -4.685575,7.062544 -8.929528,6.349522c-4.243953,-0.713022 -7.096042,-4.685575 -6.38302,-8.89603c0.713022,-4.210455 4.685575,-7.062544 8.929528,-6.349522c4.243953,0.713706 7.096042,4.686259 6.38302,8.89603z"
+      />
+      <path
+        fill="currentColor"
+        d="m56.303039,3.958031l-48.606079,0c-2.056411,0 -3.738929,1.682518 -3.738929,3.738929l0,48.606079c0,2.056411 1.682518,3.738929 3.738929,3.738929l24.303039,0c1.028206,0 1.869465,-0.841259 1.869465,-1.869465s-0.841259,-1.869465 -1.869465,-1.869465l-22.433575,0c-1.028206,0 -1.869465,-0.841259 -1.869465,-1.869465l0,-44.86715c0,-1.028206 0.841259,-1.869465 1.869465,-1.869465l44.86715,0c1.028206,0 1.869465,0.841259 1.869465,1.869465l0,22.433575c0,1.028206 0.841259,1.869465 1.869465,1.869465s1.869465,-0.841259 1.869465,-1.869465l0,-24.303039c0,-2.056411 -1.682518,-3.738929 -3.738929,-3.738929z"
+      />
+      <path
+        fill="currentColor"
+        d="m20.268024,29.53299l-12.798826,0l0,3.656808l11.579686,0l0,9.446957l-10.665484,14.322292l4.448911,0l7.435713,-9.751282c1.21914,-1.523465 2.437667,-2.742606 2.437667,-4.571009l0,-10.665484c0,-1.341238 -1.097042,-2.438281 -2.437667,-2.438281zm33.520531,-22.24517l0,-1.524079l-24.987776,0l0,23.007209c0,1.005622 0.517843,1.828404 1.523465,1.828404c0.609263,0 1.523465,-0.609263 1.919824,-1.005622l25.871913,-22.305912l-4.327427,0zm-21.330968,17.521998l0,-15.38927l17.979099,0l-17.979099,15.38927z"
+      />
+    </svg>
+  );
+};
diff --git a/packages/li-analysis-assets/src/widgets/LocationSearchControl/index.tsx b/packages/li-analysis-assets/src/widgets/LocationSearchControl/index.tsx
@@ -1,6 +1,7 @@
 import { implementWidget } from '@antv/li-sdk';
 import component from './Component';
 import registerForm from './registerForm';
+import { ICON } from './constants';
 
 export default implementWidget({
   version: 'v0.1',
@@ -10,6 +11,7 @@ export default implementWidget({
     description: 'POI 查询地理位置',
     type: 'Auto',
     category: 'MapControl',
+    icon: ICON,
   },
   defaultProperties: {
     position: 'lefttop',

diff --git a/packages/li-analysis-assets/src/widgets/MeasureControl/index.tsx b/packages/li-analysis-assets/src/widgets/MeasureControl/index.tsx
@@ -1,6 +1,7 @@
 import { implementWidget } from '@antv/li-sdk';
 import component from './Component';
 import registerForm from './registerForm';
+import { DrawSvg } from './Component/constants';
 
 export default implementWidget({
   version: 'v0.1',
@@ -10,6 +11,7 @@ export default implementWidget({
     description: '地图上测量距离与面积',
     type: 'Auto',
     category: 'MapControl',
+    icon: DrawSvg,
   },
   defaultProperties: {
     position: 'topright',

diff --git a/packages/li-analysis-assets/src/widgets/MiniChart/Component/Chart/index.tsx b/packages/li-analysis-assets/src/widgets/MiniChart/Component/Chart/index.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
-import { CLS_PREFIX } from '../../constant';
+import { CLS_PREFIX } from '../../constants';
 import IntervalLine from './IntervalLine';
 import Pie from './Pie';
 import useStyle from './style';

diff --git a/packages/li-analysis-assets/src/widgets/MiniChart/Component/helper.ts b/packages/li-analysis-assets/src/widgets/MiniChart/Component/helper.ts
@@ -1,6 +1,6 @@
 import type { DatasetField, LocalOrRemoteDataset } from '@antv/li-sdk';
 import { isNumber, isString } from 'lodash-es';
-import type { AggregationMethodType } from '../constant';
+import type { AggregationMethodType } from '../constants';
 
 const sortItem = ({
   start,

diff --git a/packages/li-analysis-assets/src/widgets/MiniChart/constant.ts b/packages/li-analysis-assets/src/widgets/MiniChart/constant.ts