From e37ae61516df5941fd9f0a444d3b832a158082dd Mon Sep 17 00:00:00 2001 From: "@thinkinggis" Date: Mon, 11 Oct 2021 14:15:27 +0800 Subject: [PATCH 1/4] Feat source (#765) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: layer 初始化支持传入source 对象 * fix: l7 导出source * fix: lint error Co-authored-by: 象数 --- packages/l7/src/index.ts | 2 ++ packages/layers/src/core/BaseLayer.ts | 6 ++++++ packages/source/src/source.ts | 5 +++-- stories/Layers/components/polygon_line.tsx | 7 +++++-- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/l7/src/index.ts b/packages/l7/src/index.ts index 242d1c912c..dafcc0cee3 100644 --- a/packages/l7/src/index.ts +++ b/packages/l7/src/index.ts @@ -1,3 +1,4 @@ +import Source from '@antv/l7-source'; export * from '@antv/l7-core'; export * from '@antv/l7-scene'; export * from '@antv/l7-maps'; @@ -5,3 +6,4 @@ export * from '@antv/l7-layers'; export * from '@antv/l7-component'; export * from '@antv/l7-utils'; export * from './version'; +export { Source }; diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 29e467f321..e190a60c5d 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -30,6 +30,7 @@ import { IScale, IScaleOptions, IShaderModuleService, + ISource, ISourceCFG, IStyleAttributeInitializationOptions, IStyleAttributeService, @@ -451,6 +452,11 @@ export default class BaseLayer extends EventEmitter } public source(data: any, options?: ISourceCFG): ILayer { + if (data?.data) { + // 判断是否为source + this.setSource(data); + return this; + } this.sourceOption = { data, options, diff --git a/packages/source/src/source.ts b/packages/source/src/source.ts index c0c04cc45b..cd83ddc4ef 100644 --- a/packages/source/src/source.ts +++ b/packages/source/src/source.ts @@ -6,6 +6,7 @@ import { IParseDataItem, IParserCfg, IParserData, + ISource, ISourceCFG, ITransform, lazyInject, @@ -35,7 +36,7 @@ function mergeCustomizer(objValue: any, srcValue: any) { } } -export default class Source extends EventEmitter { +export default class Source extends EventEmitter implements ISource { public data: IParserData; // 数据范围 @@ -66,7 +67,7 @@ export default class Source extends EventEmitter { private clusterIndex: Supercluster; - constructor(data: any, cfg?: ISourceCFG) { + constructor(data: any | ISource, cfg?: ISourceCFG) { super(); // this.rawData = cloneDeep(data); this.originData = data; diff --git a/stories/Layers/components/polygon_line.tsx b/stories/Layers/components/polygon_line.tsx index cc65d0d42c..8f5d5bd634 100644 --- a/stories/Layers/components/polygon_line.tsx +++ b/stories/Layers/components/polygon_line.tsx @@ -1,6 +1,7 @@ // @ts-ignore import { Layers, + Source, LineLayer, PointLayer, PolygonLayer, @@ -43,8 +44,10 @@ export default class World extends React.Component { autoFit: true, }); + const dataSource = new Source(data); + layer - .source(data) + .source(dataSource) .color('name', [ '#2E8AE6', '#69D1AB', @@ -65,7 +68,7 @@ export default class World extends React.Component { }); linelayer - .source(data) + .source(dataSource) .color('#fff') .size(1) .shape('line') From 2ff39ccd9b87e81eb1ce19592de6a6ebdb964e8c Mon Sep 17 00:00:00 2001 From: hustcc Date: Mon, 11 Oct 2021 14:19:23 +0800 Subject: [PATCH 2/4] docs: set default lang is zh (#783) * docs: set default lang is zh * fix: typo, l7 -> L7 --- README.en-US.md | 98 +++++++++++++++++++++++++++++++ README.md | 120 ++++++++++++++++++++++++-------------- README.zh-CN.md | 131 ------------------------------------------ packages/l7/README.md | 3 +- 4 files changed, 175 insertions(+), 177 deletions(-) create mode 100644 README.en-US.md delete mode 100644 README.zh-CN.md diff --git a/README.en-US.md b/README.en-US.md new file mode 100644 index 0000000000..6ca18d80e3 --- /dev/null +++ b/README.en-US.md @@ -0,0 +1,98 @@ +# 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. + +[中文 README](./README.md) + +[GitHub](https://github.com/antvis/L7) + +Powered by WebGL, the rendering technology of L7 supports fast and efficient rendering of big data, 2D/3D rendering, possible through calculation and analysis of spatial data by GPU Parallel Compu-ting. + +L7 focuses on geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services + +## 🌄 L7 visualization demos + +![L7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ) + +## 🌟 Highlight features of L7 2.0 + +- 🌏 Data-driven Visualization + + Layer visualization API design base Semiology of Graphics. + + It supports rich map visualization types for a better insight on data. + +- 🌏 High performance rendering with 2D/3D effect + Real-time and dynamic rendering with millions of spatial data. + +- 🌏 Simple and flexible data format + + L7 supports a wide variety of data formats including CSV, JSON, geojson, among others, eliminating the need to run conversions ahead of time. + +- 🌏 Multi-basemap + + For global users, Mapbox is easy to be embedded by a simple line of code. + +## Getting Started + +### 📦 Installation + +```bash +npm install @antv/l7 +``` + +### Init Map by L7 scene + +```javascript +import { Scene } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'light', + pitch: 0, + center: [107.054293, 35.246265], + zoom: 4.056, + }), +}); +``` + +### Add Layer + +```javascript +import { PointLayer } from '@antv/l7'; + +const pointLayer = new PointLayer() + .source(data) + .shape('circle') + .size('mag', [1, 25]) + .color('mag', ['#5B8FF9', '#5CCEA1']) + .style({ + opacity: 0.3, + strokeWidth: 1, + }); + +scene.addLayer(pointLayer); +``` + +## :memo: Documentation + +- [Getting started with L7](https://l7.antv.vision/en/docs/api/l7) +- [Tutorials](https://l7.antv.vision/en/docs/tutorial/quickstart) +- [API documentation](https://l7.antv.vision/en/docs/api/l7) +- [Examples](https://l7.antv.vision/en/examples/gallery/basic) +- [Contributor documentation](./.github/CONTRIBUTING.md) + +## 🔗 Links + +- [L7 React](https://github.com/antvis/L7-React) +- [L7 Boundary](https://github.com/antvis/L7-boundary) +- [L7 draw](https://github.com/antvis/L7-draw) + +## ✅ License + +[MIT license](./LICENSE). diff --git a/README.md b/README.md index 3c3d75e3b1..8e3f9a8f32 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,82 @@ -# L7 +## 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. - -[中文 README](./README.zh-CN.md) +[README](./README.en-US.md) [GitHub](https://github.com/antvis/L7) -Powered by WebGL, the rendering technology of L7 supports fast and efficient rendering of big data, 2D/3D rendering, possible through calculation and analysis of spatial data by GPU Parallel Compu-ting. - -L7 focuses on geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services - -## 🌄 l7 visualization demos - -![l7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ) - -## 🌟 Highlight features of L7 2.0 - -- 🌏 Data-driven Visualization - - Layer visualization API design base Semiology of Graphics. - - It supports rich map visualization types for a better insight on data. - -- 🌏 High performance rendering with 2D/3D effect - Real-time and dynamic rendering with millions of spatial data. - -- 🌏 Simple and flexible data format - - L7 supports a wide variety of data formats including CSV, JSON, geojson, among others, eliminating the need to run conversions ahead of time. - -- 🌏 Multi-basemap - - For global users, Mapbox is easy to be embedded by a simple line of code. - -## Getting Started - -### 📦 Installation - +```bash + git clone https://github.com/antvis/L7 --depth=1 ``` + +L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。 + +L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。 + +![L7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ) + +## 🌟 核心特性 + +🌏 数据驱动可视化展示 + +数据驱动，灵活数据映射，从数到形，支持丰富的地图可视化类型，更好洞察数据。 + +🌏 2D，3D 一体化的海量数据高性能渲染 + +海量空间数据实时，可交互，动态渲染， + +🌏 简单灵活的数据接入 + +支持 CSV，JSON，GeoJSON 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 + +🌏 多地图底图支持，支持离线内网部署 + +屏蔽不同底图之间的差异，用户只需要关注数据层表达，交互。高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。 + +## 🌈 支持丰富的图表类型 + +#### 点图层 + +- 气泡图 +- 散点图 +- 符号地图 +- 3D 柱状地图 +- 聚合地图 +- 复合图表地图 +- 自定义 Marker + +#### 线图层 + +- 路径地图 +- 弧线，支持 2D 弧线、3D 弧线以及大圆航线 +- 等值线 + +#### 面图层 + +- 填充图 +- 3D 填充图 + +#### 热力图 + +- 经典热力图 +- 蜂窝热力图 +- 网格热力图 + +#### 栅格地图 + +- 图片 +- Raster + +## 📦 如何使用 + +### 安装 + +```bash npm install @antv/l7 ``` -### Init Map by L7 scene +### 初始化地图 ```javascript import { Scene } from '@antv/l7'; @@ -61,7 +93,7 @@ const scene = new Scene({ }); ``` -### Add Layer +### 添加图层 ```javascript import { PointLayer } from '@antv/l7'; @@ -79,13 +111,13 @@ const pointLayer = new PointLayer() scene.addLayer(pointLayer); ``` -## :memo: Documentation +## :memo: 文档 -- [Getting started with L7](https://l7.antv.vision/en/docs/api/l7) -- [Tutorials](https://l7.antv.vision/en/docs/tutorial/quickstart) -- [API documentation](https://l7.antv.vision/en/docs/api/l7) -- [Examples](https://l7.antv.vision/en/examples/gallery/basic) -- [Contributor documentation](./.github/CONTRIBUTING.md) +- [开始使用](https://l7.antv.vision/en/docs/api/l7) +- [教程](https://l7.antv.vision/en/docs/tutorial/quickstart) +- [文档](https://l7.antv.vision/en/docs/api/l7) +- [示例](https://l7.antv.vision/en/examples/gallery/basic) +- [贡献](./.github/CONTRIBUTING.md) ## 🔗 Links diff --git a/README.zh-CN.md b/README.zh-CN.md deleted file mode 100644 index 2f00441b3f..0000000000 --- a/README.zh-CN.md +++ /dev/null @@ -1,131 +0,0 @@ -## 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) - -[README](./README.md) - -[GitHub](https://github.com/antvis/L7) - -```bash - git clone https://github.com/antvis/L7 --depth=1 -``` - -L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。 - -L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。 - -![l7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ) - -## 🌟 核心特性 - -🌏 数据驱动可视化展示 - -数据驱动，灵活数据映射，从数到形，支持丰富的地图可视化类型，更好洞察数据。 - -🌏 2D，3D 一体化的海量数据高性能渲染 - -海量空间数据实时，可交互，动态渲染， - -🌏 简单灵活的数据接入 - -支持 CSV，JSON，GeoJSON 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 - -🌏 多地图底图支持，支持离线内网部署 - -屏蔽不同底图之间的差异，用户只需要关注数据层表达，交互。高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。 - -## 🌈 支持丰富的图表类型 - -#### 点图层 - -- 气泡图 -- 散点图 -- 符号地图 -- 3D 柱状地图 -- 聚合地图 -- 复合图表地图 -- 自定义 Marker - -#### 线图层 - -- 路径地图 -- 弧线，支持 2D 弧线、3D 弧线以及大圆航线 -- 等值线 - -#### 面图层 - -- 填充图 -- 3D 填充图 - -#### 热力图 - -- 经典热力图 -- 蜂窝热力图 -- 网格热力图 - -#### 栅格地图 - -- 图片 -- Raster - -## 📦 如何使用 - -### 安装 - -``` -npm install @antv/l7@beta - -``` - -### 初始化地图 - -```javascript -import { Scene } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; - -const scene = new Scene({ - id: 'map', - map: new Mapbox({ - style: 'light', - pitch: 0, - center: [107.054293, 35.246265], - zoom: 4.056, - }), -}); -``` - -### 添加图层 - -```javascript -import { PointLayer } from '@antv/l7'; - -const pointLayer = new PointLayer() - .source(data) - .shape('circle') - .size('mag', [1, 25]) - .color('mag', ['#5B8FF9', '#5CCEA1']) - .style({ - opacity: 0.3, - strokeWidth: 1, - }); - -scene.addLayer(pointLayer); -``` - -## :memo: 文档 - -- [开始使用](https://l7.antv.vision/en/docs/api/l7) -- [教程](https://l7.antv.vision/en/docs/tutorial/quickstart) -- [文档](https://l7.antv.vision/en/docs/api/l7) -- [示例](https://l7.antv.vision/en/examples/gallery/basic) -- [贡献](./.github/CONTRIBUTING.md) - -## 🔗 Links - -- [L7 React](https://github.com/antvis/L7-React) -- [L7 Boundary](https://github.com/antvis/L7-boundary) -- [L7 draw](https://github.com/antvis/L7-draw) - -## ✅ License - -[MIT license](./LICENSE). diff --git a/packages/l7/README.md b/packages/l7/README.md index 881a6bb0cb..9f5011e38e 100644 --- a/packages/l7/README.md +++ b/packages/l7/README.md @@ -10,9 +10,8 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework ### Installation -``` +```bash npm install @antv/l7 - ``` ### Features From 48119b42278fbdcd9b78877109e368b1fc4afec0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=40=E5=8A=A0=E8=8F=B2=E7=8C=AB?= <793190036@qq.com> Date: Mon, 11 Oct 2021 14:22:11 +0800 Subject: [PATCH 3/4] Update drilldown.zh.md (#782) --- docs/api/district/drilldown.zh.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/api/district/drilldown.zh.md b/docs/api/district/drilldown.zh.md index ffd62538cb..c50d00374c 100644 --- a/docs/api/district/drilldown.zh.md +++ b/docs/api/district/drilldown.zh.md @@ -36,6 +36,14 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下 向下钻取的触发事件 ⛔customTrigger 为 true 时不生效 +### drillDownEvent + +根据drillDownTriggerEvent类型下钻触发的回调事件 属性 + +### drillUpEvent + +根据drillUpTriggleEvent类型上钻触发的回调事件 属性 + ### drillUpTriggleEvent 向上钻取的触发事件 ⛔customTrigger 为 true 时不生效 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 4/4] 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', () => );