Shihui dev (#793)

* 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

* chore: update version 2.5.30 -> 2.5.31

* style: lint style

* feat: 增加地球图层 - 大气层

* style: lint style

* feat: 增加设置可视化层背景色的能力

* style: lint style
This commit is contained in:
YiQianYao 2021-10-11 20:55:23 +08:00 committed by GitHub
parent 958faeccfd
commit 0e53f84199
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 320 additions and 61 deletions

View File

@ -36,13 +36,13 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件,实现上钻下
向下钻取的触发事件 ⛔customTrigger 为 true 时不生效
### drillDownEvent
### drillDownEvent
根据drillDownTriggerEvent类型下钻触发的回调事件 属性
根据 drillDownTriggerEvent 类型下钻触发的回调事件 属性
### drillUpEvent
根据drillUpTriggleEvent类型上钻触发的回调事件 属性
根据 drillUpTriggleEvent 类型上钻触发的回调事件 属性
### drillUpTriggleEvent

View File

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

View File

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

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.5.30",
"version": "2.5.31",
"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.30",
"@antv/l7-utils": "^2.5.31",
"@babel/runtime": "^7.7.7",
"@mapbox/tiny-sdf": "^1.1.1",
"ajv": "^6.10.2",

View File

@ -1,9 +1,11 @@
import { rgb2arr } from '@antv/l7';
import { inject, injectable } from 'inversify';
import 'reflect-metadata';
import { ILayer } from '../..';
import { TYPES } from '../../types';
import Clock from '../../utils/clock';
import { IGlobalConfigService } from '../config/IConfigService';
import { IMapService } from '../map/IMapService';
import { IRendererService } from '../renderer/IRendererService';
import { ILayerModel, ILayerService } from './ILayerService';
@ -28,6 +30,9 @@ export default class LayerService implements ILayerService {
@inject(TYPES.IRendererService)
private readonly renderService: IRendererService;
@inject(TYPES.IMapService)
private readonly mapService: IMapService;
@inject(TYPES.IGlobalConfigService)
private readonly configService: IGlobalConfigService;
@ -178,8 +183,14 @@ export default class LayerService implements ILayerService {
}
private clear() {
const color = rgb2arr(this.mapService.bgColor) as [
number,
number,
number,
number,
];
this.renderService.clear({
color: [0, 0, 0, 0],
color,
depth: 1,
stencil: 0,
framebuffer: null,

View File

@ -32,6 +32,8 @@ export interface IMapWrapper {
export interface IMapService<RawMap = {}> {
version?: string;
map: RawMap;
bgColor: string;
setBgColor(color: string): void;
init(): void;
initViewPort?(): void;
destroy(): void;
@ -104,6 +106,7 @@ export interface IMapService<RawMap = {}> {
}
| undefined,
): void;
clearColor?(): void;
}
export const MapServiceEvent = ['mapload'];

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.5.30",
"version": "2.5.31",
"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.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",
"@antv/l7-component": "^2.5.31",
"@antv/l7-core": "^2.5.31",
"@antv/l7-layers": "^2.5.31",
"@antv/l7-maps": "^2.5.31",
"@antv/l7-scene": "^2.5.31",
"@antv/l7-utils": "^2.5.31",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

View File

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

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.5.30",
"version": "2.5.31",
"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.30",
"@antv/l7-source": "^2.5.30",
"@antv/l7-utils": "^2.5.30",
"@antv/l7-core": "^2.5.31",
"@antv/l7-source": "^2.5.31",
"@antv/l7-utils": "^2.5.31",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

View File

@ -1,20 +1,25 @@
import BaseLayer from '../core/BaseLayer';
import EarthAtomSphereModel from './models/atmosphere';
import BaseEarthModel from './models/base';
export type EarthType = 'base';
interface IEarthLayerStyleOptions {
setEarthTime(time: number): void;
}
const EarthModels: { [key in EarthType]: any } = {
export type EarthModelType = 'base' | 'atomSphere';
const EarthModels: { [key in EarthModelType]: any } = {
base: BaseEarthModel,
atomSphere: EarthAtomSphereModel,
};
const earthLayerTypes = ['base', 'atomSphere'];
export default class EarthLayer extends BaseLayer<IEarthLayerStyleOptions> {
public type: string = 'EarthLayer';
public buildModels() {
const shape = 'base';
const shape = this.getModelType();
this.layerModel = new EarthModels[shape](this);
this.models = this.layerModel.initModels();
}
@ -30,4 +35,15 @@ export default class EarthLayer extends BaseLayer<IEarthLayerStyleOptions> {
console.error('请在 scene loaded 之后执行该方法!');
}
}
protected getModelType(): EarthModelType {
const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
'shape',
);
let shape = (shapeAttribute?.scale?.field || 'base') as string;
if (earthLayerTypes.indexOf(shape) < 0) {
shape = 'base';
}
return shape as EarthModelType;
}
}

View File

@ -0,0 +1,128 @@
import {
AttributeType,
BlendType,
gl,
IEncodeFeature,
ILayerConfig,
IModel,
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel, { styleOffset, styleSingle } from '../../core/BaseModel';
import { earthTriangulation } from '../../core/triangulation';
import atmoSphereFrag from '../shaders/atmosphere_frag.glsl';
import atmoSphereVert from '../shaders/atmosphere_vert.glsl';
interface IAtmoLayerStyleOptions {
opacity: number;
}
export default class EarthAtomSphereModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
opacity = 1,
} = this.layer.getLayerConfig() as IAtmoLayerStyleOptions;
return {
u_opacity: isNumber(opacity) ? opacity : 1.0,
};
}
public initModels(): IModel[] {
return this.buildModels();
}
public clearModels() {
return '';
}
public buildModels(): IModel[] {
return [
this.layer.buildLayerModel({
moduleName: 'earthAtmoSphere',
vertexShader: atmoSphereVert,
fragmentShader: atmoSphereFrag,
triangulation: earthTriangulation,
depth: {
enable: false,
},
blend: this.getBlend(),
}),
];
}
protected registerBuiltinAttributes() {
// point layer size;
this.styleAttributeService.registerStyleAttribute({
name: 'size',
type: AttributeType.Attribute,
descriptor: {
name: 'a_Size',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 1,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
const { size = 1 } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},
});
this.styleAttributeService.registerStyleAttribute({
name: 'normal',
type: AttributeType.Attribute,
descriptor: {
name: 'a_Normal',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.STATIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 3,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
normal: number[],
) => {
return normal;
},
},
});
this.styleAttributeService.registerStyleAttribute({
name: 'uv',
type: AttributeType.Attribute,
descriptor: {
name: 'a_Uv',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 2,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
return [vertex[3], vertex[4]];
},
},
});
}
}

