dvt3d · cavencj · Sep 30, 2025 · Sep 30, 2025
diff --git a/examples/list.js b/examples/list.js
@@ -327,6 +327,26 @@ const EXAMPLE_LIST = [
         name: '发光轨迹线',
         page: 'polyline_lighting_trail.html',
       },
+      {
+        name: '围栏线',
+        page: 'polyline_fence.html',
+      },
+      {
+        name: '多箭头线',
+        page: 'polyline_multi_arrow.html',
+      },
+      {
+        name: '虚线箭头线',
+        page: 'polyline_dash_arrow.html',
+      },
+      {
+        name: '方向线',
+        page: 'polyline_direction.html',
+      },
+      {
+        name: '自定义端点线',
+        page: 'polyline_custom_endpoint.html',
+      },
       {
         name: '面',
         page: 'polygon_base.html',

diff --git a/examples/tools/plot.html b/examples/tools/plot.html
@@ -24,6 +24,7 @@
         <li><button onclick="draw('fine_arrow')">直箭头</button></li>
         <li><button onclick="draw('tailed_attack_arrow')">燕尾箭头</button></li>
         <li><button onclick="draw('gathering_place')">聚集地</button></li>
+        <li><button onclick="draw('bezier_curve')">曲线</button></li>
         <li><button onclick="removeAll()">清除</button></li>
       </ul>
     </div>

diff --git a/examples/vector/polyline_custom_endpoint.html b/examples/vector/polyline_custom_endpoint.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>dc-example</title>
+    <script src="/libs/dc-sdk/dc.min.js"></script>
+    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
+    <link href="../index.css" type="text/css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div id="viewer-container" class="viewer-container"></div>
+    <script>
+      DC.config.baseUrl = '../libs/dc-sdk/resources/'
+      let viewer = new DC.Viewer('viewer-container')
+      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
+        DC.ImageryType.AMAP,
+        {
+          style: 'img',
+          crs: 'WGS84',
+        }
+      )
+      viewer.addBaseLayer(baseLayer, {
+        brightness: 0.1,
+      })
+
+      let layer = new DC.VectorLayer('layer')
+      viewer.addLayer(layer)
+
+      let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
+      polyline.setStyle({
+        width: 20,
+        material: new DC.PolylineCustomEndpointMaterialProperty({
+          color: DC.Color.BLUE,
+        //   outlineColor: DC.Color.GREEN,
+          startType: 2,
+          endType: 1,
+          outlineShow: true,
+          lineWidth: 50,
+        }),
+        clampToGround: true,
+      })
+      layer.addOverlay(polyline)
+      viewer.flyTo(layer)
+    </script>
+  </body>
+</html>
diff --git a/examples/vector/polyline_dash_arrow.html b/examples/vector/polyline_dash_arrow.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>dc-example</title>
+    <script src="/libs/dc-sdk/dc.min.js"></script>
+    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
+    <link href="../index.css" type="text/css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div id="viewer-container" class="viewer-container"></div>
+    <script>
+      DC.config.baseUrl = '../libs/dc-sdk/resources/'
+      let viewer = new DC.Viewer('viewer-container')
+      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
+        DC.ImageryType.AMAP,
+        {
+          style: 'img',
+          crs: 'WGS84',
+        }
+      )
+      viewer.addBaseLayer(baseLayer, {
+        brightness: 0.1,
+      })
+
+      let layer = new DC.VectorLayer('layer')
+      viewer.addLayer(layer)
+
+      let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
+      polyline.setStyle({
+        width: 20,
+        material: new DC.PolylineDashArrowMaterialProperty({
+          color: DC.Color.BLUE,
+        }),
+        clampToGround: true,
+      })
+      layer.addOverlay(polyline)
+
+      let polyline2 = new DC.Polyline('-60, 20; -110, 20; -110, -80')
+      polyline2.setStyle({
+        width: 20,
+        material: new DC.PolylineEmissionMaterialProperty({
+          color: DC.Color.BLUE,
+        }),
+        clampToGround: true,
+      })
+      layer.addOverlay(polyline2)
+      viewer.flyTo(layer)
+    </script>
+  </body>
+</html>
diff --git a/examples/vector/polyline_direction.html b/examples/vector/polyline_direction.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>dc-example</title>
+    <script src="/libs/dc-sdk/dc.min.js"></script>
+    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
+    <link href="../index.css" type="text/css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div id="viewer-container" class="viewer-container"></div>
+    <script>
+      DC.config.baseUrl = '../libs/dc-sdk/resources/'
+      let viewer = new DC.Viewer('viewer-container')
+      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
+        DC.ImageryType.AMAP,
+        {
+          style: 'img',
+          crs: 'WGS84',
+        }
+      )
+      viewer.addBaseLayer(baseLayer, {
+        brightness: 0.1,
+      })
+
+      let layer = new DC.VectorLayer('layer')
+      viewer.addLayer(layer)
+
+      let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
+      polyline.setStyle({
+        width: 20,
+        material: new DC.PolylineDirectionMaterialProperty({
+          color: DC.Color.BLUE,
+          outlineColor: DC.Color.GREEN,
+          outlineWidth: 5,
+        }),
+        clampToGround: true,
+      })
+      layer.addOverlay(polyline)
+      viewer.flyTo(layer)
+    </script>
+  </body>
+</html>
diff --git a/examples/vector/polyline_fence.html b/examples/vector/polyline_fence.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>dc-example</title>
+    <script src="/libs/dc-sdk/dc.min.js"></script>
+    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
+    <link href="../index.css" type="text/css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div id="viewer-container" class="viewer-container"></div>
+    <script>
+      DC.config.baseUrl = '../libs/dc-sdk/resources/'
+      let viewer = new DC.Viewer('viewer-container')
+      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
+        DC.ImageryType.AMAP,
+        {
+          style: 'img',
+          crs: 'WGS84',
+        }
+      )
+      viewer.addBaseLayer(baseLayer, {
+        brightness: 0.1,
+      })
+
+      let layer = new DC.VectorLayer('layer')
+      viewer.addLayer(layer)
+
+      let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
+      polyline.setStyle({
+        width: 20,
+        material: new DC.PolylineFenceMaterialProperty({
+          color: DC.Color.WHITE,
+          outlineColor: new Cesium.Color(1, 1, 1, 0),
+          outlineWidth: new Cesium.CallbackProperty((time) => {
+            const seconds = Cesium.JulianDate.toDate(time).getSeconds()
+            return 5 + Math.abs(Math.sin(seconds)) * 15
+          }, false),
+          maskLength: 20,
+        }),
+        clampToGround: true,
+      })
+      layer.addOverlay(polyline)
+      viewer.flyTo(layer)
+    </script>
+  </body>
+</html>
diff --git a/examples/vector/polyline_multi_arrow.html b/examples/vector/polyline_multi_arrow.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>dc-example</title>
+    <script src="/libs/dc-sdk/dc.min.js"></script>
+    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
+    <link href="../index.css" type="text/css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div id="viewer-container" class="viewer-container"></div>
+    <script>
+      DC.config.baseUrl = '../libs/dc-sdk/resources/'
+      let viewer = new DC.Viewer('viewer-container')
+      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
+        DC.ImageryType.AMAP,
+        {
+          style: 'img',
+          crs: 'WGS84',
+        }
+      )
+      viewer.addBaseLayer(baseLayer, {
+        brightness: 0.1,
+      })
+
+      let layer = new DC.VectorLayer('layer')
+      viewer.addLayer(layer)
+
+      let polyline = new DC.Polyline('-75, 35; -125, 35; -125, 10')
+      polyline.setStyle({
+        width: 20,
+        material: new DC.PolylineMultiArrowMaterialProperty({
+          color: DC.Color.WHITE,
+          repeatFactor: 100.0,
+          antiClockWise: true,
+        }),
+        clampToGround: true,
+      })
+      layer.addOverlay(polyline)
+      viewer.flyTo(layer)
+    </script>
+  </body>
+</html>
diff --git a/src/modules/material/index.js b/src/modules/material/index.js
@@ -34,12 +34,17 @@ export { default as EllipsoidTrailMaterialProperty } from './property/ellipsoid/
 /**
  * polyline material property
  */
