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

Merge pull request #114 from antvis/source 

fix(parser): fix multipolygom parser
This commit is contained in:
@thinkinggis 2019-12-02 15:45:08 +08:00 committed by thinkinggis
parent bced7e7ccb 024477adf8
commit b58fa05c54
99 changed files with 4669 additions and 1801 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -62,7 +62,7 @@ new Scene({
``` ```
### Add Layer ### Add Layer
``` javascript ```javascript
import { PointLayer } from '@antv/l7'; import { PointLayer } from '@antv/l7';
const pointLayer = new PointLayer() const pointLayer = new PointLayer()

113
docs/api/component/control.en.md
View File

@ -2,137 +2,138 @@
title: Control title: Control
order: 1 order: 1
--- ---
# control # control
地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺 地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
## 构造函数 ## 构造函数
```javascript ```javascript
const baseControl = new L7.Control.Base(option); const baseControl = new L7.Control.Base(option);
``` ```
#### option #### option
 position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft` position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
#### scene 内置地图组件 #### scene 内置地图组件
zoom 地图放大缩小  默认添加<br />Scale 地图比例尺   默认添加<br />attribution 地图数据属性  默认添加<br />layer 图层列表
**scene配置项设置控件添加状态** zoom 地图放大缩小   默认添加<br />Scale 地图比例尺     默认添加<br />attribution 地图数据属性    默认添加<br />layer 图层列表
**scene 配置项设置控件添加状态**
```javascript ```javascript
scene = new L7.scene({ scene = new L7.scene({
zoomControl: true, zoomControl: true,
scaleControl: true, scaleControl: true,
attributionControl: true attributionControl: true,
}) });
``` ```
#### ####
#### Zoom #### Zoom
放大缩小组件 默认 左上角 放大缩小组件 默认 左上角
```javascript ```javascript
new L7.Control.Zoom({ new L7.Control.Zoom({
position: 'topleft' position: 'topleft',
}).addTo(scene); }).addTo(scene);
``` ```
#### Scale #### Scale
比例尺组件默认左下角 比例尺组件默认左下角
```javascript ```javascript
new L7.Control.Scale({ new L7.Control.Scale({
position: 'bottomleft' position: 'bottomleft',
}).addTo(scene); }).addTo(scene);
``` ```
#### attribution #### attribution
默认右下角 默认右下角
```javascript ```javascript
new L7.Control.Attribution({ new L7.Control.Attribution({
position: 'bottomleft' position: 'bottomleft',
}).addTo(scene);
```
#### layer
图层列表目前只支持可视化overlayers 图层控制
```javascript
var overlayers = {
"围栏填充": layer,
"围栏边界": layer2
};
new L7.Control.Layers({
overlayers: overlayers
}).addTo(scene); }).addTo(scene);
``` ```
#### layer
图层列表目前只支持可视化 overlayers 图层控制
```javascript
var overlayers = {
围栏填充: layer,
围栏边界: layer2,
};
new L7.Control.Layers({
overlayers: overlayers,
}).addTo(scene);
```
## 方法 ## 方法
#### onAdd #### onAdd
组件添加到地图Scene时调用，自定义组件时需要实现此方法
组件添加到地图 Scene 时调用，自定义组件时需要实现此方法
#### addTo #### addTo
添加到地图scene
添加到地图 scene
```javascript ```javascript
control.addTo(scene); control.addTo(scene);
``` ```
#### setPosition #### setPosition
设置组件位置 设置组件位置
```javascript ```javascript
control.setPosition('bottomright'); control.setPosition('bottomright');
``` ```
#### remove #### remove
移除地图组件 移除地图组件
```javascript ```javascript
control.remove(); control.remove();
``` ```
## 示例代码 ## 示例代码
#### 自定义图例控件 #### 自定义图例控件
[源码](https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html) [源码](https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html)
```javascript ```javascript
var legend = new L7.Control.Base({ var legend = new L7.Control.Base({
position: 'bottomright' position: 'bottomright',
}); });
legend.onAdd = function() { legend.onAdd = function() {
var el = document.createElement('div'); var el = document.createElement('div');
el.className = 'infolegend legend'; el.className = 'infolegend legend';
var grades = [0, 8, 15, 30, 65, 120]; var grades = [0, 8, 15, 30, 65, 120];
for (var i = 0; i < grades.length; i++) { for (var i = 0; i < grades.length; i++) {
el.innerHTML += '<i style="background:' + colors[i] + '"></i> ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+'); el.innerHTML +=
} '<i style="background:' +
return el; colors[i] +
}; '"></i> ' +
legend.addTo(scene); grades[i] +
(grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return el;
};
legend.addTo(scene);
``` ```
## ##
## FAQ ## FAQ

62
docs/api/component/control.zh.md
View File

@ -5,28 +5,23 @@ order: 3
地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺 地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
L7 目前支持 Control
L7 目前支持Control - Zoom 放大缩小
- Scale 比例尺
- Zoom 放大缩小 - Layers 图层列表
- Scale 比例尺
- Layers 图层列表
## 构造函数 ## 构造函数
#### option #### option
 
position: `string` 控件位置支持是个方位 position: `string` 控件位置支持是个方位
- bottomright - bottomright
- topright - topright
- bottomleft, - bottomleft,
- topleft` - topleft`
### 组件介绍 ### 组件介绍
``` ```
@ -34,67 +29,58 @@ import { Scale Layers, Zoom } from '@antv/l7';
``` ```
#### Zoom #### Zoom
放大缩小组件 默认 左上角 放大缩小组件 默认 左上角
```javascript ```javascript
const zoomControl = new Zoom({ const zoomControl = new Zoom({
position: 'topleft' position: 'topleft',
}) });
scene.addControl(zoomControl);
scene.addControl(zoomControl);
``` ```
#### Scale #### Scale
比例尺组件默认左下角 比例尺组件默认左下角
```javascript ```javascript
const zoomControl = new Zoom({ const zoomControl = new Zoom({
position: 'topleft' position: 'topleft',
}) });
scene.addControl(zoomControl);
scene.addControl(zoomControl);
``` ```
#### Layers #### Layers
图层列表目前支持可视化的图层控制 图层列表目前支持可视化的图层控制
```javascript ```javascript
const overlayers = {
const overlayers = { 点图层: layer,
"点图层": layer, };
const layersControl = new Layers({
}; overlayers,
const layersControl = new Layers({ });
overlayers
});
scene.addControl(layersControl); scene.addControl(layersControl);
``` ```
## 方法 ## 方法
#### setPosition #### setPosition
设置组件位置 设置组件位置
```javascript ```javascript
control.setPosition('bottomright'); control.setPosition('bottomright');
``` ```
#### remove #### remove
移除地图组件 移除地图组件
```javascript ```javascript
control.remove(); control.remove();
``` ```

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

@ -3,26 +3,23 @@ title: Marker
order: 3 order: 3
--- ---
Marker 地图标注 目前只支持2D dom标注 Marker 地图标注 目前只支持 2D dom 标注
## 构造函数 ## 构造函数
Marker Marker
`const Marker = new L7.Marker(option)` `const Marker = new L7.Marker(option)`
#### option #### option
- color        `string ` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认marker的颜色 - color        `string` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认 marker 的颜色
- element    `Dom|string`    自定义marker Dom节点，可以是dom实例，也可以是dom id - element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id
- anchor     `string`  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right - anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
- offset    `Array`  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量 - offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
### 添加到 Scene
### 添加到Scene
```javascript ```javascript
scene.addMarker(marker); scene.addMarker(marker);
``` ```
@ -30,62 +27,67 @@ scene.addMarker(marker);
## 方法 ## 方法
#### setLnglat #### setLnglat
设置marker经纬度位置
设置 marker 经纬度位置
#### addTo #### addTo
将marker添加到地图Scene
将 marker 添加到地图 Scene
#### remove #### remove
移除marker
移除 marker
#### getElement #### getElement
获取marker dom Element
获取 marker dom Element
#### getLngLat #### getLngLat
获取marker经纬度坐标
获取 marker 经纬度坐标
#### togglePopup #### togglePopup
开启或者关闭marker弹出框
开启或者关闭 marker 弹出框
#### setPopup #### setPopup
为marker设置popup
为 marker 设置 popup
#### getPopup #### getPopup
获取marker弹出框
获取 marker 弹出框
## 示例代码 ## 示例代码
#### 默认Marker #### 默认 Marker
**<br />` const marker = new L7.Marker({color:'blue'})`
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
#### 自定义Marker #### 自定义 Marker
```javascript ```javascript
var el = document.createElement('label'); var el = document.createElement('label');
el.className = 'lableclass'; el.className = 'lableclass';
el.textContent = data[i].v; el.textContent = data[i].v;
el.style.background = getColor(data[i].v); el.style.background = getColor(data[i].v);
new L7.Marker({ new L7.Marker({
element: el element: el,
}) })
.setLnglat([data[i].x * 1, data[i].y]) .setLnglat([data[i].x * 1, data[i].y])
.addTo(scene); .addTo(scene);
``` ```
#### 设置 popup #### 设置 popup
```javascript ```javascript
var popup = new L7.Popup({ var popup = new L7.Popup({
anchor: 'left' anchor: 'left',
}).setText(item.name); }).setText(item.name);
new L7.Marker({ new L7.Marker({
element: el element: el,
}).setLnglat(item.coordinates) })
.setPopup(popup) .setLnglat(item.coordinates)
.setPopup(popup);
``` ```

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

@ -3,81 +3,84 @@ title: Marker
order: 3 order: 3
--- ---
Marker 地图标注 目前只支持2D dom标注 Marker 地图标注 目前只支持 2D dom 标注
## 构造函数 ## 构造函数
Marker<br />`const Marker = new L7.Marker(option)`
Marker<br />`const Marker = new L7.Marker(option)`
#### option #### option
- color        `string `   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32) 设置默认marker的颜色 - color        `string`   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32)  设置默认 marker 的颜色
- element    `Dom|string`    自定义marker Dom节点，可以是dom实例，也可以是dom id - element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id
- anchor     `string`  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right - anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
- offset    `Array`  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量 - offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
## 方法 ## 方法
#### setLnglat #### setLnglat
设置marker经纬度位置
设置 marker 经纬度位置
#### addTo #### addTo
将marker添加到地图Scene
将 marker 添加到地图 Scene
#### remove #### remove
移除marker
移除 marker
#### getElement #### getElement
获取marker dom Element
获取 marker dom Element
#### getLngLat #### getLngLat
获取marker经纬度坐标
获取 marker 经纬度坐标
#### togglePopup #### togglePopup
开启或者关闭marker弹出框
开启或者关闭 marker 弹出框
#### setPopup #### setPopup
为marker设置popup
为 marker 设置 popup
#### getPopup #### getPopup
获取marker弹出框
获取 marker 弹出框
## 示例代码 ## 示例代码
#### 默认Marker #### 默认 Marker
**<br />` const marker = new L7.Marker({color:'blue'})`
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
#### 自定义Marker #### 自定义 Marker
```javascript ```javascript
var el = document.createElement('label'); var el = document.createElement('label');
el.className = 'lableclass'; el.className = 'lableclass';
el.textContent = data[i].v; el.textContent = data[i].v;
el.style.background = getColor(data[i].v); el.style.background = getColor(data[i].v);
new L7.Marker({ new L7.Marker({
element: el element: el,
}) })
.setLnglat([data[i].x * 1, data[i].y]) .setLnglat([data[i].x * 1, data[i].y])
.addTo(scene); .addTo(scene);
``` ```
#### 设置 popup #### 设置 popup
```javascript ```javascript
var popup = new L7.Popup({ var popup = new L7.Popup({
anchor: 'left' anchor: 'left',
}).setText(item.name); }).setText(item.name);
new L7.Marker({ new L7.Marker({
element: el element: el,
}).setLnglat(item.coordinates) })
.setLnglat(item.coordinates)
.setPopup(popup) .setPopup(popup)
.addTo(scene); .addTo(scene);
``` ```

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

@ -2,19 +2,19 @@
title: Popup title: Popup
order: 4 order: 4
--- ---
# popup # popup
地图标注信息窗口，用于展示地图要素的属性信息 地图标注信息窗口，用于展示地图要素的属性信息
## 构造函数 ## 构造函数
Popup Popup
```javascript ```javascript
const popup = new L7.Popup(option) const popup = new L7.Popup(option);
``` ```
#### option #### option
- closeButton - closeButton
@ -22,67 +22,71 @@ const popup = new L7.Popup(option)
- maxWidth - maxWidth
- anchor - anchor
## 方法 ## 方法
#### setLnglat #### setLnglat
设置popup的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
设置 popup 的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
```javascript ```javascript
popup.setLnglat([112, 32]); popup.setLnglat([112, 32]);
``` ```
#### addTo #### addTo
**参数**：scene 地图scene实例
将popup添加到地图scene显示 **参数**：scene 地图 scene 实例
将 popup 添加到地图 scene 显示
```javascript ```javascript
popup.addTo(scene); popup.addTo(scene);
``` ```
#### setHtml #### setHtml
**参数**：html 字符串 **参数**：html 字符串
设置popup html 内容 设置 popup html 内容
```javascript ```javascript
var html = '<p>\u7701\u4EFD\uFF1A' + feature.s + '</p>\n <p>\u5730\u533A\uFF1A' + feature.m + '</p>\n <p>\u6E29\u5EA6\uFF1A' + feature.t + '</p>\n '; var html =
'<p>\u7701\u4EFD\uFF1A' +
feature.s +
'</p>\n <p>\u5730\u533A\uFF1A' +
feature.m +
'</p>\n <p>\u6E29\u5EA6\uFF1A' +
feature.t +
'</p>\n ';
popup.setHtml(html); popup.setHtml(html);
``` ```
#### setText #### setText
设置 popup 显示文本内容 设置 popup 显示文本内容
```javascript ```javascript
popup.setText('hello world'); popup.setText('hello world');
``` ```
#### remove #### remove
移除popup
移除 popup
```javascript ```javascript
popup.remove() popup.remove();
``` ```
## 事件 ## 事件
#### close #### close
```javascript ```javascript
popup.on('close',()=>{}) popup.on('close', () => {});
``` ```
## 示例代码 ## 示例代码
#### 添加popup #### 添加 popup
``` ```
var html = '<p>'+feature.m+'</p>'; var html = '<p>'+feature.m+'</p>';

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

@ -2,19 +2,19 @@
title: popup title: popup
order: 0 order: 0
--- ---
# popup # popup
地图标注信息窗口，用于展示地图要素的属性信息 地图标注信息窗口，用于展示地图要素的属性信息
## 构造函数 ## 构造函数
Popup Popup
```javascript ```javascript
const popup = new L7.Popup(option) const popup = new L7.Popup(option);
``` ```
#### option #### option
- closeButton - closeButton
@ -22,67 +22,71 @@ const popup = new L7.Popup(option)
- maxWidth - maxWidth
- anchor - anchor
## 方法 ## 方法
#### setLnglat #### setLnglat
设置popup的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
设置 popup 的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
```javascript ```javascript
popup.setLnglat([112, 32]); popup.setLnglat([112, 32]);
``` ```
#### addTo #### addTo
**参数**：scene 地图scene实例
将popup添加到地图scene显示 **参数**：scene 地图 scene 实例
将 popup 添加到地图 scene 显示
```javascript ```javascript
popup.addTo(scene); popup.addTo(scene);
``` ```
#### setHtml #### setHtml
**参数**：html 字符串 **参数**：html 字符串
设置popup html 内容 设置 popup html 内容
```javascript ```javascript
var html = '<p>\u7701\u4EFD\uFF1A' + feature.s + '</p>\n <p>\u5730\u533A\uFF1A' + feature.m + '</p>\n <p>\u6E29\u5EA6\uFF1A' + feature.t + '</p>\n '; var html =
'<p>\u7701\u4EFD\uFF1A' +
feature.s +
'</p>\n <p>\u5730\u533A\uFF1A' +
feature.m +
'</p>\n <p>\u6E29\u5EA6\uFF1A' +
feature.t +
'</p>\n ';
popup.setHtml(html); popup.setHtml(html);
``` ```
#### setText #### setText
设置 popup 显示文本内容 设置 popup 显示文本内容
```javascript ```javascript
popup.setText('hello world'); popup.setText('hello world');
``` ```
#### remove #### remove
移除popup
移除 popup
```javascript ```javascript
popup.remove() popup.remove();
``` ```
## 事件 ## 事件
#### close #### close
```javascript ```javascript
popup.on('close',()=>{}) popup.on('close', () => {});
``` ```
## 示例代码 ## 示例代码
#### 添加popup #### 添加 popup
``` ```
var html = '<p>'+feature.m+'</p>'; var html = '<p>'+feature.m+'</p>';

214
docs/api/layer/heatmap.en.md
View File

@ -5,37 +5,35 @@ order: 5
# heatmapLayer # heatmapLayer
### 简介 ### 简介
热力图图层，包含三种类型的， 热力图图层，包含三种类型的，
- 方格热力图
- 方格热力图
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
- 六边形热力图 - 六边形热力图
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
- 经典热力图 - 经典热力图
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在 source 方法设置数据聚合方法
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法
### source ### source
热力图只支持点数据作为数据源 热力图只支持点数据作为数据源
布局方法 通过source的 tansforms属性配置 布局方法 通过 source 的 tansforms 属性配置
- type  数据聚合类型 grid、hexagon - type  数据聚合类型 grid、hexagon
- size  网格半径 单位 米 - size  网格半径 单位 米
- field  聚合字段 - field  聚合字段
- method 聚合方法  count,max,min,sum,mean5个统计维度 - method 聚合方法   count,max,min,sum,mean5 个统计维度
```javascript ```javascript
layer.source(data, { layer.source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
@ -46,7 +44,7 @@ layer.source(data, {
{ {
type: 'grid', type: 'grid',
size: 15000, size: 15000,
field:'v', field:'v',
method:'sum' method:'sum'
} }
], ],
@ -55,16 +53,15 @@ layer.source(data, {
### shape ### shape
不同类型热力图shape支持 不同类型热力图 shape 支持
| | 2D | 3d | | | 2D | 3d |
| --- | --- | --- | | ------------ | ------------------------------ | ------------------------------------------------- |
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn | | 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon | | 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
| 普通热力图 | heatmap | heatmap | | 普通热力图 | heatmap | heatmap |
热力图布局下只 shape 方法只支持常量的可视化。
热力图布局下只shape方法只支持常量的可视化。
```javascript ```javascript
HeatmapLayer.shape('square'); HeatmapLayer.shape('square');
@ -73,9 +70,10 @@ HeatmapLayer.shape('hexagon');
``` ```
### size ### size
当前版本 shape 为grid，hexagon不需要设置 size 映射
default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size) 当前版本 shape 为 grid，hexagon 不需要设置 size 映射
default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
**size(field,values) ** **size(field,values) **
@ -83,123 +81,139 @@ default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳 - values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript ```javascript
HeatmapLayer.size ('field', [0, 1]) HeatmapLayer.size('field', [0, 1]);
``` ```
### color ### color
default heatMap 类型不需设置 color映射
default heatMap 类型不需设置 color 映射
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color) color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
### style ### style
grid hexagon 可以通过style 设置透明度 grid hexagon 可以通过 style 设置透明度
default热力图需要通过style配置参数热力图参数 default 热力图需要通过 style 配置参数热力图参数
- intensity   全局热力权重   推荐权重范围 1-5 - intensity    全局热力权重     推荐权重范围 1-5
- radius  热力半径，单位像素 - radius   热力半径，单位像素
- rampColors 色带参数 - rampColors 色带参数
- colors  颜色数组 - colors  颜色数组
- positions 数据区间 - positions 数据区间
```javascript ```javascript
HeatmapLayer.style({ HeatmapLayer.style({
intensity: 3, intensity: 3,
radius: 20, radius: 20,
rampColors: { rampColors: {
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ], colors: [
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] 'rgba(33,102,172,0.0)',
} 'rgb(103,169,207)',
}) 'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43,1.0)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
``` ```
### 完整代码示例 ### 完整代码示例
#### 普通热力图 #### 普通热力图
```javascript ```javascript
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json // 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
HeatmapLayer({ HeatmapLayer({
zIndex: 2 zIndex: 2,
}) })
.source(data) .source(data)
.size('mag', [ 0, 1 ]) // weight映射通道 .size('mag', [0, 1]) // weight映射通道
.style({ .style({
intensity: 3, intensity: 3,
radius: 20, radius: 20,
rampColors: { rampColors: {
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ], colors: [
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] 'rgba(33,102,172,0.0)',
} 'rgb(103,169,207)',
}) 'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43,1.0)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
``` ```
#### 网格热力图 #### 网格热力图
```javascript ```javascript
var layer = scene.HeatmapLayer({ var layer = scene
zIndex: 2 .HeatmapLayer({
}) zIndex: 2,
.source(data, { })
parser: { .source(data, {
type: 'csv', parser: {
x: 'lng', type: 'csv',
y: 'lat' x: 'lng',
}, y: 'lat',
transforms:[ },
transforms: [
{ {
type: 'grid', type: 'grid',
size: 15000, size: 15000,
field:'v', field: 'v',
method:'sum' method: 'sum',
} },
] ],
}) })
.shape('grid') .shape('grid')
.style({ .style({
coverage: 0.8 coverage: 0.8,
}) })
.color('count', .color('count', [
["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"]) '#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
``` ```
#### 六边形热力图 #### 六边形热力图
```javascript ```javascript
var layer = scene.HeatmapLayer({ var layer = scene
zIndex: 2 .HeatmapLayer({
}). zIndex: 2,
souce(data,{ })
parser:{ .souce(data, {
type:'csv', parser: {
x:lng, type: 'csv',
y:lat, x: lng,
y: lat,
}, },
transforms:[ transforms: [
{ {
type:'hexgon', type: 'hexgon',
size:1500, size: 1500,
field:'count', field: 'count',
operation: 'sum', operation: 'sum',
} },
] ],
}) })
.shape('hexgon') .shape('hexgon')
.size(1000) .size(1000)
.color('sum') .color('sum')
.style({ .style({
coverage:0.8 coverage: 0.8,
}) });
render() render();
``` ```

215
docs/api/layer/heatmap.zh.md
View File

@ -2,39 +2,38 @@
title: HeatmapLayer title: HeatmapLayer
order: 5 order: 5
--- ---
# heatmapLayer
# heatmapLayer
### 简介 ### 简介
热力图图层，包含三种类型的， 热力图图层，包含三种类型的，
- 方格热力图
- 方格热力图
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
- 六边形热力图 - 六边形热力图
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
- 经典热力图 - 经典热力图
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在 source 方法设置数据聚合方法
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法
### source ### source
热力图只支持点数据作为数据源 热力图只支持点数据作为数据源
布局方法 通过source的 tansforms属性配置 布局方法 通过 source 的 tansforms 属性配置
- type  数据聚合类型 grid、hexagon - type  数据聚合类型 grid、hexagon
- size  网格半径 单位 米 - size  网格半径 单位 米
- field  聚合字段 - field  聚合字段
- method 聚合方法  count,max,min,sum,mean5个统计维度 - method 聚合方法   count,max,min,sum,mean5 个统计维度
```javascript ```javascript
layer.source(data, { layer.source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
@ -45,7 +44,7 @@ layer.source(data, {
{ {
type: 'grid', type: 'grid',
size: 15000, size: 15000,
field:'v', field:'v',
method:'sum' method:'sum'
} }
], ],
@ -54,16 +53,15 @@ layer.source(data, {
### shape ### shape
不同类型热力图shape支持 不同类型热力图 shape 支持
| | 2D | 3d | | | 2D | 3d |
| --- | --- | --- | | ------------ | ------------------------------ | ------------------------------------------------- |
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn | | 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon | | 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
| 普通热力图 | heatmap | heatmap | | 普通热力图 | heatmap | heatmap |
热力图布局下只 shape 方法只支持常量的可视化。
热力图布局下只shape方法只支持常量的可视化。
```javascript ```javascript
HeatmapLayer.shape('square'); HeatmapLayer.shape('square');
@ -72,9 +70,10 @@ HeatmapLayer.shape('hexagon');
``` ```
### size ### size
当前版本 shape 为grid，hexagon不需要设置 size 映射
default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size) 当前版本 shape 为 grid，hexagon 不需要设置 size 映射
default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
**size(field,values) ** **size(field,values) **
@ -82,123 +81,139 @@ default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳 - values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript ```javascript
HeatmapLayer.size ('field', [0, 1]) HeatmapLayer.size('field', [0, 1]);
``` ```
### color ### color
default heatMap 类型不需设置 color映射
default heatMap 类型不需设置 color 映射
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color) color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
### style ### style
grid hexagon 可以通过style 设置透明度 grid hexagon 可以通过 style 设置透明度
default热力图需要通过style配置参数热力图参数 default 热力图需要通过 style 配置参数热力图参数
- intensity   全局热力权重   推荐权重范围 1-5 - intensity    全局热力权重     推荐权重范围 1-5
- radius  热力半径，单位像素 - radius   热力半径，单位像素
- rampColors 色带参数 - rampColors 色带参数
- colors  颜色数组 - colors  颜色数组
- positions 数据区间 - positions 数据区间
```javascript ```javascript
HeatmapLayer.style({ HeatmapLayer.style({
intensity: 3, intensity: 3,
radius: 20, radius: 20,
rampColors: { rampColors: {
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ], colors: [
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] 'rgba(33,102,172,0.0)',
} 'rgb(103,169,207)',
}) 'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43,1.0)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
``` ```
### 完整代码示例 ### 完整代码示例
#### 普通热力图 #### 普通热力图
```javascript ```javascript
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json // 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
HeatmapLayer({ HeatmapLayer({
zIndex: 2 zIndex: 2,
}) })
.source(data) .source(data)
.size('mag', [ 0, 1 ]) // weight映射通道 .size('mag', [0, 1]) // weight映射通道
.style({ .style({
intensity: 3, intensity: 3,
radius: 20, radius: 20,
rampColors: { rampColors: {
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ], colors: [
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] 'rgba(33,102,172,0.0)',
} 'rgb(103,169,207)',
}) 'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43,1.0)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
``` ```
#### 网格热力图 #### 网格热力图
```javascript ```javascript
var layer = scene.HeatmapLayer({ var layer = scene
zIndex: 2 .HeatmapLayer({
}) zIndex: 2,
.source(data, { })
parser: { .source(data, {
type: 'csv', parser: {
x: 'lng', type: 'csv',
y: 'lat' x: 'lng',
}, y: 'lat',
transforms:[ },
transforms: [
{ {
type: 'grid', type: 'grid',
size: 15000, size: 15000,
field:'v', field: 'v',
method:'sum' method: 'sum',
} },
] ],
}) })
.shape('grid') .shape('grid')
.style({ .style({
coverage: 0.8 coverage: 0.8,
}) })
.color('count', .color('count', [
["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"]) '#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
``` ```
#### 六边形热力图 #### 六边形热力图
```javascript ```javascript
var layer = scene.HeatmapLayer({ var layer = scene
zIndex: 2 .HeatmapLayer({
}). zIndex: 2,
souce(data,{ })
parser:{ .souce(data, {
type:'csv', parser: {
x:lng, type: 'csv',
y:lat, x: lng,
y: lat,
}, },
transforms:[ transforms: [
{ {
type:'hexgon', type: 'hexgon',
size:1500, size: 1500,
field:'count', field: 'count',
operation: 'sum', operation: 'sum',
}, },
], ],
}) })
.shape('hexgon') .shape('hexgon')
.size(1000) .size(1000)
.color('sum') .color('sum')
.style({ .style({
coverage:0.8 coverage: 0.8,
}) });
render() render();
``` ```

8
docs/api/layer/imagelayer.en.md
View File

@ -2,9 +2,11 @@
title: ImageLayer title: ImageLayer
order: 5 order: 5
--- ---
# ImageLayer # ImageLayer
## 简介 ## 简介
将图片添加到地图上，需要指定图片的经纬度范围 将图片添加到地图上，需要指定图片的经纬度范围
### 代码示例 ### 代码示例
@ -16,8 +18,8 @@ layer.source(
{ {
parser: { parser: {
type: 'image', type: 'image',
extent: [ 121.168, 30.2828, 121.384, 30.4219 ] extent: [121.168, 30.2828, 121.384, 30.4219],
} },
} },
); );
``` ```

8
docs/api/layer/imagelayer.zh.md
View File

@ -2,9 +2,11 @@
title: ImageLayer title: ImageLayer
order: 5 order: 5
--- ---
# ImageLayer # ImageLayer
## 简介 ## 简介
将图片添加到地图上，需要指定图片的经纬度范围 将图片添加到地图上，需要指定图片的经纬度范围
### 代码示例 ### 代码示例
@ -16,8 +18,8 @@ layer.source(
{ {
parser: { parser: {
type: 'image', type: 'image',
extent: [ 121.168, 30.2828, 121.384, 30.4219 ] extent: [121.168, 30.2828, 121.384, 30.4219],
} },
} },
); );
``` ```

208
docs/api/layer/layer.en.md
View File

@ -2,135 +2,130 @@
title: Map Layer title: Map Layer
order: 0 order: 0
--- ---
# Layer # Layer
## 简介 ## 简介
L7 Layer 接口设计遵循图形语法，在可视表达上 L7 Layer 接口设计遵循图形语法，在可视表达上
语法示例 语法示例
```javascript ```javascript
new Layer(option) new Layer(option)
.source() .source()
.color() .color()
.size() .size()
.shape() .shape()
.style() .style();
``` ```
## 构造函数 ## 构造函数
## 配置项 ## 配置项
### visable ### visable
图层是否可见   {bool } default true
图层是否可见   {bool } default true
### zIndex ### zIndex
 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0
图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0
### minZoom ### minZoom
图层显示最小缩放等级，（0-18）   {number}  default 0 图层显示最小缩放等级，（0-18）   {number}  default 0
### maxZoom ### maxZoom
 图层显示最大缩放等级 （0-18）   {number}  default 18
图层显示最大缩放等级 （0-18）   {number}  default 18
## 鼠标事件 ## 鼠标事件
⚠️ beta版当前不支持，正式版会支持 ⚠️ beta 版当前不支持，正式版会支持
```javascript ```javascript
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件 layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
layer.on('dblclick', (ev)=>{}); // 鼠标左键双击图层事件 layer.on('dblclick', (ev) => {}); // 鼠标左键双击图层事件
layer.on('mousemove', (ev)=>{}); // 鼠标在图层上移动时触发 layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
layer.on('mouseover', (ev)=>{}); // 鼠标移入图层要素内时触发 layer.on('mouseover', (ev) => {}); // 鼠标移入图层要素内时触发
layer.on('mouseout', (ev)=>{}); // 鼠标移出图层要素时触发 layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
layer.on('mouseup', (ev)=>{}); // 鼠标在图层上单击抬起时触发 layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
layer.on('mousedown', (ev)=>{}); // 鼠标在图层上单击按下时触发 layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
layer.on('mouseleave', (ev)=>{}); // 鼠标离开图层要素 layer.on('mouseleave', (ev) => {}); // 鼠标离开图层要素
layer.on('rightclick', (ev)=>{}); // 鼠标右键图层要素 layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
``` ```
## 方法 ## 方法
### source ### source
数据源为layer设置数据 source(data,config)
数据源为 layer 设置数据 source(data,config)
- data {geojson|json|csv} - data {geojson|json|csv}
源数据
      源数据 - config   可选   数据源配置项
- parser 数据解析，默认是解析层 geojson
- config  可选 数据源配置项
- parser 数据解析，默认是解析层geojson
- transforms [transform，transform ]  数据处理转换 可设置多个 - transforms [transform，transform ]  数据处理转换 可设置多个
 parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source) parser 和  transforms [见 source 文档](https://www.yuque.com/antv/l7/source)
```javascript ```javascript
layer.source(data, { layer.source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
},
transforms: [
{
type: 'map',
callback: function(item) {
const [x, y] = item.coordinates;
item.lat = item.lat * 1;
item.lng = item.lng * 1;
item.v = item.v * 1;
item.coordinates = [x * 1, y * 1];
return item;
}, },
transforms:[ },
{ {
type: 'map', type: 'hexagon',
callback:function(item){ size: 6000,
const [x, y] = item.coordinates; field: 'v',
item.lat = item.lat*1; method: 'sum',
item.lng = item.lng*1; },
item.v = item.v *1; ],
item.coordinates = [x*1,y*1]; });
return item;
}
},
{
type: 'hexagon',
size: 6000,
field:'v',
method:'sum'
}
]
})
``` ```
### ###
### scale ### scale
cscle('field', scaleConfig) cscle('field', scaleConfig)
(field: string, scaleConfig: object) (field: string, scaleConfig: object)
为指定的数据字段进行列定义，返回 layer 实例。 为指定的数据字段进行列定义，返回 layer 实例。
- `field` 字段名。 - `field` 字段名。
- `scaleConfig` 列定义配置，对象类型，可配置的属性如下： - `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
```javascript ```javascript
{ {
type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize
} }
``` ```
### size ### size
将数据值映射到图形的大小上的方法。 将数据值映射到图形的大小上的方法。
**注意：**  **注意：**
不同图层的 size 的含义有所差别： 不同图层的 size 的含义有所差别：
@ -140,36 +135,36 @@ cscle('field', scaleConfig)
- polygon size 影响的是高度 - polygon size 影响的是高度
```javascript ```javascript
pointLayer.size(10); // 常量 pointLayer.size(10); // 常量
pointLayer.size('type'); // 使用字段映射到大小 pointLayer.size('type'); // 使用字段映射到大小
pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值 pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值
pointLayer.size('type', (type) => { // 回调函数 pointLayer.size('type', (type) => {
if(type === 'a') { // 回调函数
if (type === 'a') {
return 10; return 10;
} }
return 5; return 5;
}); });
``` ```
#### size(value） #### size(value）
传入数字常量，如 `pointLayer.size(20)` 传入数字常量，如  `pointLayer.size(20)`
#### size(field) #### size(field)
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
根据 field 字段的值映射大小，使用默认的`最大值 max:10`  和`最小值 min: 1`。
#### size(field, callback) #### size(field, callback)
使用回调函数控制图形大小。 使用回调函数控制图形大小。
- `callback`: function 回调函数。 - `callback`: function 回调函数。
```javascript ```javascript
pointLayer.size('age', (value) => { pointLayer.size('age', (value) => {
if(value === 1) { if (value === 1) {
return 5; return 5;
} }
return 10; return 10;
@ -183,14 +178,16 @@ pointLayer.size('age', (value) => {
```javascript ```javascript
layer.color('red'); // 常量颜色 layer.color('red'); // 常量颜色
layer.color('type'); // 对 type 字段进行映射，使用内置的颜色 layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
layer.color('type', [ 'red', 'blue' ]) // 指定颜色 layer.color('type', ['red', 'blue']); // 指定颜色
layer.color('type', (type) => { // 通过回调函数 layer.color('type', (type) => {
// 通过回调函数
if (type === 'a') { if (type === 'a') {
return 'red'; return 'red';
} }
return 'blue'; return 'blue';
}); });
layer.color('type*value', (type, value) => { //多个参数，通过回调函数 layer.color('type*value', (type, value) => {
//多个参数，通过回调函数
if (type === 'a' && value > 100) { if (type === 'a' && value > 100) {
return 'red'; return 'red';
} }
@ -198,10 +195,8 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数
}); });
``` ```
#### color(value) #### color(value)
参数：`value` ：string 参数：`value` ：string
只支持接收一个参数，value 可以是： 只支持接收一个参数，value 可以是：
@ -209,13 +204,12 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数
- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。 - 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
示例 示例
```javascript
layer.color('name') // 映射数据字段
layer.color('white') // 指定颜色
```
```javascript
layer.color('name'); // 映射数据字段
layer.color('white'); // 指定颜色
```
#### color(field, colors) #### color(field, colors)
@ -223,36 +217,34 @@ layer.color('white') // 指定颜色
- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。 - `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
-  `colors`: string | array | function - `colors`: string | array | function
colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
```javascript ```javascript
layer.color('name'); // 使用默认的颜色 layer.color('name'); // 使用默认的颜色
layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色 layer.color('name', ['red', 'blue']); // 使用传入的指定颜色
``` ```
- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入： - colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
```javascript ```javascript
layer.color('gender', (value) => { layer.color('gender', (value) => {
if(value === 1) { if (value === 1) {
return 'red' return 'red';
} }
return 'blue'; return 'blue';
}); });
layer.color('gender*age', (gender, age) => { layer.color('gender*age', (gender, age) => {
if(age === 20 && gender ==' 男' ) { if (age === 20 && gender == ' 男') {
return 'red' return 'red';
} }
return 'blue'; return 'blue';
}); });
``` ```
### shape ### shape
将数据值映射到图形的形状上的方法。 将数据值映射到图形的形状上的方法。
**shape(shape)** **shape(shape)**
@ -261,48 +253,44 @@ layer.color('gender*age', (gender, age) => {
只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状 只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
| layer类型 | shape类型 | 备注 | | layer 类型 | shape 类型 | 备注 |
| --- | --- | --- | | ---------- | -------------------------------------------------------------------------------------- | ---- |
| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | | | point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | |
| line | line,arc, arc3d, greatcircle | | | line | line,arc, arc3d, greatcircle | |
| polygon | fill,line, extrude | | | polygon | fill,line, extrude | |
**shape(field, shapes)** **shape(field, shapes)**
**shape(field, callback)** **shape(field, callback)**
### style ### style
用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放 用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
- fill - fill
- opacity  设置透明度 - opacity   设置透明度
- stroke 线填充颜色 - stroke 线填充颜色
- strokeWidth 线的宽度 - strokeWidth 线的宽度
```javascript ```javascript
layer.style({ layer.style({
fill:'red', fill: 'red',
opacity:0.8, opacity: 0.8,
stroke:'white' stroke: 'white',
}) });
``` ```
### show ### show
图层显示 图层显示
```javascript ```javascript
layer.show(); layer.show();
``` ```
### hide ### hide
图层隐藏 图层隐藏
@ -311,12 +299,10 @@ layer.show();
layer.hide(); layer.hide();
``` ```
### fitBounds ### fitBounds
缩放到图层范围 缩放到图层范围
```javascript ```javascript
layer.fitBounds() layer.fitBounds();
``` ```

208
docs/api/layer/layer.zh.md
View File

@ -2,135 +2,130 @@
title: Layer title: Layer
order: 0 order: 0
--- ---
# Layer # Layer
## 简介 ## 简介
L7 Layer 接口设计遵循图形语法，在可视表达上 L7 Layer 接口设计遵循图形语法，在可视表达上
语法示例 语法示例
```javascript ```javascript
new Layer(option) new Layer(option)
.source() .source()
.color() .color()
.size() .size()
.shape() .shape()
.style() .style();
``` ```
## 构造函数 ## 构造函数
## 配置项 ## 配置项
### visable ### visable
图层是否可见   {bool } default true
图层是否可见   {bool } default true
### zIndex ### zIndex
 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0
图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0
### minZoom ### minZoom
图层显示最小缩放等级，（0-18）   {number}  default 0 图层显示最小缩放等级，（0-18）   {number}  default 0
### maxZoom ### maxZoom
 图层显示最大缩放等级 （0-18）   {number}  default 18
图层显示最大缩放等级 （0-18）   {number}  default 18
## 鼠标事件 ## 鼠标事件
⚠️ beta版当前不支持，正式版会支持 ⚠️ beta 版当前不支持，正式版会支持
```javascript ```javascript
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件 layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
layer.on('dblclick', (ev)=>{}); // 鼠标左键双击图层事件 layer.on('dblclick', (ev) => {}); // 鼠标左键双击图层事件
layer.on('mousemove', (ev)=>{}); // 鼠标在图层上移动时触发 layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
layer.on('mouseover', (ev)=>{}); // 鼠标移入图层要素内时触发 layer.on('mouseover', (ev) => {}); // 鼠标移入图层要素内时触发
layer.on('mouseout', (ev)=>{}); // 鼠标移出图层要素时触发 layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
layer.on('mouseup', (ev)=>{}); // 鼠标在图层上单击抬起时触发 layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
layer.on('mousedown', (ev)=>{}); // 鼠标在图层上单击按下时触发 layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
layer.on('mouseleave', (ev)=>{}); // 鼠标离开图层要素 layer.on('mouseleave', (ev) => {}); // 鼠标离开图层要素
layer.on('rightclick', (ev)=>{}); // 鼠标右键图层要素 layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
``` ```
## 方法 ## 方法
### source ### source
数据源为layer设置数据 source(data,config)
数据源为 layer 设置数据 source(data,config)
- data {geojson|json|csv} - data {geojson|json|csv}
源数据
      源数据 - config   可选   数据源配置项
- parser 数据解析，默认是解析层 geojson
- config  可选 数据源配置项
- parser 数据解析，默认是解析层geojson
- transforms [transform，transform ]  数据处理转换 可设置多个 - transforms [transform，transform ]  数据处理转换 可设置多个
 parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source) parser 和  transforms [见 source 文档](https://www.yuque.com/antv/l7/source)
```javascript ```javascript
layer.source(data, { layer.source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
},
transforms: [
{
type: 'map',
callback: function(item) {
const [x, y] = item.coordinates;
item.lat = item.lat * 1;
item.lng = item.lng * 1;
item.v = item.v * 1;
item.coordinates = [x * 1, y * 1];
return item;
}, },
transforms:[ },
{ {
type: 'map', type: 'hexagon',
callback:function(item){ size: 6000,
const [x, y] = item.coordinates; field: 'v',
item.lat = item.lat*1; method: 'sum',
item.lng = item.lng*1; },
item.v = item.v *1; ],
item.coordinates = [x*1,y*1]; });
return item;
}
},
{
type: 'hexagon',
size: 6000,
field:'v',
method:'sum'
}
]
})
``` ```
### ###
### scale ### scale
cscle('field', scaleConfig) cscle('field', scaleConfig)
(field: string, scaleConfig: object) (field: string, scaleConfig: object)
为指定的数据字段进行列定义，返回 layer 实例。 为指定的数据字段进行列定义，返回 layer 实例。
- `field` 字段名。 - `field` 字段名。
- `scaleConfig` 列定义配置，对象类型，可配置的属性如下： - `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
```javascript ```javascript
{ {
type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize
} }
``` ```
### size ### size
将数据值映射到图形的大小上的方法。 将数据值映射到图形的大小上的方法。
**注意：**  **注意：**
不同图层的 size 的含义有所差别： 不同图层的 size 的含义有所差别：
@ -140,36 +135,36 @@ cscle('field', scaleConfig)
- polygon size 影响的是高度 - polygon size 影响的是高度
```javascript ```javascript
pointLayer.size(10); // 常量 pointLayer.size(10); // 常量
pointLayer.size('type'); // 使用字段映射到大小 pointLayer.size('type'); // 使用字段映射到大小
pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值 pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值
pointLayer.size('type', (type) => { // 回调函数 pointLayer.size('type', (type) => {
if(type === 'a') { // 回调函数
if (type === 'a') {
return 10; return 10;
} }
return 5; return 5;
}); });
``` ```
#### size(value） #### size(value）
传入数字常量，如 `pointLayer.size(20)` 传入数字常量，如  `pointLayer.size(20)`
#### size(field) #### size(field)
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
根据 field 字段的值映射大小，使用默认的`最大值 max:10`  和`最小值 min: 1`。
#### size(field, callback) #### size(field, callback)
使用回调函数控制图形大小。 使用回调函数控制图形大小。
- `callback`: function 回调函数。 - `callback`: function 回调函数。
```javascript ```javascript
pointLayer.size('age', (value) => { pointLayer.size('age', (value) => {
if(value === 1) { if (value === 1) {
return 5; return 5;
} }
return 10; return 10;
@ -183,14 +178,16 @@ pointLayer.size('age', (value) => {
```javascript ```javascript
layer.color('red'); // 常量颜色 layer.color('red'); // 常量颜色
layer.color('type'); // 对 type 字段进行映射，使用内置的颜色 layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
layer.color('type', [ 'red', 'blue' ]) // 指定颜色 layer.color('type', ['red', 'blue']); // 指定颜色
layer.color('type', (type) => { // 通过回调函数 layer.color('type', (type) => {
// 通过回调函数
if (type === 'a') { if (type === 'a') {
return 'red'; return 'red';
} }
return 'blue'; return 'blue';
}); });
layer.color('type*value', (type, value) => { //多个参数，通过回调函数 layer.color('type*value', (type, value) => {
//多个参数，通过回调函数
if (type === 'a' && value > 100) { if (type === 'a' && value > 100) {
return 'red'; return 'red';
} }
@ -198,10 +195,8 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数
}); });
``` ```
#### color(value) #### color(value)
参数：`value` ：string 参数：`value` ：string
只支持接收一个参数，value 可以是： 只支持接收一个参数，value 可以是：
@ -209,13 +204,12 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数
- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。 - 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
示例 示例
```javascript
layer.color('name') // 映射数据字段
layer.color('white') // 指定颜色
```
```javascript
layer.color('name'); // 映射数据字段
layer.color('white'); // 指定颜色
```
#### color(field, colors) #### color(field, colors)
@ -223,36 +217,34 @@ layer.color('white') // 指定颜色
- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。 - `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
-  `colors`: string | array | function - `colors`: string | array | function
colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
```javascript ```javascript
layer.color('name'); // 使用默认的颜色 layer.color('name'); // 使用默认的颜色
layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色 layer.color('name', ['red', 'blue']); // 使用传入的指定颜色
``` ```
- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入： - colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
```javascript ```javascript
layer.color('gender', (value) => { layer.color('gender', (value) => {
if(value === 1) { if (value === 1) {
return 'red' return 'red';
} }
return 'blue'; return 'blue';
}); });
layer.color('gender*age', (gender, age) => { layer.color('gender*age', (gender, age) => {
if(age === 20 && gender ==' 男' ) { if (age === 20 && gender == ' 男') {
return 'red' return 'red';
} }
return 'blue'; return 'blue';
}); });
``` ```
### shape ### shape
将数据值映射到图形的形状上的方法。 将数据值映射到图形的形状上的方法。
**shape(shape)** **shape(shape)**
@ -261,48 +253,44 @@ layer.color('gender*age', (gender, age) => {
只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状 只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
| layer类型 | shape类型 | 备注 | | layer 类型 | shape 类型 | 备注 |
| --- | --- | --- | | ---------- | -------------------------------------------------------------------------------------- | ---- |
| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | | | point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | |
| line | line,arc, arc3d, greatcircle | | | line | line,arc, arc3d, greatcircle | |
| polygon | fill,line, extrude | | | polygon | fill,line, extrude | |
**shape(field, shapes)** **shape(field, shapes)**
**shape(field, callback)** **shape(field, callback)**
### style ### style
用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放 用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
- fill - fill
- opacity  设置透明度 - opacity   设置透明度
- stroke 线填充颜色 - stroke 线填充颜色
- strokeWidth 线的宽度 - strokeWidth 线的宽度
```javascript ```javascript
layer.style({ layer.style({
fill:'red', fill: 'red',
opacity:0.8, opacity: 0.8,
stroke:'white' stroke: 'white',
}) });
``` ```
### show ### show
图层显示 图层显示
```javascript ```javascript
layer.show(); layer.show();
``` ```
### hide ### hide
图层隐藏 图层隐藏
@ -311,12 +299,10 @@ layer.show();
layer.hide(); layer.hide();
``` ```
### fitBounds ### fitBounds
缩放到图层范围 缩放到图层范围
```javascript ```javascript
layer.fitBounds() layer.fitBounds();
``` ```

16
docs/api/layer/linelayer.en.md
View File

@ -2,16 +2,17 @@
title: LineLayer title: LineLayer
order: 2 order: 2
--- ---
## 线图层 ## 线图层
### shape ### shape
线图层支持4种 shape 线图层支持 4 种 shape
- line 绘制路径图， - line 绘制路径图，
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线 - arc 绘制弧线 通过贝塞尔曲线算法技术弧线
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
- arc3d 3d弧线地图 3D视角 - arc3d 3d 弧线地图 3D 视角
⚠️ 弧线只需要设置起始点坐标即可 ⚠️ 弧线只需要设置起始点坐标即可
@ -28,7 +29,8 @@ order: 2
}) })
``` ```
如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点 如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
``` ```
{ {
"type": "FeatureCollection", "type": "FeatureCollection",
@ -59,14 +61,10 @@ order: 2
线图层 可以设置高度 线图层 可以设置高度
- size 类型为number 则表示 line的宽度 - size 类型为 number 则表示 line 的宽度
- size 类型为 [number , number] 分别表示宽度和高度 - size 类型为 [number , number] 分别表示宽度和高度
```javascript ```javascript
lineLayer.size(1); // 线的宽度为 1 lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1,2]); // 宽度为1，高度2 lineLayer.size([1, 2]); // 宽度为1，高度2
``` ```

16
docs/api/layer/linelayer.zh.md
View File

@ -2,16 +2,17 @@
title: LineLayer title: LineLayer
order: 2 order: 2
--- ---
## 线图层 ## 线图层
### shape ### shape
线图层支持4种 shape 线图层支持 4 种 shape
- line 绘制路径图， - line 绘制路径图，
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线 - arc 绘制弧线 通过贝塞尔曲线算法技术弧线
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
- arc3d 3d弧线地图 3D视角 - arc3d 3d 弧线地图 3D 视角
⚠️ 弧线只需要设置起始点坐标即可 ⚠️ 弧线只需要设置起始点坐标即可
@ -28,7 +29,8 @@ order: 2
}) })
``` ```
如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点 如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
``` ```
{ {
"type": "FeatureCollection", "type": "FeatureCollection",
@ -59,14 +61,10 @@ order: 2
线图层 可以设置高度 线图层 可以设置高度
- size 类型为number 则表示 line的宽度 - size 类型为 number 则表示 line 的宽度
- size 类型为 [number , number] 分别表示宽度和高度 - size 类型为 [number , number] 分别表示宽度和高度
```javascript ```javascript
lineLayer.size(1); // 线的宽度为 1 lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1,2]); // 宽度为1，高度2 lineLayer.size([1, 2]); // 宽度为1，高度2
``` ```

73
docs/api/layer/pointlayer.en.md
View File

@ -2,15 +2,16 @@
title: PointLayer title: PointLayer
order: 1 order: 1
--- ---
# PointLayer # PointLayer
## 简介 ## 简介
点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。
点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
shape 支持 shape 支持
**3D类型 柱图** **3D 类型 柱图**
``` ```
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn' 'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
@ -26,52 +27,54 @@ shape 支持
**图片标注** **图片标注**
通过 ```Scene.addImage()``` 可以添加图片资源， 通过 `Scene.addImage()` 可以添加图片资源，
### 代码示例 ### 代码示例
#### 基本图形显示示例 #### 基本图形显示示例
```javascript ```javascript
import { PointLayer } from "@antv/l7" import { PointLayer } from '@antv/l7';
const layer = PointLayer({ const layer = PointLayer({
zIndex: 2 zIndex: 2,
}) })
.source(data.list, { .source(data.list, {
type: 'array', type: 'array',
x: 'j', x: 'j',
y: 'w', y: 'w',
}) })
.shape('cylinder') .shape('cylinder')
.size('t',(level)=> { .size('t', (level) => {
return [4,4,(level+40)]; return [4, 4, level + 40];
}) })
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"]) .color('t', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
``` ```
#### 符号图 #### 符号图
使用图片添加地图标注 使用图片添加地图标注
```javascript ```javascript
scene.addImage(
'local',
'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',
);
scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png'); const layer = new PointLayer({
zIndex: 4,
})
const layer = new PointLayer({ .source(city)
zIndex: 4 .size(20.0)
}) .shape('local')
.source(city) .color('#0D408C');
.size(20.0)
.shape('local')
.color('#0D408C')
``` ```

72
docs/api/layer/pointlayer.zh.md
View File

@ -5,13 +5,13 @@ order: 1
# PointLayer # PointLayer
## 简介 ## 简介
点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。
点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
shape 支持 shape 支持
**3D类型 柱图** **3D 类型 柱图**
``` ```
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn' 'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
@ -27,52 +27,54 @@ shape 支持
**图片标注** **图片标注**
通过 ```Scene.addImage()``` 可以添加图片资源， 通过 `Scene.addImage()` 可以添加图片资源，
### 代码示例 ### 代码示例
#### 基本图形显示示例 #### 基本图形显示示例
```javascript ```javascript
import { PointLayer } from "@antv/l7" import { PointLayer } from '@antv/l7';
const layer = PointLayer({ const layer = PointLayer({
zIndex: 2 zIndex: 2,
}) })
.source(data.list, { .source(data.list, {
type: 'array', type: 'array',
x: 'j', x: 'j',
y: 'w', y: 'w',
}) })
.shape('cylinder') .shape('cylinder')
.size('t',(level)=> { .size('t', (level) => {
return [4,4,(level+40)]; return [4, 4, level + 40];
}) })
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"]) .color('t', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
``` ```
#### 符号图 #### 符号图
使用图片添加地图标注 使用图片添加地图标注
```javascript ```javascript
scene.addImage(
'local',
'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',
);
scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png'); const layer = new PointLayer({
zIndex: 4,
})
const layer = new PointLayer({ .source(city)
zIndex: 4 .size(20.0)
}) .shape('local')
.source(city) .color('#0D408C');
.size(20.0)
.shape('local')
.color('#0D408C')
``` ```

20
docs/api/layer/polygonlayer.en.md
View File

@ -2,25 +2,23 @@
title: PolygonLayer title: PolygonLayer
order: 3 order: 3
--- ---
# 填充图 # 填充图
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
### shape ### shape
填充图支持3种shape 填充图支持 3 种 shape
- fill 绘制填充面 不支持数据映射 - fill 绘制填充面 不支持数据映射
- line 绘制填充图描边 不支持数据映射 - line 绘制填充图描边 不支持数据映射
- extrude 对填充图3D拉伸 不支持数据映射 - extrude 对填充图 3D 拉伸 不支持数据映射
``` javascript
PolyonLayer.shape('fill');
PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude'); // size 表示高度
```javascript
PolyonLayer.shape('fill');
PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude'); // size 表示高度
``` ```
其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer) 其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)

20
docs/api/layer/polygonlayer.zh.md
View File

@ -2,25 +2,23 @@
title: PolygonLayer title: PolygonLayer
order: 3 order: 3
--- ---
# 填充图 # 填充图
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
### shape ### shape
填充图支持3种shape 填充图支持 3 种 shape
- fill 绘制填充面 不支持数据映射 - fill 绘制填充面 不支持数据映射
- line 绘制填充图描边 不支持数据映射 - line 绘制填充图描边 不支持数据映射
- extrude 对填充图3D拉伸 不支持数据映射 - extrude 对填充图 3D 拉伸 不支持数据映射
``` javascript
PolyonLayer.shape('fill');
PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude'); // size 表示高度
```javascript
PolyonLayer.shape('fill');
PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude'); // size 表示高度
``` ```
其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer) 其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)

193
docs/api/source/geojson.en.md
View File

@ -3,25 +3,196 @@ title: geojson
order: 1 order: 1
--- ---
# geojson 数据介绍
## 简介 ## 简介
GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
[The GeoJSON Format](https://tools.ietf.org/html/draft-butler-geojson-06)
[geojson详细文档]() L7 数据 source 支持   传入 Geometry 集合 FeatureCollection
## Geojson相关的JS库 ### Feature Collection Object
```json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "tom"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-2.8125, 34.59704151614417],
[65.390625, 34.59704151614417],
[65.390625, 61.10078883158897],
[-2.8125, 61.10078883158897],
[-2.8125, 34.59704151614417]
]
]
}
}
]
}
```
### Feature Object
```json
{
"type": "Feature",
"properties": {},
"geometry": {}
}
```
### Gemetry Object
支持 Gemetry Object 类型
### Point
```json
{
"type": "Point",
"coordinates": [100.0, 0.0]
}
```
### MultiPoint
```json
{
"type": "MultiPoint",
"coordinates": [
[100.0, 0.0],
[101.0, 1.0]
]
}
```
Line
### LineSring
```json
{
"type": "LineString",
"coordinates": [
[100.0, 0.0],
[101.0, 1.0]
]
}
```
### MultiLineString
```json
{
"type": "MultiLineString",
"coordinates": [
[
[100.0, 0.0],
[101.0, 1.0]
],
[
[102.0, 2.0],
[103.0, 3.0]
]
]
}
```
Polygon
### Polygon
```json
{
"type": "Polygon",
"coordinates": [
[
[100.0, 0.0],
[101.0, 0.0],
[101.0, 1.0],
[100.0, 1.0],
[100.0, 0.0]
]
]
}
```
With holes:
```json
{
"type": "Polygon",
"coordinates": [
[
[-170.0, 10.0],
[170.0, 10.0],
[170.0, -10.0],
[-170.0, -10.0],
[-170.0, 10.0]
],
[
[175.0, 5.0],
[-175.0, 5.0],
[-175.0, -5.0],
[175.0, -5.0],
[175.0, 5.0]
]
]
}
```
### MultiPolygon
```json
{
"type": "MultiPolygon",
"coordinates": [
[
[
[102.0, 2.0],
[103.0, 2.0],
[103.0, 3.0],
[102.0, 3.0],
[102.0, 2.0]
]
],
[
[
[100.0, 0.0],
[101.0, 0.0],
[101.0, 1.0],
[100.0, 1.0],
[100.0, 0.0]
],
[
[100.2, 0.2],
[100.8, 0.2],
[100.8, 0.8],
[100.2, 0.8],
[100.2, 0.2]
]
]
]
}
```
[geojson 详细文档]()
## Geojson 相关的 JS 库
### 地理统计分析工具 ### 地理统计分析工具
[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库 [turfjs](http://turfjs.org/):   地理数据计算，处理，统计，分析的 Javascript 库
### 在线工具： ### 在线工具：
[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据 [http://geojson.io/](http://geojson.io/)     可以在线查看，绘制，修改 GeoJSON 数据
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据 [https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的 geojson，还能够简化 GeoJSON 数据

198
docs/api/source/geojson.zh.md
View File

@ -2,26 +2,200 @@
title: geojson title: geojson
order: 1 order: 1
--- ---
# geojson 数据介绍
## 简介 ## 简介
GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
[The GeoJSON Format](https://tools.ietf.org/html/draft-butler-geojson-06)
[geojson详细文档]() L7 数据 source 支持   传入 Geometry 集合 FeatureCollection
## Geojson相关的JS库 ### Feature Collection Object
一个 feature Colletion 由对个 feature 组成
```json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "tom"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-2.8125, 34.59704151614417],
[65.390625, 34.59704151614417],
[65.390625, 61.10078883158897],
[-2.8125, 61.10078883158897],
[-2.8125, 34.59704151614417]
]
]
}
}
]
}
```
### Feature Object
一个 feature 有 geometry 空间信息，properties 属性信息，其中 geometry 是必须字段
```json
{
"type": "Feature",
"properties": {},
"geometry": {}
}
```
### Gemetry Object
支持 Gemetry Object 类型
#### Point
```json
{
"type": "Point",
"coordinates": [100.0, 0.0]
}
```
#### MultiPoint
```json
{
"type": "MultiPoint",
"coordinates": [
[100.0, 0.0],
[101.0, 1.0]
]
}
```
Line
#### LineSring
```json
{
"type": "LineString",
"coordinates": [
[100.0, 0.0],
[101.0, 1.0]
]
}
```
#### MultiLineString
```json
{
"type": "MultiLineString",
"coordinates": [
[
[100.0, 0.0],
[101.0, 1.0]
],
[
[102.0, 2.0],
[103.0, 3.0]
]
]
}
```
Polygon
#### Polygon
```json
{
"type": "Polygon",
"coordinates": [
[
[100.0, 0.0],
[101.0, 0.0],
[101.0, 1.0],
[100.0, 1.0],
[100.0, 0.0]
]
]
}
```
With holes:
```json
{
"type": "Polygon",
"coordinates": [
[
[-170.0, 10.0],
[170.0, 10.0],
[170.0, -10.0],
[-170.0, -10.0],
[-170.0, 10.0]
],
[
[175.0, 5.0],
[-175.0, 5.0],
[-175.0, -5.0],
[175.0, -5.0],
[175.0, 5.0]
]
]
}
```
#### MultiPolygon
```json
{
"type": "MultiPolygon",
"coordinates": [
[
[
[102.0, 2.0],
[103.0, 2.0],
[103.0, 3.0],
[102.0, 3.0],
[102.0, 2.0]
]
],
[
[
[100.0, 0.0],
[101.0, 0.0],
[101.0, 1.0],
[100.0, 1.0],
[100.0, 0.0]
],
[
[100.2, 0.2],
[100.8, 0.2],
[100.8, 0.8],
[100.2, 0.8],
[100.2, 0.2]
]
]
]
}
```
[geojson 详细文档]()
## Geojson 相关的 JS 库
### 地理统计分析工具 ### 地理统计分析工具
[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库 [turfjs](http://turfjs.org/):   地理数据计算，处理，统计，分析的 Javascript 库
### 在线工具： ### 在线工具：
[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据 [http://geojson.io/](http://geojson.io/)     可以在线查看，绘制，修改 GeoJSON 数据
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据 [https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的 geojson，还能够简化 GeoJSON 数据

257
docs/api/source/source.en.md
View File

@ -3,23 +3,18 @@ title: Source
order: 0 order: 0
--- ---
# Source
### 概述 ### 概述
source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform); source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
**parser:** **parser:**
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。 不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json 等不同数据格式，栅格数据，包括 Raster，Image 数据。将来还会支持瓦片格式数据。
**transform** **transform**
数据转换，数据统计，网格布局，数据聚合等数据操作。 数据转换，数据统计，网格布局，数据聚合等数据操作。
## API ## API
### parser ### parser
@ -28,65 +23,61 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
- 矢量数据 支持 csv，geojson，json 三种数据类型 - 矢量数据 支持 csv，geojson，json 三种数据类型
- 栅格数据 支持 image，Raster - 栅格数据 支持 image，Raster
#### geojson #### geojson
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以 [geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
不需要设置parser 参数 不需要设置 parser 参数
```javascript ```javascript
layer.source(data) layer.source(data);
``` ```
#### json #### json
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段 json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
**点数据** **点数据**
x: 经度字段 x: 经度字段
y: 纬度字段 y: 纬度字段
```javascript ```javascript
const data = [
{
lng: 112.345,
lat: 30.455,
value: 10,
},
{
lng: 114.345,
lat: 31.455,
value: 10,
},
];
const data = [{ layer.source(data, {
lng:112.345, parser: {
lat:30.455, type: 'json',
value: 10 x: 'lng',
},{ y: 'lat',
 lng:114.345, },
lat:31.455, });
value: 10
 }
]
layer.source(
data,
{
parser: {
type:'json',
x:'lng',
y:'lat',
}
})
``` ```
**线段数据** **线段数据**
type: json type: json
这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标 这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标
x:经度字段 起点经度 x:经度字段 起点经度
y:纬度字段 起点纬度 y:纬度字段 起点纬度
x1:经度字段 终点经度 x1:经度字段 终点经度
y1:纬度字段 终点纬度 y1:纬度字段 终点纬度
```javascript ```javascript
const data = [{ const data = [{
@ -101,7 +92,7 @@ const data = [{
  lng2:112.345,   lng2:112.345,
lat2:30.455, lat2:30.455,
value: 10 value: 10
 }  }
]; ];
layer.source( layer.source(
@ -110,9 +101,9 @@ layer.source(
parser:{ parser:{
type:'json', type:'json',
x:'lng1', x:'lng1',
y:'lat1' , y:'lat1' ,
    x1:'lng1',     x1:'lng1',
y1:'lat2' , y1:'lat2' ,
} }
} }
}) })
@ -120,125 +111,106 @@ layer.source(
**面数据** **面数据**
需要指定coordinates 字段, coordinates据格式 需要指定 coordinates 字段, coordinates 据格式
**注意面数据 coord  是三层数据结构** **注意面数据 coord  是三层数据结构**
```javascript ```javascript
[
{
type: 'Polygon',
geometryCoord: [
[
[115.1806640625, 30.637912028341123],
[114.9609375, 29.152161283318915],
[117.79541015625001, 27.430289738862594],
[118.740234375, 29.420460341013133],
[117.46582031249999, 31.50362930577303],
[115.1806640625, 30.637912028341123],
],
],
},
];
[ { layer.source(data, {
type: "Polygon", parser: {
'geometryCoord': [ type: 'json',
[ coordinates: 'geometryCoord',
[ },
115.1806640625, });
30.637912028341123
],
[
114.9609375,
29.152161283318915
],
[
117.79541015625001,
27.430289738862594
],
[
118.740234375,
29.420460341013133
],
[
117.46582031249999,
31.50362930577303
],
[
115.1806640625,
30.637912028341123
]
]
]
}
]
layer.source(data,{
parser:{
type:'json',
coordinates:'geometryCoord'
}
})
``` ```
#### csv #### csv
点，线数据配置项同json数据类型
点，线数据配置项同 json 数据类型
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng1',
y1: 'lat2',
},
});
```
**栅格数据类型\*\***
#### image
根据图片的经纬度范围，将图片添加到地图上。  配置项
- type: image
- extent: 图像的经纬度范围 []
```javascript ```javascript
layer.source( layer.source(
data, 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{ {
parser:{ parser: {
type:'csv', type: 'image',
x:'lng1', extent: [121.168, 30.2828, 121.384, 30.4219],
y:'lat1' , },
    x1:'lng1', },
y1:'lat2' , );
}
})
``` ```
**栅格数据类型****
#### image
 根据图片的经纬度范围，将图片添加到地图上。 配置项
