Merge branch 'master' of https://github.com/antvis/L7

.gitignore

@@ -81,3 +81,4 @@ packages/l7/package_bak.json
 stories/Test
 packages/draw/node_modules/@turf
 packages/district/src/data
+yarn.lock

README.md

@@ -1,5 +1,6 @@
 # L7
 
+.
 [![travis ci](https://travis-ci.com/antvis/L7.svg?branch=master)](https://travis-ci.com/antvis/L7) [![](https://flat.badgen.net/npm/v/@antv/l7?icon=npm)](https://www.npmjs.com/package/@antv/l7) ![最近提交](https://badgen.net/github/last-commit/antvis/L7)
 
 Large-scale WebGL-powered Geospatial data visualization analysis framework.

build/rollup.config.js

@@ -72,6 +72,7 @@ module.exports = [
       commonjs({
         namedExports: {
           eventemitter3: [ 'EventEmitter' ],
+          inversify: ['inject','injectable','postConstruct','Container','decorate','interfaces'],
           // @see https://github.com/rollup/rollup-plugin-commonjs/issues/266
           lodash: [
             'isNil',
@@ -84,7 +85,10 @@ module.exports = [
             'isNumber',
             'merge'
           ]
-        }
+        },
+        dynamicRequireTargets: [
+          'node_modules/inversify/lib/syntax/binding_{on,when}_syntax.js',
+        ],
       }),
       babel({
         extensions: [ '.js', '.ts' ]

docs/tutorial/quickstart.en.md

@@ -55,7 +55,7 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     pitch: 35.210526315789465,
-    style: 'dark',
+    mapStyle: 'dark',
     center: [ 104.288144, 31.239692 ],
     zoom: 4.4
   })

docs/tutorial/quickstart.zh.md

@@ -61,7 +61,7 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     pitch: 35.210526315789465,
-    style: 'dark',
+    mapStyle: 'dark',
     center: [ 104.288144, 31.239692 ],
     zoom: 4.4
   })

lerna.json

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

package.json

@@ -188,7 +188,9 @@
     }
   },
   "resolutions": {
-    "d3-array": "1"
+    "d3-array": "1",
+    "monaco-editor-webpack-plugin": "2.0.0",
+    "monaco-editor": "0.21.0"
   },
   "tnpm": {
     "mode": "yarn"

packages/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.3.9",
+  "version": "2.3.10",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,8 +25,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "2.3.9",
+    "@antv/l7-core": "^2.3.10",
-    "@antv/l7-utils": "2.3.9",
+    "@antv/l7-utils": "^2.3.10",
     "@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.3.9",
+  "version": "2.3.10",
   "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.3.9",
+    "@antv/l7-utils": "^2.3.10",
     "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",

packages/core/src/shaders/project.glsl

@@ -38,3 +38,17 @@ float pixelDistance(vec2 from, vec2 to) {
  vec2 b1 = ProjectFlat(to);
  return distance(a1, b1);
 }
+
+vec2 customProject(vec2 lnglat) {
+  float t = lnglat.x;
+  float e = lnglat.y;
+  float Sm = 180.0 / PI;
+  float Tm = 6378137.0;
+  float Rm = PI / 180.0;
+  float r = 85.0511287798;
+  e = max(min(r, e), -r);
+  t *= Rm;
+  e *= Rm;
+  e = log(tan(PI / 4.0 + e / 2.0));
+  return vec2(t * Tm, e * Tm);
+}

packages/core/src/shaders/projection.glsl

@@ -42,13 +42,7 @@ vec2 project_mercator(vec2 lnglat) {
 }
 
 float project_scale(float meters) {
-  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { 
+  return meters * u_PixelsPerMeter.z;
-    // 因为高德2.0和1.x的相机控制方向相反，而u_PixelsPerMeter的计算与此相关（计算结果也相反）
-    // 可通过 shaderUniformPlugin -> CoordinateSystemService -> project 的顺序查看区别
-    return meters * u_PixelsPerMeter.z * -1.0;
-  } else {
-    return meters * u_PixelsPerMeter.z;
-  }
 }
 
 
@@ -117,6 +111,7 @@ vec4 project_position(vec4 position) {
     //   (position.xy * WORLD_SCALE * u_ZoomScale) * vec2(1., -1.), 
     //   project_scale(position.z), 
     //   position.w);
+
      return vec4(
       position.xy, 
       project_scale(position.z), 

packages/l7/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "2.3.9",
+  "version": "2.3.10",
   "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.3.9",
+    "@antv/l7-component": "^2.3.10",
-    "@antv/l7-core": "2.3.9",
+    "@antv/l7-core": "^2.3.10",
-    "@antv/l7-layers": "2.3.9",
+    "@antv/l7-layers": "^2.3.10",
-    "@antv/l7-maps": "2.3.9",
+    "@antv/l7-maps": "^2.3.10",
-    "@antv/l7-scene": "2.3.9",
+    "@antv/l7-scene": "^2.3.10",
-    "@antv/l7-utils": "2.3.9",
+    "@antv/l7-utils": "^2.3.10",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",

packages/l7/src/version.ts

@@ -1,2 +1,2 @@
-const version = '2.3.7';
+const version = '2.3.9';
 export { version };

packages/layers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-layers",
-  "version": "2.3.9",
+  "version": "2.3.10",
   "description": "L7's collection of built-in layers",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,10 +24,10 @@
   "license": "ISC",
   "dependencies": {
     "@antv/async-hook": "^2.1.0",
-    "@antv/l7-core": "2.3.9",
+    "@antv/l7-core": "^2.3.10",
-    "@antv/l7-layers": "2.3.9",
+    "@antv/l7-layers": "^2.3.10",
-    "@antv/l7-source": "2.3.9",
+    "@antv/l7-source": "^2.3.10",
-    "@antv/l7-utils": "2.3.9",
+    "@antv/l7-utils": "^2.3.10",
     "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.2.0",
     "@turf/meta": "^6.0.2",

packages/layers/src/citybuliding/shaders/build_vert.glsl

@@ -14,6 +14,7 @@ attribute vec2 a_Uv;
 varying vec2 v_texCoord;
 
 varying vec4 v_Color;
+uniform mat4 u_Mvp;
 
 #pragma include "projection"
 #pragma include "light"
@@ -23,7 +24,12 @@ void main() {
   vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
   vec4 project_pos = project_position(pos);
    v_texCoord = a_Uv;
-  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  }
 
   float lightWeight = calc_lighting(pos);
   // v_Color = a_Color;

packages/layers/src/core/triangulation.ts

@@ -39,6 +39,7 @@ export function PointFillTriangulation(feature: IEncodeFeature) {
  */
 export function PointExtrudeTriangulation(feature: IEncodeFeature) {
   const { shape } = feature;
+  // console.log('PointExtrudeTriangulation', feature)
   const { positions, index, normals } = getGeometry(
     shape as ShapeType3D,
     false,
@@ -244,6 +245,11 @@ export function LineArcTriangulation(feature: IEncodeFeature) {
   };
 }
 
+/**
+ * 构建热力图密度图的顶点
+ * @param feature 
+ * @returns 
+ */
 export function HeatmapTriangulation(feature: IEncodeFeature) {
   const coordinates = feature.coordinates as number[];
   if (coordinates.length === 2) {
@@ -286,6 +292,7 @@ function getGeometry(shape: ShapeType3D, needFlat = false): IExtrudeGeomety {
     : geometryShape.cylinder();
   const geometry = extrude_PolygonNormal([path], needFlat);
   GeometryCache[shape] = geometry;
+  // console.log('geometry', geometry)
   return geometry;
 }
 

packages/layers/src/heatmap/models/grid.ts

@@ -63,7 +63,8 @@ export default class GridModel extends BaseModel {
         },
         size: 3,
         update: (feature: IEncodeFeature, featureIdx: number) => {
-          const coordinates = feature.coordinates as number[];
+          // const coordinates = feature.coordinates as number[];
+          const coordinates = (feature.version==='GAODE2.x'?feature.originCoordinates:feature.coordinates) as number[];
           return [coordinates[0], coordinates[1], 0];
         },
       },

packages/layers/src/heatmap/models/grid3d.ts

@@ -5,11 +5,11 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
+import { aProjectFlat, Satistics, unProjectFlat } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { PointExtrudeTriangulation } from '../../core/triangulation';
 import heatmapGrid3dVert from '../shaders/hexagon_3d_vert.glsl';
 import heatmapGridFrag from '../shaders/hexagon_frag.glsl';
-
 interface IHeatMapLayerStyleOptions {
   opacity: number;
   coverage: number;
@@ -112,7 +112,9 @@ export default class Grid3DModel extends BaseModel {
         },
         size: 3,
         update: (feature: IEncodeFeature, featureIdx: number) => {
-          const coordinates = feature.coordinates as number[];
+          const coordinates = (feature.version==='GAODE2.x'?feature.originCoordinates:feature.coordinates) as number[];
+          // const coordinates = feature.coordinates as number[];
+          // const coordinates = feature.originCoordinates as number[];
           return [coordinates[0], coordinates[1], 0];
         },
       },

packages/layers/src/heatmap/models/heatmap.ts

@@ -5,7 +5,7 @@ import {
   IFramebuffer,
   IModel,
   IModelUniform,
-  ITexture2D,
+  ITexture2D
 } from '@antv/l7-core';
 import { generateColorRamp, IColorRamp } from '@antv/l7-utils';
 import { mat4 } from 'gl-matrix';
@@ -18,6 +18,7 @@ import heatmapFrag from '../shaders/heatmap_framebuffer_frag.glsl';
 import heatmapVert from '../shaders/heatmap_framebuffer_vert.glsl';
 import heatmapColorVert from '../shaders/heatmap_vert.glsl';
 import { heatMap3DTriangulation } from '../triangulation';
+import { inject, injectable } from 'inversify';
 interface IHeatMapLayerStyleOptions {
   opacity: number;
   intensity: number;
@@ -25,8 +26,9 @@ interface IHeatMapLayerStyleOptions {
   angle: number;
   rampColors: IColorRamp;
 }
-
+@injectable()
 export default class HeatMapModel extends BaseModel {
+
   protected texture: ITexture2D;
   protected colorTexture: ITexture2D;
   protected heatmapFramerBuffer: IFramebuffer;

packages/layers/src/heatmap/models/hexagon.ts

@@ -65,7 +65,10 @@ export default class HexagonModel extends BaseModel {
         },
         size: 3,
         update: (feature: IEncodeFeature, featureIdx: number) => {
+          // const coordinates = (feature.verison==='GAODE2.x'?feature.originoordinates:feature.coordinates) as number[];
+        
           const coordinates = feature.coordinates as number[];
+          // const coordinates = feature.originCoordinates as number[];
           return [coordinates[0], coordinates[1], 0];
         },
       },

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

@@ -9,8 +9,11 @@ uniform vec2 u_radius;
 uniform float u_coverage: 0.9;
 uniform float u_angle: 0;
 uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
 varying vec4 v_color;
 
+uniform vec2 u_SceneCenterMKT;
+
 #pragma include "projection"
 #pragma include "project"
 #pragma include "picking"
@@ -20,9 +23,20 @@ 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 + offset);
+  // vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
-  vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));
+  // vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));
-  gl_Position = project_common_position_to_clipspace(project_pos);
+  // gl_Position = project_common_position_to_clipspace(project_pos);
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
+    vec2 customLnglat = customProject(lnglat) - u_SceneCenterMKT; // 将经纬度转换为高德2.0需要的平面坐标
+    vec4 project_pos = project_position(vec4(customLnglat, 0, 1.0));
+    gl_Position = u_Mvp * (project_pos);
+  } else {
+     vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
+    vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));
+    gl_Position = project_common_position_to_clipspace(project_pos);
+  }
 
   setPickingColor(a_PickingColor);
 }

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

@@ -11,5 +11,4 @@ void main(){
     gl_FragColor = color;
     // gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;
      gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;
-
 }

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

@@ -8,6 +8,7 @@ uniform mat4 u_InverseViewProjectionMatrix;
 uniform mat4 u_ViewProjectionMatrixUncentered;
 varying float v_intensity;
 
+
 vec2 toBezier(float t, vec2 P0, vec2 P1, vec2 P2, vec2 P3) {
     float t2 = t * t;
     float one_minus_t = 1.0 - t;
@@ -21,26 +22,25 @@ vec2 toBezier(float t, vec4 p){
 void main() {
   v_texCoord = a_Uv;
 
-  vec2 pos =(a_Uv * vec2(2.0) - vec2(1.0));
+  vec2 pos = a_Uv * vec2(2.0) - vec2(1.0); // 将原本 0 -> 1 的 uv 转换为 -1 -> 1 的标准坐标空间（NDC）
 
+  vec4 p1 = vec4(pos, 0.0, 1.0); // x/y 平面上的点（z == 0）可以认为是三维上的点被投影到平面后的点
+	vec4 p2 = vec4(pos, 1.0, 1.0); // 平行于x/y平面、z==1 的平面上的点
 
-  vec4 p1 = vec4(pos, 0.0, 1.0);
+	vec4 inverseP1 = u_InverseViewProjectionMatrix * p1; // 根据视图投影矩阵的逆矩阵平面上的反算出三维空间中的点（p1平面上的点）
-	vec4 p2 = vec4(pos, 1.0, 1.0);
-
-	vec4 inverseP1 = u_InverseViewProjectionMatrix * p1;
 	vec4 inverseP2 = u_InverseViewProjectionMatrix * p2;
 
-  inverseP1 = inverseP1 / inverseP1.w;
+  inverseP1 = inverseP1 / inverseP1.w; // 归一化操作（归一化后为世界坐标）
 	inverseP2 = inverseP2 / inverseP2.w;
 
-	float zPos = (0.0 - inverseP1.z) / (inverseP2.z - inverseP1.z);
+	float zPos = (0.0 - inverseP1.z) / (inverseP2.z - inverseP1.z); // ??
 	vec4 position = inverseP1 + zPos * (inverseP2 - inverseP1);
 
-  vec4 b= vec4(0.5000, 0, 1, 0.5000);
+  vec4 b= vec4(0.5000, 0.0, 1.0, 0.5000);
   float fh;
 
   v_intensity = texture2D(u_texture, v_texCoord).r;
   fh = toBezier(v_intensity, b).y;
   gl_Position = u_ViewProjectionMatrixUncentered * vec4(position.xy, fh * project_pixel(50.), 1.0);
-
+ 
 }

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

@@ -7,6 +7,7 @@ uniform float u_radius;
 varying vec2 v_extrude;
 varying float v_weight;
 uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
 
 #define GAUSS_COEF  0.3989422804014327
 
@@ -24,5 +25,11 @@ void main(){
     vec2 offset = project_pixel(v_extrude * u_radius);
     vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
 
-    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
+    // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
+
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+        gl_Position = u_Mvp * (vec4(project_pos.xy + offset, 0.0, 1.0));
+    } else {
+        gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
+    }
 }

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

@@ -11,21 +11,54 @@ uniform vec2 u_radius;
 uniform float u_coverage: 0.9;
 uniform float u_angle: 0;
 uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
 varying vec4 v_color;
 
+uniform vec2 u_SceneCenterMKT;
+
 #pragma include "projection"
 #pragma include "project"
 #pragma include "light"
 #pragma include "picking"
 
+
 void main() {
   mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
   vec2 offset =(vec2(a_Position.xy * u_radius * rotationMatrix * u_coverage));
-  vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
+  // vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // 实际的经纬度
-  vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));
+  // vec2 lnglat = (a_Pos.xy + offset); 
-  float lightWeight = calc_lighting(project_pos);
+  // vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));
-  v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);
+  // gl_Position = project_common_position_to_clipspace(project_pos);
+  // float lightWeight = calc_lighting(project_pos);
+  // v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    // vec2 lnglat = (a_Pos.xy + offset); 
+    // vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));
+
+    // float lightWeight = calc_lighting(project_pos);
+    // v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);
+  
+    // gl_Position = u_Mvp * vec4(lnglat , a_Position.z * a_Size, 1.0);
+    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // 经纬度
+    vec2 customLnglat = customProject(lnglat) - u_SceneCenterMKT; // 将经纬度转换为高德2.0需要的平面坐标
+    vec4 project_pos = project_position(vec4(customLnglat, a_Position.z * a_Size, 1.0));
+
+    float lightWeight = calc_lighting(project_pos);
+    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);
+  
+    gl_Position = u_Mvp * vec4(customLnglat , a_Position.z * a_Size, 1.0);
+  } else {
+    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // 实际的经纬度
+    vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));
+    
+    float lightWeight = calc_lighting(project_pos);
+    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);
+    
+    gl_Position = project_common_position_to_clipspace(project_pos);
+  }
+
+
 
-  gl_Position = project_common_position_to_clipspace(project_pos);
   setPickingColor(a_PickingColor);
 }

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

@@ -9,6 +9,7 @@ uniform vec2 u_radius;
 uniform float u_coverage: 0.9;
 uniform float u_angle: 0;
 uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
 varying vec4 v_color;
 
 #pragma include "projection"
@@ -20,8 +21,15 @@ void main() {
     
   mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
   vec2 offset =(vec2(a_Position.xy * u_radius * rotationMatrix * u_coverage));
-  vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
+  // vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
+  vec2 lnglat = (a_Pos.xy + offset);
   vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));
-  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0., 1.0));
+  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0., 1.0));
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    // gl_Position = u_Mvp * (vec4(project_pos.xy, 0., 1.0));
+    gl_Position = u_Mvp * (vec4(a_Pos.xy + offset, 0., 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0., 1.0));
+  }
   setPickingColor(a_PickingColor);
 }

packages/layers/src/image/shaders/image_vert.glsl

@@ -1,5 +1,6 @@
 precision highp float;
 uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
 attribute vec3 a_Position;
 attribute vec2 a_Uv;
 varying vec2 v_texCoord;
@@ -7,5 +8,10 @@ varying vec2 v_texCoord;
 void main() {
    v_texCoord = a_Uv;
    vec4 project_pos = project_position(vec4(a_Position, 1.0));
-   gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));
+   } else {
+      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+   }
 }