-
+export { default as PolylineCustomEndpointMaterialProperty } from './property/polyline/PolylineCustomEndpointMaterialProperty'
+export { default as PolylineDirectionMaterialProperty } from './property/polyline/PolylineDirectionMaterialProperty'
+export { default as PolylineDashArrowMaterialProperty } from './property/polyline/PolylineDashArrowMaterialProperty'
+export { default as PolylineEmissionMaterialProperty } from './property/polyline/PolylineEmissionMaterialProperty'
+export { default as PolylineFenceMaterialProperty } from './property/polyline/PolylineFenceMaterialProperty'
 export { default as PolylineFlickerMaterialProperty } from './property/polyline/PolylineFlickerMaterialProperty'
 export { default as PolylineFlowMaterialProperty } from './property/polyline/PolylineFlowMaterialProperty'
 export { default as PolylineImageTrailMaterialProperty } from './property/polyline/PolylineImageTrailMaterialProperty'
 export { default as PolylineLightingMaterialProperty } from './property/polyline/PolylineLightingMaterialProperty'
 export { default as PolylineLightingTrailMaterialProperty } from './property/polyline/PolylineLightingTrailMaterialProperty'
+export { default as PolylineMultiArrowMaterialProperty } from './property/polyline/PolylineMultiArrowMaterialProperty'
 export { default as PolylineTrailMaterialProperty } from './property/polyline/PolylineTrailMaterialProperty'
 
 /**

diff --git a/src/modules/material/property/polyline/PolylineCustomEndpointMaterialProperty.js b/src/modules/material/property/polyline/PolylineCustomEndpointMaterialProperty.js
@@ -0,0 +1,76 @@
+/**
+ * PolylineCustomEndpoint Material Property
+ * @Author : Converted from fh2
+ */
+
+import { Cesium } from '../../../../libs'
+import MaterialProperty from '../../MaterialProperty'
+
+/**
+ * PolylineCustomEndpointMaterialProperty
+ */
+class PolylineCustomEndpointMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options)
+    this.color = options.color || Cesium.Color.WHITE
+
+    this._startType = undefined
+    this._startTypeSubscription = undefined
+    this.startType = options.startType
+    this._endType = undefined
+    this._endTypeSubscription = undefined
+    this.endType = options.endType
+    this._outlineShow = undefined
+    this._outlineShowSubscription = undefined
+    this.outlineShow = options.outlineShow || false
+    this._lineWidth = undefined
+    this._lineWidthSubscription = undefined
+    this.lineWidth = options.lineWidth
+    this._outlineColor = undefined
+    this._outlineColorSubscription = undefined
+    this.outlineColor =
+      options.outlineColor ||
+      (this.outlineShow ? Cesium.Color.WHITE : this.color)
+  }
+
+  getType(time) {
+    return Cesium.Material.PolylineCustomEndpointType
+  }
+
+  getValue(time, result) {
+    if (!result) {
+      result = {}
+    }
+    result.color = Cesium.Property.getValueOrUndefined(this._color, time)
+    result.startType = Cesium.Property.getValueOrUndefined(this._startType, time)
+    result.endType = Cesium.Property.getValueOrUndefined(this._endType, time)
+    result.outlineShow = Cesium.Property.getValueOrUndefined(this._outlineShow, time)
+    result.lineWidth = Cesium.Property.getValueOrUndefined(this._lineWidth, time)
+    result.outlineColor = Cesium.Property.getValueOrUndefined(this._outlineColor, time)
+    return result
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof PolylineCustomEndpointMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._startType, other._startType) &&
+        Cesium.Property.equals(this._endType, other._endType) &&
+        Cesium.Property.equals(this._outlineShow, other._outlineShow) &&
+        Cesium.Property.equals(this._lineWidth, other._lineWidth) &&
+        Cesium.Property.equals(this._outlineColor, other._outlineColor))
+    )
+  }
+}
+
+Object.defineProperties(PolylineCustomEndpointMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+  startType: Cesium.createPropertyDescriptor('startType'),
+  endType: Cesium.createPropertyDescriptor('endType'),
+  outlineShow: Cesium.createPropertyDescriptor('outlineShow'),
+  lineWidth: Cesium.createPropertyDescriptor('lineWidth'),
+  outlineColor: Cesium.createPropertyDescriptor('outlineColor'),
+})
+
+export default PolylineCustomEndpointMaterialProperty