Feat arrow line

examples/demos/line/arrow-debug.ts

@@ -0,0 +1,121 @@
+import { LineLayer, Source } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+/**
+ * Arrow Line Demo
+ *
+ * 该示例演示如何在 L7 中为线图层添加箭头效果，常用于导航、路径方向标识。
+ *
+ * 支持的箭头参数：
+ * - enable: 是否显示箭头
+ * - spacing: 箭头间距（像素）
+ * - width: 箭头宽度（像素）
+ * - length: 箭头长度（像素）
+ * - strokeWidth: 箭头线条宽度（像素）
+ * - color: 箭头颜色（支持 CSS 色值）
+ *
+ * 箭头为 V 形轮廓，非实心三角，叠加在线本身之上。
+ * 线和箭头可分别设置颜色，实现如“蓝色线+黄色箭头”效果。
+ *
+ * 示例配置：
+ * arrow: {
+ *   enable: true,
+ *   spacing: 80,
+ *   width: 30,
+ *   length: 40,
+ *   strokeWidth: 4,
+ *   color: '#FFFF00',
+ * }
+ */
+
+export const arrowDebug: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      style: 'dark',
+      center: [120, 30],
+      zoom: 10,
+    },
+  });
+
+  console.log('=== Arrow Debug Demo Started ===');
+
+  // 一条简单的水平线用于测试
+  const simpleLineData = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: { name: 'test' },
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [119.9, 30],
+            [120.1, 30],
+          ],
+        },
+      },
+    ],
+  };
+
+  const arrowConfig = {
+    enable: true,
+    spacing: 15, // 间距 (像素)
+    width: 15, // 宽度 (像素)
+    length: 3, // 长度 (像素)
+    strokeWidth: 4, // 箭头线条宽度 (像素)
+    color: 'rgba(255, 94, 0, 1)', // 黄色箭头
+  };
+
+  console.log('Creating line layer with arrow config:', arrowConfig);
+
+  // 蓝色线，带黄色箭头
+  const lineLayer = new LineLayer({ name: 'debug_arrow' })
+    .source(new Source(simpleLineData))
+    .shape('line')
+    .size(10) // 线宽 10px
+    .color('#0000FF') // 蓝色
+    .style({
+      arrow: arrowConfig,
+    });
+
+  console.log('Line layer created, adding to scene...');
+  scene.addLayer(lineLayer);
+  console.log('Line layer added to scene');
+
+  // 添加一条不带箭头的对照线 - 青色
+  const normalLine = new LineLayer({ name: 'normal_line' })
+    .source(
+      new Source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [119.9, 30.05],
+                [120.1, 30.05],
+              ],
+            },
+          },
+        ],
+      }),
+    )
+    .shape('line')
+    .size(8)
+    .color('#00FFFF'); // 改为青色对照线，不带箭头
+
+  scene.addLayer(normalLine);
+  console.log('Normal line (without arrows) added for comparison - cyan color');
+
+  // 延迟检查图层配置
+  setTimeout(() => {
+    const config = lineLayer.getLayerConfig();
+    console.log('Layer config after add:', config);
+    console.log('Arrow config from layer:', (config as any).arrow);
+  }, 1000);
+
+  return scene;
+};

examples/demos/line/arrow.ts

