mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' of https://github.com/antvis/L7
This commit is contained in:
2912401452
commit
0be9777e72
|
|
@ -0,0 +1,98 @@
|
|||
# L7
|
||||
|
||||
.
|
||||
[](https://travis-ci.com/antvis/L7) [](https://www.npmjs.com/package/@antv/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
|
||||
|
||||
|
||||
|
||||
## 🌟 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).
|
||||
120
README.md
120
README.md
|
|
@ -1,50 +1,82 @@
|
|||
# L7
|
||||
## L7 地理空间数据可视分析引擎
|
||||
|
||||
.
|
||||
[](https://travis-ci.com/antvis/L7) [](https://www.npmjs.com/package/@antv/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
|
||||
|
||||
|
||||
|
||||
## 🌟 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，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。
|
||||
|
||||
|
||||
|
||||
## 🌟 核心特性
|
||||
|
||||
🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，灵活数据映射，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
||||
🌏 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
|
||||
|
||||
|
|
|
|||
131
README.zh-CN.md
131
README.zh-CN.md
|
|
@ -1,131 +0,0 @@
|
|||
## L7 地理空间数据可视分析引擎
|
||||
|
||||
[](https://travis-ci.com/antvis/L7) [](https://www.npmjs.com/package/@antv/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，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。
|
||||
|
||||
|
||||
|
||||
## 🌟 核心特性
|
||||
|
||||
🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，灵活数据映射，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
||||
🌏 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).
|
||||
|
|
@ -36,6 +36,14 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
|
|||
|
||||
向下钻取的触发事件 ⛔customTrigger 为 true 时不生效
|
||||
|
||||
### drillDownEvent
|
||||
|
||||
根据drillDownTriggerEvent类型下钻触发的回调事件 属性
|
||||
|
||||
### drillUpEvent
|
||||
|
||||
根据drillUpTriggleEvent类型上钻触发的回调事件 属性
|
||||
|
||||
### drillUpTriggleEvent
|
||||
|
||||
向上钻取的触发事件 ⛔customTrigger 为 true 时不生效
|
||||
|
|
|
|||
|
|
@ -10,9 +10,8 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
|
|||
|
||||
### Installation
|
||||
|
||||
```
|
||||
```bash
|
||||
npm install @antv/l7
|
||||
|
||||
```
|
||||
|
||||
### Features
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ import {
|
|||
IScale,
|
||||
IScaleOptions,
|
||||
IShaderModuleService,
|
||||
ISource,
|
||||
ISourceCFG,
|
||||
IStyleAttributeInitializationOptions,
|
||||
IStyleAttributeService,
|
||||
|
|
@ -451,6 +452,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
}
|
||||
|
||||
public source(data: any, options?: ISourceCFG): ILayer {
|
||||
if (data?.data) {
|
||||
// 判断是否为source
|
||||
this.setSource(data);
|
||||
return this;
|
||||
}
|
||||
this.sourceOption = {
|
||||
data,
|
||||
options,
|
||||
|
|
|
|||
|
|
@ -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 弧线的高度
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 />);
|
||||
|
|
|
|||
Loading…
Reference in New Issue