fix(map): use P20 offset coordinates

fix #94

packages/layers/src/heatmap/shaders/grid_vert.glsl

@@ -12,7 +12,6 @@ uniform mat4 u_ModelMatrix;
 varying vec4 v_color;
 
 #pragma include "projection"
-#pragma include "project"
 #pragma include "picking"
 
 void main() {
@@ -20,7 +19,6 @@ void main() {
 
   mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
   vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;
-  // vec2 lnglat = unProjectFlat(a_Pos.xy);
   vec4 project_pos = project_position(vec4(a_Pos.xy + offset, 0, 1.0));
   gl_Position = project_common_position_to_clipspace(project_pos);
 

packages/maps/src/amap/Viewport.ts

@@ -46,6 +46,8 @@ export default class Viewport implements IViewport {
     );
     mat4.lookAt(this.viewMatrix, eye, vec3.fromValues(0, 0, 0), up);
 
+    this.viewUncenteredMatrix = mat4.clone(this.viewMatrix);
+
     // 移动相机位置
     mat4.translate(
       this.viewMatrix,

packages/maps/src/amap/index.ts

@@ -317,15 +317,13 @@ export default class AMapService
       });
 
       // set coordinate system
-      // if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD) {
-      //   // TODO:偏移坐标系高德地图不支持 pitch bear 同步
-      //   this.coordinateSystemService.setCoordinateSystem(
-      //     CoordinateSystem.P20_OFFSET,
-      //   );
-      // } else {
-      //   this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.P20);
-      // }
-      this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.P20);
+      if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD) {
+        this.coordinateSystemService.setCoordinateSystem(
+          CoordinateSystem.P20_OFFSET,
+        );
+      } else {
+        this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.P20);
+      }
       this.cameraChangedCallback(this.viewport);
     }
   };

stories/Layers/components/Point.tsx

@@ -1,5 +1,5 @@
 import { PointLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
+import { AMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 // @ts-ignore
 import data from '../data/data.json';
@@ -11,51 +11,38 @@ export default class Point3D extends React.Component {
     this.scene.destroy();
   }
 
-  public componentDidMount() {
+  public async componentDidMount() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+    );
+    const pointsData = await response.json();
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new AMap({
         center: [120.19382669582967, 30.258134],
         pitch: 0,
-        style: 'mapbox://styles/mapbox/streets-v9',
-        zoom: 1,
+        style: 'light',
+        zoom: 3,
       }),
+      // map: new Mapbox({
+      //   center: [120.19382669582967, 30.258134],
+      //   pitch: 0,
+      //   style: 'mapbox://styles/mapbox/streets-v9',
+      //   zoom: 1,
+      // }),
     });
-    const pointLayer = new PointLayer({
-      enablePicking: true,
-      enableHighlight: true,
-      onHover: (pickedFeature: any) => {
-        // tslint:disable-next-line:no-console
-        console.log('Scene4', pickedFeature.feature.name);
-      },
-    });
-    pointLayer
-      .source(data)
-      .color('name', [
-        '#FFF5B8',
-        '#FFDC7D',
-        '#FFAB5C',
-        '#F27049',
-        '#D42F31',
-        '#730D1C',
-      ])
-      .shape('subregion', [
-        'circle',
-        'triangle',
-        'square',
-        'pentagon',
-        'hexagon',
-        'octogon',
-        'hexagram',
-        'rhombus',
-        'vesica',
-      ])
-      .size('scalerank', [5, 10])
+    const pointLayer = new PointLayer({})
+      .source(pointsData)
+      .shape('circle')
+      .size('mag', [1, 25])
+      .color('mag', (mag) => {
+        return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
+      })
       .style({
-        opacity: 1.0,
+        opacity: 0.3,
+        strokeWidth: 1,
       });
     scene.addLayer(pointLayer);
-    scene.render();
     this.scene = scene;
   }