From 958faeccfdeba14a6c19804a80cae87eb3e9bbd6 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Mon, 11 Oct 2021 15:43:58 +0800 Subject: [PATCH] Shihui dev (#791) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- lerna.json | 2 +- packages/component/package.json | 6 +- packages/core/package.json | 4 +- packages/l7/package.json | 14 +- packages/l7/src/version.ts | 2 +- packages/layers/package.json | 8 +- packages/layers/src/core/interface.ts | 5 +- packages/layers/src/line/models/arc_3d.ts | 11 ++ .../src/line/shaders/line_arc_3d_vert.glsl | 45 ++++++ packages/map/package.json | 4 +- packages/maps/package.json | 8 +- packages/renderer/package.json | 4 +- packages/scene/package.json | 14 +- packages/source/package.json | 6 +- packages/three/package.json | 8 +- packages/utils/package.json | 2 +- stories/customMap/components/earth2.tsx | 145 ++++++++++++++++++ stories/customMap/map.stories.tsx | 2 + 18 files changed, 248 insertions(+), 42 deletions(-) create mode 100644 stories/customMap/components/earth2.tsx diff --git a/lerna.json b/lerna.json index fb3a9c9581..a2000696ed 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.5.29", + "version": "2.5.30", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index 5e84590ad9..8c4e8f052b 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -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", diff --git a/packages/core/package.json b/packages/core/package.json index 5317790398..06397228c7 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -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", diff --git a/packages/l7/package.json b/packages/l7/package.json index 58002e5069..4bcb67a9bb 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -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", diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index 2b1cbc1e09..c28e37bf03 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.5.29'; +const version = '2.5.30'; export { version }; diff --git a/packages/layers/package.json b/packages/layers/package.json index 3196a82276..2521211eb3 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -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", diff --git a/packages/layers/src/core/interface.ts b/packages/layers/src/core/interface.ts index 00302c1984..3bcf73eff3 100644 --- a/packages/layers/src/core/interface.ts +++ b/packages/layers/src/core/interface.ts @@ -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 弧线的高度 } diff --git a/packages/layers/src/line/models/arc_3d.ts b/packages/layers/src/line/models/arc_3d.ts index c4428e4a64..a7864af699 100644 --- a/packages/layers/src/line/models/arc_3d.ts +++ b/packages/layers/src/line/models/arc_3d.ts @@ -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, }), ]; } diff --git a/packages/layers/src/line/shaders/line_arc_3d_vert.glsl b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl index 100502203c..3cb3685e98 100644 --- a/packages/layers/src/line/shaders/line_arc_3d_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl @@ -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); } diff --git a/packages/map/package.json b/packages/map/package.json index 82974434e7..22179eef3b 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-map", - "version": "2.5.29", + "version": "2.5.30", "description": "l7 map", "keywords": [], "author": "thinkinggis ", @@ -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", diff --git a/packages/maps/package.json b/packages/maps/package.json index c8f6c05a25..595bf45b70 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -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", diff --git a/packages/renderer/package.json b/packages/renderer/package.json index afb81abbf6..ef50d7a54f 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -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", diff --git a/packages/scene/package.json b/packages/scene/package.json index 11e7252b25..a53fb114ea 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -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", diff --git a/packages/source/package.json b/packages/source/package.json index e494d8d4d4..227bc75176 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -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", diff --git a/packages/three/package.json b/packages/three/package.json index 45e8e68dba..c038c8d3dd 100644 --- a/packages/three/package.json +++ b/packages/three/package.json @@ -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", diff --git a/packages/utils/package.json b/packages/utils/package.json index bf9046c3eb..b4d4790e83 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -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", diff --git a/stories/customMap/components/earth2.tsx b/stories/customMap/components/earth2.tsx new file mode 100644 index 0000000000..713f309959 --- /dev/null +++ b/stories/customMap/components/earth2.tsx @@ -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 ( +
+ ); + } +} diff --git a/stories/customMap/map.stories.tsx b/stories/customMap/map.stories.tsx index 44be6aeb4a..8e86ee3669 100644 --- a/stories/customMap/map.stories.tsx +++ b/stories/customMap/map.stories.tsx @@ -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', () => ) +.add('Earth2', () => ) .add('地图', () => ) .add('地图2', () => );