Shihui (#995)

* style: lint style * feat: fillimage 增加旋转角度的控制 * style: lint style
2022-03-08 10:58:59 +08:00 · 2022-03-08 10:58:59 +08:00 · d43fe3ee9f
parent 5339b80450
commit d43fe3ee9f
6 changed files with 103 additions and 154 deletions
--- a/packages/layers/src/core/interface.ts
+++ b/packages/layers/src/core/interface.ts
@ -73,6 +73,8 @@ export interface IPointLayerStyleOptions {
  mask?: boolean;
  maskInside?: boolean;

+  rotation?: number; // angle
+
  animateOption: IAnimateOption;
 }

--- a/packages/layers/src/point/models/fillmage.ts
+++ b/packages/layers/src/point/models/fillmage.ts
@ -24,6 +24,7 @@ export default class FillImageModel extends BaseModel {
  public meter2coord: number = 1;
  private texture: ITexture2D;
  private isMeter: boolean = false;
+  private radian: number = 0; // 旋转的弧度
  public getUninforms(): IModelUniform {
    const {
      opacity = 1,
@ -32,12 +33,32 @@ export default class FillImageModel extends BaseModel {
      stroke = 'rgba(0,0,0,0)',
      offsets = [0, 0],
      blend,
+      rotation,
    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;

    if (this.rendererService.getDirty()) {
      this.texture.bind();
    }

+    /**
+     *               rotateFlag
+     * L7MAP            1
+     * MAPBOX           1
+     * GAODE2.x         -1
+     * GAODE1.x         -1
+     */
+    let rotateFlag = 1;
+    if (
+      this.mapService.version === 'GAODE2.x' ||
+      this.mapService.version === 'GAODE1.x'
+    ) {
+      rotateFlag = -1;
+    }
+    // 控制图标的旋转角度（绕 Z 轴旋转）
+    this.radian = rotation
+      ? (rotateFlag * Math.PI * rotation) / 180
+      : (rotateFlag * Math.PI * (this.mapService.getRotation() % 360)) / 180;
+
    if (
      this.dataTextureTest &&
      this.dataTextureNeedUpdate({
@ -86,7 +107,12 @@ export default class FillImageModel extends BaseModel {
    }
    return {
      u_isMeter: Number(this.isMeter),
-
+      u_RotateMatrix: new Float32Array([
+        Math.cos(this.radian),
+        Math.sin(this.radian),
+        -Math.sin(this.radian),
+        Math.cos(this.radian),
+      ]),
      u_additive: blend === 'additive' ? 1.0 : 0.0,

      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
--- a/packages/layers/src/point/shaders/image/fillImage_vert.glsl
+++ b/packages/layers/src/point/shaders/image/fillImage_vert.glsl
@ -8,6 +8,7 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样

 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
+uniform mat2 u_RotateMatrix;
 uniform float u_isMeter;

 varying float v_radius;
@ -78,7 +79,7 @@ void main() {
  // anti-alias
  

-  vec2 offset = (extrude.xy * (a_Size) + textrueOffsets);
+  vec2 offset = (u_RotateMatrix * extrude.xy * (a_Size) + textrueOffsets);
  vec3 aPosition = a_Position;
  if(u_isMeter < 1.0) {
    // 不以米为实际单位
--- a/stories/Map/components/bugfix.tsx
+++ b/stories/Map/components/bugfix.tsx
@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { Scene, GaodeMap, GaodeMapV2, PointLayer } from '@antv/l7';
+import { Scene, GaodeMap, GaodeMapV2, Mapbox, Map, PointLayer } from '@antv/l7';
 const data = {
  type: 'FeatureCollection',
  features: [
@ -139,6 +139,9 @@ export default class Amap2demo extends React.Component {
          color: '#f00',
          mix: 0.5,
        })
+        .style({
+          // rotation: 90
+        })
        .fitBounds();

      scene.addLayer(imageLayer);
--- a/stories/Map/components/mapCenter.tsx
+++ b/stories/Map/components/mapCenter.tsx
@ -56,94 +56,60 @@ export default class GaodeMapComponent extends React.Component {
    //   .size(2)
    //   .color('#000');

-    // let text = new PointLayer({ zIndex: 2 })
-    //   .source(
-    //     [
-    //       {
-    //         lng: aspaceLnglat[0] + 0.0002,
-    //         lat: aspaceLnglat[1],
-    //       },
-    //     ],
-    //     {
-    //       parser: {
-    //         type: 'json',
-    //         x: 'lng',
-    //         y: 'lat',
-    //       },
-    //     },
-    //   )
-    //   // .shape('100m', 'text')
-    //    .shape('circle')
-    //   .size(25)
-    //   .color('#0f0')
-    //   .style({
-    //     textOffset: [50, 20],
-    //   });
-
-    // let layer = new PointLayer({}) // blend: 'additive'
-    //   .source(
-    //     [
-    //       // {
-    //       //   lng: 120,
-    //       //   lat: 30.267069,
-    //       //   name: 'n1'
-    //       // },
-    //       // {
-    //       //   lng: 120.1025,
-    //       //   lat: 30.264701434772807,
-    //       //   name: 'n2',
-    //       // },
-    //       {
-    //         lng: 120.1019811630249,
-    //         lat: 30.264701434772807,
-    //         name: 'n3',
-    //       },
-    //     ],
-    //     {
-    //       parser: {
-    //         type: 'json',
-    //         x: 'lng',
-    //         y: 'lat',
-    //       },
-    //     },
-    //   )
-    //   .shape('circle')
-    //   // .shape('cylinder')
-    //   // .color('#0f9')
-    //   // .color('#4169E1')
-    //   // .color('#4cfd47')
-    //   .color('name', ['#f00', '#ff0'])
-    //   // .size([100, 100, 1000])
-    //   // .size([100, 100, 1000])
-    //   // .size(10)
-    //   .size('name', [20, 40])
-    //   // .animate({
-    //   //   // enable: true,
-    //   //   enable: false,
-    //   //   // type: 'www'
-    //   // })
-    //   // .animate(true)
-    //   .select(true)
-    //   .active({ color: '#00f' })
-    //   .style({
-    //     heightfixed: true,
-    //     // pickLight: false,
-    //     pickLight: true,
-    //     // lightEnable: true,
-    //     // opacity: 0.5,
-    //     stroke: '#f00',
-    //     // strokeWidth: 10,
-    //     strokeWidth: 0,
-    //     strokeOpacity: 1,
-    //     // unit: 'meter',
-    //   });
-    // // .animate(true)
-    // // .animate({
-    // //   enable: true,
-    // //   speed: 0.02,
-    // //   repeat: 1
-    // // })
-    // // .active({ color: '#00f' });
+    let layer = new PointLayer({}) // blend: 'additive'
+      .source(
+        [
+          {
+            lng: 120.1019811630249,
+            lat: 30.264701434772807,
+            name: 'n3',
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        },
+      )
+      // .shape('circle')
+      .shape('cylinder')
+      // .color('#0f9')
+      // .color('#4169E1')
+      .color('#4cfd47')
+      // .color('name', ['#f00', '#ff0'])
+      // .size([100, 100, 1000])
+      .size([20, 20, 200])
+      // .size(10)
+      // .size('name', [20, 40])
+      // .animate({
+      //   // enable: true,
+      //   enable: false,
+      //   // type: 'www'
+      // })
+      // .animate(true)
+      .select(true)
+      .active({ color: '#ff0' })
+      .style({
+        // heightfixed: true,
+        // pickLight: false,
+        // pickLight: true,
+        // lightEnable: true,
+        // opacity: 0.5,
+        stroke: '#f00',
+        // strokeWidth: 10,
+        strokeWidth: 0,
+        strokeOpacity: 1,
+        // unit: 'meter',
+      });
+    // .animate(true)
+    // .animate({
+    //   enable: true,
+    //   speed: 0.02,
+    //   repeat: 1
+    // })
+    // .active({ color: '#00f' });

    this.scene = scene;

@ -176,58 +142,12 @@ export default class GaodeMapComponent extends React.Component {
    // );

    scene.on('loaded', () => {
-      // scene.addLayer(layer);
+      scene.addLayer(layer);

      // let scale = layer.getScale('size');
      // console.log('scale n2', scale('n2'));
      // console.log('scale n3', scale('n3'));

-      let layer = new PointLayer({}) // blend: 'additive'
-        .source(
-          [
-            {
-              lng: 120.1019811630249,
-              lat: 30.264701434772807,
-              name: 'n3',
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          },
-        )
-        .shape('circle')
-        .color('#ff0')
-        .animate(true)
-        .size(20);
-      scene.addLayer(layer);
-
-      let layer2 = new PointLayer({}) // blend: 'additive'
-        .source(
-          [
-            {
-              lng: 120.1019811630249 + 0.0001,
-              lat: 30.264701434772807,
-              name: 'n3',
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          },
-        )
-        .shape('circle')
-        .color('#ff0')
-        .animate(true)
-        .size(20);
-      scene.addLayer(layer2);
-
      // let text = new PointLayer({ zIndex: 2 })
      //   .source(
      //     [
--- a/stories/MultiPassRenderer/components/Bloom.tsx
+++ b/stories/MultiPassRenderer/components/Bloom.tsx
@ -35,9 +35,6 @@ export default class Bloom extends React.Component {
    });
    // scene.setBgColor('#000');
    const layer = new PolygonLayer({
-      zIndex: 0,
-      // enablePicking: true,
-      // enableHighlight: true,
      enableMultiPassRenderer: true,
      passes: [
        [
@ -95,20 +92,20 @@ export default class Bloom extends React.Component {
      .color('red');
    scene.addLayer(pointLayer);

-    setTimeout(() => {
-      layer.setMultiPass(false);
-      pointLayer.setMultiPass(true, [
-        [
-          'bloom',
-          {
-            bloomRadius: 10,
-            bloomIntensity: 1,
-          },
-        ],
-      ]);
+    // setTimeout(() => {
+    //   layer.setMultiPass(false);
+    //   pointLayer.setMultiPass(true, [
+    //     [
+    //       'bloom',
+    //       {
+    //         bloomRadius: 10,
+    //         bloomIntensity: 1,
+    //       },
+    //     ],
+    //   ]);

-      scene.render();
-    }, 1000);
+    //   scene.render();
+    // }, 1000);

    this.scene = scene;
  }