mirror of https://gitee.com/antv-l7/antv-l7
docs: add text,cluster animate demos
This commit is contained in:
thinkinggis
parent
7e267a84d1
commit
d13234359b
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
title: ChangeLog
|
||||
order: 10
|
||||
---
|
||||
|
||||
## 2020.01.06 2.0 正式版
|
||||
|
||||
###✨ Features
|
||||
• 新增弧线图，路径图动画功能
|
||||
• 新增气泡图水波动画功能
|
||||
• 新增聚合地图
|
||||
• 新增文本标注，支持避让
|
||||
• 新增城市建筑图层
|
||||
• 新增栅格地图，支持卫星遥感数据可视化
|
||||
• 新增图层交互事件
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
• Marker 支持事件和自定义数据
|
||||
• 弧线支持虚线样式
|
||||
• 面图层支持，文本标注，气泡图效果
|
||||
• 重构了文档结构
|
||||
• source 支持 map,join,filter 数据处理支持
|
||||
• source 支持数据更新
|
||||
• 支持 blend 效果配置
|
||||
• 支持通过地图实例初始化地图
|
||||
• 官网新增所有图表概览页面
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
• 修复容器 resize 不能正常响应
|
||||
• 修复 babel 打包问题
|
||||
• 修复地图组件加载报错问题
|
||||
• 修复样式配置 strokeColor- stroke
|
||||
|
||||
## 2019.11.22 2.0beta
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
title: 发布日志
|
||||
order: 10
|
||||
---
|
||||
|
||||
## 2020.01.06 2.0 正式版
|
||||
|
||||
###✨ Features
|
||||
• 新增弧线图，路径图动画功能
|
||||
• 新增气泡图水波动画功能
|
||||
• 新增聚合地图
|
||||
• 新增文本标注，支持避让
|
||||
• 新增城市建筑图层
|
||||
• 新增栅格地图，支持卫星遥感数据可视化
|
||||
• 新增图层交互事件
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
• Marker 支持事件和自定义数据
|
||||
• 弧线支持虚线样式
|
||||
• 面图层支持，文本标注，气泡图效果
|
||||
• 重构了文档结构
|
||||
• source 支持 map,join,filter 数据处理支持
|
||||
• source 支持数据更新
|
||||
• 支持 blend 效果配置
|
||||
• 支持通过地图实例初始化地图
|
||||
• 官网新增所有图表概览页面
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
• 修复容器 resize 不能正常响应
|
||||
• 修复 babel 打包问题
|
||||
• 修复地图组件加载报错问题
|
||||
• 修复样式配置 strokeColor- stroke
|
||||
|
||||
## 2019.11.22 2.0beta
|
||||
|
|
@ -16,7 +16,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
</video>
|
||||
|
||||
2.0.beta 版本目前有些功能还未完善，1 月 6 号我们正式版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
✨ 2020.01.06 2.0 版本正式发布
|
||||
|
||||
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ redirect_from:
|
|||
|
||||
# L7 地理空间数据可视分析引擎
|
||||
|
||||
2.0.beta 版本目前有些功能还未完善，
|
||||
|
||||
⚠️ 1 月 6 号 正式版发版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
✨ 2020.01.06 2.0 版本正式发布
|
||||
|
||||
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: 1.x stable
|
||||
order: 1
|
||||
title: 1.x history
|
||||
order: 9
|
||||
---
|
||||
|
||||
## L7 1.x 版本
|
||||
|
|
@ -17,8 +17,6 @@ order: 1
|
|||
|
||||
### npm 安装使用
|
||||
|
||||
会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本
|
||||
|
||||
```
|
||||
npm install @antv/l7
|
||||
|
||||
|
|
@ -29,7 +27,3 @@ npm install @antv/l7
|
|||
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: 1.x 稳定版
|
||||
order: 1
|
||||
title: 1.x 历史版本
|
||||
order: 9
|
||||
---
|
||||
|
||||
## L7 1.x 版本
|
||||
|
|
@ -12,7 +12,7 @@ order: 1
|
|||
#### CDN 在线使用连接为
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.4/build/L7-min.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.14/build/L7-min.js"></script>
|
||||
```
|
||||
|
||||
### npm 安装使用
|
||||
|
|
@ -29,5 +29,3 @@ npm install @antv/l7
|
|||
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
|
||||
|
|
@ -7,7 +7,7 @@ redirect_from:
|
|||
|
||||
# L7
|
||||
|
||||
Current version: 
|
||||
Current version: 
|
||||
|
||||
## 使用方法
|
||||
|
||||
|
|
@ -156,7 +156,21 @@ export default class AMapExample extends React.Component {
|
|||
|
||||
更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories)
|
||||
|
||||
### Vue 欢迎补充
|
||||
[1.x Vue 使用](https://codesandbox.io/s/l7-vue1xdemo-wknsz)
|
||||
### Html
|
||||
[2.0版本 HTML 使用模板](https://codesandbox.io/s/l7htmltemplate-vp2lp)
|
||||
## 不同项目使用模板
|
||||
|
||||
不同项目模板在CodeSandbox你可以预览，也可以下载到本地
|
||||
|
||||
### React
|
||||
|
||||
[地址](https://codesandbox.io/s/l720react-jfwyz)
|
||||
|
||||
### Vue
|
||||
|
||||
[地址](https://codesandbox.io/s/l720vue-uef1x)
|
||||
|
||||
### Angular
|
||||
|
||||
[地址](https://codesandbox.io/s/angulartest-chpff)
|
||||
|
||||
### HTML CDN
|
||||
[地址](https://codesandbox.io/s/l7cdndemo-gfg9m)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [ -74.006, 40.7128 ],
|
||||
zoom: 15,
|
||||
style: 'dark'
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/5592c737-1c70-4d6b-82c1-e74e5a019b04.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const lineLayer = new LineLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'path'
|
||||
}
|
||||
})
|
||||
.size(3)
|
||||
.shape('line')
|
||||
.color('color', v => {
|
||||
return `rgb(${v[0]})`;
|
||||
})
|
||||
.animate({
|
||||
interval: 0.5,
|
||||
trailLength: 0.4,
|
||||
duration: 4
|
||||
});
|
||||
scene.addLayer(lineLayer);
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { Scene, LineLayer } 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,
|
||||
zoom: 16,
|
||||
style: 'dark'
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer()
|
||||
.source(data)
|
||||
.size(1)
|
||||
.shape('line')
|
||||
.color('#ff893a')
|
||||
.animate({
|
||||
interval: 0.4,
|
||||
duration: 1,
|
||||
trailLength: 0.8
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { Scene, PointLayer } 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
|
||||
})
|
||||
});
|
||||
|
||||
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 ])
|
||||
.animate(false)
|
||||
.color('yellow')
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "中文分类",
|
||||
"en": "Category"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "cluster.js",
|
||||
"title": "聚合图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Cluster Map
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: "聚合图"
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
---
|
||||
title: "亮度图"
|
||||
title: 亮度图
|
||||
order: 1
|
||||
---
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "中文分类",
|
||||
"en": "Category"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "point_text.js",
|
||||
"title": "点数据标注",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "polygon_text.js",
|
||||
"title": "面数据标注",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { Scene, PointLayer } 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: 'light',
|
||||
zoom: 3
|
||||
})
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('m', 'text')
|
||||
.size(18)
|
||||
.color('w', [ '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac' ])
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: 'red', // 描边颜色
|
||||
strokeWidth: 1, // 描边宽度
|
||||
strokeOpacity: 1.0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ -96, 37.8 ],
|
||||
zoom: 3
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.color('blue')
|
||||
.shape('name', 'text')
|
||||
.size(18)
|
||||
.style({
|
||||
opacity: 0.8
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: label
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 文本标注
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -42,7 +42,7 @@ fetch(
|
|||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.size(0.8)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,6 +9,11 @@
|
|||
"title": "全国地图行政区划",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "usa.js",
|
||||
"title": "地图交互",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HfZ7SKrS9fcAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "fill.js",
|
||||
"title": "连续填充图",
|
||||
|
|
|
|||
|
|
@ -56,11 +56,10 @@ Promise.all([
|
|||
})
|
||||
.source(world)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.size(0.8)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ -96, 37.8 ],
|
||||
zoom: 3
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.color(
|
||||
'density', d => {
|
||||
return d > 1000 ? '#800026' :
|
||||
d > 500 ? '#BD0026' :
|
||||
d > 200 ? '#E31A1C' :
|
||||
d > 100 ? '#FC4E2A' :
|
||||
d > 50 ? '#FD8D3C' :
|
||||
d > 20 ? '#FEB24C' :
|
||||
d > 10 ? '#FED976' :
|
||||
'#FFEDA0';
|
||||
}
|
||||
)
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.8
|
||||
});
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.active(true)
|
||||
.size(1)
|
||||
.style({
|
||||
lineType: 'dash',
|
||||
dashArray: [ 2, 2 ],
|
||||
opacity: 1
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
|
||||
layer.on('mousemove', e => {
|
||||
const popup = new Popup({
|
||||
offsets: [ 0, 0 ]
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue