Shihui dev (#844)

* feat: rendererService 新增方法

* style: lint style

Co-authored-by: zhongwu <xingya.sxy@alibaba-inc.com>

lerna.json

@@ -14,7 +14,7 @@
       "message": "chore: publish"
     }
   },
-  "version": "2.5.55",
+  "version": "2.5.56",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "publishConfig": {

packages/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,8 +25,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.5.55",
+    "@antv/l7-core": "^2.5.56",
-    "@antv/l7-utils": "^2.5.55",
+    "@antv/l7-utils": "^2.5.56",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-core",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,7 +24,7 @@
   "license": "ISC",
   "dependencies": {
     "@antv/async-hook": "^2.1.0",
-    "@antv/l7-utils": "^2.5.55",
+    "@antv/l7-utils": "^2.5.56",
     "@babel/runtime": "^7.7.7",
     "ajv": "^6.10.2",
     "element-resize-event": "^3.0.3",

packages/core/src/services/renderer/IRendererService.ts

@@ -66,6 +66,7 @@ export interface IRendererService {
   getGLContext(): WebGLRenderingContext;
   viewport(size: { x: number; y: number; width: number; height: number }): void;
   readPixels(options: IReadPixelsOptions): Uint8Array;
+  setState(): void;
   setBaseState(): void;
   setCustomLayerDefaults(): void;
   setDirty(flag: boolean): void;

packages/l7/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,12 +25,12 @@
   "author": "antv",
   "license": "MIT",
   "dependencies": {
-    "@antv/l7-component": "^2.5.55",
+    "@antv/l7-component": "^2.5.56",
-    "@antv/l7-core": "^2.5.55",
+    "@antv/l7-core": "^2.5.56",
-    "@antv/l7-layers": "^2.5.55",
+    "@antv/l7-layers": "^2.5.56",
-    "@antv/l7-maps": "^2.5.55",
+    "@antv/l7-maps": "^2.5.56",
-    "@antv/l7-scene": "^2.5.55",
+    "@antv/l7-scene": "^2.5.56",
-    "@antv/l7-utils": "^2.5.55",
+    "@antv/l7-utils": "^2.5.56",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

packages/l7/src/version.ts

@@ -1,2 +1,2 @@
-const version = '2.5.55';
+const version = '2.5.56';
 export { version };

packages/layers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-layers",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "L7's collection of built-in layers",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,9 +24,9 @@
   "license": "ISC",
   "dependencies": {
     "@antv/geo-coord": "^1.0.8",
-    "@antv/l7-core": "^2.5.55",
+    "@antv/l7-core": "^2.5.56",
-    "@antv/l7-source": "^2.5.55",
+    "@antv/l7-source": "^2.5.56",
-    "@antv/l7-utils": "^2.5.55",
+    "@antv/l7-utils": "^2.5.56",
     "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.2.0",
     "@turf/meta": "^6.0.2",

packages/map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-map",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "l7 map",
   "keywords": [],
   "author": "thinkinggis <lzx199065@gmail.com>",
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/antvis/L7#readme",
   "dependencies": {
-    "@antv/l7-utils": "^2.5.55",
+    "@antv/l7-utils": "^2.5.56",
     "@babel/runtime": "^7.7.7",
     "@mapbox/point-geometry": "^0.1.0",
     "@mapbox/unitbezier": "^0.0.0",

packages/maps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-maps",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -27,9 +27,9 @@
   "license": "ISC",
   "dependencies": {
     "@amap/amap-jsapi-loader": "^0.0.3",
-    "@antv/l7-core": "^2.5.55",
+    "@antv/l7-core": "^2.5.56",
-    "@antv/l7-map": "^2.5.55",
+    "@antv/l7-map": "^2.5.56",
-    "@antv/l7-utils": "^2.5.55",
+    "@antv/l7-utils": "^2.5.56",
     "@babel/runtime": "^7.7.7",
     "@types/amap-js-api": "^1.4.6",
     "@types/mapbox-gl": "^1.11.2",

packages/mini/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-mini",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,11 +25,11 @@
   "author": "antv",
   "license": "MIT",
   "dependencies": {
-    "@antv/l7-core": "^2.5.55",
+    "@antv/l7-core": "^2.5.56",
-    "@antv/l7-layers": "^2.5.55",
+    "@antv/l7-layers": "^2.5.56",
-    "@antv/l7-maps": "^2.5.55",
+    "@antv/l7-maps": "^2.5.56",
-    "@antv/l7-scene": "^2.5.55",
+    "@antv/l7-scene": "^2.5.56",
-    "@antv/l7-utils": "^2.5.55",
+    "@antv/l7-utils": "^2.5.56",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

packages/renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-renderer",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,7 +26,7 @@
     "gl": "^4.4.0"
   },
   "dependencies": {
-    "@antv/l7-core": "^2.5.55",
+    "@antv/l7-core": "^2.5.56",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "l7regl": "^0.0.16",

packages/renderer/src/regl/index.ts

@@ -201,6 +201,27 @@ export default class ReglRendererService implements IRendererService {
     return this.gl._gl;
   };
 
+  // TODO: 临时方法
+  public setState() {
+    this.gl({
+      cull: {
+        enable: false,
+        face: 'back',
+      },
+      viewport: {
+        x: 0,
+        y: 0,
+        height: this.width,
+        width: this.height,
+      },
+      blend: {
+        enable: true,
+        equation: 'add',
+      },
+      framebuffer: null,
+    });
+  }
+
   public setBaseState() {
     this.gl({
       cull: {

packages/scene/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-scene",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,12 +23,12 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-component": "^2.5.55",
+    "@antv/l7-component": "^2.5.56",
-    "@antv/l7-core": "^2.5.55",
+    "@antv/l7-core": "^2.5.56",
-    "@antv/l7-layers": "^2.5.55",
+    "@antv/l7-layers": "^2.5.56",
-    "@antv/l7-maps": "^2.5.55",
+    "@antv/l7-maps": "^2.5.56",
-    "@antv/l7-renderer": "^2.5.55",
+    "@antv/l7-renderer": "^2.5.56",
-    "@antv/l7-utils": "^2.5.55",
+    "@antv/l7-utils": "^2.5.56",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",

packages/source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-source",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,8 +26,8 @@
   "license": "ISC",
   "dependencies": {
     "@antv/async-hook": "^2.1.0",
-    "@antv/l7-core": "^2.5.55",
+    "@antv/l7-core": "^2.5.56",
-    "@antv/l7-utils": "^2.5.55",
+    "@antv/l7-utils": "^2.5.56",
     "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",

packages/three/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-three",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "three for L7 ",
   "keywords": [
     "3D",
@@ -44,9 +44,9 @@
   },
   "homepage": "https://github.com/antvis/L7#readme",
   "dependencies": {
-    "@antv/l7-core": "^2.5.55",
+    "@antv/l7-core": "^2.5.56",
-    "@antv/l7-layers": "^2.5.55",
+    "@antv/l7-layers": "^2.5.56",
-    "@antv/l7-scene": "^2.5.55",
+    "@antv/l7-scene": "^2.5.56",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "reflect-metadata": "^0.1.13",

packages/three/src/core/baseLayer.ts

@@ -171,11 +171,12 @@ export default class ThreeJSLayer
 
     renderer.render(this.scene, camera);
 
-    this.rendererService.setBaseState();
+    this.rendererService.setState();
     this.animateMixer.forEach((mixer: AnimationMixer) => {
       mixer.update(this.getTime());
     });
-    this.rendererService.setBaseState();
+
+    this.rendererService.setState();
     this.rendererService.setDirty(true);
     return this;
   }

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-utils",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",

stories/3D_Model/Components/threejsmap.tsx

@@ -0,0 +1,187 @@
+// @ts-ignore
+import { Scene } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import { ThreeLayer, ThreeRender } from '@antv/l7-three';
+import * as React from 'react';
+// import { DirectionalLight, Scene as ThreeScene } from 'three';
+import * as THREE from 'three';
+
+export default class Threemap extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [120, 25],
+        pitch: 65,
+        rotation: 30,
+        zoom: 8,
+      }),
+    });
+    this.scene = scene;
+    scene.registerRenderService(ThreeRender);
+    scene.on('loaded', () => {
+      const threeJSLayer = new ThreeLayer({
+        enableMultiPassRenderer: false,
+        // @ts-ignore
+        onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
+          threeScene.add(new THREE.AmbientLight(0xffffff));
+          const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
+          sunlight.position.set(0, 80000000, 100000000);
+          sunlight.matrixWorldNeedsUpdate = true;
+          threeScene.add(sunlight);
+
+          let points = [
+            [120.44353624, 22.44126139],
+            [120.64050836, 22.24136664],
+            [120.70155111, 21.92708306],
+            [120.87288601, 21.89738661],
+            [120.91492974, 22.30271186],
+            [121.03327772, 22.65070394],
+            [121.32468397, 22.94568359],
+            [121.47954183, 23.3223055],
+            [121.64384793, 24.09772976],
+            [121.80915717, 24.33907227],
+            [121.89250353, 24.6179267],
+            [121.84504259, 24.83625488],
+            [122.01220106, 25.00145101],
+            [121.91709391, 25.13789361],
+            [121.62302734, 25.29467556],
+            [121.02468424, 25.04048774],
+            [120.82376736, 24.68830973],
+            [120.68867757, 24.60069417],
+            [120.24576172, 23.84053168],
+            [120.10276177, 23.70096951],
+            [120.10784668, 23.34126356],
+            [120.02320774, 23.10765544],
+            [120.13473334, 22.99400635],
+            [120.29720052, 22.53133111],
+            [120.44353624, 22.44126139],
+          ];
+
+          // @ts-ignore
+          let lnglatPoints = points.map((p) => layer.lnglatToCoord(p));
+          // console.log(lnglatPoints)
+
+          const shape = new THREE.Shape();
+          // shape.moveTo( 0,0 );
+          // shape.lineTo( 0, 100000 );
+          // shape.lineTo( 100000, 10000 );
+          // shape.lineTo( 10000, 0 );
+          // shape.lineTo( 0, 0 );
+
+          shape.moveTo(lnglatPoints[0][0], lnglatPoints[0][1]);
+          for (let i = 1; i < lnglatPoints.length; i++) {
+            shape.lineTo(lnglatPoints[i][0], lnglatPoints[i][1]);
+          }
+          shape.lineTo(lnglatPoints[0][0], lnglatPoints[0][1]);
+
+          const h = 100000;
+          const extrudeSettings = {
+            steps: 2,
+            depth: h,
+            bevelEnabled: true,
+            bevelThickness: 1,
+            bevelSize: 1,
+            bevelOffset: 0,
+            bevelSegments: 1,
+          };
+          const v0 = `
+      
+          void main() {
+         
+              gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          }`;
+
+          const f0 = `
+          void main() {
+            gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+          }`;
+
+          const v = `
+          varying vec2 vUv;
+          varying float h;
+          void main() {
+              vUv = uv;
+              h = position.z;
+              gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          }`;
+
+          const f = `
+          varying vec2 vUv;
+          // uniform vec3 color;
+          varying float h;
+          void main() {
+            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0 - h/${h}.0);
+          }`;
+
+          const material = new THREE.ShaderMaterial({
+            transparent: true,
+            opacity: 0,
+            depthWrite: false,
+            vertexShader: v0,
+            fragmentShader: f0,
+          });
+          const shader_material = new THREE.ShaderMaterial({
+            uniforms: {
+              //   texture: {
+              //     // 加载纹理贴图返回Texture对象作为texture的值
+              //     // Texture对象对应着色器中sampler2D数据类型变量
+              //     value: new THREE.TextureLoader().load('./Earth.png')
+              // },
+            },
+
+            depthTest: false,
+            // depthWrite: false,
+            // blending: '',
+            transparent: true,
+            vertexShader: v,
+            fragmentShader: f,
+            side: THREE.DoubleSide, // 双面可见
+          });
+
+          const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+          const mesh = new THREE.Mesh(geometry, [material, shader_material]);
+
+          threeScene.add(mesh);
+        },
+      })
+        .source({
+          type: 'FeatureCollection',
+          features: [
+            {
+              type: 'Feature',
+              properties: {},
+              geometry: {
+                type: 'Point',
+                coordinates: [111.4453125, 32.84267363195431],
+              },
+            },
+          ],
+        })
+        .animate(true);
+      scene.addLayer(threeJSLayer);
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/3D_Model/model.stories.tsx

@@ -4,7 +4,7 @@ import AMapModel from './Components/amap_three';
 import AMap2Model from './Components/amap2_three';
 import MapboxModel from './Components/mapbox_three';
 import ThreeRender from './Components/threeRender';
-
+import Threemap from './Components/threejsmap';
 import Aspace from './Components/aspace';
 
 storiesOf('3D 模型', module)
@@ -12,4 +12,5 @@ storiesOf('3D 模型', module)
   .add('高德模型1.x', () => <AMapModel />, {})
   .add('高德模型2.x', () => <AMap2Model />, {})
   .add('Mapbox模型', () => <MapboxModel />, {})
-  .add('Aspace', () => <Aspace />, {});
+  .add('Aspace', () => <Aspace />, {})
+  .add('Threemap', () => <Threemap />, {});