-  type: image
-  extent: 图像的经纬度范围 []
```javascript
layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
parser:{
type:'image',
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
}
})
```
 
#### raster #### raster
栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项
栅格数据类型，主要表示遥感数据类型 data 栅格数据的二维矩阵数据 parser 配置项
- type  raster - type  raster
- width  数据宽度二维矩阵 columns  - width  数据宽度二维矩阵 columns
- height 数据高度 - height 数据高度
- min 数据最大值 - min 数据最大值
- max 数据最小值 - max 数据最小值
- extent 经纬度范围 - extent 经纬度范围
```javascript ```javascript
source(values, { source(values, {
parser: { parser: {
type: 'raster', type: 'raster',
width: n, width: n,
height: m, height: m,
min: 0, min: 0,
max: 8000, max: 8000,
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ] extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
} },
}) });
``` ```
### transforms ### transforms
目前支持三种数据处理方法 map，grid，hexagon transform配置项
目前支持三种数据处理方法 map，grid，hexagon transform 配置项
- type 数据处理类型 - type 数据处理类型
-  tansform cfg  数据处理配置项 - tansform cfg  数据处理配置项
#### map #### map
数据处理，支持自定义callback函数
数据处理，支持自定义 callback 函数
- callback:function 回调函数 - callback:function 回调函数
@ -259,15 +231,14 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
}, },
``` ```
#### grid #### grid
生成方格网布局，根据数据字段统计，主要在网格热力图中使用 生成方格网布局，根据数据字段统计，主要在网格热力图中使用
-  type: 'grid', - type: 'grid',
-  size: 网格半径 - size: 网格半径
-  field: 数据统计字段 - field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度 - method:聚合方法   count,max,min,sum,mean5 个统计维度
```javascript ```javascript
layer.source(data, { layer.source(data, {
@ -282,17 +253,15 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
} }
``` ```
#### hexagon #### hexagon
生成六边形网格布局，根据数据字段统计 生成六边形网格布局，根据数据字段统计
-  type: 'hexagon', - type: 'hexagon',
-  size: 网格半径 - size: 网格半径
-  field: 数据统计字段 - field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度 - method:聚合方法   count,max,min,sum,mean5 个统计维度
``` ```
```

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

@ -3,23 +3,18 @@ title: Source
order: 0 order: 0
--- ---
# Source
### 概述 ### 概述
source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform); source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
**parser:** **parser:**
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。 不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json 等不同数据格式，栅格数据，包括 Raster，Image 数据。将来还会支持瓦片格式数据。
**transform:** **transform:**
数据转换，数据统计，网格布局，数据聚合等数据操作。 数据转换，数据统计，网格布局，数据聚合等数据操作。
## API ## API
### parser ### parser
@ -28,65 +23,61 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
- 矢量数据 支持 csv，geojson，json 三种数据类型 - 矢量数据 支持 csv，geojson，json 三种数据类型
- 栅格数据 支持 image，Raster - 栅格数据 支持 image，Raster
#### geojson #### geojson
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以 [geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
不需要设置parser 参数 不需要设置 parser 参数
```javascript ```javascript
layer.source(data); layer.source(data);
``` ```
#### json #### json
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段 json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
**点数据** **点数据**
x: 经度字段 x: 经度字段
y: 纬度字段 y: 纬度字段
```javascript ```javascript
const data = [
{
lng: 112.345,
lat: 30.455,
value: 10,
},
{
lng: 114.345,
lat: 31.455,
value: 10,
},
];
const data = [{ layer.source(data, {
lng:112.345, parser: {
lat:30.455, type: 'json',
value: 10 x: 'lng',
},{ y: 'lat',
 lng:114.345, },
lat:31.455, });
value: 10
 }
]
layer.source(
data,
{
parser: {
type:'json',
x:'lng',
y:'lat',
}
})
``` ```
**线段数据** **线段数据**
type: json type: json
这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标 这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标
x:经度字段 起点经度 x:经度字段 起点经度
y:纬度字段 起点纬度 y:纬度字段 起点纬度
x1:经度字段 终点经度 x1:经度字段 终点经度
y1:纬度字段 终点纬度 y1:纬度字段 终点纬度
```javascript ```javascript
const data = [{ const data = [{
@ -102,7 +93,7 @@ const data = [{
  lng2:112.345,   lng2:112.345,
lat2:30.455, lat2:30.455,
value: 10 value: 10
 }  }
]; ];
layer.source( layer.source(
@ -111,9 +102,9 @@ layer.source(
parser:{ parser:{
type:'json', type:'json',
x:'lng1', x:'lng1',
y:'lat1' , y:'lat1' ,
    x1:'lng1',     x1:'lng1',
y1:'lat2' , y1:'lat2' ,
} }
} }
}) })
@ -121,179 +112,158 @@ layer.source(
**面数据** **面数据**
需要指定coordinates 字段, coordinates据格式 需要指定 coordinates 字段, coordinates 据格式
**注意面数据 coord  是三层数据结构** **注意面数据 coord  是三层数据结构**
```javascript ```javascript
[
{
type: 'Polygon',
geometryCoord: [
[
[115.1806640625, 30.637912028341123],
[114.9609375, 29.152161283318915],
[117.79541015625001, 27.430289738862594],
[118.740234375, 29.420460341013133],
[117.46582031249999, 31.50362930577303],
[115.1806640625, 30.637912028341123],
],
],
},
];
[ { layer.source(data, {
type: "Polygon", parser: {
'geometryCoord': [ type: 'json',
[ coordinates: 'geometryCoord',
[ },
115.1806640625, });
30.637912028341123
],
[
114.9609375,
29.152161283318915
],
[
117.79541015625001,
27.430289738862594
],
[
118.740234375,
29.420460341013133
],
[
117.46582031249999,
31.50362930577303
],
[
115.1806640625,
30.637912028341123
]
]
]
}
];
layer.source(data,{
parser:{
type:'json',
coordinates:'geometryCoord'
}
});
``` ```
#### csv #### csv
点，线数据配置项同json数据类型
点，线数据配置项同 json 数据类型
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng1',
y1: 'lat2',
},
});
```
**栅格数据类型\*\***
#### image
根据图片的经纬度范围，将图片添加到地图上。  配置项
- type: image
- extent: 图像的经纬度范围 []
```javascript ```javascript
layer.source( layer.source(
data, 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{ {
parser:{ parser: {
type:'csv', type: 'image',
x:'lng1', extent: [121.168, 30.2828, 121.384, 30.4219],
y:'lat1' , },
    x1:'lng1', },
y1:'lat2' , );
}
})
``` ```
**栅格数据类型****
#### image
 根据图片的经纬度范围，将图片添加到地图上。 配置项
-  type: image
-  extent: 图像的经纬度范围 []
```javascript
layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
parser:{
type:'image',
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
}
});
```
 
#### raster #### raster
栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项
栅格数据类型，主要表示遥感数据类型 data 栅格数据的二维矩阵数据 parser 配置项
- type  raster - type  raster
- width  数据宽度二维矩阵 columns  - width  数据宽度二维矩阵 columns
- height 数据高度 - height 数据高度
- min 数据最大值 - min 数据最大值
- max 数据最小值 - max 数据最小值
- extent 经纬度范围 - extent 经纬度范围
```javascript ```javascript
source(values, { source(values, {
parser: { parser: {
type: 'raster', type: 'raster',
width: n, width: n,
height: m, height: m,
min: 0, min: 0,
max: 8000, max: 8000,
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ] extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
} },
}); });
``` ```
### transforms ### transforms
目前支持三种数据处理方法 map，grid，hexagon transform配置项 目前支持三种数据处理方法 map，grid，hexagon transform 配置项
- type 数据处理类型 - type 数据处理类型
-  tansform cfg  数据处理配置项 - tansform cfg  数据处理配置项
#### map #### map
数据处理，支持自定义callback函数
数据处理，支持自定义 callback 函数
- callback:function 回调函数 - callback:function 回调函数
```javascript ```javascript
layer.source(data, { layer.source(data, {
transforms:[ transforms: [
{ {
type: 'map', type: 'map',
callback:function(item){ callback: function(item) {
const [x, y] = item.coordinates; const [x, y] = item.coordinates;
item.lat = item.lat*1; item.lat = item.lat * 1;
item.lng = item.lng*1; item.lng = item.lng * 1;
item.v = item.v *1; item.v = item.v * 1;
item.coordinates = [x*1,y*1]; item.coordinates = [x * 1, y * 1];
return item; return item;
} },
} },
] ],
}); });
``` ```
#### grid #### grid
生成方格网布局，根据数据字段统计，主要在网格热力图中使用 生成方格网布局，根据数据字段统计，主要在网格热力图中使用
-  type: 'grid', - type: 'grid',
-  size: 网格半径 - size: 网格半径
-  field: 数据统计字段 - field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度 - method:聚合方法   count,max,min,sum,mean5 个统计维度
```javascript ```javascript
layer.source(data, { layer.source(data, {
transforms:[ transforms: [
{ {
type: 'grid', type: 'grid',
size: 15000, size: 15000,
field:'v', field: 'v',
method:'sum' method: 'sum',
} },
], ],
}) });
``` ```
#### hexagon #### hexagon
生成六边形网格布局，根据数据字段统计 生成六边形网格布局，根据数据字段统计
-  type: 'hexagon', - type: 'hexagon',
-  size: 网格半径 - size: 网格半径
-  field: 数据统计字段 - field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度 - method:聚合方法   count,max,min,sum,mean5 个统计维度
``` ```
```

4
docs/tutorial/map/amap.en.md
View File

@ -32,7 +32,7 @@ order: 0
### 初始化 L7 Scene ### 初始化 L7 Scene
``` javascript ```javascript
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
map: new L7.GaodeMap({ map: new L7.GaodeMap({
@ -54,7 +54,7 @@ order: 0
- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 - 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据
- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 - 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。
``` javascript ```javascript
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json()) .then(res => res.json())

4
docs/tutorial/map/amap.zh.md
View File

@ -32,7 +32,7 @@ order: 0
### 初始化 L7 Scene ### 初始化 L7 Scene
``` javascript ```javascript
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
map: new L7.GaodeMap({ map: new L7.GaodeMap({
@ -54,7 +54,7 @@ order: 0
- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 - 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据
- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 - 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。
``` javascript ```javascript
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json()) .then(res => res.json())

5
docs/tutorial/map/mapbox.en.md
View File

@ -39,7 +39,8 @@ order: 0
### 初始化 L7 Scene ### 初始化 L7 Scene
``` javascript ```javascript
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
map: new L7.Mapbox({ map: new L7.Mapbox({
@ -62,7 +63,7 @@ order: 0
- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 - 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据
- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 - 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。
``` javascript ```javascript
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json()) .then(res => res.json())

6
docs/tutorial/map/mapbox.zh.md
View File

@ -39,9 +39,7 @@ order: 0
### 初始化 L7 Scene ### 初始化 L7 Scene
``` javascript ```javascript
``` javascript
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
map: new L7.Mapbox({ map: new L7.Mapbox({
@ -63,7 +61,7 @@ order: 0
``` javascript ```javascript
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json()) .then(res => res.json())

2
docs/tutorial/quickstart.en.md
View File

@ -1,5 +1,5 @@
--- ---
title: 快速上手 title: QuickStart
order: 0 order: 0
redirect_from: redirect_from:
- /en/docs/tutorial - /en/docs/tutorial

16
examples/gallery/basic/demo/arcCircle.js
View File

@ -6,14 +6,14 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'dark', style: 'dark',
pitch: 0, pitch: 0,
center: [ 107.77791556935472, 35.443286920228644 ], center: [107.77791556935472, 35.443286920228644],
zoom: 2.9142882493605033 zoom: 2.9142882493605033,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data, { .source(data, {
parser: { parser: {
@ -21,15 +21,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
x: 'lng1', x: 'lng1',
y: 'lat1', y: 'lat1',
x1: 'lng2', x1: 'lng2',
y1: 'lat2' y1: 'lat2',
} },
}) })
.size(1) .size(1)
.shape('arc') .shape('arc')
.color('#8C1EB2') .color('#8C1EB2')
.style({ .style({
opacity: 0.8, opacity: 0.8,
blur: 0.99 blur: 0.99,
}); });
scene.addLayer(layer); scene.addLayer(layer);
}); });

