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

Merge branch 'master' of https://github.com/antvis/L7

This commit is contained in:
2912401452 2022-01-18 16:05:07 +08:00
parent 8057d8bd38 2bafd85df9
commit 090b8472ce
40 changed files with 353 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/api/FAQ.zh.md
View File

@ -13,3 +13,13 @@ Error: Cannot apply @injectable decorator multiple times.
🌟 解决方法：
删除 node_modules 下所有不同版本的 L7 包，重新安装启动即可
### 禁止地图交互
1. 初始化的时候可以在 map 配置项设置
- 高德地图可查看 https://lbs.amap.com/api/javascript-api/reference/map
- mapbox https://docs.mapbox.com/mapbox-gl-js/api/#map
2. 加载完成后设置
调用 scene 的 [setMapStatus](./scene/#setmapstatus) 方法

40
docs/api/changelog.zh.md
View File

@ -5,9 +5,39 @@ order: 15
`markdown:docs/common/style.md`
## 20201.05.31 2.4 正式版本
## 2022.01.17 2.7 正式版本
###✨ Features
### ✨ Features
- 新增简单点、简单线
- 新增墙图层
- 新增风场图层
### 🍏 Improvements
- 柱图支持生长动画
- 柱图支持配置渐变、光照、深度
- 点图层支持等面积模式
- 线图层支持配置高度
- 弧线支持动态配置弧度
- 面图层支持配置径向渐变
- 拾取效果支持配置混合，光照计算
- color 增加图层保底颜色设置
- 增加 pointLayer image mipmap 支持
- 优化热力图在 radius 数值比较大时热力点边缘发生裁剪的现象
### 🐞 Bug Fixes
- 修复线图层在存在高度的情况下，不同地图，不同场景下的效果兼容
- 修复 threejs 图层导致 L7 图层失效的问题
- 修复 pointLayer meter 单个数据失效的情况
- 修复 marker 在 cluster getMakers 失效
- 取消在 shape 方法执行后的暴力更新
- 修复纹理贴图在 zoom 大于 12 时存在错位的问题
## 2021.05.31 2.4 正式版本
### ✨ Features
- 支持高德 2.0 JSAPI
- 支持 iconfont 字体图标功能
@ -24,7 +54,7 @@ order: 15
## 2020.04.20 2.2 正式版本
###✨ Features
### ✨ Features
#### [L7-Draw 地图绘制组件发布](../draw/start)
@ -52,7 +82,7 @@ order: 15
## 2020.03.12 2.1 正式版
###✨ Features
### ✨ Features
- 新增 l7-react 版本
- 可自定义样式的聚合图 MakerLayer
@ -74,7 +104,7 @@ order: 15
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
###✨ Features
### ✨ Features
• 新增弧线图，路径图动画功能

2
docs/api/component/marker.en.md
View File

@ -87,3 +87,5 @@ new L7.Marker({
.setLnglat(item.coordinates)
.setPopup(popup);
```
[demo1](../../../examples/tutorial/marker#amap)

2
docs/api/component/marker.zh.md
View File

@ -140,4 +140,4 @@ marker.on('click', (e) => {});
## demo 地址
[demo1](../../../examples/tutorial/marker)
[demo1](../../../examples/tutorial/marker#amap)

4
docs/api/component/popup.en.md
View File

@ -153,5 +153,5 @@ popup.on('close', () => {});
## demo 地址
[demo1](../../../examples/point/column)
[demo2](../../../examples/line/path)
[demo1](../../../examples/point/column#column_linear)
[demo2](../../../examples/line/path#bus_light)

4
docs/api/component/popup.zh.md
View File

@ -146,5 +146,5 @@ popup.on('close', () => {});
## demo 地址
[demo1](../../../examples/point/column)
[demo2](../../../examples/line/path)
[demo1](../../../examples/point/column#column_linear)
[demo2](../../../examples/line/path#bus_light)

4
docs/api/line_layer/arc3d.zh.md
View File

@ -29,9 +29,9 @@ const layer = new LineLayer({})
});
```
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ'>
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xvaaQo2c0gMAAAAAAAAAAABkARQnAQ'>
[在线案例](../../../examples/gallery/basic#arcCircle)
[在线案例](../../../examples/line/arc#trip_arc)
### shape

2
docs/api/line_layer/features/animate.zh.md
View File

@ -29,7 +29,7 @@ L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*W-m5Q6yrL_UAAAAAAAAAAAAAARQnAQ'>
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mo_7Q6sTqOIAAAAAAAAAAAAAARQnAQ'>
[在线案例](../../../examples/gallery/animate#plane_animate2)

2
docs/api/line_layer/features/linear.zh.md
View File

@ -22,6 +22,6 @@ const layer = new LineLayer({})
});
```
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*RZEgSYZLeJIAAAAAAAAAAAAAARQnAQ'>
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*8DYQTZeQyZ4AAAAAAAAAAAAAARQnAQ'>
[在线案例](../../../examples/line/arc#trip_arc_dark_linear)

4
docs/api/line_layer/features/texture.zh.md
View File

@ -31,7 +31,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785
- lineTexture 指定是否开启纹理贴图能力
- iconStep 指定贴图在线图层上面排布的间隔
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i2fJSJHpVGcAAAAAAAAAAAAAARQnAQ'>
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ'>
[在线案例](../../../examples/gallery/animate#animate_path_texture)
@ -67,5 +67,5 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785
```
[在线案例](../../../examples/gallery/animate#route_line)
[在线案例](../../../examples/line/animate#plane_animate2)

2
docs/api/line_layer/features/thetaOffset.zh.md
View File

@ -20,6 +20,6 @@ const layer = new LineLayer({})
thetaOffset: 0.35,
});
```
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i6d6SqQgjAwAAAAAAAAAAAAAARQnAQ'>
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*qRFaR7Ko274AAAAAAAAAAAAAARQnAQ'>
[在线案例](../../../examples/gallery/animate#route_line)

2
docs/api/line_layer/linelayer.zh.md
View File

@ -87,6 +87,6 @@ lineLayer.size([1, 2]); // 宽度为1，高度2
`markdown:docs/api/line_layer/features/texture.zh.md`
[在线案例](../../../examples/line/isoline#height)
`markdown:docs/api/line_layer/features/vertexHeight.zh.md`
`markdown:docs/common/layer/base.md`

2
docs/api/line_layer/path.zh.md
View File

@ -12,7 +12,7 @@ order: 1
import { LineLayer } from '@antv/l7';
```
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VJX5Qo7ufaAAAAAAAAAAAABkARQnAQ'>
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ'>
[在线案例](../../../examples/gallery/animate#animate_path)

2
docs/api/point_layer/simple.zh.md
View File

@ -37,8 +37,6 @@ import { PointLayer } from '@antv/l7';
scene.getPointSizeRange(); // Float32Array - [min, max]
```
## 相关 demo
[在线案例](../../../examples/point/dot#normal2)
`markdown:docs/common/layer/base.md`

2
docs/api/polygon_layer/extrude.zh.md
View File

@ -47,6 +47,6 @@ style({
});
```
[光照拾取](../../../../examples/react/covid#covid_extrude)
[光照拾取](/zh/examples/react/covid#covid_extrude)
`markdown:docs/common/layer/base.md`

12
docs/api/scene.zh.md
View File

@ -803,15 +803,3 @@ scene.on('dragstart', (ev) => {}); //开始拖拽地图时触发
scene.on('dragging', (ev) => {}); // 拖拽地图过程中触发
scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
```
## FAQ
### 禁止地图交互
1. 初始化的时候可以在 map 配置项设置
- 高德地图可查看 https://lbs.amap.com/api/javascript-api/reference/map
- mapbox https://docs.mapbox.com/mapbox-gl-js/api/#map
2. 加载完成后设置
调用 scene 的 [setMapStatus](./scene/#setmapstatus) 方法

2
docs/api/source/json.zh.md
View File

@ -41,7 +41,7 @@ layer.source(data, {
});
```
[JOSN 数据 demo 示例](../../../examples/gallery/basic)
[JOSN 数据 demo 示例](../../../examples/gallery/animate#animate_path_texture)
### 通用解析方式

2
docs/api/source/source.zh.md
View File

@ -40,7 +40,7 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
- minZoom: 最小聚合缩放等级 **number** default 0
- maxZoom: 最大聚合缩放等级 **number** default 16
[聚合图使用案例](../../../examples/point/cluster)
[聚合图使用案例](../../../examples/point/cluster#cluster)
### parser

1
docs/api/wind.zh.md
View File

@ -18,6 +18,7 @@ import { WindLayer } from '@antv/l7';
(data, options) => WindLayer, 设置风场相关信息的函数
- data: string 存储风场信息的图片地址
🌟 [数据获取](https://github.com/mapbox/webgl-wind#downloading-weather-data)
- options:
```js

4
docs/common/layer/layer_encode.md
View File

@ -7,9 +7,9 @@
- data { geojson | json | csv }
- config   可选   数据源配置项
- parser 数据解析，默认是解析层 geojson
- transforms [transform，transform ]  数据处理转换 可设置多个
- transforms [transform，transform ]  数据处理转换可设置多个
parser 和  transforms [见 source 文档](../../source/source)
parser 和  transforms [见 source 文档](/zh/docs/api/source/source)
```javascript
layer.source(data, {

4
docs/common/layer/layer_texture.md
View File

@ -34,6 +34,6 @@ const layer = new LineLayer({
});
```
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i2fJSJHpVGcAAAAAAAAAAAAAARQnAQ'>
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ'>
[在线案例](../../examples/gallery/animate#animate_path_texture)
[在线案例](../../examples/line/animate#plane_animate2)

2
examples/line/arc/demo/meta.json
View File

@ -12,7 +12,7 @@
{
"filename": "trip_arc_dark.js",
"title": "3D 弧线",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Qg8sQ4H9RVsAAAAAAAAAAAAAARQnAQ"
},
{

4
examples/line/arc/demo/trip_arc_dark.js
View File

@ -18,7 +18,7 @@ scene.on('loaded', () => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
type: 'json',
x: 'from_lon',
y: 'from_lat',
x1: 'to_lon',
@ -26,7 +26,7 @@ scene.on('loaded', () => {
}
})
.size(1)
.shape('arc')
.shape('arc3d')
.color('#FF7C6A')
.style({
segmentNumber: 15,

62
examples/point/cluster/demo/cluster2.js Normal file
View File

@ -0,0 +1,62 @@
import { Scene, PointLayer, Source } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
style: 'dark',
zoom: 3
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/bmw-prod/87e40417-a5da-4fdb-8313-c796ea15f982.csv')
.then(res => res.text())
.then(data => {
const dataSource = new Source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
cluster: true
});
const pointLayer = new PointLayer({
autoFit: true
})
.source(dataSource)
.shape('circle')
.scale('point_count', {
type: 'quantile'
})
.size('point_count', [ 5, 10, 15, 20, 25 ])
.active(true)
.color('rgb(73,167,86)')
.style({
opacity: 1,
strokeWidth: 1,
stroke: '#fff'
});
// 聚合图标注
const pointLayerText = new PointLayer({
autoFit: false
})
.source(dataSource)
.shape('point_count', 'text')
.size(15)
.active(true)
.color('#fff')
.style({
opacity: 1,
strokeWidth: 0,
stroke: '#fff'
});
scene.addLayer(pointLayer);
scene.addLayer(pointLayerText);
});
});

7
examples/point/cluster/demo/meta.json
View File

@ -7,7 +7,12 @@
{
"filename": "cluster.js",
"title": "聚合图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*MowATbzWK_QAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
},
{
"filename": "cluster2.js",
"title": "充电桩分布聚合图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_08cc33/afts/img/A*dy0NSJHoRSYAAAAAAAAAAAAAARQnAQ"
}
]

4
examples/tutorial/control/API.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: API
---
`markdown:docs/api/base.en.md`

4
examples/tutorial/control/API.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: API
---
`markdown:docs/api/base.zh.md`

4
examples/tutorial/layer/API.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: API
---
`markdown:docs/api/base.en.md`

4
examples/tutorial/layer/API.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: API
---
`markdown:docs/api/base.zh.md`

4
examples/tutorial/map/API.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: API
---
`markdown:docs/api/base.en.md`

4
examples/tutorial/map/API.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: API
---
`markdown:docs/api/base.zh.md`

4
examples/tutorial/marker/API.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: API
---
`markdown:docs/api/base.en.md`

4
examples/tutorial/marker/API.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: API
---
`markdown:docs/api/base.zh.md`

1
packages/core/src/services/layer/ILayerService.ts
View File

@ -98,6 +98,7 @@ export interface ILayer {
name: string; //
inited: boolean; // 是否初始化完成
zIndex: number;
clusterZoom: number;
plugins: ILayerPlugin[];
layerModelNeedUpdate: boolean;
styleNeedUpdate: boolean;

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

@ -73,6 +73,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
public selectedFeatureID: number | null = null;
public styleNeedUpdate: boolean = false;
public rendering: boolean;
public clusterZoom: number = 0; // 聚合等级标记
public dataState: IDataState = {
dataSourceNeedUpdate: false,
@ -491,6 +492,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
data,
options,
};
this.clusterZoom = 0;
return this;
}
public setData(data: any, options?: ISourceCFG) {
@ -862,6 +864,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
this.layerSource = source;
this.clusterZoom = 0;
// 已 inited 且启用聚合进行更新聚合数据
if (this.inited && this.layerSource.cluster) {
@ -1093,7 +1096,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
if (autoFit) {
this.fitBounds(fitBoundsOptions);
}
// 对外暴露事件
this.emit('dataUpdate');
this.reRender();
};

10
packages/layers/src/plugins/DataSourcePlugin.ts
View File

@ -46,10 +46,14 @@ export default class DataSourcePlugin implements ILayerPlugin {
// 如果 dataSource 有更新，跳过 zoom 的判断，直接更新一次
if (
cluster &&
(dataSourceNeedUpdate || Math.abs(zoom - newZoom) > 1) &&
maxZoom > zoom
(dataSourceNeedUpdate || Math.abs(layer.clusterZoom - newZoom) >= 1) &&
maxZoom > layer.clusterZoom
) {
source.updateClusterData(Math.floor(newZoom));
// TODO 判断数据是否更新
if (zoom !== Math.floor(newZoom)) {
source.updateClusterData(Math.round(newZoom));
}
layer.clusterZoom = newZoom;
return true;
}
return false;

2
stories/Layers/Layers.stories.tsx
View File

@ -5,6 +5,7 @@ import Arc2DLineDemo from './components/Arc2DLine';
import ArcLineDemo from './components/Arcline';
import CityBuildingLayerDemo from './components/citybuilding';
import ClusterDemo from './components/cluster';
import ClusterDemo2 from './components/cluster2';
import Column from './components/column';
import DashLineDemo from './components/dash';
import DataUpdate from './components/data_update';
@ -31,6 +32,7 @@ import TextLayerDemo from './components/Text';
storiesOf('图层', module)
.add('点图层', () => <PointDemo />)
.add('聚合图', () => <ClusterDemo />)
.add('聚合图标注', () => <ClusterDemo2 />)
.add('数据更新', () => <DataUpdate />)
.add('点动画', () => <AnimatePoint />)
.add('3D点', () => <Point3D />)

95
stories/Layers/components/cluster2.tsx Normal file
View File

@ -0,0 +1,95 @@
import { PointLayer, Scene, Source } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
// @ts-ignore
import data from '../data/data.json';
export default class Point3D extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
pickBufferScale: 3.0,
map: new GaodeMap({
style: 'light',
center: [-121.24357, 37.58264],
pitch: 0,
zoom: 10.45,
}),
});
scene.on('loaded', () => {
const fontFamily = 'iconfont';
const fontPath =
'//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140';
scene.addFontFace(fontFamily, fontPath);
scene.addIconFont('icon1', '&#xe6d4;');
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/87e40417-a5da-4fdb-8313-c796ea15f982.csv',
)
.then((res) => res.text())
.then((data) => {
const dataSource = new Source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat',
},
cluster: true,
});
const pointLayer = new PointLayer({
autoFit: true,
})
.source(dataSource)
.shape('circle')
.scale('point_count', {
type: 'quantile',
})
.size('point_count', [5, 10, 15, 20, 25])
.active(true)
.color('rgb(73,167,86)')
.style({
opacity: 1,
strokeWidth: 1,
stroke: '#333',
});
const pointLayerText = new PointLayer({
autoFit: true,
})
.source(dataSource)
.shape('point_count', 'text')
.size(15)
.active(true)
.color('#fff')
.style({
opacity: 1,
strokeWidth: 0,
stroke: '#fff',
});
scene.addLayer(pointLayer);
scene.addLayer(pointLayerText);
});
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

70
stories/Map/components/cluster.tsx Normal file
View File

@ -0,0 +1,70 @@
import { PointLayer, Marker, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Cluster extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
// this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [110.19382669582967, 30.258134],
pitch: 0,
zoom: 3,
}),
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
)
.then((res) => res.json())
.then((data) => {
const pointLayer = new PointLayer({})
.source(data, {
cluster: true,
})
.shape('circle')
.scale('point_count', {
type: 'quantile',
})
.size('point_count', [5, 10, 15, 20, 25])
.active(true)
.color('yellow')
.style({
opacity: 0.5,
strokeWidth: 1,
});
scene.addLayer(pointLayer);
scene.on('zoomchange', () => {
const d = pointLayer.getSource();
// console.log('ddd', d.data.dataArray)
});
});
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

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

@ -74,6 +74,7 @@ import SimplePoint from './components/simplePoint';
import LineWall from './components/linewall'
import GridTile from './components/gridTile'
import GridTile2 from './components/gridTile2'
import Cluster from './components/cluster'
// @ts-ignore
storiesOf('地图方法', module)
@ -152,3 +153,4 @@ storiesOf('地图方法', module)
.add('BusLine', () => <BusLine/>)
.add('GridTile', () => <GridTile/>)
.add('GridTile2', () => <GridTile2/>)
.add('Cluster', () => <Cluster/>)