Merge pull request #756 from antvis/shihui_dev

Shihui dev

packages/core/src/services/layer/ILayerService.ts

@@ -57,6 +57,7 @@ export interface ILayerModelInitializationOptions {
   vertexShader: string;
   fragmentShader: string;
   triangulation: Triangulation;
+  segmentNumber?: number;
 }
 
 export interface ILayerModel {

packages/core/src/services/layer/IStyleAttributeService.ts

@@ -161,6 +161,7 @@ export interface IStyleAttribute extends IStyleAttributeInitializationOptions {
 
 export type Triangulation = (
   feature: IEncodeFeature,
+  segmentNumber?: number,
 ) => {
   vertices: number[];
   indices: number[];
@@ -197,6 +198,7 @@ export interface IStyleAttributeService {
   createAttributesAndIndices(
     encodedFeatures: IEncodeFeature[],
     triangulation?: Triangulation,
+    segmentNumber?: number,
   ): {
     attributes: {
       [attributeName: string]: IAttribute;

packages/core/src/services/layer/StyleAttributeService.ts

@@ -187,6 +187,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
   public createAttributesAndIndices(
     features: IEncodeFeature[],
     triangulation: Triangulation,
+    segmentNumber: number,
   ): {
     attributes: {
       [attributeName: string]: IAttribute;
@@ -217,7 +218,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
         vertices: verticesForCurrentFeature,
         normals: normalsForCurrentFeature,
         size: vertexSize,
-      } = this.triangulation(feature);
+      } = this.triangulation(feature, segmentNumber);
       indicesForCurrentFeature.forEach((i) => {
         indices.push(i + verticesNum);
       });

packages/layers/src/core/BaseLayer.ts

@@ -858,6 +858,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
       vertexShader,
       fragmentShader,
       triangulation,
+      segmentNumber,
       ...rest
     } = options;
     this.shaderModuleService.registerModule(moduleName, {
@@ -872,6 +873,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     } = this.styleAttributeService.createAttributesAndIndices(
       this.encodedData,
       triangulation,
+      segmentNumber,
     );
     return createModel({
       attributes,

packages/layers/src/core/triangulation.ts

@@ -202,8 +202,11 @@ export function RasterImageTriangulation(feature: IEncodeFeature) {
  * @param feature 映射数据
  * @param segNum 弧线线段数
  */
-export function LineArcTriangulation(feature: IEncodeFeature) {
-  const segNum = 30;
+export function LineArcTriangulation(
+  feature: IEncodeFeature,
+  segmentNumber?: number,
+) {
+  const segNum = segmentNumber ? segmentNumber : 30;
   const coordinates = feature.coordinates as IPosition[];
   const positions = [];
   const indexArray = [];

packages/layers/src/line/models/arc.ts

@@ -33,6 +33,7 @@ export default class ArcModel extends BaseModel {
       forward = true,
       lineTexture = false,
       iconStep = 100,
+      segmentNumber = 30,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
 
     if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
@@ -89,7 +90,7 @@ export default class ArcModel extends BaseModel {
 
       u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
-      segmentNumber: 30,
+      segmentNumber,
       u_line_type: lineStyleObj[lineType || 'solid'],
       u_dash_array: dashArray,
       u_blur: 0.9,
@@ -131,6 +132,10 @@ export default class ArcModel extends BaseModel {
   }
 
   public buildModels(): IModel[] {
+    const {
+      segmentNumber = 30,
+    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+
     return [
       this.layer.buildLayerModel({
         moduleName: 'arc2dline',
@@ -139,6 +144,7 @@ export default class ArcModel extends BaseModel {
         triangulation: LineArcTriangulation,
         depth: { enable: false },
         blend: this.getBlend(),
+        segmentNumber,
       }),
     ];
   }

packages/layers/src/line/models/arc_3d.ts

@@ -31,6 +31,7 @@ export default class Arc3DModel extends BaseModel {
       dashArray = [10, 5],
       lineTexture = false,
       iconStep = 100,
+      segmentNumber = 30,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
 
     if (dashArray.length === 2) {
@@ -87,7 +88,7 @@ export default class Arc3DModel extends BaseModel {
       // u_opacity: opacity === undefined ? 1 : opacity,
       u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
-      segmentNumber: 30,
+      segmentNumber,
       u_line_type: lineStyleObj[lineType as string] || 0.0,
       u_dash_array: dashArray,
 

packages/layers/src/line/models/great_circle.ts

@@ -34,6 +34,7 @@ export default class GreatCircleModel extends BaseModel {
       dashArray = [10, 5],
       lineTexture = false,
       iconStep = 100,
+      segmentNumber = 30,
     } = this.layer.getLayerConfig() as Partial<ILineLayerStyleOptions>;
     // console.log('opacity', opacity)
     if (dashArray.length === 2) {
@@ -90,7 +91,7 @@ export default class GreatCircleModel extends BaseModel {
       // u_opacity: opacity === undefined ? 1 : opacity,
       u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
-      segmentNumber: 30,
+      segmentNumber,
       u_line_type: lineStyleObj[lineType as string] || 0.0,
       u_dash_array: dashArray,
 

stories/Map/components/amap2demo_arcLine.tsx

@@ -44,8 +44,9 @@ export default class Amap2demo_arcLine extends React.Component {
             .style({
               opacity: 0.8,
               blur: 0.99,
-              lineType: 'dash',
-              dashArray: [5, 5],
+              segmentNumber: 3,
+              // lineType: 'dash',
+              // dashArray: [5, 5],
             });
           // .forward(false)
           scene.addLayer(layer);

stories/Map/components/amap2demo_image.tsx

@@ -73,7 +73,7 @@ export default class Amap2demo_image extends React.Component {
     ];
     scene.addImage(
       '00',
-      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
+      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
       // "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*qYtMTanpMOcAAAAAAAAAAAAAARQnAQ"
       // 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*nGW2RZ3j8c8AAAAAAAAAAAAAARQnAQ'
       // 'https://gw.alipayobjects.com/zos/bmw-prod/8eee5dbd-c3f5-4806-a9b5-5c8e90d8510c.svg'
@@ -89,16 +89,16 @@ export default class Amap2demo_image extends React.Component {
 
     scene.on('loaded', () => {
       this.imageLayer = new PointLayer()
-      .source(originData, {
+        .source(originData, {
           parser: {
             type: 'json',
             x: 'longitude',
             y: 'latitude',
           },
         })
-        .shape('name', ['00', '01','02'])
-        .size(20)
-      scene.addLayer(this.imageLayer)
+        .shape('name', ['00', '01', '02'])
+        .size(20);
+      scene.addLayer(this.imageLayer);
     });
   }