@@ -0,0 +1,130 @@
+import { LineLayer, Source } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const arrow: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      style: 'light',
+      center: [120.15, 30.25],
+      zoom: 13,
+    },
+  });
+
+  // 模拟道路路径数据
+  const roadData = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {
+          name: '主干道',
+        },
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [120.1, 30.2],
+            [120.12, 30.22],
+            [120.15, 30.24],
+            [120.18, 30.26],
+            [120.2, 30.28],
+          ],
+        },
+      },
+      {
+        type: 'Feature',
+        properties: {
+          name: '支路',
+        },
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [120.1, 30.28],
+            [120.12, 30.26],
+            [120.14, 30.24],
+            [120.16, 30.22],
+          ],
+        },
+      },
+      {
+        type: 'Feature',
+        properties: {
+          name: '环形路',
+        },
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [120.18, 30.2],
+            [120.2, 30.21],
+            [120.21, 30.23],
+            [120.2, 30.25],
+            [120.18, 30.26],
+            [120.16, 30.25],
+            [120.15, 30.23],
+            [120.16, 30.21],
+            [120.18, 30.2],
+          ],
+        },
+      },
+    ],
+  };
+
+  const source = new Source(roadData);
+
+  // 创建带箭头的线图层 - 蓝色线条
+  const lineLayer = new LineLayer({ name: 'arrow_line' })
+    .source(source)
+    .shape('line')
+    .size(6)
+    .color('#1890ff')
+    .style({
+      arrow: {
+        enable: true,
+        spacing: 30, // 间距 (像素)
+        width: 10, // 宽度 (像素)
+        length: 5, // 长度 (像素)
+        strokeWidth: 5,
+        color: 'rgba(255, 94, 0, 1)', // 黄色箭头
+      },
+    });
+
+  scene.addLayer(lineLayer);
+
+  // 添加一个白色箭头的测试图层
+  const whiteArrowLayer = new LineLayer({ name: 'white_arrow_line' })
+    .source(
+      new Source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [120.1, 30.3],
+                [120.15, 30.3],
+                [120.2, 30.3],
+              ],
+            },
+          },
+        ],
+      }),
+    )
+    .shape('line')
+    .size(6)
+    .color('red')
+    .style({
+      arrow: {
+        enable: true,
+        spacing: 30, // 间距 (像素)
+        width: 10, // 宽度 (像素)
+        length: 5, // 长度 (像素)
+        strokeWidth: 5,
+      },
+    });
+
+  scene.addLayer(whiteArrowLayer);
+
+  return scene;
+};

examples/demos/line/index.ts

@@ -1,5 +1,7 @@
 export { arc } from './arc';
 export { arc3D } from './arc-3d';
+export { arrow } from './arrow';
+export { arrowDebug } from './arrow-debug';
 export { dash } from './dash';
 export { flow } from './flow';
 export { greatcircle } from './greatcircle';

examples/demos/polygon/fill_china.ts

@@ -39,20 +39,6 @@ export const fillChina: TestCase = async (options) => {
     }
     return false;
   });
-
-  const color = [
-    '#a50026',
-    '#d73027',
-    '#f46d43',
-    '#fdae61',
-    '#fee090',
-    '#ffffbf',
-    '#e0f3f8',
-    '#abd9e9',
-    '#74add1',
-    '#4575b4',
-    '#313695',
-  ];
   // 行政区划填充色
   const fillLayer = new PolygonLayer({
     autoFit: true,

packages/component/src/control/baseControl/control.ts

@@ -178,7 +178,7 @@ export default class Control<O extends IControlOption = IControlOption>
   /**
    * 获取默认构造器参数
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   public getDefault(option?: Partial<O>): O {
     // tslint:disable-next-line:no-object-literal-type-assertion
     return {

packages/component/src/control/baseControl/popperControl.ts

@@ -51,7 +51,7 @@ export default class PopperControl<
    */
   public getDefault(option?: Partial<O>): O {
     const defaultOption = super.getDefault(option);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
     const position = option?.position ?? defaultOption.position!;
     return {
       ...super.getDefault(option),
@@ -72,10 +72,9 @@ export default class PopperControl<
 
   public initPopper() {
     const { popperClassName, popperPlacement, popperTrigger } = this.controlOption;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
     const popperContainer = this.mapsService.getMapContainer()!;
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     this.popper = new Popper(this.button!, {
       className: popperClassName,
       placement: popperPlacement,

packages/component/src/control/fullscreen.ts

@@ -44,7 +44,7 @@ export default class Fullscreen extends ButtonControl<IFullscreenControlOption>
   public onAdd(): HTMLElement {
     const button = super.onAdd();
     button.addEventListener('click', this.onClick);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
     this.mapContainer = DOM.getContainer(this.scene.getSceneConfig().id!);
     this.mapContainer.addEventListener('fullscreenchange', this.onFullscreenChange);
     return button;

packages/component/src/utils/screenfull.ts

@@ -73,7 +73,6 @@ const eventNameMap = {
 };
 
 let screenfull: any = {
-  // eslint-disable-next-line default-param-last
   request(element = document.documentElement, options) {
     return new Promise((resolve, reject) => {
       const onFullScreenEntered = () => {

packages/core/src/services/component/IMarkerService.ts

@@ -41,6 +41,10 @@ export interface IMarker {
   closePopup(): this;
   setElement(el: HTMLElement): this;
   getMarkerLayerContainerSize: () => IMarkerContainerAndBounds | void;
+  /**
+   * Update marker position based on current map state.
+   */
+  update(): void;
   /**
    * Hide the marker visually without removing it from the layer/data.
    */