24
examples/gallery/basic/demo/bus_dark.js
View File

@ -5,27 +5,27 @@ const scene = new Scene({
id: 'map', id: 'map',
map: new Mapbox({ map: new Mapbox({
style: 'dark', style: 'dark',
center: [ 103.83735604457024, 1.360253881403068 ], center: [103.83735604457024, 1.360253881403068],
pitch: 4.00000000000001, pitch: 4.00000000000001,
zoom: 10.210275860702593, zoom: 10.210275860702593,
rotation: 19.313180925794313 rotation: 19.313180925794313,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json' 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data, { .source(data, {
parser: { parser: {
coordinates: 'path', coordinates: 'path',
type: 'json' type: 'json',
} },
}) })
.size('level', level => { .size('level', (level) => {
return [ 1.0, level * 1 ]; return [1.0, level * 1];
}) })
.shape('line') .shape('line')
.color( .color(
@ -40,8 +40,8 @@ fetch(
'#DEB8D4', '#DEB8D4',
'#F5D4E6', '#F5D4E6',
'#FAE4F1', '#FAE4F1',
'#FFF3FC' '#FFF3FC',
].slice(0, 8) ].slice(0, 8),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

20
examples/gallery/basic/demo/column_dark.js
View File

@ -6,25 +6,25 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 35.210526315789465, pitch: 35.210526315789465,
style: 'dark', style: 'dark',
center: [ 104.288144, 31.239692 ], center: [104.288144, 31.239692],
zoom: 4.4 zoom: 4.4,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data.list, { .source(data.list, {
parser: { parser: {
type: 'json', type: 'json',
x: 'j', x: 'j',
y: 'w' y: 'w',
} },
}) })
.shape('cylinder') .shape('cylinder')
.size('t', function(level) { .size('t', function(level) {
return [ 1, 2, level * 2 + 20 ]; return [1, 2, level * 2 + 20];
}) })
.color('t', [ .color('t', [
'#094D4A', '#094D4A',
@ -36,10 +36,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
'#5FD3A6', '#5FD3A6',
'#7BE39E', '#7BE39E',
'#A1EDB8', '#A1EDB8',
'#CEF8D6' '#CEF8D6',
]) ])
.style({ .style({
opacity: 1.0 opacity: 1.0,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
}); });

26
examples/gallery/basic/demo/light.js
View File

@ -6,40 +6,40 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'dark', style: 'dark',
pitch: 43, pitch: 43,
center: [ 120.13383079335335, 29.651873105004427 ], center: [120.13383079335335, 29.651873105004427],
zoom: 7.068989519212174 zoom: 7.068989519212174,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv' 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
) )
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms: [ transforms: [
{ {
type: 'hexagon', type: 'hexagon',
size: 2500, size: 2500,
field: 'v', field: 'v',
method: 'sum' method: 'sum',
} },
] ],
}) })
.size('sum', sum => { .size('sum', (sum) => {
return sum * 200; return sum * 200;
}) })
.shape('hexagonColumn') .shape('hexagonColumn')
.style({ .style({
coverage: 0.8, coverage: 0.8,
angle: 0, angle: 0,
opacity: 1.0 opacity: 1.0,
}) })
.color('sum', [ .color('sum', [
'#094D4A', '#094D4A',
@ -53,7 +53,7 @@ fetch(
'#A1EDB8', '#A1EDB8',
'#C3F9CC', '#C3F9CC',
'#DEFAC0', '#DEFAC0',
'#ECFFB1' '#ECFFB1',
]); ]);
scene.addLayer(layer); scene.addLayer(layer);
}); });

