feat: mvt layer

antvis · Aug 17, 2023 · b9b1957 · b9b1957
1 parent 2aabbba
commit b9b1957
Show file tree

Hide file tree

Showing 11 changed files with 208 additions and 130 deletions.
diff --git a/packages/li-core-assets/docs/dev/Editor/demos/config.ts b/packages/li-core-assets/docs/dev/Editor/demos/config.ts
@@ -113,7 +113,7 @@ const config: Application = {
         type: 'BaseLayout',
         metadata: { name: '基础布局' },
         properties: {
-          showSidePanel: true,
+          showSidePanel: false,
         },
       },
       {
@@ -144,7 +144,11 @@ const config: Application = {
         id: 'LayerPopup',
         type: 'LayerPopup',
         metadata: { name: '图层信息框' },
-        properties: {},
+        properties: {
+          isOpen: true,
+          trigger: 'hover',
+          items: [],
+        },
         container: {
           id: 'BaseLayout',
           slot: 'controls',

diff --git a/packages/li-core-assets/docs/dev/Runtime/demos/config.ts b/packages/li-core-assets/docs/dev/Runtime/demos/config.ts
@@ -113,7 +113,7 @@ const config: Application = {
         type: 'BaseLayout',
         metadata: { name: '基础布局' },
         properties: {
-          showSidePanel: true,
+          showSidePanel: false,
         },
       },
       {

diff --git a/packages/li-core-assets/src/layers/MVTLayer/Component.tsx b/packages/li-core-assets/src/layers/MVTLayer/Component.tsx
@@ -1,17 +1,18 @@
 import type { ImplementLayerProps } from '@antv/li-sdk';
 import React from 'react';
+import type { MVTLayerProps } from './mvt-layer';
 import MVTLayer from './mvt-layer';
 import type { MVTLayerSource } from './type';
 
-export interface MVTLayerWrapperProps extends ImplementLayerProps {
+export interface MVTLayerWrapperProps extends ImplementLayerProps, MVTLayerProps {
   source: MVTLayerSource;
 }
 
 const MVTLayerWrapper: React.FC<MVTLayerWrapperProps> = (props) => {
   const { source } = props;
-  const metadataUrl = props.source.parser.metadataUrl;
+  const metadataUrl = source.parser.metadataUrl;
 
-  return <MVTLayer source={source} metadataUrl={metadataUrl} />;
+  return <MVTLayer {...props} metadataUrl={metadataUrl} />;
 };
 
 export default MVTLayerWrapper;
diff --git a/packages/li-core-assets/src/layers/MVTLayer/demos/config.ts b/packages/li-core-assets/src/layers/MVTLayer/demos/config.ts
@@ -10,15 +10,15 @@ const config: Application = {
       id: 'f751aab1-e333-4521-aa41-94a0db675aed',
       type: 'vector-tile',
       metadata: {
-        name: 'ne_10m_railroads',
+        name: '330106',
         description: 'MVT Tile',
         serviceType: 'MVT Tile',
       },
       properties: {
-        url: 'http://127.0.0.1:8080/ne_10m_railroads/{z}/{x}/{y}.pbf',
+        url: 'http://127.0.0.1:8080/330106/{z}/{x}/{y}.pbf',
         parser: {
           type: 'mvt',
-          metadataUrl: 'http://127.0.0.1:8080/ne_10m_railroads/metadata.json',
+          metadataUrl: 'http://localhost:8080/330106/metadata.json',
         },
       },
     },
@@ -40,7 +40,7 @@ const config: Application = {
         id: '5d148cba-5775-435c-b34c-9882dbc584e8',
         type: 'MVTLayer',
         metadata: {
-          name: 'ne_10m_railroads',
+          name: '330106',
         },
         sourceConfig: {
           datasetId: 'f751aab1-e333-4521-aa41-94a0db675aed',
@@ -50,6 +50,12 @@ const config: Application = {
         },
         visConfig: {
           visible: true,
+          radius: 10,
+          fillColor: 'rgb(90, 216, 166)',
+          opacity: 0.3,
+          strokeColor: 'rgb(146, 112, 202)',
+          lineWidth: 0.5,
+          lineOpacity: 0.75,
         },
       },
     ],

diff --git a/packages/li-core-assets/src/layers/MVTLayer/demos/index.tsx b/packages/li-core-assets/src/layers/MVTLayer/demos/index.tsx
@@ -6,5 +6,5 @@ import config from './config';
 const assets = [CoreAssets];
 
 export default () => {
-  return <LocationInsightApp style={{ height: '70vh' }} config={config} assets={assets} />;
+  return <LocationInsightApp style={{ height: '100vh' }} config={config} assets={assets} />;
 };
diff --git a/packages/li-core-assets/src/layers/MVTLayer/index.tsx b/packages/li-core-assets/src/layers/MVTLayer/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import component from './Component';
 import registerForm from './register-form';
 
-const TMSICON = () => (
+const ICON = () => (
   <svg viewBox="0 0 64 64" width="62px" height="62px" style={{ fill: 'currentcolor' }}>
     <g>
       <polygon
@@ -32,36 +32,25 @@ const TMSICON = () => (
   </svg>
 );
 
-const ICON = () => (
-  <svg viewBox="0 0 56 56" width="56px" height="56px" style={{ fill: 'currentcolor' }}>
-    <path d="m27.55,22.84L1.87,37.3l26.58,14.97,25.68-14.46-26.58-14.97Z" style={{ opacity: 0.6 }} />
-    <path d="m27.55,14.32L1.87,28.78l26.58,14.97,25.68-14.46-26.58-14.97Z" style={{ opacity: 0.6 }} />
-    <path d="m27.55,3.73L1.87,18.19l26.58,14.97,25.68-14.46L27.55,3.73Z" style={{ opacity: 0.6 }} />
-    <path
-      d="m9.93,20.28h3.17l1.65,2.86,1.6-2.86h3.14l-2.9,4.51,3.17,4.8h-3.23l-1.84-2.99-1.84,2.99h-3.21l3.21-4.85-2.92-4.46Z"
-      fill="#c0c0c0"
-    />
-    <path d="m21.1,20.28h3.19l1.88,3.14,1.88-3.14h3.18l-3.62,5.41v3.9h-2.88v-3.9l-3.62-5.41Z" fill="#c0c0c0" />
-    <path d="m33.28,20.28h8.14v1.86l-5.22,5.45h5.41v2h-8.83v-1.93l5.17-5.39h-4.67v-1.99Z" fill="#c0c0c0" />
-  </svg>
-);
-
 export default implementLayer({
   version: 'v0.1',
   metadata: {
     name: 'MVTLayer',
     displayName: '矢量瓦片',
     description: '用于矢量瓦片服务展示',
     type: 'Layer',
-    icon: TMSICON,
+    icon: ICON,
     color: '#5558db',
   },
   defaultVisConfig: {
     visible: true,
     zIndex: 0,
-    style: {
-      opacity: 1,
-    },
+    radius: 6,
+    fillColor: 'rgb(90, 216, 166)',
+    opacity: 0.6,
+    strokeColor: 'rgb(146, 112, 202)',
+    lineWidth: 0.5,
+    lineOpacity: 0.75,
     minZoom: 0,
     maxZoom: 24,
     blend: 'normal',

diff --git a/packages/li-core-assets/src/layers/MVTLayer/mvt-layer.tsx b/packages/li-core-assets/src/layers/MVTLayer/mvt-layer.tsx
@@ -1,17 +1,26 @@
 import type { ITileParserCFG } from '@antv/l7';
 import { Source } from '@antv/l7';
+import type { CompositeLayerOptions } from '@antv/l7-composite-layers/dist/esm/core/composite-layer';
 import type { PointLayerProps } from '@antv/larkmap';
 import { LineLayer, PointLayer, PolygonLayer } from '@antv/larkmap';
-import React, { useEffect, useRef, useState } from 'react';
+import { pick } from 'lodash-es';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import type { MVTMetadata } from './type';
 
-export interface MVTLayerProps extends Omit<PointLayerProps, 'source'> {
+export interface MVTLayerProps extends CompositeLayerOptions {
   source: { data: string; parser: Partial<Omit<ITileParserCFG, 'type'>> };
   metadataUrl: string;
+  fillColor?: PointLayerProps['color'];
+  opacity?: number;
+  strokeColor?: string;
+  lineWidth?: number;
+  lineOpacity?: number;
+  radius?: PointLayerProps['size'];
 }
 
 const MVTLayer: React.FC<MVTLayerProps> = (props) => {
-  const { source, metadataUrl } = props;
+  const { source, metadataUrl, fillColor, opacity, strokeColor, lineWidth, lineOpacity, radius } = props;
+  const commonAttr = pick(props, ['name', 'id', 'zIndex', 'visible', 'minZoom', 'maxZoom', 'blend']);
   const [metadata, setMetadata] = useState<MVTMetadata>();
   const vectorSourceRef = useRef<Source>();
 
@@ -53,14 +62,56 @@ const MVTLayer: React.FC<MVTLayerProps> = (props) => {
   return vectorLayers.map((vectorLayer) => {
     if (vectorLayer.geometry === 'Point') {
       return (
-        <PointLayer key={vectorLayer.id} source={vectorSource} sourceLayer={vectorLayer.id} shape="circle" size={5} />
+        <PointLayer
+          key={vectorLayer.id}
+          source={vectorSource}
+          sourceLayer={vectorLayer.id}
+          shape="circle"
+          size={radius}
+          color={fillColor}
+          style={{ opacity: opacity, stroke: strokeColor, strokeWidth: lineWidth, strokeOpacity: lineOpacity }}
+          {...commonAttr}
+        />
       );
     } else if (vectorLayer.geometry === 'LineString') {
       return (
-        <LineLayer key={vectorLayer.id} source={vectorSource} sourceLayer={vectorLayer.id} shape="line" size={1} />
+        <LineLayer
+          key={vectorLayer.id}
+          source={vectorSource}
+          sourceLayer={vectorLayer.id}
+          shape="line"
+          size={lineWidth || 0.5}
+          color={strokeColor}
+          style={{ opacity: lineOpacity }}
+          {...commonAttr}
+        />
       );
     } else if (vectorLayer.geometry === 'Polygon') {
-      return <PolygonLayer key={vectorLayer.id} source={vectorSource} sourceLayer={vectorLayer.id} shape="fill" />;
+      return (
+        <Fragment key={vectorLayer.id}>
+          <PolygonLayer
+            key={vectorLayer.id}
+            source={vectorSource}
+            sourceLayer={vectorLayer.id}
+            shape="fill"
+            color={fillColor}
+            style={{ opacity: opacity }}
+            {...commonAttr}
+          />
+          {lineWidth && (
+            <LineLayer
+              key={vectorLayer.id + 'line'}
+              source={vectorSource}
+              sourceLayer={vectorLayer.id}
+              shape="line"
+              size={lineWidth}
+              color={strokeColor}
+              style={{ opacity: lineOpacity }}
+              {...commonAttr}
+            />
+          )}
+        </Fragment>
+      );
     }
 
     return null;

diff --git a/packages/li-core-assets/src/layers/MVTLayer/register-form/index.ts b/packages/li-core-assets/src/layers/MVTLayer/register-form/index.ts
@@ -13,10 +13,43 @@ export type MVTLayerStyleAttributeValue = Omit<MVTLayerProps, 'source' | 'metada
 const toValues = (config: LayerRegisterFormResultType<MVTLayerStyleAttributeValue>) => {
   const { sourceConfig, visConfig } = config;
   const { parser } = sourceConfig;
-  const { style, minZoom = 0, maxZoom = 24, blend } = visConfig;
+  const {
+    fillColor,
+    opacity,
+    strokeColor,
+    lineWidth,
+    lineOpacity,
+    radius,
+    minZoom = 0,
+    maxZoom = 24,
+    blend,
+  } = visConfig;
+
+  const styleConfug = {
+    fillColorField: typeof fillColor === 'object' ? fillColor?.field : undefined,
+    fillColorRange:
+      typeof fillColor === 'object'
+        ? {
+            colors: fillColor?.value || [],
+            // @ts-ignore
+            isReversed: fillColor?.isReversed || false,
+          }
+        : undefined,
+    fillColorScale: typeof fillColor === 'object' ? fillColor?.scale?.type : undefined,
+    fillColor: typeof fillColor !== 'object' ? fillColor : undefined,
+    fillColorOpacity: opacity,
+    strokeColor: strokeColor,
+    lineWidth,
+    lineOpacity,
+    radius: typeof radius !== 'object' ? radius : undefined,
+    // @ts-ignore
+    radiusField: typeof radius === 'object' ? radius?.field : undefined,
+    // @ts-ignore
+    radiusRange: typeof radius === 'object' ? radius?.value : undefined,
+  };
 
   return {
-    opacity: style?.opacity,
+    ...styleConfug,
     zoom: [minZoom, maxZoom],
     blend,
   };
@@ -30,22 +63,39 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<MV
     parser: { type: 'mvt' },
   };
 
+  const visConfig = {
+    fillColor: values.fillColorField
+      ? {
+          field: values.fillColorField,
+          value: values.fillColorRange.colors,
+          scale: { type: values.fillColorScale },
+          isReversed: values.fillColorRange.isReversed,
+        }
+      : values.fillColor,
+    opacity: values.fillColorOpacity,
+    strokeColor: values.strokeColor,
+    lineWidth: values.lineWidth,
+    lineOpacity: values.lineOpacity,
+    radius: values.radiusField
+      ? {
+          field: values.radiusField,
+          value: values.radiusRange,
+        }
+      : values.radius,
+    minZoom: values?.zoom?.[0],
+    maxZoom: values?.zoom?.[1],
+    blend: values.blend,
+  };
+
   return {
     sourceConfig,
-    visConfig: {
-      style: {
-        opacity: values?.opacity,
-      },
-      minZoom: values?.zoom?.[0],
-      maxZoom: values?.zoom?.[1],
-      blend: values.blend,
-    },
+    visConfig,
   };
 };
 
 export default (props: LayerRegisterFormProps): LayerRegisterForm<MVTLayerStyleAttributeValue> => {
   // 属性面板表单的 Schema 定义，来自表单库 formily 的 Schema
-  const schema = getSchema();
+  const schema = getSchema(props.datasetFields);
   return {
     schema,
     toValues,

diff --git a/packages/li-core-assets/src/layers/MVTLayer/register-form/schema.ts b/packages/li-core-assets/src/layers/MVTLayer/register-form/schema.ts
@@ -1,40 +1,14 @@
+import type { FieldSelectOptionType } from '@antv/li-p2';
+import fillColorCollapse from '@antv/li-p2/dist/esm/LayerAttribute/common-schema/fill-color-collapse';
 import otherAttributesCollapse from '@antv/li-p2/dist/esm/LayerAttribute/common-schema/other-attributes-collapse';
+import pointRadiusCollapse from '@antv/li-p2/dist/esm/LayerAttribute/common-schema/point-radius-collapse';
+import strokeCollapse from '@antv/li-p2/dist/esm/LayerAttribute/common-schema/stroke-collapse';
 
-export default () => {
+export default (fieldList: FieldSelectOptionType[]) => {
   return {
-    collapseItem_style: {
-      type: 'void',
-      'x-component': 'FormCollapse',
-      'x-component-props': {
-        ghost: true,
-        destroyInactivePanel: true,
-        defaultActiveKey: [],
-      },
-      properties: {
-        style: {
-          type: 'void',
-          'x-component': 'FormCollapse.CollapsePanel',
-          'x-component-props': {
-            header: '样式',
-          },
-          properties: {
-            opacity: {
-              type: 'number',
-              title: '透明度',
-              default: 1,
-              'x-decorator-props': {},
-              'x-decorator': 'FormItem',
-              'x-component': 'Slider',
-              'x-component-props': {
-                min: 0,
-                max: 1,
-                step: 0.1,
-              },
-            },
-          },
-        },
-      },
-    },
+    collapseItem_fillColor: fillColorCollapse({ fieldList }),
+    collapseItem_stroke: strokeCollapse(),
+    collapseItem_fillradius: pointRadiusCollapse({ fieldList, collapseTitle: '半径' }),
     collapseItem_other: otherAttributesCollapse(),
   };
 };