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

Shihui dev (#791) 

* feat: add getModelMatrix into viewport

* feat: 新增地球模式 （初步构建）

* feat: 完善地球交互

* style: lint style

* feat: 调整地球图层缩放的方向

* style: lint style

* feat: 增加地球模式的 pointLayer/fill 图层

* style: lint style

* feat: 增加地球、太阳的简单运动系统，优化部分代码结构

* fix: 修复时间点击出错

* style: lint style

* fix: 修复地图 panBy 方法参数错误

* style: lint style

* feat: pointLayer/cylinder 圆柱兼容地球模式

* style: lint style

* feat: 修复 pointLayer/fill 在拾取是破面严重的情况

* style: lint style

* feat: 增加 arc 弧度调节

* chore: update version 2.5.29 -> 2.5.30

* feat: 增加 lineLayer/arc3d 兼容地球模式

* style: lint style
This commit is contained in:
YiQianYao 2021-10-11 15:43:58 +08:00 committed by GitHub
parent 48119b4227
commit 958faeccfd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 248 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lerna.json
View File

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

6
packages/component/package.json
View File

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

14
packages/l7/package.json
View File

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

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

@ -1,2 +1,2 @@
const version = '2.5.29';
const version = '2.5.30';
export { version };

8
packages/layers/package.json
View File

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

5
packages/layers/src/core/interface.ts
View File

@ -8,7 +8,8 @@ export interface ILineLayerStyleOptions {
opacity: styleSingle;
lineType?: keyof typeof lineStyleType; // 可选参数、线类型(all - dash/solid)
dashArray?: [number, number]; // 可选参数、虚线间隔
segmentNumber: number;
segmentNumber?: number;
forward?: boolean; // 可选参数、是否反向(arcLine)
lineTexture?: boolean; // 可选参数、是否开启纹理贴图功能(all)
iconStep?: number; // 可选参数、纹理贴图步长(all)
@ -16,4 +17,6 @@ export interface ILineLayerStyleOptions {
sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
thetaOffset?: number; // 可选参数、设置弧线的偏移量
globalArcHeight?: number; // 可选参数、地球模式下 3D 弧线的高度
}

11
packages/layers/src/line/models/arc_3d.ts
View File

@ -13,6 +13,7 @@ import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
import { EARTH_RADIUS } from '../../earth/utils';
import line_arc_frag from '../shaders/line_arc_3d_frag.glsl';
import line_arc_vert from '../shaders/line_arc_3d_vert.glsl';
const lineStyleObj: { [key: string]: number } = {
@ -32,6 +33,7 @@ export default class Arc3DModel extends BaseModel {
lineTexture = false,
iconStep = 100,
segmentNumber = 30,
globalArcHeight = 10,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (dashArray.length === 2) {
@ -83,6 +85,10 @@ export default class Arc3DModel extends BaseModel {
}
return {
u_globel: this.mapService.version === 'GLOBEL' ? 1 : 0,
u_globel_radius: EARTH_RADIUS, // 地球半径
u_global_height: globalArcHeight,
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
// u_opacity: opacity === undefined ? 1 : opacity,
@ -127,6 +133,9 @@ export default class Arc3DModel extends BaseModel {
}
public buildModels(): IModel[] {
const {
segmentNumber = 30,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
return [
this.layer.buildLayerModel({
moduleName: 'arc3Dline',
@ -134,6 +143,8 @@ export default class Arc3DModel extends BaseModel {
fragmentShader: line_arc_frag,
triangulation: LineArcTriangulation,
blend: this.getBlend(),
segmentNumber,
// primitive: gl.POINTS,
}),
];
}

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

@ -7,6 +7,9 @@ attribute vec4 a_Instance;
attribute vec4 a_Color;
attribute float a_Size;
uniform float u_globel;
uniform float u_globel_radius;
uniform float u_global_height: 10;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
uniform float segmentNumber;
@ -78,6 +81,25 @@ vec2 getNormal(vec2 line_clipspace, float offset_direction) {
return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction);
}
float torad(float deg) {
return (deg / 180.0) * acos(-1.0);
}
vec3 lglt2xyz(vec2 lnglat) {
float pi = 3.1415926;
// TODO: + Math.PI/2 是为了对齐坐标
float lng = torad(lnglat.x) + pi / 2.0;
float lat = torad(lnglat.y);
// TODO: 手动增加一些偏移，减轻面的冲突
float radius = u_globel_radius;
float z = radius * cos(lat) * cos(lng);
float x = radius * cos(lat) * sin(lng);
float y = radius * sin(lat);
return vec3(x, y, z);
}
void main() {
// cal style mapping - 数据纹理映射部分的计算
styleMappingMat = mat4(
@ -160,5 +182,28 @@ void main() {
} else {
gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0));
}
// 地球模式
if(u_globel > 0.0) {
vec3 startLngLat = lglt2xyz(a_Instance.rg);
vec3 endLngLat = lglt2xyz(a_Instance.ba);
float globalRadius = length(startLngLat);
vec3 lineDir = normalize(endLngLat - startLngLat);
vec3 midPointDir = normalize((startLngLat + endLngLat)/2.0);
// 线的偏移
vec3 lnglatOffset = cross(lineDir, midPointDir) * a_Position.y;
// 计算起始点和终止点的距离
float lnglatLength = length(a_Instance.rg - a_Instance.ba)/50.0;
// 计算飞线各个节点相应的高度
float lineHeight = u_global_height * (-4.0*segmentRatio*segmentRatio + 4.0 * segmentRatio) * lnglatLength;
// 地球点位
vec3 globalPoint = normalize(mix(startLngLat, endLngLat, segmentRatio)) * (globalRadius + lineHeight) + lnglatOffset * a_Size;
gl_Position = u_ViewProjectionMatrix * vec4(globalPoint, 1.0);
}
setPickingColor(a_PickingColor);
}

4
packages/map/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.5.29",
"version": "2.5.30",
"description": "l7 map",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -37,7 +37,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-utils": "^2.5.29",
"@antv/l7-utils": "^2.5.30",
"@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.5.29",
"version": "2.5.30",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -27,9 +27,9 @@
"license": "ISC",
"dependencies": {
"@amap/amap-jsapi-loader": "^0.0.3",
"@antv/l7-core": "^2.5.29",
"@antv/l7-map": "^2.5.29",
"@antv/l7-utils": "^2.5.29",
"@antv/l7-core": "^2.5.30",
"@antv/l7-map": "^2.5.30",
"@antv/l7-utils": "^2.5.30",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

4
packages/renderer/package.json
View File

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

14
packages/scene/package.json
View File

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

8
packages/three/package.json
View File

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

2
packages/utils/package.json
View File

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

145
stories/customMap/components/earth2.tsx Normal file
View File

@ -0,0 +1,145 @@
// @ts-ignore
import { Scene } from '@antv/l7';
import { PointLayer, EarthLayer, LineLayer } from '@antv/l7-layers';
import { Earth } from '@antv/l7-maps';
import * as React from 'react';
export default class ScaleComponent extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Earth({
center: [120, 30],
pitch: 0,
zoom: 3,
}),
});
let data = [
{
lng1: 100,
lat1: 30.0,
lng2: 130,
lat2: 30,
},
];
const lineLayer = new LineLayer({
blend: 'normal',
})
.source(data, {
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
.size(2)
.shape('arc3d')
.color('#8C1EB2');
// .animate(true)
// .animate({
// duration: 50,
// interval: 0.2,
// trailLength: 0.05,
// });
fetch(
'https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json',
)
.then((d) => d.text())
.then((flyline) => {
// @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 flyLine = new LineLayer({ blend: 'normal' })
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord',
},
})
.color('#b97feb')
.shape('arc3d')
.size(1)
.active(true)
.animate({
interval: 2,
trailLength: 2,
duration: 1,
})
.style({
opacity: 1,
segmentNumber: 60,
globalArcHeight: 20,
});
scene.addLayer(flyLine);
});
const earthlayer = new EarthLayer()
.source(
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
{
parser: {
type: 'image',
extent: [121.168, 30.2828, 121.384, 30.4219],
},
},
)
.color('#2E8AE6')
.shape('fill')
.style({
opacity: 1.0,
radius: 40,
globelOtions: {
ambientRatio: 0.6, // 环境光
diffuseRatio: 0.4, // 漫反射
specularRatio: 0.1, // 高光反射
// earthTime: 4.0
earthTime: 0.1,
},
});
// .animate(true);
// earthlayer.setEarthTime(4.0)
scene.on('loaded', () => {
scene.addLayer(earthlayer);
// scene.addLayer(pointlayer);
// console.log(pointlayer)
// earthlayer.setEarthTime(4.0);
scene.addLayer(lineLayer);
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

2
stories/customMap/map.stories.tsx
View File

@ -4,8 +4,10 @@ import * as React from 'react';
import Map from './components/Map';
import Map2 from './components/Map2';
import Earth from './components/earth'
import Earth2 from './components/earth2'
// @ts-ignore
storiesOf('自定义地图', module)
.add('Earth', () => <Earth />)
.add('Earth2', () => <Earth2 />)
.add('地图', () => <Map />)
.add('地图2', () => <Map2 />);