16
examples/gallery/basic/demo/normal.js
View File

@ -4,27 +4,27 @@ import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
center: [ 121.417463, 31.215175 ], center: [121.417463, 31.215175],
pitch: 0, pitch: 0,
zoom: 11 zoom: 11,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt') fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
y: 'lat', y: 'lat',
x: 'lng' x: 'lng',
} },
}) })
.size(0.5) .size(0.5)
.color('#080298') .color('#080298')
.style({ .style({
opacity: 1 opacity: 1,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

16
examples/gallery/basic/demo/point.js
View File

@ -6,16 +6,16 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 64.88, pitch: 64.88,
style: 'dark', style: 'dark',
center: [ 114.060288, 22.53684 ], center: [114.060288, 22.53684],
zoom: 15.63 zoom: 15.63,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json' 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data) .source(data)
.size(2) .size(2)
@ -29,10 +29,10 @@ fetch(
'#83CED6', '#83CED6',
'#A6E1E0', '#A6E1E0',
'#B8EFE2', '#B8EFE2',
'#D7F9F0' '#D7F9F0',
]) ])
.style({ .style({
opacity: 1 opacity: 1,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

28
examples/heatmap/grid/demo/china.js
View File

@ -6,39 +6,39 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 107.054293, 35.246265 ], center: [107.054293, 35.246265],
zoom: 4.056 zoom: 4.056,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
) )
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms: [ transforms: [
{ {
type: 'grid', type: 'grid',
size: 20000, size: 20000,
field: 'v', field: 'v',
method: 'sum' method: 'sum',
} },
] ],
}) })
.size('count', value => { .size('count', (value) => {
return value * 0; return value * 0;
}) })
.shape('square') .shape('square')
.style({ .style({
coverage: 1, coverage: 1,
angle: 0 angle: 0,
}) })
.color( .color(
'count', 'count',
@ -56,8 +56,8 @@ fetch(
'#30C7C4', '#30C7C4',
'#6BD5A0', '#6BD5A0',
'#A7ECB2', '#A7ECB2',
'#D0F4CA' '#D0F4CA',
].reverse() ].reverse(),
); );
scene.addLayer(layer); scene.addLayer(layer);