View File

@ -0,0 +1,15 @@
uniform float u_opacity;
uniform vec3 u_CameraPosition;
varying vec3 vVertexNormal;
varying vec4 v_Color;
void main() {
float intensity = pow(0.5 + dot(normalize(vVertexNormal), normalize(u_CameraPosition)), 3.0);
// TODO: 去除背面
if(intensity > 1.0) intensity = 0.0;
gl_FragColor = vec4(v_Color.rgb, v_Color.a * intensity * u_opacity);
}

View File

@ -0,0 +1,20 @@
attribute vec3 a_Position;
attribute vec3 a_Normal;
attribute vec2 a_Uv;
attribute vec4 a_Color;
uniform vec3 u_CameraPosition;
uniform mat4 u_ViewProjectionMatrix;
uniform mat4 u_ModelMatrix;
uniform mat4 u_ViewMatrix;
varying vec3 vVertexNormal;
varying vec4 v_Color;
void main() {
v_Color = a_Color;
vVertexNormal = a_Normal;
gl_Position = u_ViewProjectionMatrix * u_ModelMatrix * vec4(a_Position, 1.0);
}

View File

@ -61,7 +61,6 @@ export function primitiveSphere(
const indicesArr = [];
const positions = [];
const positionsArr = [];
const normals = [];
const normalArr = [];
const uvs = [];
@ -96,7 +95,6 @@ export function primitiveSphere(
positionsArr.push(...tmpVec3.slice());
vec3.normalize(tmpVec3, tmpVec3);
normals.push(tmpVec3.slice());
normalArr.push(...tmpVec3.slice());
uvs.push([normalizedY, 1 - normalizedZ]);
@ -141,7 +139,6 @@ export function primitiveSphere(
return {
cells: indices,
positions,
normals,
uvs,
positionsArr,
indicesArr,

View File

@ -9,7 +9,6 @@ import {
IModel,
IModelUniform,
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import BaseModel, {
styleColor,
styleOffset,
@ -22,7 +21,7 @@ import {
import pointFillFrag from '../shaders/fill_frag.glsl';
import pointFillVert from '../shaders/fill_vert.glsl';
import { isNumber, isString } from 'lodash';
import { isNumber } from 'lodash';
import { mat4, vec3 } from 'gl-matrix';
@ -32,7 +31,6 @@ interface IPointLayerStyleOptions {
stroke: styleColor;
strokeOpacity: styleSingle;
offsets: styleOffset;
isGlobel?: boolean;
}
// 判断当前使用的 style 中的变量属性是否需要进行数据映射
export default class FillModel extends BaseModel {
@ -43,8 +41,6 @@ export default class FillModel extends BaseModel {
strokeWidth = 0,
stroke = 'rgba(0,0,0,0)',
offsets = [0, 0],
// TODO: 判断当前图层是否为地球模式
isGlobel = false,
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
if (

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.5.30",
"version": "2.5.31",
"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.30",
"@antv/l7-utils": "^2.5.31",
"@babel/runtime": "^7.7.7",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",

View File

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

View File

@ -61,6 +61,9 @@ export default class AMapService
*/
public map: AMap.Map & IAMapInstance;
// 背景色
public bgColor: string = 'rgba(0, 0, 0, 0)';
@inject(TYPES.IGlobalConfigService)
private readonly configService: IGlobalConfigService;
@ -79,6 +82,9 @@ export default class AMapService
private viewport: Viewport;
private cameraChangedCallback: (viewport: IViewport) => void;
public setBgColor(color: string) {
this.bgColor = color;
}
public addMarkerContainer(): void {
const mapContainer = this.map.getContainer();

View File

@ -70,6 +70,9 @@ export default class AMapService
public sceneCenter!: [number, number]; // 一般使用用户数据的第一个
public sceneCenterMKT!: [number, number]; // 莫卡托
// 背景色
public bgColor: string = 'rgba(0, 0, 0, 0)';
@inject(TYPES.IGlobalConfigService)
private readonly configService: IGlobalConfigService;
@ -88,6 +91,9 @@ export default class AMapService
private viewport: Viewport;
private cameraChangedCallback: (viewport: IViewport) => void;
public setBgColor(color: string) {
this.bgColor = color;
}
/**
* 2.0

View File

@ -11,6 +11,7 @@ import {
IMapService,
IMercator,
IPoint,
IRendererService,
IStatusOptions,
IViewport,
MapServiceEvent,
@ -42,6 +43,9 @@ export default class L7MapService implements IMapService<Map> {
public version: string = Version.GLOBEL;
public map: Map;
// 背景色
public bgColor: string = '#000';
@inject(TYPES.MapConfig)
private readonly config: Partial<IMapConfig>;
@ -51,6 +55,9 @@ export default class L7MapService implements IMapService<Map> {
@inject(TYPES.ICoordinateSystemService)
private readonly coordinateSystemService: ICoordinateSystemService;
@inject(TYPES.IRendererService)
private readonly renderService: IRendererService;
@inject(TYPES.IEventEmitter)
private eventEmitter: any;
private viewport: Viewport;
@ -60,7 +67,9 @@ export default class L7MapService implements IMapService<Map> {
// T: 用于记录鼠标对相机的控制
private handleCameraChanging: boolean;
private handleCameraTimer: any;
public setBgColor(color: string) {
this.bgColor = color;
}
// init
public addMarkerContainer(): void {
const container = this.map.getCanvasContainer();
@ -331,9 +340,15 @@ export default class L7MapService implements IMapService<Map> {
// mapbox 中固定相机高度为 viewport 高度的 1.5 倍
cameraHeight: 0,
});
this.cameraChangedCallback(this.viewport);
}
}
public clearColor() {
this.renderService.clear({ color: [0.0, 0.0, 0.0, 1.0] });
}
private handleCameraChanged = (e: any) => {
const DELAY_TIME = 2000;
this.handleCameraChanging = true;

View File

@ -43,6 +43,9 @@ export default class L7MapService implements IMapService<Map> {
public version: string = Version.L7MAP;
public map: Map;
// 背景色
public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)';
@inject(TYPES.MapConfig)
private readonly config: Partial<IMapConfig>;
@ -58,6 +61,9 @@ export default class L7MapService implements IMapService<Map> {
private markerContainer: HTMLElement;
private cameraChangedCallback: (viewport: IViewport) => void;
private $mapContainer: HTMLElement | null;
public setBgColor(color: string) {
this.bgColor = color;
}
// init
public addMarkerContainer(): void {

View File

@ -50,6 +50,9 @@ export default class MapboxService
public version: string = Version.MAPBOX;
public map: Map & IMapboxInstance;
// 背景色
public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)';
@inject(TYPES.MapConfig)
private readonly config: Partial<IMapConfig>;
@ -65,6 +68,9 @@ export default class MapboxService
private markerContainer: HTMLElement;
private cameraChangedCallback: (viewport: IViewport) => void;
private $mapContainer: HTMLElement | null;
public setBgColor(color: string) {
this.bgColor = color;
}
// init
public addMarkerContainer(): void {

View File

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

View File

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

View File

@ -153,6 +153,10 @@ class Scene
return this.mapService.map;
}
public setBgColor(color: string) {
this.mapService.setBgColor(color);
}
// layer 管理
public addLayer(layer: ILayer): void {
// 为当前图层创建一个容器

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.5.30",
"version": "2.5.31",
"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.30",
"@antv/l7-utils": "^2.5.30",
"@antv/l7-core": "^2.5.31",
"@antv/l7-utils": "^2.5.31",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

View File

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

View File

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

View File

@ -21,6 +21,8 @@ export default class ScaleComponent extends React.Component {
}),
});
scene.setBgColor('#333');
let data = [
{
lng1: 100,
@ -102,7 +104,8 @@ export default class ScaleComponent extends React.Component {
},
},
)
.color('#2E8AE6')
// .color('#2E8AE6')
.color('#f00')
.shape('fill')
.style({
opacity: 1.0,
@ -114,16 +117,43 @@ export default class ScaleComponent extends React.Component {
// earthTime: 4.0
earthTime: 0.1,
},
});
// .animate(true);
})
.animate(true);
// earthlayer.setEarthTime(4.0)
const atomLayer = new EarthLayer()
.source(
[
{
lng1: 100,
lat1: 30.0,
lng2: 130,
lat2: 30,
},
],
{
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
},
)
.color('#2E8AE6')
.shape('atomSphere')
.style({
opacity: 1.5,
});
scene.on('loaded', () => {
scene.addLayer(earthlayer);
// scene.addLayer(pointlayer);
// console.log(pointlayer)
// earthlayer.setEarthTime(4.0);
scene.addLayer(atomLayer);
scene.addLayer(lineLayer);
});
}