packages/layers/src/line/shaders/line_arc_3d_vert.glsl

@@ -7,6 +7,7 @@ attribute vec4 a_Color;
 attribute float a_Size;
 
 uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
 uniform float segmentNumber;
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 varying vec4 v_color;
@@ -85,6 +86,11 @@ void main() {
   vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y);
   v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
 
-  gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0));
+  // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0));
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(curr.xy + project_pixel(offset), curr.z, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0));
+  }
   setPickingColor(a_PickingColor);
 }

packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl

@@ -6,6 +6,7 @@ attribute vec3 a_Position;
 attribute vec4 a_Instance;
 attribute float a_Size;
 uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
 uniform float segmentNumber;
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 varying vec4 v_color;
@@ -68,21 +69,44 @@ float getAngularDist (vec2 source, vec2 target) {
     sin_half_delta.x * sin_half_delta.x;
   return 2.0 * atan(sqrt(a), sqrt(1.0 - a));
 }
+
+vec2 midPoint(vec2 source, vec2 target) {
+  vec2 center = target - source;
+  float r = length(center);
+  float theta = atan(center.y, center.x);
+  float thetaOffset = 0.314;
+  float r2 = r / 2.0 / cos(thetaOffset);
+  float theta2 = theta + thetaOffset;
+  vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y);
+  return mid;
+}
+float bezier3(vec3 arr, float t) {
+  float ut = 1. - t;
+  return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t;
+}
+
 vec2 interpolate (vec2 source, vec2 target, float angularDist, float t) {
   // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation
-  if(abs(angularDist - PI) < 0.001) {
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    return (1.0 - t) * source + t * target;
+    vec2 mid = midPoint(source, target);
+    vec3 x = vec3(source.x, mid.x, target.x);
+    vec3 y = vec3(source.y, mid.y, target.y);
+    return vec2(bezier3(x ,t), bezier3(y,t));
+  }else {
+    if(abs(angularDist - PI) < 0.001) {
+      return (1.0 - t) * source + t * target;
+    }
+    float a = sin((1.0 - t) * angularDist) / sin(angularDist);
+    float b = sin(t * angularDist) / sin(angularDist);
+    vec2 sin_source = sin(source);
+    vec2 cos_source = cos(source);
+    vec2 sin_target = sin(target);
+    vec2 cos_target = cos(target);
+    float x = a * cos_source.y * cos_source.x + b * cos_target.y * cos_target.x;
+    float y = a * cos_source.y * sin_source.x + b * cos_target.y * sin_target.x;
+    float z = a * sin_source.y + b * sin_target.y;
+    return vec2(atan(y, x), atan(z, sqrt(x * x + y * y)));
   }
-  float a = sin((1.0 - t) * angularDist) / sin(angularDist);
-  float b = sin(t * angularDist) / sin(angularDist);
-  vec2 sin_source = sin(source);
-  vec2 cos_source = cos(source);
-  vec2 sin_target = sin(target);
-  vec2 cos_target = cos(target);
-  float x = a * cos_source.y * cos_source.x + b * cos_target.y * cos_target.x;
-  float y = a * cos_source.y * sin_source.x + b * cos_target.y * sin_target.x;
-  float z = a * sin_source.y + b * sin_target.y;
-  return vec2(atan(y, x), atan(z, sqrt(x * x + y * y)));
 }
 
 void main() {
@@ -108,7 +132,13 @@ void main() {
   v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
   vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
   //  vec4 project_pos = project_position(vec4(curr.xy, 0, 1.0));
-  gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, curr.z, 1.0));
+  // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, curr.z, 1.0));
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(curr.xy + offset, curr.z, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, curr.z, 1.0));
+  }
   setPickingColor(a_PickingColor);
 }
 

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -11,7 +11,7 @@ import {
   IStyleAttributeService,
   TYPES,
 } from '@antv/l7-core';