28
examples/heatmap/grid/demo/grid1.js
View File

@ -6,39 +6,39 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
style: 'dark', style: 'dark',
pitch: 0, pitch: 0,
center: [ 110.097892, 33.853662 ], center: [110.097892, 33.853662],
zoom: 4.056 zoom: 4.056,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
) )
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms: [ transforms: [
{ {
type: 'grid', type: 'grid',
size: 10000, size: 10000,
field: 'v', field: 'v',
method: 'sum' method: 'sum',
} },
] ],
}) })
.size('count', value => { .size('count', (value) => {
return value * 0; return value * 0;
}) })
.shape('square') .shape('square')
.style({ .style({
coverage: 1, coverage: 1,
angle: 0 angle: 0,
}) })
.color( .color(
'count', 'count',
@ -48,8 +48,8 @@ fetch(
'#FFF598', '#FFF598',
'#FF40F3', '#FF40F3',
'#9415FF', '#9415FF',
'#421EB2' '#421EB2',
].reverse() ].reverse(),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

28
examples/heatmap/grid/demo/heatmap3.js
View File

@ -6,39 +6,39 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 110.097892, 33.853662 ], center: [110.097892, 33.853662],
zoom: 4.056 zoom: 4.056,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
) )
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms: [ transforms: [
{ {
type: 'grid', type: 'grid',
size: 20000, size: 20000,
field: 'v', field: 'v',
method: 'sum' method: 'sum',
} },
] ],
}) })
.size('count', value => { .size('count', (value) => {
return value * 0; return value * 0;
}) })
.shape('circle') .shape('circle')
.style({ .style({
coverage: 0.9, coverage: 0.9,
angle: 0 angle: 0,
}) })
.color( .color(
'count', 'count',
@ -54,8 +54,8 @@ fetch(
'#F77B00', '#F77B00',
'#ED9909', '#ED9909',
'#ECC357', '#ECC357',
'#EDE59C' '#EDE59C',
].reverse() ].reverse(),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

28
examples/heatmap/grid/demo/world.js
View File

@ -6,39 +6,39 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
style: 'dark', style: 'dark',
pitch: 0, pitch: 0,
center: [ 110.097892, 33.853662 ], center: [110.097892, 33.853662],
zoom: 4.056 zoom: 4.056,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
) )
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms: [ transforms: [
{ {
type: 'grid', type: 'grid',
size: 10000, size: 10000,
field: 'v', field: 'v',
method: 'sum' method: 'sum',
} },
] ],
}) })
.size('count', value => { .size('count', (value) => {
return value * 0; return value * 0;
}) })
.shape('square') .shape('square')
.style({ .style({
coverage: 1, coverage: 1,
angle: 0 angle: 0,
}) })
.color( .color(
'count', 'count',
@ -50,8 +50,8 @@ fetch(
'#46F3FF', '#46F3FF',
'#02BEFF', '#02BEFF',
'#1A7AFF', '#1A7AFF',
'#0A1FB2' '#0A1FB2',
].reverse() ].reverse(),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

20
examples/heatmap/heatmap/demo/heatmap.js
View File

@ -6,20 +6,20 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'dark', style: 'dark',
pitch: 0, pitch: 0,
center: [ 127.5671666579043, 7.445038892195569 ], center: [127.5671666579043, 7.445038892195569],
zoom: 2.632456779444394 zoom: 2.632456779444394,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json' 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data) .source(data)
.shape('heatmap') .shape('heatmap')
.size('mag', [ 0, 1.0 ]) // weight映射通道 .size('mag', [0, 1.0]) // weight映射通道
.style({ .style({
intensity: 2, intensity: 2,
radius: 20, radius: 20,
@ -31,10 +31,10 @@ fetch(
'#FFF598', '#FFF598',
'#91EABC', '#91EABC',
'#2EA9A1', '#2EA9A1',
'#206C7C' '#206C7C',
].reverse(), ].reverse(),
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
} },
}); });
scene.addLayer(layer); scene.addLayer(layer);
}); });

20
examples/heatmap/heatmap/demo/heatmap3d.js
View File

@ -6,20 +6,20 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'dark', style: 'dark',
pitch: 58.5, pitch: 58.5,
center: [ 111.8759, 30.6942 ], center: [111.8759, 30.6942],
rotation: 0.519, rotation: 0.519,
zoom: 3.6116 zoom: 3.6116,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json' 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data) .source(data)
.size('capacity', [ 0, 1 ]) .size('capacity', [0, 1])
.shape('heatmap3D') .shape('heatmap3D')
// weight映射通道 // weight映射通道
.style({ .style({
@ -33,10 +33,10 @@ fetch(
'#DAF291', '#DAF291',
'#FFD591', '#FFD591',
'#FF7A45', '#FF7A45',
'#CF1D49' '#CF1D49',
], ],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
} },
}); });
scene.addLayer(layer); scene.addLayer(layer);
}); });

20
examples/heatmap/heatmap/demo/heatmap_purple.js
View File

@ -6,20 +6,20 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'dark', style: 'dark',
pitch: 0, pitch: 0,
center: [ 127.5671666579043, 7.445038892195569 ], center: [127.5671666579043, 7.445038892195569],
zoom: 2.632456779444394 zoom: 2.632456779444394,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json' 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data) .source(data)
.shape('heatmap') .shape('heatmap')
.size('mag', [ 0, 1.0 ]) // weight映射通道 .size('mag', [0, 1.0]) // weight映射通道
.style({ .style({
intensity: 2, intensity: 2,
radius: 20, radius: 20,
@ -31,10 +31,10 @@ fetch(
'#FFF598', '#FFF598',
'#F27DEB', '#F27DEB',
'#8C1EB2', '#8C1EB2',
'#421EB2' '#421EB2',
].reverse(), ].reverse(),
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
} },
}); });
scene.addLayer(layer); scene.addLayer(layer);
}); });

28
examples/heatmap/hexagon/demo/china.js
View File

@ -6,33 +6,33 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'dark', style: 'dark',
pitch: 47.49999999999995, pitch: 47.49999999999995,
center: [ 112.50447776627743, 30.830476390931125 ], center: [112.50447776627743, 30.830476390931125],
zoom: 3.9879693680088626 zoom: 3.9879693680088626,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
) )
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms: [ transforms: [
{ {
type: 'hexagon', type: 'hexagon',
size: 17000, size: 17000,
field: 'v', field: 'v',
method: 'sum' method: 'sum',
} },
] ],
}) })
.size('sum', value => { .size('sum', (value) => {
return value * 20; return value * 20;
}) })
.shape('hexagonColumn') .shape('hexagonColumn')
@ -44,12 +44,12 @@ fetch(
'#FFF598', '#FFF598',
'#FF40F3', '#FF40F3',
'#9415FF', '#9415FF',
'#421EB2' '#421EB2',
].reverse() ].reverse(),
) )
.style({ .style({
coverage: 0.9, coverage: 0.9,
angle: 0 angle: 0,
}); });
scene.addLayer(layer); scene.addLayer(layer);

26
examples/heatmap/hexagon/demo/hexagon.js
View File

