Chore update engine line(finished) (#2130)

* Feat: fillImage&radar update to G-Engine (#2107) * feat: 切换fillImage到G引擎 * feat: 补充上体提交代码 * feat: radar和fillImage支持G引擎(有bug) * fix: 调整radar中uniform块中对象的顺序(遍历时一般按照unicode排序) * fix: 修改radar shader中的拼写错误 --------- Co-authored-by: huyang <[email protected]> * fix: radar 数据映射 * fix: webgl2转webgl时,关键字texture未被替换成texture2D的bug * feat: 删除一些无用代码 * chore: adapter simpleLine to G-Device * fix: 调整uniformBlock中uniform的顺序,避免BaseAlignment规则导致的对齐问题 * chore: 提交例子 * chore: 提交线的例子 * chore: rename fillmage.ts to fillImage.ts * chore: adapter line and linedash to G-device * fix: fillImage中uniform没对齐的bug * chore: update linewall to device Engine * fix: line.ts中uniform顺序不对的问题 * chore: 提取getUninforms到BaseModel中 * chore: 修改例子 * fix: add space before uniform block in shader * fix: flowLine和greatCircle的shader中uniformBlock少一个空格导致的bug * feat: 清空earthArc_3d中的内容,由arc3d接管 * feat: 更新line的demo * Origin/chore update engine line (#2151) * chore: 环境变量设置 renderer * chore: 设置环境变量 * fix: line location a_DistanceAndIndex * fix: 注释掉点点动画 * fix: 纹理引入 --------- Co-authored-by: taiyuanhy <[email protected]> Co-authored-by: huyang <[email protected]> Co-authored-by: yuqi.pyq <[email protected]>
antvis · Dec 11, 2023 · 2eecf81 · 2eecf81
1 parent 26af005
commit 2eecf81
Show file tree

Hide file tree

Showing 93 changed files with 1,135 additions and 940 deletions.
diff --git a/.gitignore b/.gitignore
@@ -40,6 +40,9 @@ build/Release
 # Dependency directories
 node_modules/
 
+#history
+.history/
+
 jspm_packages/
 
 # Typescript v1 declaration files

diff --git a/.umirc.ts b/.umirc.ts
@@ -1,11 +1,14 @@
 import { defineConfig } from 'dumi';
-
 export default defineConfig({
   title: 'L7 开发 Demo',
   favicon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
   logo: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
   outputPath: 'docs-dist',
   base: '/',
+  define:{
+    'process.env.renderer': process.env.renderer?.replace(/\'/g, ''),
+  },
+
   devServer: {
     port: '6006',
   },

diff --git a/dev-demos/features/geometry/demos/billboard.tsx b/dev-demos/features/geometry/demos/billboard.tsx
@@ -8,7 +8,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
-      renderer: 'device',
+      renderer: process.env.renderer,
       map: new GaodeMap({
         pitch: 80,
         style: 'dark',

diff --git a/dev-demos/features/heatmap/demos/heatmap.tsx b/dev-demos/features/heatmap/demos/heatmap.tsx
@@ -8,7 +8,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
-      renderer: 'device',
+      renderer: process.env.renderer,
       map: new Map({
         style: 'dark',
         pitch: 0,

diff --git a/dev-demos/features/heatmap/demos/heatmap3d.tsx b/dev-demos/features/heatmap/demos/heatmap3d.tsx
@@ -8,7 +8,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
-      renderer: 'device',
+      renderer: process.env.renderer,
       map: new Map({
         center: [120, 30],
         pitch: 0,

diff --git a/dev-demos/features/heatmap/demos/hexagon.tsx b/dev-demos/features/heatmap/demos/hexagon.tsx
@@ -8,7 +8,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
-      renderer: 'device',
+      renderer: process.env.renderer,
       map: new Map({
         style: 'light',
         pitch: 0,

diff --git a/dev-demos/features/line/arc3d_earth.md b/dev-demos/features/line/arc3d_earth.md
@@ -0,0 +1,93 @@
+### Line - arc3d_earth
+
+```tsx
+import { Scene, EarthLayer, LineLayer } from '@antv/l7';
+import { Earth } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new Earth({}),
+    });
+
+    // 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色
+    scene.setBgColor('#333');
+
+    // const earthlayer = new EarthLayer()
+    //   .source(
+    //     'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
+    //     {
+    //       parser: {
+    //         type: 'image',
+    //       },
+    //     },
+    //   )
+    //   .color('#2E8AE6')
+    //   .shape('fill')
+    //   .style({
+    //     globalOptions: {
+    //       ambientRatio: 0.6, // 环境光
+    //       diffuseRatio: 0.4, // 漫反射
+    //       specularRatio: 0.1, // 高光反射
+    //     },
+    //   })
+    //   .animate(true);
+
+    // const atomLayer = new EarthLayer().color('#2E8AE6').shape('atomSphere');
+
+    // const bloomLayer = new EarthLayer()
+    //   .color('#fff')
+    //   .shape('bloomSphere')
+    //   .style({
+    //     opacity: 0.7,
+    //   });
+
+    scene.on('loaded', () => {
+      // scene.addLayer(earthlayer);
+
+      // scene.addLayer(atomLayer);
+      // scene.addLayer(bloomLayer);
+
+      fetch(
+        'https://gw.alipayobjects.com/os/bmw-prod/20a69b46-3d6d-4ab5-b8b5-150b6aa52c88.json',
+      )
+        .then((res) => res.json())
+        .then((flydata) => {
+          const flyLine = new LineLayer({ blend: 'normal' })
+            .source(flydata, {
+              parser: {
+                type: 'json',
+                coordinates: 'coord',
+              },
+            })
+            .color('#b97feb')
+            .shape('earthArc3d')
+            .size(0.5)
+            .active(true)
+            .animate({
+              interval: 2,
+              trailLength: 2,
+              duration: 1,
+            })
+            .style({
+              segmentNumber: 60,
+              globalArcHeight: 20,
+            });
+          scene.addLayer(flyLine);
+        });
+
+      // earthlayer.setEarthTime(4.0);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
+```
diff --git a/dev-demos/features/line/demos/arc_deg.tsx b/dev-demos/features/line/demos/arc_deg.tsx
@@ -7,11 +7,11 @@ import {
 // @ts-ignore
 import { GaodeMap, Map } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
-
 export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+      renderer: process.env.renderer,
       map: new GaodeMap({
         center: [105, 32],
         zoom: 4,

diff --git a/dev-demos/features/line/demos/arc_linear.tsx b/dev-demos/features/line/demos/arc_linear.tsx
@@ -8,6 +8,7 @@ export default () => {
 
 const scene = new Scene({
   id: 'map',
+renderer: process.env.renderer,
   map: new GaodeMap({
     center: [ 120.5, 30.2 ],
     style: 'dark',
@@ -75,7 +76,7 @@ scene.on('loaded', () => {
           fontFamily: 'Times New Roman',
           textAllowOverlap: true
         });
-      scene.addLayer(textLayer);
+      // scene.addLayer(textLayer);
     });
 
 });

diff --git a/dev-demos/features/line/demos/flowline.tsx b/dev-demos/features/line/demos/flowline.tsx
@@ -17,6 +17,7 @@ import {
     useEffect(() => {
       const scene = new Scene({
         id: 'map',
+        renderer: process.env.renderer,
         map: new BaiduMap({
           center: [8.654789284720719, 47.412606122294044],
           zoom: 5,

diff --git a/dev-demos/features/line/demos/greatcircleline.tsx b/dev-demos/features/line/demos/greatcircleline.tsx
@@ -1,12 +1,4 @@
-import {
-  LineLayer,
-  Scene,
-  Source,
-  lineAtOffset,
-  lineAtOffsetAsyc,
-  PointLayer,
-  // @ts-ignore
-} from '@antv/l7';
+import { LineLayer, Scene, Source } from '@antv/l7';
 // @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
@@ -15,6 +7,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+      renderer: process.env.renderer,
       map: new GaodeMap({
         center: [105, 32],
         zoom: 4,
@@ -68,16 +61,17 @@ export default () => {
     const layer = new LineLayer({ blend: 'normal' })
       .source(source)
       .size(5)
-      .shape('arc3d')
+      .shape('greatcircle')
       .color('#f00')
       .style({
         //  sourceColor: '#00f',
         //  targetColor: '#0f0',
-         opacity:1,
+        opacity: 1,
       });
 
     scene.on('loaded', () => {
       scene.addLayer(layer);
+      scene.startAnimate();
     });
   }, []);
   return (

diff --git a/dev-demos/features/line/demos/line.tsx b/dev-demos/features/line/demos/line.tsx
@@ -16,6 +16,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+    renderer: process.env.renderer,
       map: new GaodeMap({
         center: [105, 32],
         zoom: 4,
@@ -71,7 +72,7 @@ export default () => {
     const layer = new LineLayer({ blend: 'normal' })
       .source(source)
       .size(10)
-      .shape('simple')
+      .shape('line')
       .color('#f00')
       .style({
         opacity:1,
@@ -81,6 +82,7 @@ export default () => {
 
     scene.on('loaded', () => {
       scene.addLayer(layer);
+      scene.startAnimate();
 
     });
   }, []);

diff --git a/dev-demos/features/line/demos/lineAnimate.tsx b/dev-demos/features/line/demos/lineAnimate.tsx
@@ -20,6 +20,7 @@ export default () => {
     );
     const scene = new Scene({
       id: 'map',
+    renderer: process.env.renderer,
       map: new GaodeMap({
         center: [110.19382669582967, 40.258134],
         pitch: 0,

diff --git a/dev-demos/features/line/demos/lineArc3d.tsx b/dev-demos/features/line/demos/lineArc3d.tsx
@@ -13,6 +13,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+    renderer: process.env.renderer,
       map: new GaodeMap({
         pitch: 40,
         center: [3.438, 40.16797],
@@ -81,22 +82,23 @@ export default () => {
               coordinates: 'coord',
             },
           })
-          .color('#ff6b34')
-          .texture('plane')
+          .color('#00ff00')
+          // .texture('plane')
           .shape('arc3d')
-          // .shape('arc')
           .size(20)
           // .active(true)
-          .animate({
-            duration: 10,
-            interval: 0.2,
-            trailLength: 0.05,
-          })
+          // .animate({
+          //   duration: 1,
+          //   interval: 0.2,
+          //   trailLength: 0.05,
+          // })
           .style({
-            textureBlend: 'replace',
+            // textureBlend: 'replace',
             lineTexture: true, // 开启线的贴图功能
             iconStep: 10, // 设置贴图纹理的间距
             opacity: 1,
+            sourceColor: '#f00',
+            targetColor: '#0f0',
           });
 
         const flyLine2 = new LineLayer()
@@ -116,9 +118,9 @@ export default () => {
             dashArray: [5, 5],
             opacity: 0.5,
           });
-        scene.addLayer(worldLine);
-        scene.addLayer(dotPoint);
-        scene.addLayer(flyLine2);
+        // scene.addLayer(worldLine);
+        // scene.addLayer(dotPoint);
+        // scene.addLayer(flyLine2);
         scene.addLayer(flyLine);
 
       });

diff --git a/dev-demos/features/line/demos/lineArcPlane.tsx b/dev-demos/features/line/demos/lineArcPlane.tsx
@@ -8,6 +8,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+      renderer: process.env.renderer,
       map: new GaodeMap({
         pitch: 40,
         center: [ 40, 40.16797 ],
@@ -101,10 +102,10 @@ export default () => {
             dashArray: [ 5, 5 ],
             opacity: 0.5
           });
-        scene.addLayer(worldLine);
+        // scene.addLayer(worldLine);
         scene.addLayer(dotPoint);
-        scene.addLayer(flyLine2);
-        scene.addLayer(flyLine);
+        // scene.addLayer(flyLine2);
+        // scene.addLayer(flyLine);
       });
     });
   }, []);

diff --git a/dev-demos/features/line/demos/lineArrow.tsx b/dev-demos/features/line/demos/lineArrow.tsx
@@ -12,6 +12,7 @@ export default () => {
     };
     const scene = new Scene({
       id: 'map',
+    renderer: process.env.renderer,
       map: new GaodeMap({
         center: [ 120.15, 30.3 ],
         zoom: 5,
@@ -20,6 +21,7 @@ export default () => {
     });
     const scene2 = new Scene({
       id: 'map2',
+    renderer: process.env.renderer,
       map: new BaiduMap({
         center: [ 120.15, 30.3 ],
         zoom: 9,
@@ -142,9 +144,11 @@ export default () => {
       );
     scene.on('loaded', () => {
       scene.addLayer(lineLayer);
+      scene.startAnimate();
     });
     scene2.on('loaded', () => {
       scene2.addLayer(lineLayer2);
+      scene.startAnimate();
     });
   }, []);
   return (

diff --git a/dev-demos/features/line/demos/linePopulation.tsx b/dev-demos/features/line/demos/linePopulation.tsx
@@ -88,6 +88,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+    renderer: process.env.renderer,
       map: new GaodeMap({
         pitch: 40,
         style: 'dark',

diff --git a/dev-demos/features/line/demos/lineTexture.tsx b/dev-demos/features/line/demos/lineTexture.tsx
@@ -12,6 +12,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+    renderer: process.env.renderer,
       map: new GaodeMap({
         center: [120.15, 30.246],
         pitch: 0,

diff --git a/dev-demos/features/line/demos/lineWorker.tsx b/dev-demos/features/line/demos/lineWorker.tsx
@@ -12,6 +12,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+    renderer: process.env.renderer,
       map: new GaodeMap({
         center: [120, 30],
         pitch: 0,