-import { rgb2arr } from '@antv/l7-utils';
+import { rgb2arr, unProjectFlat } from '@antv/l7-utils';
 import { inject, injectable } from 'inversify';
 import { cloneDeep } from 'lodash';
 
@@ -131,12 +131,16 @@ export default class DataMappingPlugin implements ILayerPlugin {
       return encodeRecord;
     }) as IEncodeFeature[];
 
-    // console.log('mappedData', mappedData)
+    // console.log('mappedData', unProjectFlat(mappedData[0].coordinates as [number, number]))
+    // @ts-ignore
+    // console.log(this.mapService.getCustomCoordCenter())
     // 根据地图的类型判断是否需要对点位数据进行处理
     if (this.mapService.version === 'GAODE2.x') {
       // 若是高德2.0则需要对坐标进行相对偏移
-
+      
       if (typeof mappedData[0].coordinates[0] === 'number') {
+    
+        // console.log('111', mappedData)
         // 单个的点数据
         // @ts-ignore
         mappedData.map((d) => {
@@ -145,8 +149,10 @@ export default class DataMappingPlugin implements ILayerPlugin {
           d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据）
           // @ts-ignore
           d.coordinates = this.mapService.lngLatToCoord(d.coordinates);
+          // d.coordinates = this.mapService.lngLatToCoord(unProjectFlat(d.coordinates));
         });
       } else {
+        // console.log('2')
         // 连续的线、面数据
         // @ts-ignore
         mappedData.map((d) => {

packages/layers/src/plugins/DataSourcePlugin.ts

@@ -20,12 +20,12 @@ export default class DataSourcePlugin implements ILayerPlugin {
       this.updateClusterData(layer);
     });
 
-    // 检测数据不否需要更新
+    // 检测数据是否需要更新
     layer.hooks.beforeRenderData.tap('DataSourcePlugin', () => {
-      const neeUpdate1 = this.updateClusterData(layer);
+      const neeUpdateCluster = this.updateClusterData(layer);
-      const neeUpdate2 = layer.dataState.dataSourceNeedUpdate;
+      const dataSourceNeedUpdate = layer.dataState.dataSourceNeedUpdate;
       layer.dataState.dataSourceNeedUpdate = false;
-      return neeUpdate1 || neeUpdate2;
+      return neeUpdateCluster || dataSourceNeedUpdate;
     });
   }
 
@@ -34,7 +34,13 @@ export default class DataSourcePlugin implements ILayerPlugin {
     const cluster = source.cluster;
     const { zoom = 0, maxZoom = 16 } = source.clusterOptions;
     const newZoom = this.mapService.getZoom() - 1;
-    if (cluster && Math.abs(zoom - newZoom) > 1 && maxZoom > zoom) {
+    const dataSourceNeedUpdate = layer.dataState.dataSourceNeedUpdate;
+    // 如果 dataSource 有更新，跳过 zoom 的判断，直接更新一次
+    if (
+      cluster &&
+      (dataSourceNeedUpdate || Math.abs(zoom - newZoom) > 1) &&
+      maxZoom > zoom
+    ) {
       source.updateClusterData(Math.floor(newZoom));
       return true;
     }

packages/layers/src/plugins/ShaderUniformPlugin.ts

@@ -37,7 +37,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
     const version = this.mapService.version;
 
     let mvp = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; // default matrix (for gaode2.x)
-    // let sceneCenterMKT = [0, 0]
+    let sceneCenterMKT = [0, 0]
     layer.hooks.beforeRender.tap('ShaderUniformPlugin', () => {
       // 重新计算坐标系参数
       this.coordinateSystemService.refresh();
@@ -47,7 +47,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
         mvp = this.mapService.map.customCoords.getMVPMatrix();
         // mvp = amapCustomCoords.getMVPMatrix()
         // @ts-ignore
-        // sceneCenterMKT = this.mapService.getCustomCoordCenter()
+        sceneCenterMKT = this.mapService.getCustomCoordCenter()
       }
 
       const { width, height } = this.rendererService.getViewportSize();
@@ -70,7 +70,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
           [CoordinateUniform.PixelsPerMeter]: this.coordinateSystemService.getPixelsPerMeter(),
           // 坐标系是高德2.0的时候单独计算
           [CoordinateUniform.Mvp]: mvp,
-          // u_SceneCenterMKT: sceneCenterMKT,
+          u_SceneCenterMKT: sceneCenterMKT,
           // 其他参数，例如视口大小、DPR 等
           u_ViewportSize: [width, height],
           u_DevicePixelRatio: window.devicePixelRatio,

packages/layers/src/point/shaders/fill_vert.glsl

@@ -44,5 +44,7 @@ void main() {
     gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
   }
 
+  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
+
   setPickingColor(a_PickingColor);
 }

packages/layers/src/raster/raster.ts

@@ -18,7 +18,7 @@ import BaseLayer from '../core/BaseLayer';
 import { RasterTriangulation } from './buffers/triangulation';
 import rasterFrag from './shaders/raster_frag.glsl';
 import rasterVert from './shaders/raster_vert.glsl';
-interface IRasterLayerStyleOptions {
+interface IRasterLayerStyleOptions { 
   opacity: number;
   min: number;
   max: number;

packages/layers/src/raster/shaders/raster_2d_vert.glsl

@@ -1,5 +1,6 @@
 precision highp float;
 uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
 attribute vec3 a_Position;
 attribute vec2 a_Uv;
 varying vec2 v_texCoord;
@@ -8,4 +9,10 @@ void main() {
    v_texCoord = a_Uv;
    vec4 project_pos = project_position(vec4(a_Position, 1.0));
    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+
+   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));
+   } else {
+      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+   }
 }

packages/layers/src/raster/shaders/raster_vert.glsl

@@ -1,6 +1,7 @@
 precision highp float;
 attribute vec3 a_Position;
 uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
 uniform vec4 u_extent;
 uniform sampler2D u_texture;
 uniform sampler2D u_colorTexture;
@@ -32,6 +33,12 @@ void main() {
 
   //  vec2 range = u_extent.zw - u_extent.xy;
   //  vec4 project_pos = project_position(vec4(pos, 0, 1.0));
-   gl_Position = project_common_position_to_clipspace(vec4(pos.xy, project_scale(value) * u_heightRatio, 1.0));
+  //  gl_Position = project_common_position_to_clipspace(vec4(pos.xy, project_scale(value) * u_heightRatio, 1.0));
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(pos.xy, project_scale(value) * u_heightRatio, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(pos.xy, project_scale(value) * u_heightRatio, 1.0));
+  }
 
 }

packages/map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-map",
-  "version": "2.3.9",
+  "version": "2.3.10",
   "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.3.9",
+    "@antv/l7-utils": "^2.3.10",
     "@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.3.9",
+  "version": "2.3.10",
   "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.3.9",
+    "@antv/l7-core": "^2.3.10",
-    "@antv/l7-map": "2.3.9",
+    "@antv/l7-map": "^2.3.10",
-    "@antv/l7-utils": "2.3.9",
+    "@antv/l7-utils": "^2.3.10",
     "@babel/runtime": "^7.7.7",
     "@types/amap-js-api": "^1.4.6",
     "@types/mapbox-gl": "^1.11.2",

packages/maps/src/amap/Viewport.ts

@@ -33,7 +33,6 @@ export default class Viewport implements IViewport {
 
     // 计算透视投影矩阵 projectionMatrix
     mat4.perspective(this.projectionMatrix, fov, aspect, near, far);
-
     // 计算相机矩阵 viewMatrix
     const eye = vec3.fromValues(
       cameraHeight * Math.sin(pitchInRadians) * Math.sin(rotationInRadians),
@@ -46,7 +45,6 @@ export default class Viewport implements IViewport {
       Math.sin(pitchInRadians),
     );
     mat4.lookAt(this.viewMatrix, eye, vec3.fromValues(0, 0, 0), up);
-
     this.viewUncenteredMatrix = mat4.clone(this.viewMatrix);
 
     // 移动相机位置

packages/maps/src/amap/map.ts

@@ -444,6 +444,10 @@ export default class AMapService
     const { lng, lat } = this.getCenter();
     if (this.cameraChangedCallback) {
       // resync viewport
+      // console.log('cameraHeight', height)
+      // console.log('pitch', pitch)
+      // console.log('rotation', rotation)
+      // console.log('zoom', this.map.getZoom())
       this.viewport.syncWithMapCamera({
         aspect,
         // AMap 定义 rotation 为顺时针方向，而 Mapbox 为逆时针
@@ -460,6 +464,7 @@ export default class AMapService
         offsetOrigin: [position.x, position.y],
       });
       const { offsetZoom = LNGLAT_OFFSET_ZOOM_THRESHOLD } = this.config;
+      // console.log('this.viewport', this.viewport)
       // set coordinate system
       if (this.viewport.getZoom() > offsetZoom) {
         this.coordinateSystemService.setCoordinateSystem(

packages/maps/src/amap2/Viewport.ts

@@ -1,6 +1,7 @@
 import { IMapCamera, IViewport } from '@antv/l7-core';
 import { mat4, vec3 } from 'gl-matrix';
 
+const DEGREES_TO_RADIANS = Math.PI / 180;
 export default class Viewport implements IViewport {
   private projectionMatrix: mat4 = mat4.create();
   private viewMatrix: mat4 = mat4.create();
@@ -22,17 +23,37 @@ export default class Viewport implements IViewport {
       near = 0.1,
       far = 1000,
       fov = 0,
+
+      pitch = 0,
+      bearing = 0,
+      cameraHeight = 1,
     } = mapCamera;
     this.zoom = zoom;
     this.center = center;
 
     // 计算透视投影矩阵 projectionMatrix
-    mat4.perspective(this.projectionMatrix, fov, aspect, near, far);
+    mat4.perspective(this.projectionMatrix, fov/180*Math.PI, aspect, near, far);
+    // mat4.perspective(this.projectionMatrix, 0.91, aspect, near, far);
+    // const pitchInRadians = pitch * DEGREES_TO_RADIANS;
+    // const rotationInRadians = (360 - bearing) * DEGREES_TO_RADIANS;
 
     // 计算相机矩阵 viewMatrix
-    const eyePoint = vec3.fromValues(...cameraPosition);
+    // const eyePoint = vec3.fromValues(...cameraPosition);
+    const eyePoint = vec3.fromValues(cameraPosition[0], cameraPosition[1], cameraPosition[2]);
+    // 计算相机矩阵 viewMatrix
+    // const eyePoint = vec3.fromValues(
+    //   (cameraPosition[2]) * Math.sin(pitchInRadians) * Math.sin(rotationInRadians),
+    //   -(cameraPosition[2]) * Math.sin(pitchInRadians) * Math.cos(rotationInRadians),
+    //   (cameraPosition[2]) * Math.cos(pitchInRadians),
+    // );
     const lookAtPoint = vec3.fromValues(...lookAt);
+    // const lookAtPoint = vec3.fromValues(0, 0, 0);
     const upDirect = vec3.fromValues(...up);
+    // const upDirect = vec3.fromValues(
+    //   -Math.cos(pitchInRadians) * Math.sin(rotationInRadians),
+    //   Math.cos(pitchInRadians) * Math.cos(rotationInRadians),
+    //   Math.sin(pitchInRadians),
+    // );
     mat4.lookAt(this.viewMatrix, eyePoint, lookAtPoint, upDirect);
 
     this.viewUncenteredMatrix = mat4.clone(this.viewMatrix);

packages/maps/src/amap2/map.ts

@@ -124,18 +124,17 @@ export default class AMapService
   /**
    * 转化线、面类型的点位数据
    */
-  // public lngLatToCoords(lnglatArray: Array<Array<[number, number]>> | Array<[number, number]>): Array<Array<[number, number]>>|Array<[number, number]> {
   public lngLatToCoords(
     lnglatArray: number[][][] | number[][],
   ): number[][][] | number[][] {
     // @ts-ignore
     return lnglatArray.map((lnglats) => {
       if (typeof lnglats[0] === 'number') {
-        return this.lngLatToCoord(lnglats);
+        return this.lngLatToCoord(lnglats as [number, number]);
       } else {
         // @ts-ignore
         return lnglats.map((lnglat) => {
-          return this.lngLatToCoord(lnglat);
+          return this.lngLatToCoord(lnglat as [number, number]);
         });
       }
     });
@@ -523,9 +522,13 @@ export default class AMapService
       up,
       // @ts-ignore
     } = this.map.customCoords.getCameraParams();
-    const center = this.map.getCenter();
-    const zoom = this.map.getZoom();
 
+    // @ts-ignore
+    const center = this.map.customCoords.getCenter() as [number, number]
+    const zoom = this.map.getZoom();
+    const pitch = this.map.getPitch()
+    const rotation = this.map.getRotation()
+    // @ts-ignore
     if (this.cameraChangedCallback) {
       this.viewport.syncWithMapCamera({
         aspect,
@@ -537,10 +540,16 @@ export default class AMapService
         up,
         // AMap 定义的缩放等级 与 Mapbox 相差 1
         zoom: zoom - 1, // 与amap1.x对比相差一个级别
-        center: [center.getLat(), center.getLng()],
+        // center: [center.getLng(), center.getLat()],
+        center: center,
         offsetOrigin: [position[0], position[1]],
+
+        pitch,
+        bearing: 360 - rotation,
       });
 
+      // console.log('this.viewport', this.viewport)
+      // console.log('position', position)
       // set coordinate system
       this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.P20_2);
       this.cameraChangedCallback(this.viewport);
@@ -559,6 +568,7 @@ export default class AMapService
    * @param e
    */
   private handleViewChanged = (e: any): void => {
+
     // @ts-ignore
     const {
       // @ts-ignore
@@ -577,9 +587,12 @@ export default class AMapService
       up,
       // @ts-ignore
     } = this.map.customCoords.getCameraParams();
-    const { zoom } = e;
+    const { zoom, pitch, rotation } = e;
+    // console.log(this.viewport)
     // console.log('zoom', zoom, this.map.getZoom())
-    const center = this.map.getCenter();
+    // const center = this.map.getCenter();
+     // @ts-ignore
+     const center = this.map.customCoords.getCenter() as [number, number]
     if (this.cameraChangedCallback) {
       // resync viewport
       this.viewport.syncWithMapCamera({
@@ -592,8 +605,14 @@ export default class AMapService
         near,
         // AMap 定义的缩放等级 与 Mapbox 相差 1
         zoom: zoom - 1, // 与amap1.x对比相差一个级别
-        center: [center.getLat(), center.getLng()],
+        // center: [center.getLng(), center.getLat()],
+        center: center,
         offsetOrigin: [position[0], position[1]],
+
+        pitch,
+        bearing: 360 - rotation,
+        // // @ts-ignore
+        // mvp: this.map.customCoords.getMVPMatrix()
       });
 
       // set coordinate system

packages/renderer/package.json

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

packages/scene/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-scene",
-  "version": "2.3.9",
+  "version": "2.3.10",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,12 +23,12 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-component": "2.3.9",
+    "@antv/l7-component": "^2.3.10",
-    "@antv/l7-core": "2.3.9",
+    "@antv/l7-core": "^2.3.10",
-    "@antv/l7-maps": "2.3.9",
+    "@antv/l7-layers": "^2.3.10",
-    "@antv/l7-renderer": "2.3.9",
+    "@antv/l7-maps": "^2.3.10",
-    "@antv/l7-layers": "2.3.9",
+    "@antv/l7-renderer": "^2.3.10",
-    "@antv/l7-utils": "2.3.9",
+    "@antv/l7-utils": "^2.3.10",
     "@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.3.9",
+  "version": "2.3.10",
   "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.3.9",
+    "@antv/l7-core": "^2.3.10",
-    "@antv/l7-utils": "2.3.9",
+    "@antv/l7-utils": "^2.3.10",
     "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",

packages/source/src/source.ts

@@ -56,6 +56,8 @@ export default class Source extends EventEmitter {
     method: 'count',
   };
   private readonly mapService: IMapService;
+  // 是否有效范围
+  private invalidExtent: boolean = false;
 
   // 原始数据
   private originData: any;
@@ -90,16 +92,15 @@ export default class Source extends EventEmitter {
     this.emit('update');
   }
   public getClusters(zoom: number): any {
-    return this.clusterIndex.getClusters(this.extent, zoom);
+    return this.clusterIndex.getClusters(this.caculClusterExtent(2), zoom);
   }
   public getClustersLeaves(id: number): any {
     return this.clusterIndex.getLeaves(id, Infinity);
   }
   public updateClusterData(zoom: number): void {
     const { method = 'sum', field } = this.clusterOptions;
-    const newBounds = padBounds(bBoxToBounds(this.extent), 2);
     let data = this.clusterIndex.getClusters(
-      newBounds[0].concat(newBounds[1]),
+      this.caculClusterExtent(2),
       Math.floor(zoom),
     );
     this.clusterOptions.zoom = zoom;
@@ -170,6 +171,18 @@ export default class Source extends EventEmitter {
     this.data = null;
   }
 
+  private caculClusterExtent(bufferRatio: number): any {
+    let newBounds = [
+      [-Infinity, -Infinity],
+      [Infinity, Infinity],
+    ];
+
+    if (!this.invalidExtent) {
+      newBounds = padBounds(bBoxToBounds(this.extent), bufferRatio);
+    }
+    return newBounds[0].concat(newBounds[1]);
+  }
+
   private initCfg(option?: ISourceCFG) {
     this.cfg = mergeWith(this.cfg, option, mergeCustomizer);
     const cfg = this.cfg;
@@ -197,6 +210,8 @@ export default class Source extends EventEmitter {
     this.data = sourceParser(this.originData, parser);
     // 计算范围
     this.extent = extent(this.data.dataArray);
+    this.invalidExtent =
+      this.extent[0] === this.extent[2] || this.extent[1] === this.extent[3];
   }
   /**
    * 数据统计

packages/source/src/transform/hexagon.ts

@@ -33,7 +33,6 @@ export function pointToHexbin(data: IParserData, option: ITransform) {
     .x((d: IRawData) => d.coordinates[0])
     .y((d: IRawData) => d.coordinates[1]);
   const hexbinBins = newHexbin(screenPoints);
-
   const result: IParserData = {
     dataArray: hexbinBins.map((hex: IHexBinItem<IRawData>, index: number) => {
       if (option.field && method) {

packages/three/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-three",
-  "version": "2.3.9",
+  "version": "2.3.10",
   "description": "three for L7 ",
   "keywords": [
     "3D",
@@ -34,7 +34,7 @@
     "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
     "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
     "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
-    "buildcdn": "node_modules/.bin/rollup -c",
+    "build:cdn": "node_modules/.bin/rollup -c",
     "lint:ts": "run-p -c lint:ts-*",
     "test": "jest",
     "sync": "tnpm sync"
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/antvis/L7#readme",
   "dependencies": {
-    "@antv/l7": "2.3.9",
+    "@antv/l7": "^2.3.10",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "rollup": "^2.3.3",

packages/three/rollup.config.js

@@ -25,8 +25,12 @@ export default {
     commonjs({
       namedExports: {
         eventemitter3: [ 'EventEmitter' ],
-        lodash: [ 'merge' ]
+        lodash: [ 'merge' ],
-      }
+        inversify: ['inject','injectable']
+      },
+      dynamicRequireTargets: [
+            'node_modules/inversify/lib/syntax/binding_{on,when}_syntax.js',
+        ],
     }),
     buble({
       transforms: { generator: false }

packages/three/src/core/threeRenderService.ts

@@ -1,5 +1,6 @@
 import { IMapService, IMercator, IRendererService, TYPES } from '@antv/l7';
 import { inject, injectable } from 'inversify';
+
 import {
   AnimationMixer,
   Camera,

packages/utils/package.json

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

stories/Map/components/amap2demo.tsx

@@ -47,7 +47,10 @@ export default class Amap2demo extends React.Component {
 
     scene.on('loaded', () => {
       console.log('event test');
-
+      // @ts-ignore
+      console.log(scene.map.getProjection().project)
+      // @ts-ignore
+      console.log(scene.map.customCoords.lngLatToCoord)
       const layer = new PointLayer()
         .source(originData, {
           parser: {

stories/Map/components/amap2demo_arcLine3d.tsx

@@ -0,0 +1,114 @@
+import { vec2, vec3 } from 'gl-matrix';
+// @ts-ignore
+import { ILngLat, PointLayer, LineLayer, Scene } from '@antv/l7';
+import { GaodeMap, GaodeMap2 } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_arcLine3d extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap2({
+        pitch: 40,
+        center: [ 3.438, 40.16797 ],
+        zoom: 0
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      Promise.all([
+        fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
+        fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
+        fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
+      ]).then(function onLoad([ world, dot, flyline ]) {
+        const dotData = eval(dot);
+        // @ts-ignore
+        const flydata = eval(flyline).map(item => {
+          // @ts-ignore
+          const latlng1 = item.from.split(',').map(e => { return e * 1; });
+          // @ts-ignore
+          const latlng2 = item.to.split(',').map(e => { return e * 1; });
+          return { coord: [ latlng1, latlng2 ] };
+        });
+        // const worldFill = new PolygonLayer()
+        //   .source(world)
+        //   .color('#98E3FA')
+        //   .shape('fill')
+        //   .style({
+        //     opacity: 1
+        //   });
+    
+        const worldLine = new LineLayer()
+          .source(world)
+          .color('#41fc9d')
+          .size(0.5)
+          .style({
+            opacity: 0.4
+          });
+        const dotPoint = new PointLayer()
+          .source(dotData, {
+            parser: {
+              type: 'json',
+              x: 'lng',
+              y: 'lat'
+            }
+          })
+          .shape('circle')
+          .color('#ffed11')
+          .animate(true)
+          .size(40)
+          .style({
+            opacity: 1.0
+          });
+        const flyLine = new LineLayer()
+          .source(flydata, {
+            parser: {
+              type: 'json',
+              coordinates: 'coord'
+            }
+          })
+          .color('#ff6b34')
+          .shape('arc3d')
+          .size(2)
+          .active(true)
+          .animate({
+            interval: 2,
+            trailLength: 2,
+            duration: 1
+          })
+          .style({
+            opacity: 1
+          });
+        // scene.addLayer(worldFill);
+        scene.addLayer(worldLine);
+        scene.addLayer(dotPoint);
+        scene.addLayer(flyLine);
+      });
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_arcLine_greatCircle.tsx

@@ -0,0 +1,72 @@
+import { vec2, vec3 } from 'gl-matrix';
+// @ts-ignore
+import { ILngLat, PointLayer, LineLayer, Scene } from '@antv/l7';
+import { GaodeMap, GaodeMap2 } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_arcLine_greatCircle extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap2({
+        pitch: 0,
+        center: [107.77791556935472, 35.443286920228644],
+        zoom: 2.9142882493605033,
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      const layer = new LineLayer({})
+            .source([
+              {
+                lng1: 75.9375,
+                lat1: 37.71859032558816,
+                lng2: 123.3984375,
+                lat2: 39.639537564366684
+              }
+            ], {
+              parser: {
+                type: 'json',
+                x: 'lng1',
+                y: 'lat1',
+                x1: 'lng2',
+                y1: 'lat2',
+              },
+            })
+            .size(1)
+            .shape('greatcircle')
+            .color('#ff0000')
+            .style({
+              opacity: 0.8,
+              blur: 0.99,
+            });
+          scene.addLayer(layer);
+      
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_citybuilding.tsx

@@ -0,0 +1,64 @@
+import { PointLayer, CityBuildingLayer, Scene } from '@antv/l7';
+import { GaodeMap, GaodeMap2 } from '@antv/l7-maps';
+import * as React from 'react';
+import * as dat from 'dat.gui';
+
+
+export default class Amap2demo_citybuilding extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json',
+    );
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap2({
+        style: 'dark',
+        center: [121.507674, 31.223043],
+        pitch: 65.59312320916906,
+        zoom: 15.4
+      }),
+    });
+    const pointLayer = new CityBuildingLayer();
+    pointLayer
+      .source(await response.json())
+      .size('floor', [0, 500])
+      .color('rgba(242,246,250,1.0)')
+      .animate({
+        enable: false,
+      })
+      .style({
+        opacity: 0.7,
+        baseColor: 'rgb(16,16,16)',
+        windowColor: 'rgb(30,60,89)',
+        brightColor: 'rgb(255,176,38)',
+      });
+    scene.addLayer(pointLayer);
+
+    this.scene = scene;
+  
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_heatmap.tsx

@@ -0,0 +1,73 @@
+import { vec2, vec3 } from 'gl-matrix';
+// @ts-ignore
+import { ILngLat, PointLayer, PolygonLayer, Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap, GaodeMap2 } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_heatmap extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap2({
+        pitch: 0,
+        center: [ 127.5671666579043, 7.445038892195569 ],
+        zoom: 2.632456779444394
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
+      )
+        .then(res => res.json())
+        .then(data => {
+          const layer = new HeatmapLayer({})
+            .source(data)
+            .shape('heatmap')
+            .size('mag', [ 0, 1.0 ]) // weight映射通道
+            .style({
+              intensity: 2,
+              radius: 20,
+              opacity: 1.0,
+              rampColors: {
+                colors: [
+                  '#FF4818',
+                  '#F7B74A',
+                  '#FFF598',
+                  '#91EABC',
+                  '#2EA9A1',
+                  '#206C7C'
+                ].reverse(),
+                positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+              }
+            });
+          scene.addLayer(layer);
+        })
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_heatmap3D.tsx

@@ -0,0 +1,76 @@
+import { vec2, vec3 } from 'gl-matrix';
+// @ts-ignore
+import { ILngLat, PointLayer, PolygonLayer, Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap, GaodeMap2 } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_heatmap extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap2({
+        // pitch: 58.5,
+        pitch: 0,
+        center: [ 111.8759, 30.6942 ],
+        rotation: 0.519,
+        zoom: 3.6116
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
+      )
+        .then(res => res.json())
+        .then(data => {
+          const layer = new HeatmapLayer({})
+            .source(data)
+            .size('capacity', [ 0, 1 ])
+            .shape('heatmap3D')
+          // weight映射通道
+            .style({
+              intensity: 10,
+              radius: 5,
+              opacity: 1.0,
+              rampColors: {
+                colors: [
+                  '#2E8AE6',
+                  '#69D1AB',
+                  '#DAF291',
+                  '#FFD591',
+                  '#FF7A45',
+                  '#CF1D49'
+                ],
+                positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+              }
+            });
+          scene.addLayer(layer);
+        });
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_heatmap_grid.tsx

@@ -0,0 +1,91 @@
+import { vec2, vec3 } from 'gl-matrix';
+// @ts-ignore
+import { ILngLat, PointLayer, PolygonLayer, Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap, GaodeMap2 } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_heatmap_grid extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap2({
+        pitch: 0,
+        center: [ 110.097892, 33.853662 ],
+        zoom: 4.056
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
+      )
+        .then(res => res.text())
+        .then(data => {
+          const layer = new HeatmapLayer({})
+            .source(data, {
+              parser: {
+                type: 'csv',
+                x: 'lng',
+                y: 'lat'
+              },
+              transforms: [
+                {
+                  type: 'grid',
+                  size: 20000,
+                  field: 'v',
+                  method: 'sum'
+                }
+              ]
+            })
+            .shape('circle')
+            .style({
+              coverage: 0.9,
+              angle: 0
+            })
+            .color(
+              'count',
+              [
+                '#8C1EB2',
+                '#8C1EB2',
+                '#DA05AA',
+                '#F0051A',
+                '#FF2A3C',
+                '#FF4818',
+                '#FF4818',
+                '#FF8B18',
+                '#F77B00',
+                '#ED9909',
+                '#ECC357',
+                '#EDE59C'
+              ].reverse()
+            );
+          scene.addLayer(layer);
+        });
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_heatmap_hexagon.tsx

@@ -0,0 +1,93 @@
+import { vec2, vec3 } from 'gl-matrix';
+// @ts-ignore
+import { ILngLat, PointLayer, PolygonLayer, Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap, GaodeMap2 } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_heatmap_hexagon extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap2({
+        // pitch: 58.5,
+        pitch: 43,
+        center: [ 120.13383079335335, 29.651873105004427 ],
+        zoom: 7.068989519212174
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
+      )
+        .then(res => res.text())
+        .then(data => {
+          const layer = new HeatmapLayer({})
+            .source(data, {
+              parser: {
+                type: 'csv',
+                x: 'lng',
+                y: 'lat'
+              },
+              transforms: [
+                {
+                  type: 'hexagon',
+                  size: 2500,
+                  field: 'v',
+                  method: 'sum'
+                }
+              ]
+            })
+            .size('sum', sum => {
+              return sum * 200;
+            })
+            .shape('hexagonColumn')
+            .style({
+              coverage: 0.8,
+              angle: 0,
+              opacity: 1.0
+            })
+            .color('sum', [
+              '#094D4A',
+              '#146968',
+              '#1D7F7E',
+              '#289899',
+              '#34B6B7',
+              '#4AC5AF',
+              '#5FD3A6',
+              '#7BE39E',
+              '#A1EDB8',
+              '#C3F9CC',
+              '#DEFAC0',
+              '#ECFFB1'
+            ]);
+          scene.addLayer(layer);
+        });
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_imagelayer.tsx

@@ -0,0 +1,56 @@
+import { ImageLayer, Scene } from '@antv/l7';
+import { GaodeMap, GaodeMap2, Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_imageLayer extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap2({
+        center: [121.268, 30.3628],
+        pitch: 0,
+        style: 'normal',
+        zoom: 10,
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      const layer = new ImageLayer({});
+    layer.source(
+      'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+      {
+        parser: {
+          type: 'image',
+          extent: [121.168, 30.2828, 121.384, 30.4219],
+        },
+      },
+    );
+    scene.addLayer(layer);
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_rasterlayer.tsx

@@ -0,0 +1,101 @@
+import { PointLayer, RasterLayer, Scene } from '@antv/l7';
+import { GaodeMap, GaodeMap2 } from '@antv/l7-maps';
+import * as React from 'react';
+// tslint:disable-next-line:no-submodule-imports
+// @ts-ignore
+import * as GeoTIFF from 'geotiff';
+
+export default class Amap2demo_rasterLayer extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  private async getTiffData() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
+      // 'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff',
+    );
+    const arrayBuffer = await response.arrayBuffer();
+    const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+    const image = await tiff.getImage();
+    const width = image.getWidth();
+    const height = image.getHeight();
+    const values = await image.readRasters();
+    return {
+      data: values[0],
+      width,
+      height,
+      min: 0,
+      max: 8000,
+    };
+  }
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap2({
+        center: [121.268, 30.3628],
+        pitch: 0,
+        style: 'dark',
+        zoom: 2,
+      }),
+    });
+    this.scene = scene;
+
+    const tiffdata = await this.getTiffData();
+    const layer = new RasterLayer({});
+    const mindata = -0;
+    const maxdata = 8000;
+    layer
+      .source(tiffdata.data, {
+        parser: {
+          type: 'raster',
+          width: tiffdata.width,
+          height: tiffdata.height,
+          extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
+          // extent: [
+          //   73.4766000000000048,
+          //   18.1054999999999993,
+          //   135.1066187,
+          //   57.630046,
+          // ],
+        },
+      })
+      .style({
+        opacity: 0.8,
+        domain: [mindata, maxdata],
+        clampLow: true,
+        rampColors: {
+          colors: [
+            'rgb(166,97,26)',
+            'rgb(223,194,125)',
+            'rgb(245,245,245)',
+            'rgb(128,205,193)',
+            'rgb(1,133,113)',
+          ],
+          positions: [0, 0.25, 0.5, 0.75, 1.0],
+        },
+      });
+    scene.addLayer(layer);
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/map.stories.tsx

@@ -10,6 +10,19 @@ import Amap2demo_image from './components/amap2demo_image'
 import Amap2demo_polygon from './components/amap2demo_polygon'
 import Amap2demo_polygon_extrude from './components/amap2demo_polygon_extrude'
 import Amap2demo_arcLine from "./components/amap2demo_arcLine"
+import Amap2demo_arcLine3d from "./components/amap2demo_arcLine3d"
+import Amap2demo_arcLine_greatCircle from "./components/amap2demo_arcLine_greatCircle"
+
+import Amap2demo_heatmap from "./components/amap2demo_heatmap"
+import Amap2demo_heatmap3D from "./components/amap2demo_heatmap3D"
+import Amap2demo_heatmap_hexagon from "./components/amap2demo_heatmap_hexagon"
+import Amap2demo_heatmap_grid from "./components/amap2demo_heatmap_grid"
+
+import Amap2demo_imageLayer from "./components/amap2demo_imagelayer"
+
+import Amap2demo_rasterLayer from "./components/amap2demo_rasterlayer"
+
+import Amap2demo_citybuilding from "./components/amap2demo_citybuilding"
 
 // @ts-ignore
 storiesOf('地图方法', module)
@@ -22,3 +35,12 @@ storiesOf('地图方法', module)
         .add('高德地图2.0 polygon', () => <Amap2demo_polygon />)
         .add('高德地图2.0 polygon_extrude', () => <Amap2demo_polygon_extrude />)
         .add('高德地图2.0 line_arc', () => <Amap2demo_arcLine />)
+        .add('高德地图2.0 line_arc3d', () => <Amap2demo_arcLine3d />)
+        .add('高德地图2.0 line_arc3d_greatCircle', () => <Amap2demo_arcLine_greatCircle />)
+        .add('高德地图2.0 heatmap', () => <Amap2demo_heatmap />)
+        .add('高德地图2.0 heatmap3D', () => <Amap2demo_heatmap3D />)
+        .add('高德地图2.0 heatmap3D/hexagon', () => <Amap2demo_heatmap_hexagon />)
+        .add('高德地图2.0 heatmap3D/grid', () => <Amap2demo_heatmap_grid />)
+        .add('高德地图2.0 imageLayer', () => <Amap2demo_imageLayer />)
+        .add('高德地图2.0 rasterLayer', () => <Amap2demo_rasterLayer />)
+        .add('高德地图2.0 citybuildLayer', () => <Amap2demo_citybuilding />)