@ -6,17 +6,17 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'light', style: 'light',
pitch: 56.499, pitch: 56.499,
center: [ 114.07737552216226, 22.542656745583486 ], center: [114.07737552216226, 22.542656745583486],
rotation: 39.19, rotation: 39.19,
zoom: 12.47985 zoom: 12.47985,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json' 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
transforms: [ transforms: [
@ -24,16 +24,16 @@ fetch(
type: 'hexagon', type: 'hexagon',
size: 100, size: 100,
field: 'h12', field: 'h12',
method: 'sum' method: 'sum',
} },
] ],
}) })
.size('sum', [ 0, 600 ]) .size('sum', [0, 600])
.shape('hexagonColumn') .shape('hexagonColumn')
.style({ .style({
coverage: 0.8, coverage: 0.8,
angle: 0, angle: 0,
opacity: 1.0 opacity: 1.0,
}) })
.color( .color(
'sum', 'sum',
@ -47,8 +47,8 @@ fetch(
'#5FD3A6', '#5FD3A6',
'#7BE39E', '#7BE39E',
'#A1EDB8', '#A1EDB8',
'#CEF8D6' '#CEF8D6',
].reverse() ].reverse(),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

26
examples/heatmap/hexagon/demo/light.js
View File

@ -6,40 +6,40 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'dark', style: 'dark',
pitch: 43, pitch: 43,
center: [ 120.13383079335335, 29.651873105004427 ], center: [120.13383079335335, 29.651873105004427],
zoom: 7.068989519212174 zoom: 7.068989519212174,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv' 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
) )
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms: [ transforms: [
{ {
type: 'hexagon', type: 'hexagon',
size: 2500, size: 2500,
field: 'v', field: 'v',
method: 'sum' method: 'sum',
} },
] ],
}) })
.size('sum', sum => { .size('sum', (sum) => {
return sum * 200; return sum * 200;
}) })
.shape('hexagonColumn') .shape('hexagonColumn')
.style({ .style({
coverage: 0.8, coverage: 0.8,
angle: 0, angle: 0,
opacity: 1.0 opacity: 1.0,
}) })
.color('sum', [ .color('sum', [
'#094D4A', '#094D4A',
@ -53,7 +53,7 @@ fetch(
'#A1EDB8', '#A1EDB8',
'#C3F9CC', '#C3F9CC',
'#DEFAC0', '#DEFAC0',
'#ECFFB1' '#ECFFB1',
]); ]);
scene.addLayer(layer); scene.addLayer(layer);
}); });

26
examples/heatmap/hexagon/demo/world.js
View File

@ -6,16 +6,16 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 104.995156, 31.450658 ], center: [104.995156, 31.450658],
zoom: 3.79 zoom: 3.79,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json' 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
transforms: [ transforms: [
@ -23,18 +23,18 @@ fetch(
type: 'hexagon', type: 'hexagon',
size: 90000, size: 90000,
field: 'capacity', field: 'capacity',
method: 'sum' method: 'sum',
} },
] ],
}) })
.size('sum', value => { .size('sum', (value) => {
return value * 50; return value * 50;
}) })
.shape('hexagon') .shape('hexagon')
.style({ .style({
coverage: 0.9, coverage: 0.9,
angle: 0, angle: 0,
opacity: 1.0 opacity: 1.0,
}) })
.color( .color(
'sum', 'sum',
@ -50,8 +50,8 @@ fetch(
'#0F62FF', '#0F62FF',
'#30B2E9', '#30B2E9',
'#30B2E9', '#30B2E9',
'#40C4CE' '#40C4CE',
].reverse() ].reverse(),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

22
examples/line/arc/demo/arc.js
View File

@ -6,36 +6,36 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
pitch: 0, pitch: 0,
style: 'dark', style: 'dark',
center: [ 0, 23.107329 ], center: [0, 23.107329],
zoom: 0 zoom: 0,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json' 'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
function getAirportCoord(idx) { function getAirportCoord(idx) {
return [ data.airports[idx][3], data.airports[idx][4] ]; return [data.airports[idx][3], data.airports[idx][4]];
} }
const routes = data.routes.map(function(airline) { const routes = data.routes.map(function(airline) {
return { return {
coord: [ getAirportCoord(airline[1]), getAirportCoord(airline[2]) ] coord: [getAirportCoord(airline[1]), getAirportCoord(airline[2])],
}; };
}); });
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(routes, { .source(routes, {
parser: { parser: {
type: 'json', type: 'json',
coordinates: 'coord' coordinates: 'coord',
} },
}) })
.size(0.6) .size(0.6)
.shape('arc') .shape('arc')
.color('rgb(5, 5, 50)') .color('rgb(5, 5, 50)')
.style({ .style({
opacity: 0.05 opacity: 0.05,
}); });
scene.addLayer(layer); scene.addLayer(layer);
}); });

16
examples/line/arc/demo/arcCircle.js
View File

@ -6,13 +6,13 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
pitch: 0, pitch: 0,
style: 'dark', style: 'dark',
center: [ 107.77791556935472, 35.443286920228644 ], center: [107.77791556935472, 35.443286920228644],
zoom: 2.9142882493605033 zoom: 2.9142882493605033,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data, { .source(data, {
parser: { parser: {
@ -20,15 +20,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
x: 'lng1', x: 'lng1',
y: 'lat1', y: 'lat1',
x1: 'lng2', x1: 'lng2',
y1: 'lat2' y1: 'lat2',
} },
}) })
.size(1) .size(1)
.shape('greatcircle') .shape('greatcircle')
.color('#8C1EB2') .color('#8C1EB2')
.style({ .style({
opacity: 0.8, opacity: 0.8,
blur: 0.99 blur: 0.99,
}); });
scene.addLayer(layer); scene.addLayer(layer);
}); });

18
examples/line/arc/demo/trip_arc.js
View File

@ -7,15 +7,15 @@ const scene = new Scene({
pitch: 60, pitch: 60,
type: 'mapbox', type: 'mapbox',
style: 'light', style: 'light',
center: [ -74.06967, 40.720399 ], center: [-74.06967, 40.720399],
zoom: 12.45977 zoom: 12.45977,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv' 'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv',
) )
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data, { .source(data, {
parser: { parser: {
@ -23,15 +23,15 @@ fetch(
x: 'start station longitude', x: 'start station longitude',
y: 'start station latitude', y: 'start station latitude',
x1: 'end station longitude', x1: 'end station longitude',
y1: 'end station latitude' y1: 'end station latitude',
} },
}) })
.size(1) .size(1)
.shape('arc3d') .shape('arc3d')
.color('#0C47BF') .color('#0C47BF')
.style({ .style({
opacity: 1, opacity: 1,
blur: 0.9 blur: 0.9,
}); });
scene.addLayer(layer); scene.addLayer(layer);
}); });

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

@ -6,15 +6,15 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
pitch: 60, pitch: 60,
style: 'dark', style: 'dark',
center: [ 104.34278, 41.12554 ], center: [104.34278, 41.12554],
zoom: 2.94888, zoom: 2.94888,
rotation: 42.3999 rotation: 42.3999,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data, { .source(data, {
parser: { parser: {
@ -22,14 +22,14 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
x: 'lng1', x: 'lng1',
y: 'lat1', y: 'lat1',
x1: 'lng2', x1: 'lng2',
y1: 'lat2' y1: 'lat2',
} },
}) })
.size(1) .size(1)
.shape('arc3d') .shape('arc3d')
.color('#FF7C6A') .color('#FF7C6A')
.style({ .style({
opacity: 0.8 opacity: 0.8,
}); });
scene.addLayer(layer); scene.addLayer(layer);
}); });

20
examples/line/isoline/demo/ele.js
View File

@ -6,22 +6,22 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 53.6305, pitch: 53.6305,
style: 'light', style: 'light',
center: [ 102.600579, 23.114887 ], center: [102.600579, 23.114887],
zoom: 14.66 zoom: 14.66,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data) .source(data)
.size('ELEV', h => { .size('ELEV', (h) => {
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ]; return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];
}) })
.shape('line') .shape('line')
.scale('ELEV', { .scale('ELEV', {
type: 'quantize' type: 'quantize',
}) })
.color( .color(
'ELEV', 'ELEV',
@ -35,8 +35,8 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
'#C8D7F5', '#C8D7F5',
'#A5C1FC', '#A5C1FC',
'#7FA7F9', '#7FA7F9',
'#5F8AE5' '#5F8AE5',
].reverse() ].reverse(),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

18
examples/line/isoline/demo/ele_dark.js
View File

@ -6,22 +6,22 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 26.842105263157915, pitch: 26.842105263157915,
style: 'dark', style: 'dark',
center: [ 102.599436, 23.116371 ], center: [102.599436, 23.116371],
zoom: 14.78 zoom: 14.78,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data) .source(data)
.size('ELEV', h => { .size('ELEV', (h) => {
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ]; return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];
}) })
.shape('line') .shape('line')
.scale('ELEV', { .scale('ELEV', {
type: 'quantize' type: 'quantize',
}) })
.color('ELEV', [ .color('ELEV', [
'#094D4A', '#094D4A',
@ -33,7 +33,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
'#5FD3A6', '#5FD3A6',
'#7BE39E', '#7BE39E',
'#A1EDB8', '#A1EDB8',
'#CEF8D6' '#CEF8D6',
]); ]);
scene.addLayer(layer); scene.addLayer(layer);
}); });

20
examples/line/isoline/demo/isoline.js
View File

@ -6,22 +6,22 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'light', style: 'light',
center: [ 104.117492, 36.492696 ], center: [104.117492, 36.492696],
zoom: 3.89 zoom: 3.89,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json' 'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data) .source(data)
.scale('value', { .scale('value', {
type: 'quantile' type: 'quantile',
}) })
.size('value', [ 0.5, 1, 1.5, 2 ]) .size('value', [0.5, 1, 1.5, 2])
.shape('line') .shape('line')
.color( .color(
'value', 'value',
@ -35,8 +35,8 @@ fetch(
'#83CED6', '#83CED6',
'#A6E1E0', '#A6E1E0',
'#B8EFE2', '#B8EFE2',
'#D7F9F0' '#D7F9F0',
].reverse() ].reverse(),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

20
examples/line/line/demo/isoline.js
View File

@ -6,22 +6,22 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'light', style: 'light',
center: [ 104.117492, 36.492696 ], center: [104.117492, 36.492696],
zoom: 3.89 zoom: 3.89,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json' 'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data) .source(data)
.scale('value', { .scale('value', {
type: 'quantile' type: 'quantile',
}) })
.size('value', [ 0.5, 1, 1.5, 2 ]) .size('value', [0.5, 1, 1.5, 2])
.shape('line') .shape('line')
.color( .color(
'value', 'value',
@ -35,8 +35,8 @@ fetch(
'#83CED6', '#83CED6',
'#A6E1E0', '#A6E1E0',
'#B8EFE2', '#B8EFE2',
'#D7F9F0' '#D7F9F0',
].reverse() ].reverse(),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

24
examples/line/path/demo/bus_dark.js
View File

@ -4,28 +4,28 @@ import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new Mapbox({ map: new Mapbox({
center: [ 103.83735, 1.3602538 ], center: [103.83735, 1.3602538],
pitch: 4.00000000000001, pitch: 4.00000000000001,
zoom: 10.210275860702593, zoom: 10.210275860702593,
rotation: 19.313180925794313, rotation: 19.313180925794313,
style: 'dark' style: 'dark',
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json' 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'json', type: 'json',
coordinates: 'path' coordinates: 'path',
} },
}) })
.size('level', level => { .size('level', (level) => {
return [ 0.8, level * 1 ]; return [0.8, level * 1];
}) })
.shape('line') .shape('line')
.color( .color(
@ -40,8 +40,8 @@ fetch(
'#DEB8D4', '#DEB8D4',
'#F5D4E6', '#F5D4E6',
'#FAE4F1', '#FAE4F1',
'#FFF3FC' '#FFF3FC',
].slice(0, 8) ].slice(0, 8),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

24
examples/line/path/demo/bus_light.js
View File

@ -4,28 +4,28 @@ import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new Mapbox({ map: new Mapbox({
center: [ 103.83735604457024, 1.360253881403068 ], center: [103.83735604457024, 1.360253881403068],
pitch: 4.00000000000001, pitch: 4.00000000000001,
zoom: 10.210275860702593, zoom: 10.210275860702593,
rotation: 19.313180925794313, rotation: 19.313180925794313,
style: 'light' style: 'light',
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json' 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'json', type: 'json',
coordinates: 'path' coordinates: 'path',
} },
}) })
.size('level', level => { .size('level', (level) => {
return [ 0.8, level * 1 ]; return [0.8, level * 1];
}) })
.shape('line') .shape('line')
.color( .color(
@ -40,10 +40,10 @@ fetch(
'#83CED6', '#83CED6',
'#A6E1E0', '#A6E1E0',
'#B8EFE2', '#B8EFE2',
'#D7F9F0' '#D7F9F0',
] ]
.reverse() .reverse()
.slice(0, 8) .slice(0, 8),
); );
scene.addLayer(layer); scene.addLayer(layer);
}); });

14
examples/line/path/demo/road_dark.js
View File

@ -4,23 +4,23 @@ import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new Mapbox({ map: new Mapbox({
center: [ 116.3956, 39.9392 ], center: [116.3956, 39.9392],
pitch: 0, pitch: 0,
zoom: 10, zoom: 10,
rotation: 0, rotation: 0,
style: 'dark' style: 'dark',
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json' 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data) .source(data)
.size(1.5) .size(1.5)
.shape('line') .shape('line')
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]); .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16']);
scene.addLayer(layer); scene.addLayer(layer);
}); });

14
examples/line/path/demo/road_light.js
View File

@ -4,23 +4,23 @@ import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new Mapbox({ map: new Mapbox({
center: [ 116.3956, 39.9392 ], center: [116.3956, 39.9392],
pitch: 0, pitch: 0,
zoom: 10, zoom: 10,
rotation: 0, rotation: 0,
style: 'light' style: 'light',
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json' 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data) .source(data)
.size(1.5) .size(1.5)
.shape('line') .shape('line')
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]); .color('标准名称', ['#5B8FF9', '#5CCEA1', '#5D7092']);
scene.addLayer(layer); scene.addLayer(layer);
}); });

24
examples/point/bubble/demo/color.js
View File

@ -6,23 +6,23 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'light', style: 'light',
center: [ 121.435159, 31.256971 ], center: [121.435159, 31.256971],
zoom: 14.89, zoom: 14.89,
minZoom: 10 minZoom: 10,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'json', type: 'json',
x: 'longitude', x: 'longitude',
y: 'latitude' y: 'latitude',
} },
}) })
.shape('name', [ .shape('name', [
'circle', 'circle',
@ -33,13 +33,13 @@ fetch(
'octogon', 'octogon',
'hexagram', 'hexagram',
'rhombus', 'rhombus',
'vesica' 'vesica',
]) ])
.size('unit_price', [ 10, 25 ]) .size('unit_price', [10, 25])
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ]) .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
.style({ .style({
opacity: 0.3, opacity: 0.3,
strokeWidth: 2 strokeWidth: 2,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

18
examples/point/bubble/demo/point.js
View File

@ -7,27 +7,27 @@ const scene = new Scene({
pitch: 0, pitch: 0,
type: 'amap', type: 'amap',
style: 'light', style: 'light',
center: [ 140.067171, 36.26186 ], center: [140.067171, 36.26186],
zoom: 5.32, zoom: 5.32,
maxZoom: 10 maxZoom: 10,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json' 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data) .source(data)
.shape('circle') .shape('circle')
.size('mag', [ 1, 25 ]) .size('mag', [1, 25])
.color('mag', mag => { .color('mag', (mag) => {
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1'; return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
}) })
.style({ .style({
opacity: 0.3, opacity: 0.3,
strokeWidth: 1 strokeWidth: 1,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

20
examples/point/bubble/demo/scatter.js
View File

@ -5,24 +5,24 @@ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
center: [ -121.24357, 37.58264 ], center: [-121.24357, 37.58264],
pitch: 0, pitch: 0,
zoom: 6.45 zoom: 6.45,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv' 'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv',
) )
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'Longitude', x: 'Longitude',
y: 'Latitude' y: 'Latitude',
} },
}) })
.shape('circle') .shape('circle')
.size(4) .size(4)
@ -36,11 +36,11 @@ fetch(
'#83CED6', '#83CED6',
'#A6E1E0', '#A6E1E0',
'#B8EFE2', '#B8EFE2',
'#D7F9F0' '#D7F9F0',
]) ])
.style({ .style({
opacity: 0.5, opacity: 0.5,
strokeWidth: 0 strokeWidth: 0,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

20
examples/point/bubble/demo/world.js
View File

@ -6,34 +6,34 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
pitch: 0, pitch: 0,
style: 'dark', style: 'dark',
center: [ 96.99215001469588, 29.281597225674773 ], center: [96.99215001469588, 29.281597225674773],
zoom: 2.194613775109773, zoom: 2.194613775109773,
maxZoom: 10 maxZoom: 10,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json' 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
data.features = data.features.filter(item => { data.features = data.features.filter((item) => {
return item.properties.capacity > 800; return item.properties.capacity > 800;
}); });
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data) .source(data)
.shape('circle') .shape('circle')
.size('capacity', [ 0, 16 ]) .size('capacity', [0, 16])
.color('capacity', [ .color('capacity', [
'#34B6B7', '#34B6B7',
'#4AC5AF', '#4AC5AF',
'#5FD3A6', '#5FD3A6',
'#7BE39E', '#7BE39E',
'#A1EDB8', '#A1EDB8',
'#CEF8D6' '#CEF8D6',
]) ])
.style({ .style({
opacity: 0.5, opacity: 0.5,
strokeWidth: 0 strokeWidth: 0,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

38
examples/point/chart/demo/bar.js
View File

@ -6,21 +6,20 @@ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
center: [ 2.6125016864608597, 49.359131 ], center: [2.6125016864608597, 49.359131],
pitch: 0, pitch: 0,
zoom: 4.19 zoom: 4.19,
}) }),
}); });
addChart(); addChart();
scene.render(); scene.render();
function addChart() { function addChart() {
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json' 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
data.nodes.forEach(function(item) { data.nodes.forEach(function(item) {
const el = document.createElement('div'); const el = document.createElement('div');
const total = const total =
@ -34,18 +33,18 @@ function addChart() {
{ {
item: 'Agriculture', item: 'Agriculture',
count: item.gdp.Agriculture, count: item.gdp.Agriculture,
percent: item.gdp.Agriculture / total percent: item.gdp.Agriculture / total,
}, },
{ {
item: 'Industry', item: 'Industry',
count: item.gdp.Industry, count: item.gdp.Industry,
percent: item.gdp.Industry / total percent: item.gdp.Industry / total,
}, },
{ {
item: 'Service', item: 'Service',
count: item.gdp.Service, count: item.gdp.Service,
percent: item.gdp.Service / total percent: item.gdp.Service / total,
} },
]; ];
const chart = new G2.Chart({ const chart = new G2.Chart({
@ -53,27 +52,26 @@ function addChart() {
width: size, width: size,
height: size, height: size,
render: 'svg', render: 'svg',
padding: 0 padding: 0,
}); });
chart.legend(false); chart.legend(false);
chart.source(itemData); chart.source(itemData);
chart.tooltip(false); chart.tooltip(false);
chart.axis('count', { chart.axis('count', {
grid: false grid: false,
}); });
chart chart
.interval() .interval()
.position('item*count') .position('item*count')
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ]) .color('item', ['#5CCEA1', '#5D7092', '#5B8FF9'])
.opacity(1); .opacity(1);
chart.render(); chart.render();
const marker = new Marker({ const marker = new Marker({
element: el element: el,
}) }).setLnglat({
.setLnglat({ lng: item.coordinates[0],
lng: item.coordinates[0], lat: item.coordinates[1],
lat: item.coordinates[1] });
});
scene.addMarker(marker); scene.addMarker(marker);
}); });
}); });

