p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
2912401452 2021-04-26 15:13:16 +08:00
parent 6452fd9093 5e871aa3bf
commit 83083c43d3
63 changed files with 1123 additions and 29496 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

1
README.md
View File

@ -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.

6
build/rollup.config.js
View File

@ -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' ]

2
docs/tutorial/quickstart.en.md
View File

@ -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
})

2
docs/tutorial/quickstart.zh.md
View File

@ -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
})

2
lerna.json
View File

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

4
package.json
View File

@ -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"

6
packages/component/package.json
View File

@ -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-utils": "2.3.9",
"@antv/l7-core": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

4
packages/core/package.json
View File

@ -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",

14
packages/core/src/shaders/project.glsl
View File

@ -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);
}

9
packages/core/src/shaders/projection.glsl
View File

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

14
packages/l7/package.json
View File

@ -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-core": "2.3.9",
"@antv/l7-layers": "2.3.9",
"@antv/l7-maps": "2.3.9",
"@antv/l7-scene": "2.3.9",
"@antv/l7-utils": "2.3.9",
"@antv/l7-component": "^2.3.10",
"@antv/l7-core": "^2.3.10",
"@antv/l7-layers": "^2.3.10",
"@antv/l7-maps": "^2.3.10",
"@antv/l7-scene": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7"
},
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",

2
packages/l7/src/version.ts
View File

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

10
packages/layers/package.json
View File

@ -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-layers": "2.3.9",
"@antv/l7-source": "2.3.9",
"@antv/l7-utils": "2.3.9",
"@antv/l7-core": "^2.3.10",
"@antv/l7-layers": "^2.3.10",
"@antv/l7-source": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

8
packages/layers/src/citybuliding/shaders/build_vert.glsl
View File

@ -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;

7
packages/layers/src/core/triangulation.ts
View File

@ -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;
}

3
packages/layers/src/heatmap/models/grid.ts
View File

@ -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];
},
},

6
packages/layers/src/heatmap/models/grid3d.ts
View File

@ -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];
},
},

6
packages/layers/src/heatmap/models/heatmap.ts
View File

@ -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;

3
packages/layers/src/heatmap/models/hexagon.ts
View File

@ -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];
},
},

20
packages/layers/src/heatmap/shaders/grid_vert.glsl
View File

@ -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);
vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));
gl_Position = project_common_position_to_clipspace(project_pos);
// 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);
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);
}

1
packages/layers/src/heatmap/shaders/heatmap_3d_frag.glsl
View File

@ -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;
}

18
packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl
View File

@ -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 p2 = vec4(pos, 1.0, 1.0);
vec4 inverseP1 = u_InverseViewProjectionMatrix * p1;
vec4 inverseP1 = u_InverseViewProjectionMatrix * p1; // 根据视图投影矩阵的逆矩阵平面上的反算出三维空间中的点（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);
}

9
packages/layers/src/heatmap/shaders/heatmap_framebuffer_vert.glsl
View File

@ -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));
}
}

43
packages/layers/src/heatmap/shaders/hexagon_3d_vert.glsl
View File

@ -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);
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);
// vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // 实际的经纬度
// vec2 lnglat = (a_Pos.xy + offset);
// vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));
// 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);
}

12
packages/layers/src/heatmap/shaders/hexagon_vert.glsl
View File

@ -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);
}

8
packages/layers/src/image/shaders/image_vert.glsl
View File

@ -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));
}
}

8
packages/layers/src/line/shaders/line_arc_3d_vert.glsl
View File

@ -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);
}

56
packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
View File

@ -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) {
return (1.0 - t) * source + t * target;
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
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);
}

12
packages/layers/src/plugins/DataMappingPlugin.ts
View File

@ -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) => {

16
packages/layers/src/plugins/DataSourcePlugin.ts
View File

@ -20,12 +20,12 @@ export default class DataSourcePlugin implements ILayerPlugin {
this.updateClusterData(layer);
});
// 检测数据不否需要更新
// 检测数据是否需要更新
layer.hooks.beforeRenderData.tap('DataSourcePlugin', () => {
const neeUpdate1 = this.updateClusterData(layer);
const neeUpdate2 = layer.dataState.dataSourceNeedUpdate;
const neeUpdateCluster = this.updateClusterData(layer);
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;
}

6
packages/layers/src/plugins/ShaderUniformPlugin.ts
View File

@ -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,

2
packages/layers/src/point/shaders/fill_vert.glsl
View File

@ -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);
}

2
packages/layers/src/raster/raster.ts
View File

@ -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;

7
packages/layers/src/raster/shaders/raster_2d_vert.glsl
View File

@ -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));
}
}

9
packages/layers/src/raster/shaders/raster_vert.glsl
View File

@ -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));
}
}

4
packages/map/package.json
View File

@ -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",

8
packages/maps/package.json
View File

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

2
packages/maps/src/amap/Viewport.ts
View File

@ -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);
// 移动相机位置

5
packages/maps/src/amap/map.ts
View File

@ -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(

25
packages/maps/src/amap2/Viewport.ts
View File

@ -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);

37
packages/maps/src/amap2/map.ts
View File

@ -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

4
packages/renderer/package.json
View File

@ -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",

14
packages/scene/package.json
View File

@ -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-core": "2.3.9",
"@antv/l7-maps": "2.3.9",
"@antv/l7-renderer": "2.3.9",
"@antv/l7-layers": "2.3.9",
"@antv/l7-utils": "2.3.9",
"@antv/l7-component": "^2.3.10",
"@antv/l7-core": "^2.3.10",
"@antv/l7-layers": "^2.3.10",
"@antv/l7-maps": "^2.3.10",
"@antv/l7-renderer": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

6
packages/source/package.json
View File

@ -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-utils": "2.3.9",
"@antv/l7-core": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

21
packages/source/src/source.ts
View File

@ -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];
}
/**
* 数据统计

1
packages/source/src/transform/hexagon.ts
View File

@ -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) {

6
packages/three/package.json
View File

@ -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",

8
packages/three/rollup.config.js
View File

@ -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 }

1
packages/three/src/core/threeRenderService.ts
View File

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

2
packages/utils/package.json
View File

@ -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",

5
stories/Map/components/amap2demo.tsx
View File

@ -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: {

114
stories/Map/components/amap2demo_arcLine3d.tsx Normal file
View File

@ -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,
}}
/>
</>
);
}
}

72
stories/Map/components/amap2demo_arcLine_greatCircle.tsx Normal file
View File

@ -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,
}}
/>
</>
);
}
}

64
stories/Map/components/amap2demo_citybuilding.tsx Normal file
View File

@ -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,
}}
/>
</>
);
}
}

73
stories/Map/components/amap2demo_heatmap.tsx Normal file
View File

@ -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,
}}
/>
</>
);
}
}

76
stories/Map/components/amap2demo_heatmap3D.tsx Normal file
View File

@ -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,
}}
/>
</>
);
}
}

91
stories/Map/components/amap2demo_heatmap_grid.tsx Normal file
View File

@ -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,
}}
/>
</>
);
}
}

93
stories/Map/components/amap2demo_heatmap_hexagon.tsx Normal file
View File

@ -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,
}}
/>
</>
);
}
}

56
stories/Map/components/amap2demo_imagelayer.tsx Normal file
View File

@ -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,
}}
/>
</>
);
}
}

101
stories/Map/components/amap2demo_rasterlayer.tsx Normal file
View File

@ -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,
}}
/>
</>
);
}
}

22
stories/Map/map.stories.tsx
View File

@ -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 />)

29369
yarn.lock
View File

File diff suppressed because it is too large Load Diff