51
examples/point/chart/demo/chart.js
View File

@ -6,20 +6,20 @@ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
center: [ 2.6125016864608597, 49.359131 ], center: [2.6125016864608597, 49.359131],
pitch: 0, pitch: 0,
zoom: 4.19 zoom: 4.19,
}) }),
}); });
addChart(); addChart();
scene.render(); scene.render();
function addChart() { function addChart() {
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json' 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
data.nodes.forEach(function(item) { data.nodes.forEach(function(item) {
const el = document.createElement('div'); const el = document.createElement('div');
const total = const total =
@ -33,18 +33,18 @@ function addChart() {
{ {
item: 'Agriculture', item: 'Agriculture',
count: item.gdp.Agriculture, count: item.gdp.Agriculture,
percent: item.gdp.Agriculture / total percent: item.gdp.Agriculture / total,
}, },
{ {
item: 'Industry', item: 'Industry',
count: item.gdp.Industry, count: item.gdp.Industry,
percent: item.gdp.Industry / total percent: item.gdp.Industry / total,
}, },
{ {
item: 'Service', item: 'Service',
count: item.gdp.Service, count: item.gdp.Service,
percent: item.gdp.Service / total percent: item.gdp.Service / total,
} },
]; ];
const sliceNumber = 0.02; const sliceNumber = 0.02;
@ -54,19 +54,19 @@ function addChart() {
draw: function draw(cfg, container) { draw: function draw(cfg, container) {
const points = cfg.points; const points = cfg.points;
let path = []; let path = [];
path.push([ 'M', points[0].x, points[0].y ]); path.push(['M', points[0].x, points[0].y]);
path.push([ 'L', points[1].x, points[1].y - sliceNumber ]); path.push(['L', points[1].x, points[1].y - sliceNumber]);
path.push([ 'L', points[2].x, points[2].y - sliceNumber ]); path.push(['L', points[2].x, points[2].y - sliceNumber]);
path.push([ 'L', points[3].x, points[3].y ]); path.push(['L', points[3].x, points[3].y]);
path.push('Z'); path.push('Z');
path = this.parsePath(path); path = this.parsePath(path);
return container.addShape('path', { return container.addShape('path', {
attrs: { attrs: {
fill: cfg.color, fill: cfg.color,
path path,
} },
}); });
} },
}); });
const chart = new G2.Chart({ const chart = new G2.Chart({
@ -74,27 +74,26 @@ function addChart() {
width: size, width: size,
height: size, height: size,
render: 'svg', render: 'svg',
padding: 0 padding: 0,
}); });
chart.legend(false); chart.legend(false);
chart.source(itemData); chart.source(itemData);
chart.coord('theta', { chart.coord('theta', {
innerRadius: 0.6 innerRadius: 0.6,
}); });
chart.tooltip(false); chart.tooltip(false);
chart chart
.intervalStack() .intervalStack()
.position('percent') .position('percent')
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ]) .color('item', ['#5CCEA1', '#5D7092', '#5B8FF9'])
.shape('sliceShape'); .shape('sliceShape');
chart.render(); chart.render();
const marker = new Marker({ const marker = new Marker({
element: el element: el,
}) }).setLnglat({
.setLnglat({ lng: item.coordinates[0],
lng: item.coordinates[0], lat: item.coordinates[1],
lat: item.coordinates[1] });
});
scene.addMarker(marker); scene.addMarker(marker);
}); });
}); });

47
examples/point/chart/demo/ring.js
View File

@ -40,70 +40,71 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
pitch: 0, pitch: 0,
style: 'dark', style: 'dark',
center: [ 52.21496184144132, 24.121126851768906 ], center: [52.21496184144132, 24.121126851768906],
zoom: 3.802 zoom: 3.802,
}) }),
}); });
Promise.all([ Promise.all([
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json' 'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json',
).then(d => d.json()), ).then((d) => d.json()),
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json' 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json',
).then(d => d.json()) ).then((d) => d.json()),
]).then(function onLoad([ center, population ]) { ]).then(function onLoad([center, population]) {
const popobj = {}; const popobj = {};
population.forEach(element => { population.forEach((element) => {
popobj[element.Code] = popobj[element.Code] =
element['Population, female (% of total) (% of total)']; element['Population, female (% of total) (% of total)'];
}); });
// 数据绑定 // 数据绑定
center.features = center.features.map(fe => { center.features = center.features.map((fe) => {
fe.properties.female = popobj[fe.properties.id] * 1 || 0; fe.properties.female = popobj[fe.properties.id] * 1 || 0;
return fe; return fe;
}); });
center.features.forEach(point => { center.features.forEach((point) => {
const el = document.createElement('div'); const el = document.createElement('div');
const coord = point.geometry.coordinates; const coord = point.geometry.coordinates;
const v = point.properties.female * 1; const v = point.properties.female * 1;
if (v < 1 || (v > 46 && v < 54)) { return; } if (v < 1 || (v > 46 && v < 54)) {
return;
}
const size = 60; const size = 60;
const data = [ const data = [
{ {
type: '男性', type: '男性',
value: 100.0 - v.toFixed(2) value: 100.0 - v.toFixed(2),
}, },
{ {
type: '女性', type: '女性',
value: v.toFixed(2) * 1 value: v.toFixed(2) * 1,
} },
]; ];
const chart = new G2.Chart({ const chart = new G2.Chart({
container: el, container: el,
width: size, width: size,
height: size, height: size,
render: 'svg', render: 'svg',
padding: 0 padding: 0,
}); });
chart.source(data); chart.source(data);
chart.legend(false); chart.legend(false);
chart.tooltip(false); chart.tooltip(false);
chart.coord('theta', { chart.coord('theta', {
radius: 0.9, radius: 0.9,
innerRadius: 0.6 innerRadius: 0.6,
}); });
chart chart
.intervalStack() .intervalStack()
.position('value') .position('value')
.color('type', [ '#5CCEA1', '#5B8FF9' ]) .color('type', ['#5CCEA1', '#5B8FF9'])
.opacity(1); .opacity(1);
chart.render(); chart.render();
const marker = new Marker({ element: el }) const marker = new Marker({ element: el }).setLnglat({
.setLnglat({ lng: coord[0],
lng: coord[0], lat: coord[1],
lat: coord[1] });
});
scene.addMarker(marker); scene.addMarker(marker);
}); });
}); });

26
examples/point/column/demo/clumn_shape.js
View File

@ -6,37 +6,37 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 66.02383, pitch: 66.02383,
style: 'dark', style: 'dark',
center: [ 121.400257, 31.25287 ], center: [121.400257, 31.25287],
zoom: 14.55, zoom: 14.55,
rotation: 134.9507 rotation: 134.9507,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'json', type: 'json',
x: 'longitude', x: 'longitude',
y: 'latitude' y: 'latitude',
} },
}) })
.shape('name', [ .shape('name', [
'cylinder', 'cylinder',
'triangleColumn', 'triangleColumn',
'hexagonColumn', 'hexagonColumn',
'squareColumn' 'squareColumn',
]) ])
.size('unit_price', h => { .size('unit_price', (h) => {
return [ 6, 6, h / 500 ]; return [6, 6, h / 500];
}) })
.color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ]) .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
.style({ .style({
opacity: 1.0 opacity: 1.0,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

26
examples/point/column/demo/clumn_shape_light.js
View File

@ -6,37 +6,37 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
pitch: 60, pitch: 60,
style: 'light', style: 'light',
center: [ 121.412224, 31.26192438 ], center: [121.412224, 31.26192438],
zoom: 13.13438, zoom: 13.13438,
rotation: 35.97133 rotation: 35.97133,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'json', type: 'json',
x: 'longitude', x: 'longitude',
y: 'latitude' y: 'latitude',
} },
}) })
.shape('name', [ .shape('name', [
'cylinder', 'cylinder',
'triangleColumn', 'triangleColumn',
'hexagonColumn', 'hexagonColumn',
'squareColumn' 'squareColumn',
]) ])
.size('unit_price', h => { .size('unit_price', (h) => {
return [ 6, 6, h / 500 ]; return [6, 6, h / 500];
}) })
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ]) .color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A'])
.style({ .style({
opacity: 1.0 opacity: 1.0,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

20
examples/point/column/demo/column_dark.js
View File

@ -6,25 +6,25 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 35.210526315789465, pitch: 35.210526315789465,
style: 'dark', style: 'dark',
center: [ 104.288144, 31.239692 ], center: [104.288144, 31.239692],
zoom: 4.4 zoom: 4.4,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data.list, { .source(data.list, {
parser: { parser: {
type: 'json', type: 'json',
x: 'j', x: 'j',
y: 'w' y: 'w',
} },
}) })
.shape('cylinder') .shape('cylinder')
.size('t', function(level) { .size('t', function(level) {
return [ 1, 2, level * 2 + 20 ]; return [1, 2, level * 2 + 20];
}) })
.color('t', [ .color('t', [
'#094D4A', '#094D4A',
@ -36,10 +36,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
'#5FD3A6', '#5FD3A6',
'#7BE39E', '#7BE39E',
'#A1EDB8', '#A1EDB8',
'#CEF8D6' '#CEF8D6',
]) ])
.style({ .style({
opacity: 1.0 opacity: 1.0,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
}); });

18
examples/point/column/demo/column_light.js
View File

@ -6,30 +6,30 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 48.62562, pitch: 48.62562,
style: 'light', style: 'light',
center: [ 104.026043, 31.847 ], center: [104.026043, 31.847],
rotation: -0.76, rotation: -0.76,
zoom: 4.48 zoom: 4.48,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data.list, { .source(data.list, {
parser: { parser: {
type: 'json', type: 'json',
x: 'j', x: 'j',
y: 'w' y: 'w',
} },
}) })
.shape('cylinder') .shape('cylinder')
.size('t', function(level) { .size('t', function(level) {
return [ 1, 2, level * 2 + 20 ]; return [1, 2, level * 2 + 20];
}) })
.color('#006CFF') .color('#006CFF')
.style({ .style({
opacity: 1.0 opacity: 1.0,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
}); });

24
examples/point/image/demo/image.js
View File

@ -6,37 +6,37 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'light', style: 'light',
center: [ 121.434765, 31.256735 ], center: [121.434765, 31.256735],
zoom: 14.83 zoom: 14.83,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
scene.addImage( scene.addImage(
'00', '00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
); );
scene.addImage( scene.addImage(
'01', '01',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
); );
scene.addImage( scene.addImage(
'02', '02',
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
); );
const imageLayer = new PointLayer() const imageLayer = new PointLayer()
.source(data, { .source(data, {
parser: { parser: {
type: 'json', type: 'json',
x: 'longitude', x: 'longitude',
y: 'latitude' y: 'latitude',
} },
}) })
.shape('name', [ '00', '01', '02' ]) .shape('name', ['00', '01', '02'])
.size(20); .size(20);
scene.addLayer(imageLayer); scene.addLayer(imageLayer);
}); });

14
examples/point/image/demo/locate.js
View File

@ -6,19 +6,19 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'light', style: 'light',
center: [ 116.276227, 35.256776 ], center: [116.276227, 35.256776],
zoom: 6 zoom: 6,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json' 'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
scene.addImage( scene.addImage(
'marker', 'marker',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ',
); );
const imageLayer = new PointLayer() const imageLayer = new PointLayer()
.source(data) .source(data)

36
examples/point/image/demo/weather.js
View File

@ -5,65 +5,65 @@ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
style: 'dark', style: 'dark',
center: [ 120.5969, 29.7918 ], center: [120.5969, 29.7918],
pitch: 35, pitch: 35,
zoom: 7, zoom: 7,
rotation: 4.183582 rotation: 4.183582,
}) }),
}); });
scene.addImage( scene.addImage(
'00', '00',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'01', '01',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'02', '02',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'04', '04',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'11', '11',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'15', '15',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'07', '07',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'16', '16',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'06', '06',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'08', '08',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'17', '17',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ',
); );
scene.addImage( scene.addImage(
'05', '05',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ' 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ',
); );
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json' 'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const imageLayer = new PointLayer() const imageLayer = new PointLayer()
.source(data) .source(data)
.shape('w', function(w) { .shape('w', function(w) {

46
examples/point/marker/demo/marker.js
View File

@ -5,32 +5,32 @@ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
center: [ 105.790327, 36.495636 ], center: [105.790327, 36.495636],
pitch: 0, pitch: 0,
zoom: 4 zoom: 4,
}) }),
}); });
addMarkers(); addMarkers();
scene.render(); scene.render();
function addMarkers() { function addMarkers() {
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json' 'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(nodes => { .then((nodes) => {
for (let i = 0; i < nodes.length; i++) { for (let i = 0; i < nodes.length; i++) {
if (nodes[i].g !== '1' || nodes[i].v === '') { continue; } if (nodes[i].g !== '1' || nodes[i].v === '') {
continue;
}
const el = document.createElement('label'); const el = document.createElement('label');
el.className = 'lableclass'; el.className = 'lableclass';
el.textContent = nodes[i].v + '℃'; el.textContent = nodes[i].v + '℃';
el.style.background = getColor(nodes[i].v); el.style.background = getColor(nodes[i].v);
el.style.borderColor = getColor(nodes[i].v); el.style.borderColor = getColor(nodes[i].v);
const marker = new Marker({ const marker = new Marker({
element: el element: el,
}) }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
.setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
scene.addMarker(marker); scene.addMarker(marker);
} }
}); });
@ -40,16 +40,16 @@ function getColor(v) {
return v > 50 return v > 50
? '#800026' ? '#800026'
: v > 40 : v > 40
? '#BD0026' ? '#BD0026'
: v > 30 : v > 30
? '#E31A1C' ? '#E31A1C'
: v > 20 : v > 20
? '#FC4E2A' ? '#FC4E2A'
: v > 10 : v > 10
? '#FD8D3C' ? '#FD8D3C'
: v > 5 : v > 5
? '#FEB24C' ? '#FEB24C'
: v > 0 : v > 0
? '#FED976' ? '#FED976'
: '#FFEDA0'; : '#FFEDA0';
} }

16
examples/point/scatter/demo/normal.js
View File

@ -5,27 +5,27 @@ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
style: 'dark', style: 'dark',
center: [ 121.417463, 31.215175 ], center: [121.417463, 31.215175],
pitch: 0, pitch: 0,
zoom: 11 zoom: 11,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt') fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
.then(res => res.text()) .then((res) => res.text())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
y: 'lat', y: 'lat',
x: 'lng' x: 'lng',
} },
}) })
.size(0.5) .size(0.5)
.color('#080298') .color('#080298')
.style({ .style({
opacity: 1 opacity: 1,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

16
examples/point/scatter/demo/normal2.js
View File

@ -6,16 +6,16 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 64.88, pitch: 64.88,
style: 'dark', style: 'dark',
center: [ 114.060288, 22.53684 ], center: [114.060288, 22.53684],
zoom: 15.63 zoom: 15.63,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json' 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data) .source(data)
.size(2) .size(2)
@ -29,10 +29,10 @@ fetch(
'#83CED6', '#83CED6',
'#A6E1E0', '#A6E1E0',
'#B8EFE2', '#B8EFE2',
'#D7F9F0' '#D7F9F0',
]) ])
.style({ .style({
opacity: 1 opacity: 1,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

18
examples/polygon/3d/demo/polygon.js
View File

@ -6,20 +6,20 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'dark', style: 'dark',
center: [ 114.050008, 22.529272 ], center: [114.050008, 22.529272],
zoom: 14.1 zoom: 14.1,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json' 'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new PolygonLayer({}) const layer = new PolygonLayer({})
.source(data) .source(data)
.shape('extrude') .shape('extrude')
.size('h20', [ 100, 120, 160, 200, 260, 500 ]) .size('h20', [100, 120, 160, 200, 260, 500])
.color('h20', [ .color('h20', [
'#816CAD', '#816CAD',
'#A67FB5', '#A67FB5',
@ -27,10 +27,10 @@ fetch(
'#DEB8D4', '#DEB8D4',
'#F5D4E6', '#F5D4E6',
'#FAE4F1', '#FAE4F1',
'#FFF3FC' '#FFF3FC',
]) ])
.style({ .style({
opacity: 1.0 opacity: 1.0,
}); });
scene.addLayer(layer); scene.addLayer(layer);
}); });

22
examples/polygon/fill/demo/fill.js
View File

@ -6,16 +6,16 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'light', style: 'light',
center: [ 116.368652, 39.93866 ], center: [116.368652, 39.93866],
zoom: 10.07 zoom: 10.07,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json' 'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const layer = new PolygonLayer({}) const layer = new PolygonLayer({})
.source(data) .source(data)
.color( .color(
@ -30,21 +30,21 @@ fetch(
'#98B7F7', '#98B7F7',
'#BDD0F8', '#BDD0F8',
'#DDE6F7', '#DDE6F7',
'#F2F5FC' '#F2F5FC',
].reverse() ].reverse(),
) )
.shape('fill') .shape('fill')
.style({ .style({
opacity: 1 opacity: 1,
}); });
const layer2 = new LineLayer({ const layer2 = new LineLayer({
zIndex: 2 zIndex: 2,
}) })
.source(data) .source(data)
.color('#fff') .color('#fff')
.size(0.3) .size(0.3)
.style({ .style({
opacity: 1 opacity: 1,
}); });
scene.addLayer(layer); scene.addLayer(layer);

18
examples/polygon/fill/demo/polygon.js
View File

@ -6,14 +6,14 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'light', style: 'light',
center: [ 107.042225, 37.66565 ], center: [107.042225, 37.66565],
zoom: 3.87 zoom: 3.87,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json') fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const colors = [ const colors = [
'#D7F9F0', '#D7F9F0',
'#A6E1E0', '#A6E1E0',
@ -22,24 +22,24 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
'#3474DB', '#3474DB',
'#005CBE', '#005CBE',
'#00419F', '#00419F',
'#00287E' '#00287E',
]; ];
const layer = new PolygonLayer({}) const layer = new PolygonLayer({})
.source(data) .source(data)
.color('name', colors) .color('name', colors)
.shape('fill') .shape('fill')
.style({ .style({
opacity: 0.9 opacity: 0.9,
}); });
const layer2 = new LineLayer({ const layer2 = new LineLayer({
zIndex: 2 zIndex: 2,
}) })
.source(data) .source(data)
.color('#fff') .color('#fff')
.size(0.3) .size(0.3)
.style({ .style({
opacity: 1 opacity: 1,
}); });
scene.addLayer(layer); scene.addLayer(layer);

30
examples/polygon/fill/demo/population.js
View File

@ -6,25 +6,25 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
pitch: 0, pitch: 0,
style: 'light', style: 'light',
center: [ 3.438, 40.16797 ], center: [3.438, 40.16797],
zoom: 0.51329 zoom: 0.51329,
}) }),
}); });
Promise.all([ Promise.all([
fetch( fetch(
'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json' 'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json',
).then(d => d.json()), ).then((d) => d.json()),
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json' 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json',
).then(d => d.json()) ).then((d) => d.json()),
]).then(function onLoad([ world, population ]) { ]).then(function onLoad([world, population]) {
const popobj = {}; const popobj = {};
population.forEach(element => { population.forEach((element) => {
popobj[element.Code] = popobj[element.Code] =
element['Population, female (% of total) (% of total)']; element['Population, female (% of total) (% of total)'];
}); });
// 数据绑定 // 数据绑定
world.features = world.features.map(fe => { world.features = world.features.map((fe) => {
fe.properties.female = popobj[fe.id] * 1 || 0; fe.properties.female = popobj[fe.id] * 1 || 0;
return fe; return fe;
}); });
@ -38,27 +38,27 @@ Promise.all([
'#83CED6', '#83CED6',
'#A6E1E0', '#A6E1E0',
'#B8EFE2', '#B8EFE2',
'#D7F9F0' '#D7F9F0',
]; ];
const layer = new PolygonLayer({}) const layer = new PolygonLayer({})
.source(world) .source(world)
.scale('female', { .scale('female', {
type: 'quantile' type: 'quantile',
}) })
.color('female', colors) .color('female', colors)
.shape('fill') .shape('fill')
.style({ .style({
opacity: 0.9 opacity: 0.9,
}); });
const layer2 = new LineLayer({ const layer2 = new LineLayer({
zIndex: 2 zIndex: 2,
}) })
.source(world) .source(world)
.color('#fff') .color('#fff')
.size(0.3) .size(0.3)
.style({ .style({
opacity: 1 opacity: 1,
}); });
scene.addLayer(layer); scene.addLayer(layer);

12
examples/raster/basic/demo/image.js
View File

@ -6,9 +6,9 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'light', style: 'light',
center: [ 121.268, 30.3628 ], center: [121.268, 30.3628],
zoom: 13 zoom: 13,
}) }),
}); });
const layer = new ImageLayer({}); const layer = new ImageLayer({});
@ -17,8 +17,8 @@ layer.source(
{ {
parser: { parser: {
type: 'image', type: 'image',
extent: [ 121.168, 30.2828, 121.384, 30.4219 ] extent: [121.168, 30.2828, 121.384, 30.4219],
} },
} },
); );
scene.addLayer(layer); scene.addLayer(layer);

13
examples/raster/basic/demo/radar.js
View File

@ -6,9 +6,9 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'dark', style: 'dark',
center: [ 115.5268, 34.3628 ], center: [115.5268, 34.3628],
zoom: 7 zoom: 7,
}) }),
}); });
const layer = new ImageLayer({}); const layer = new ImageLayer({});
@ -17,9 +17,8 @@ layer.source(
{ {
parser: { parser: {
type: 'image', type: 'image',
extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ] extent: [113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137],
} },
} },
); );
scene.addLayer(layer); scene.addLayer(layer);

54
examples/tutorial/control/demo/amap.js
View File

@ -5,49 +5,47 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 121.4316962, 31.26082325 ], center: [121.4316962, 31.26082325],
zoom: 15.056 zoom: 15.056,
}) }),
}); });
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json') fetch(
.then(res => res.json()) 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
.then(data => { )
const pointLayer = .then((res) => res.json())
new PointLayer({ .then((data) => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
}) })
.source(data, { .shape('circle')
parser: { .size('unit_price', [5, 25])
type: 'json', .color('name', ['#49B5AD', '#5B8FF9'])
x: 'longitude', .style({
y: 'latitude' opacity: 0.3,
} strokeWidth: 1,
}).shape('circle') });
.size('unit_price', [ 5, 25 ])
.color('name', [ '#49B5AD', '#5B8FF9' ])
.style({
opacity: 0.3,
strokeWidth: 1
});
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
const overlayers = { const overlayers = {
围栏填充: pointLayer 围栏填充: pointLayer,
}; };
const layersControl = new Layers({ const layersControl = new Layers({
overlayers overlayers,
}); });
scene.addControl(layersControl); scene.addControl(layersControl);
}); });
const zoomControl = new Zoom({ const zoomControl = new Zoom({
position: 'topright' position: 'topright',
}); });
const scaleControl = new Scale({ const scaleControl = new Scale({
position: 'bottomright' position: 'bottomright',
}); });
scene.addControl(zoomControl); scene.addControl(zoomControl);
scene.addControl(scaleControl); scene.addControl(scaleControl);

7
examples/tutorial/control/demo/mapbox.js
View File

@ -5,13 +5,12 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 107.054293, 35.246265 ], center: [107.054293, 35.246265],
zoom: 4.056 zoom: 4.056,
}) }),
}); });
const zoomControl = new Zoom(); const zoomControl = new Zoom();
const scaleControl = new Scale(); const scaleControl = new Scale();
scene.addControl(zoomControl); scene.addControl(zoomControl);
scene.addControl(scaleControl); scene.addControl(scaleControl);

6
examples/tutorial/data/demo/line.js
View File

@ -5,7 +5,7 @@ new Scene({
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 107.054293, 35.246265 ], center: [107.054293, 35.246265],
zoom: 4.056 zoom: 4.056,
}) }),
}); });

6
examples/tutorial/map/demo/amap.js
View File

@ -5,7 +5,7 @@ new Scene({
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 107.054293, 35.246265 ], center: [107.054293, 35.246265],
zoom: 4.056 zoom: 4.056,
}) }),
}); });

6
examples/tutorial/map/demo/mapbox.js
View File

@ -5,7 +5,7 @@ new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 107.054293, 35.246265 ], center: [107.054293, 35.246265],
zoom: 4.056 zoom: 4.056,
}) }),
}); });

10
examples/tutorial/marker/demo/amap.js
View File

@ -5,17 +5,17 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 121.4316962, 31.26082325 ], center: [121.4316962, 31.26082325],
zoom: 12.056 zoom: 12.056,
}) }),
}); });
// 创建默认 marker // 创建默认 marker
const popup = new Popup({ const popup = new Popup({
offsets: [ 0, 20 ] offsets: [0, 20],
}).setText('hello'); }).setText('hello');
const marker = new Marker() const marker = new Marker()
.setLnglat([ 121.4316962, 31.26082325 ]) .setLnglat([121.4316962, 31.26082325])
.setPopup(popup); .setPopup(popup);
scene.addMarker(marker); scene.addMarker(marker);

7
examples/tutorial/marker/demo/mapbox.js
View File

@ -5,13 +5,12 @@ const scene = new Scene({
map: new Mapbox({ map: new Mapbox({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 107.054293, 35.246265 ], center: [107.054293, 35.246265],
zoom: 4.056 zoom: 4.056,
}) }),
}); });
const zoomControl = new Zoom(); const zoomControl = new Zoom();
const scaleControl = new Scale(); const scaleControl = new Scale();
scene.addControl(zoomControl); scene.addControl(zoomControl);
scene.addControl(scaleControl); scene.addControl(scaleControl);

6
gatsby-config.js
View File

@ -77,7 +77,7 @@ module.exports = {
zh: '场景 Scene', zh: '场景 Scene',
en: 'Scene' en: 'Scene'
}, },
order: 2 order: 1
}, },
{ {
slug: 'api/layer', slug: 'api/layer',
@ -85,7 +85,7 @@ module.exports = {
zh: '图层 Layer', zh: '图层 Layer',
en: 'Layer' en: 'Layer'
}, },
order: 2 order: 3
}, },
{ {
slug: 'api/source', slug: 'api/source',
@ -93,7 +93,7 @@ module.exports = {
zh: '数据 Source', zh: '数据 Source',
en: 'Source' en: 'Source'
}, },
order: 3 order: 2
}, },
{ {
slug: 'api/component', slug: 'api/component',

3
package.json
View File

@ -123,8 +123,7 @@
"site:clean": "gatsby clean", "site:clean": "gatsby clean",
"site:deploy": "yarn run site:build && gh-pages -d public", "site:deploy": "yarn run site:build && gh-pages -d public",
"site:publish": "gh-pages -d public", "site:publish": "gh-pages -d public",
"lint-fix:examples": "prettier --write examples/**/**/*.js", "lint:fix": "prettier --write examples/**/**/*.js docs/api/**/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx",
"lint:site": "eslint examples/**/**/*.js --fix",
"prebuild": "run-p tsc lint", "prebuild": "run-p tsc lint",
"build": "yarn clean && lerna run build", "build": "yarn clean && lerna run build",
"postbuild": "yarn build:declarations", "postbuild": "yarn build:declarations",

26
packages/source/__tests__/data/multiLine.ts Normal file
View File

@ -0,0 +1,26 @@
import { FeatureCollection, Geometries, Properties } from '@turf/helpers';
const MultiLine: FeatureCollection<Geometries, Properties> = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'MultiLineString',
coordinates: [
[
[100.0, 0.0],
[101.0, 1.0],
],
[
[102.0, 2.0],
[103.0, 3.0],
],
],
},
},
],
};
export default MultiLine;

2431
packages/source/__tests__/data/multipolygon.ts Normal file
View File

File diff suppressed because it is too large Load Diff

23
packages/source/__tests__/parser/geojson.spec.ts
View File

@ -1,22 +1,19 @@
import geojson from '../../src/parser/geojson'; import geojson from '../../src/parser/geojson';
import multiLine from '../data/multiLine';
import multiPolygon from '../data/multipolygon';
import polygon from '../data/polygon'; import polygon from '../data/polygon';
describe('parser.geojson', () => { describe('parser.geojson', () => {
it('parser json', () => { it('parser json', () => {
const result = geojson(polygon); const result = geojson(polygon);
expect(result.dataArray.length).toEqual(3); expect(result.dataArray.length).toEqual(3);
}); });
it('parser json hash id ', () => { it('parser multiPolygon', () => {
const result = geojson(polygon, { const result = geojson(multiPolygon);
idField: 'name', expect(result.dataArray.length).toEqual(11);
}); expect(result.dataArray[0]._id).toEqual(0);
expect(result.dataArray.length).toEqual(3); });
if (result.featureKeys) { it('parset multiLine', () => {
expect(Object.keys(result.featureKeys)).toEqual([ const result = geojson(multiLine);
'408534', expect(result.dataArray.length).toEqual(2);
'410464',
'431974',
]);
}
}); });
}); });

38
packages/source/src/parser/geojson.ts
View File

@ -1,4 +1,3 @@
import { djb2hash } from '@antv/l7-utils';
// @ts-ignore // @ts-ignore
import rewind from '@mapbox/geojson-rewind'; import rewind from '@mapbox/geojson-rewind';
import { import {
@ -36,33 +35,30 @@ export default function geoJSON(
); );
}); });
// 数据为空时处理 // 数据为空时处理
let i = 0; const i = 0;
// multi polygon 拆分 // multi polygon 拆分
turfMeta.flattenEach( turfMeta.flattenEach(
data, data,
(currentFeature: Feature<Geometries, Properties>, featureIndex: number) => { (currentFeature: Feature<Geometries, Properties>, featureIndex: number) => {
const coord = getCoords(currentFeature); const coord = getCoords(currentFeature);
let id = featureIndex; const id = featureIndex;
// 瓦片数据通过字段hash建立索引 if (currentFeature.geometry.type === 'Polygon') {
if ( coord.forEach((coor) => {
cfg && const dataItem = {
cfg.idField && ...currentFeature.properties,
currentFeature.properties && coordinates: [coor],
currentFeature.properties[cfg.idField] _id: id,
) { };
const value = currentFeature.properties[cfg.idField]; resultData.push(dataItem);
id = djb2hash(value) % 1000019; });
featureKeys[id] = { } else {
index: i++, const dataItem: IParseDataItem = {
idField: value, ...currentFeature.properties,
coordinates: coord,
_id: id,
}; };
resultData.push(dataItem);
} }
const dataItem: IParseDataItem = {
...currentFeature.properties,
coordinates: coord,
_id: id,
};
resultData.push(dataItem);
}, },
); );
return { return {

13
stories/Layers/components/Polygon3D.tsx
View File

@ -25,16 +25,16 @@ export default class Polygon3D extends React.Component {
public async componentDidMount() { public async componentDidMount() {
const response = await fetch( const response = await fetch(
'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json' 'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json',
); );
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
pitch: 0, pitch: 0,
style: 'dark', style: 'dark',
center: [ 114.050008, 22.529272 ], center: [114.050008, 22.529272],
zoom: 14.1 zoom: 14.1,
}) }),
}); });
const layer = new PolygonLayer({}) const layer = new PolygonLayer({})
@ -48,13 +48,12 @@ export default class Polygon3D extends React.Component {
'#DEB8D4', '#DEB8D4',
'#F5D4E6', '#F5D4E6',
'#FAE4F1', '#FAE4F1',
'#FFF3FC' '#FFF3FC',
]) ])
.style({ .style({
opacity: 1.0 opacity: 1.0,
}); });
scene.addLayer(layer); scene.addLayer(layer);
} }
public render() { public render() {

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

@ -41,7 +41,7 @@ export default class Point3D extends React.Component {
'#D42F31', '#D42F31',
'#730D1C', '#730D1C',
]) ])
.shape('subregion',[ .shape('subregion', [
'circle', 'circle',
'triangle', 'triangle',
'square', 'square',

30
stories/Layers/components/column.tsx
View File

@ -17,42 +17,42 @@ export default class Column extends React.Component {
map: new GaodeMap({ map: new GaodeMap({
pitch: 66.02383, pitch: 66.02383,
style: 'dark', style: 'dark',
center: [ 121.400257, 31.25287 ], center: [121.400257, 31.25287],
zoom: 14.55, zoom: 14.55,
rotation: 134.9507 rotation: 134.9507,
}) }),
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
) )
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'json', type: 'json',
x: 'longitude', x: 'longitude',
y: 'latitude' y: 'latitude',
} },
}) })
.shape('name', [ .shape('name', [
'cylinder', 'cylinder',
'triangleColumn', 'triangleColumn',
'hexagonColumn', 'hexagonColumn',
'squareColumn' 'squareColumn',
]) ])
.size('unit_price', h => { .size('unit_price', (h) => {
return [ 6, 6, h / 500]; return [6, 6, h / 500];
}) })
.color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ]) .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
.style({ .style({
opacity: 1.0 opacity: 1.0,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
}) });
} }
public render() { public render() {
return ( return (

10
stories/Source/Map.stories.tsx Normal file
View File

@ -0,0 +1,10 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import MultiPolygon from './components/multiPolygon';
import MultiLine from './components/multiLine';
// @ts-ignore
import notes from './Map.md';
// @ts-ignore
storiesOf('数据', module)
.add('multiPolygon', () => <MultiPolygon />, {})
.add('MultiLine', () => <MultiLine />, {});

74
stories/Source/components/multiLine.tsx Normal file
View File

@ -0,0 +1,74 @@
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
function convertRGB2Hex(rgb: number[]) {
return (
'#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
);
}
export default class MultiLine extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
style: 'dark',
center: [101.775374, 3],
zoom: 14.1,
}),
});
const layer = new LineLayer({})
.source({
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'MultiLineString',
coordinates: [
[
[100, 0],
[101, 1],
],
[
[102, 2],
[103, 3],
],
],
},
},
],
})
.shape('line')
.color('red')
.style({
opacity: 1.0,
});
scene.addLayer(layer);
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

58
stories/Source/components/multiPolygon.tsx Normal file
View File

@ -0,0 +1,58 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
function convertRGB2Hex(rgb: number[]) {
return (
'#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
);
}
export default class MultiPolygon extends React.Component {
private gui: dat.GUI;
private $stats: Node;
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const response = await fetch(
'https://gw.alipayobjects.com/os/basement_prod/f79485d8-d86f-4bb3-856d-537b586be06e.json',
);
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
style: 'dark',
center: [121.775374, 31.31067],
zoom: 14.1,
}),
});
const layer = new PolygonLayer({})
.source(await response.json())
.shape('fill')
.color('red')
.style({
opacity: 1.0,
});
scene.addLayer(layer);
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}