docs: prettier docs js

This commit is contained in:
thinkinggis 2019-12-02 17:27:39 +08:00
commit 9f2827f3c5
52 changed files with 4099 additions and 1209 deletions

View File

@ -42,10 +42,7 @@ module.exports = api => {
[
'@babel/env',
{
targets: {
browsers: 'Last 2 Chrome versions, Firefox ESR',
node: 'current'
},
useBuiltIns: isCDNBundle ? 'usage' : false,
// set `modules: false` when building CDN bundle, let rollup do commonjs works
// @see https://github.com/rollup/rollup-plugin-babel#modules
modules: (isCDNBundle || isESModule) ? false : 'auto'
@ -80,7 +77,6 @@ module.exports = api => {
// let rollup do commonjs works
// @see https://github.com/rollup/rollup-plugin-babel#modules
(isCDNBundle || isESModule) ? {} : '@babel/plugin-transform-modules-commonjs',
// '@babel/plugin-transform-modules-commonjs',
// 开发模式下以原始文本引入,便于调试
isCDNBundle ? {} : [
// import glsl as raw text

View File

@ -7,35 +7,35 @@ const scene = new Scene({
pitch: 0,
style: 'dark',
center: [0, 23.107329],
zoom: 0
})
zoom: 0,
}),
});
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(data => {
.then((res) => res.json())
.then((data) => {
function getAirportCoord(idx) {
return [data.airports[idx][3], data.airports[idx][4]];
}
const routes = data.routes.map(function(airline) {
return {
coord: [ getAirportCoord(airline[1]), getAirportCoord(airline[2]) ]
coord: [getAirportCoord(airline[1]), getAirportCoord(airline[2])],
};
});
const layer = new LineLayer({})
.source(routes, {
parser: {
type: 'json',
coordinates: 'coord'
}
coordinates: 'coord',
},
})
.size(0.6)
.shape('arc')
.color('rgb(5, 5, 50)')
.style({
opacity: 0.05
opacity: 0.05,
});
scene.addLayer(layer);
});

View File

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

View File

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

View File

@ -5,24 +5,21 @@ order: 3
Marker 地图标注 目前只支持 2D dom 标注
## 构造函数
Marker
`const Marker = new L7.Marker(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
- anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
- offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
### 添加到 Scene
```javascript
scene.addMarker(marker);
```
@ -30,35 +27,42 @@ scene.addMarker(marker);
## 方法
#### setLnglat
设置 marker 经纬度位置
#### addTo
将 marker 添加到地图 Scene
#### remove
移除 marker
#### getElement
获取 marker dom Element
#### getLngLat
获取 marker 经纬度坐标
#### togglePopup
开启或者关闭 marker 弹出框
#### setPopup
为 marker 设置 popup
#### getPopup
获取marker弹出框
获取 marker 弹出框
## 示例代码
#### 默认 Marker
**<br />` const marker = new L7.Marker({color:'blue'})`
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
#### 自定义 Marker
@ -68,24 +72,22 @@ var el = document.createElement('label');
el.textContent = data[i].v;
el.style.background = getColor(data[i].v);
new L7.Marker({
element: el
element: el,
})
.setLnglat([data[i].x * 1, data[i].y])
.addTo(scene);
```
#### 设置 popup
```javascript
var popup = new L7.Popup({
anchor: 'left'
anchor: 'left',
}).setText(item.name);
new L7.Marker({
element: el
}).setLnglat(item.coordinates)
.setPopup(popup)
element: el,
})
.setLnglat(item.coordinates)
.setPopup(popup);
```

View File

@ -5,51 +5,56 @@ order: 3
Marker 地图标注 目前只支持 2D dom 标注
## 构造函数
Marker<br />`const Marker = new L7.Marker(option)`
Marker<br />`const Marker = new L7.Marker(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
- anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
- offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
## 方法
#### setLnglat
设置 marker 经纬度位置
#### addTo
将 marker 添加到地图 Scene
#### remove
移除 marker
#### getElement
获取 marker dom Element
#### getLngLat
获取 marker 经纬度坐标
#### togglePopup
开启或者关闭 marker 弹出框
#### setPopup
为 marker 设置 popup
#### getPopup
获取marker弹出框
获取 marker 弹出框
## 示例代码
#### 默认 Marker
**<br />` const marker = new L7.Marker({color:'blue'})`
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
#### 自定义 Marker
@ -59,25 +64,23 @@ var el = document.createElement('label');
el.textContent = data[i].v;
el.style.background = getColor(data[i].v);
new L7.Marker({
element: el
element: el,
})
.setLnglat([data[i].x * 1, data[i].y])
.addTo(scene);
```
#### 设置 popup
```javascript
var popup = new L7.Popup({
anchor: 'left'
anchor: 'left',
}).setText(item.name);
new L7.Marker({
element: el
}).setLnglat(item.coordinates)
element: el,
})
.setLnglat(item.coordinates)
.setPopup(popup)
.addTo(scene);
```

View File

@ -2,19 +2,19 @@
title: Popup
order: 4
---
# popup
地图标注信息窗口,用于展示地图要素的属性信息
## 构造函数
Popup
```javascript
const popup = new L7.Popup(option)
const popup = new L7.Popup(option);
```
#### option
- closeButton
@ -22,18 +22,18 @@ const popup = new L7.Popup(option)
- maxWidth
- anchor
## 方法
#### setLnglat
设置 popup 的经纬度位置<br />**参数**lnglat 经纬度数组 [112,32]
```javascript
popup.setLnglat([112, 32]);
```
#### addTo
**参数**scene 地图 scene 实例
将 popup 添加到地图 scene 显示
@ -42,44 +42,48 @@ popup.setLnglat([112, 32]);
popup.addTo(scene);
```
#### setHtml
**参数**html 字符串
设置 popup html 内容
```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);
```
#### setText
设置 popup 显示文本内容
```javascript
popup.setText('hello world');
```
#### remove
移除 popup
```javascript
popup.remove()
popup.remove();
```
## 事件
#### close
```javascript
popup.on('close',()=>{})
popup.on('close', () => {});
```
## 示例代码
#### 添加 popup

View File

@ -2,19 +2,19 @@
title: popup
order: 0
---
# popup
地图标注信息窗口,用于展示地图要素的属性信息
## 构造函数
Popup
```javascript
const popup = new L7.Popup(option)
const popup = new L7.Popup(option);
```
#### option
- closeButton
@ -22,18 +22,18 @@ const popup = new L7.Popup(option)
- maxWidth
- anchor
## 方法
#### setLnglat
设置 popup 的经纬度位置<br />**参数**lnglat 经纬度数组 [112,32]
```javascript
popup.setLnglat([112, 32]);
```
#### addTo
**参数**scene 地图 scene 实例
将 popup 添加到地图 scene 显示
@ -42,44 +42,48 @@ popup.setLnglat([112, 32]);
popup.addTo(scene);
```
#### setHtml
**参数**html 字符串
设置 popup html 内容
```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);
```
#### setText
设置 popup 显示文本内容
```javascript
popup.setText('hello world');
```
#### remove
移除 popup
```javascript
popup.remove()
popup.remove();
```
## 事件
#### close
```javascript
popup.on('close',()=>{})
popup.on('close', () => {});
```
## 示例代码
#### 添加 popup

View File

@ -5,10 +5,10 @@ order: 5
# heatmapLayer
### 简介
热力图图层,包含三种类型的,
- 方格热力图
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
@ -19,8 +19,6 @@ order: 5
- 经典热力图
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理,使用之前需要在 source 方法设置数据聚合方法
### source
@ -58,12 +56,11 @@ layer.source(data, {
不同类型热力图 shape 支持
| | 2D | 3d |
| --- | --- | --- |
| ------------ | ------------------------------ | ------------------------------------------------- |
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
| 普通热力图 | heatmap | heatmap |
热力图布局下只 shape 方法只支持常量的可视化。
```javascript
@ -73,6 +70,7 @@ HeatmapLayer.shape('hexagon');
```
### size
当前版本 shape 为 gridhexagon 不需要设置 size 映射
default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
@ -83,17 +81,15 @@ default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript
HeatmapLayer.size ('field', [0, 1])
HeatmapLayer.size('field', [0, 1]);
```
### color
default heatMap 类型不需设置 color 映射
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
### style
grid hexagon 可以通过 style 设置透明度
@ -111,13 +107,19 @@ default热力图需要通过style配置参数热力图参数
intensity: 3,
radius: 20,
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)' ],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
}
})
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)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```
### 完整代码示例
#### 普通热力图
@ -126,7 +128,7 @@ default热力图需要通过style配置参数热力图参数
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
HeatmapLayer({
zIndex: 2
zIndex: 2,
})
.source(data)
.size('mag', [0, 1]) // weight映射通道
@ -134,53 +136,65 @@ default热力图需要通过style配置参数热力图参数
intensity: 3,
radius: 20,
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)' ],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
}
})
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)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```
#### 网格热力图
```javascript
var layer = scene.HeatmapLayer({
zIndex: 2
var layer = scene
.HeatmapLayer({
zIndex: 2,
})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
y: 'lat',
},
transforms: [
{
type: 'grid',
size: 15000,
field: 'v',
method:'sum'
}
]
method: 'sum',
},
],
})
.shape('grid')
.style({
coverage: 0.8
coverage: 0.8,
})
.color('count',
["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
.color('count', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
```
#### 六边形热力图
```javascript
var layer = scene.HeatmapLayer({
zIndex: 2
}).
souce(data,{
var layer = scene
.HeatmapLayer({
zIndex: 2,
})
.souce(data, {
parser: {
type: 'csv',
x: lng,
@ -192,14 +206,14 @@ var layer = scene.HeatmapLayer({
size: 1500,
field: 'count',
operation: 'sum',
}
]
},
],
})
.shape('hexgon')
.size(1000)
.color('sum')
.style({
coverage:0.8
})
render()
coverage: 0.8,
});
render();
```

View File

@ -2,12 +2,13 @@
title: HeatmapLayer
order: 5
---
# heatmapLayer
# heatmapLayer
### 简介
热力图图层,包含三种类型的,
- 方格热力图
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
@ -18,8 +19,6 @@ order: 5
- 经典热力图
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理,使用之前需要在 source 方法设置数据聚合方法
### source
@ -57,12 +56,11 @@ layer.source(data, {
不同类型热力图 shape 支持
| | 2D | 3d |
| --- | --- | --- |
| ------------ | ------------------------------ | ------------------------------------------------- |
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
| 普通热力图 | heatmap | heatmap |
热力图布局下只 shape 方法只支持常量的可视化。
```javascript
@ -72,6 +70,7 @@ HeatmapLayer.shape('hexagon');
```
### size
当前版本 shape 为 gridhexagon 不需要设置 size 映射
default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
@ -82,17 +81,15 @@ default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript
HeatmapLayer.size ('field', [0, 1])
HeatmapLayer.size('field', [0, 1]);
```
### color
default heatMap 类型不需设置 color 映射
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
### style
grid hexagon 可以通过 style 设置透明度
@ -110,13 +107,19 @@ default热力图需要通过style配置参数热力图参数
intensity: 3,
radius: 20,
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)' ],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
}
})
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)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```
### 完整代码示例
#### 普通热力图
@ -125,7 +128,7 @@ default热力图需要通过style配置参数热力图参数
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
HeatmapLayer({
zIndex: 2
zIndex: 2,
})
.source(data)
.size('mag', [0, 1]) // weight映射通道
@ -133,53 +136,65 @@ default热力图需要通过style配置参数热力图参数
intensity: 3,
radius: 20,
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)' ],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
}
})
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)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```
#### 网格热力图
```javascript
var layer = scene.HeatmapLayer({
zIndex: 2
var layer = scene
.HeatmapLayer({
zIndex: 2,
})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
y: 'lat',
},
transforms: [
{
type: 'grid',
size: 15000,
field: 'v',
method:'sum'
}
]
method: 'sum',
},
],
})
.shape('grid')
.style({
coverage: 0.8
coverage: 0.8,
})
.color('count',
["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
.color('count', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
```
#### 六边形热力图
```javascript
var layer = scene.HeatmapLayer({
zIndex: 2
}).
souce(data,{
var layer = scene
.HeatmapLayer({
zIndex: 2,
})
.souce(data, {
parser: {
type: 'csv',
x: lng,
@ -198,7 +213,7 @@ var layer = scene.HeatmapLayer({
.size(1000)
.color('sum')
.style({
coverage:0.8
})
render()
coverage: 0.8,
});
render();
```

View File

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

View File

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

View File

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

View File

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

View File

@ -2,6 +2,7 @@
title: LineLayer
order: 2
---
## 线图层
### shape
@ -29,6 +30,7 @@ order: 2
```
如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点,第二对为终点
```
{
"type": "FeatureCollection",
@ -63,10 +65,6 @@ order: 2
- size 类型为 [number , number] 分别表示宽度和高度
```javascript
lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1, 2]); // 宽度为1高度2
```

View File

@ -2,6 +2,7 @@
title: LineLayer
order: 2
---
## 线图层
### shape
@ -29,6 +30,7 @@ order: 2
```
如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点,第二对为终点
```
{
"type": "FeatureCollection",
@ -63,10 +65,6 @@ order: 2
- size 类型为 [number , number] 分别表示宽度和高度
```javascript
lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1, 2]); // 宽度为1高度2
```

View File

@ -2,10 +2,11 @@
title: PointLayer
order: 1
---
# PointLayer
## 简介
点数据的展示,数据源支持 JSON,GeoJSON,CSV 三种数据格式。
shape 支持
@ -26,19 +27,17 @@ shape 支持
**图片标注**
通过 ```Scene.addImage()``` 可以添加图片资源,
通过 `Scene.addImage()` 可以添加图片资源,
### 代码示例
#### 基本图形显示示例
```javascript
import { PointLayer } from "@antv/l7"
import { PointLayer } from '@antv/l7';
const layer = PointLayer({
zIndex: 2
zIndex: 2,
})
.source(data.list, {
type: 'array',
@ -47,31 +46,35 @@ const layer = PointLayer({
})
.shape('cylinder')
.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
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
zIndex: 4,
})
.source(city)
.size(20.0)
.shape('local')
.color('#0D408C')
.color('#0D408C');
```

View File

@ -5,8 +5,8 @@ order: 1
# PointLayer
## 简介
点数据的展示,数据源支持 JSON,GeoJSON,CSV 三种数据格式。
shape 支持
@ -27,19 +27,17 @@ shape 支持
**图片标注**
通过 ```Scene.addImage()``` 可以添加图片资源,
通过 `Scene.addImage()` 可以添加图片资源,
### 代码示例
#### 基本图形显示示例
```javascript
import { PointLayer } from "@antv/l7"
import { PointLayer } from '@antv/l7';
const layer = PointLayer({
zIndex: 2
zIndex: 2,
})
.source(data.list, {
type: 'array',
@ -48,31 +46,35 @@ const layer = PointLayer({
})
.shape('cylinder')
.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
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
zIndex: 4,
})
.source(city)
.size(20.0)
.shape('local')
.color('#0D408C')
.color('#0D408C');
```

View File

@ -2,6 +2,7 @@
title: PolygonLayer
order: 3
---
# 填充图
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
@ -18,9 +19,6 @@ order: 3
PolyonLayer.shape('fill');
PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude'); // size 表示高度
```
其他方法,事件,同基类 [Layer](/zh/docs/api/layer/layer)

View File

@ -2,6 +2,7 @@
title: PolygonLayer
order: 3
---
# 填充图
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
@ -18,9 +19,6 @@ order: 3
PolyonLayer.shape('fill');
PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude'); // size 表示高度
```
其他方法,事件,同基类 [Layer](/zh/docs/api/layer/layer)

View File

@ -3,13 +3,185 @@ title: geojson
order: 1
---
# geojson 数据介绍
## 简介
GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。
[The GeoJSON Format](https://tools.ietf.org/html/draft-butler-geojson-06)
L7 数据 source 支持   传入 Geometry 集合 FeatureCollection
### 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 详细文档]()
@ -19,7 +191,6 @@ GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象
[turfjs](http://turfjs.org/):   地理数据计算,处理,统计,分析的 Javascript 库
### 在线工具:
[http://geojson.io/](http://geojson.io/)     可以在线查看,绘制,修改 GeoJSON 数据

View File

@ -3,13 +3,189 @@ title: geojson
order: 1
---
# geojson 数据介绍
## 简介
GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。
[The GeoJSON Format](https://tools.ietf.org/html/draft-butler-geojson-06)
L7 数据 source 支持   传入 Geometry 集合 FeatureCollection
### 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 详细文档]()
@ -19,7 +195,6 @@ GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象
[turfjs](http://turfjs.org/):   地理数据计算,处理,统计,分析的 Javascript 库
### 在线工具:
[http://geojson.io/](http://geojson.io/)     可以在线查看,绘制,修改 GeoJSON 数据

View File

@ -3,10 +3,6 @@ title: Source
order: 0
---
# Source
### 概述
source 地理数据处理模块主要包含数据解析parser),和数据处理(transform);
@ -19,7 +15,6 @@ source 地理数据处理模块主要包含数据解析parser),和数据
数据转换,数据统计,网格布局,数据聚合等数据操作。
## API
### parser
@ -30,8 +25,6 @@ source 地理数据处理模块主要包含数据解析parser),和数据
- 栅格数据 支持 imageRaster
#### geojson
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式,可以
@ -39,10 +32,9 @@ source 地理数据处理模块主要包含数据解析parser),和数据
不需要设置 parser 参数
```javascript
layer.source(data)
layer.source(data);
```
#### json
json 不是标准的地理数据结构,因此需要设置对应的经纬度字段
@ -54,27 +46,26 @@ x: 经度字段
y: 纬度字段
```javascript
const data = [{
const data = [
{
lng: 112.345,
lat: 30.455,
value: 10
},{
 lng:114.345,
lat:31.455,
value: 10
 }
]
layer.source(
data,
value: 10,
},
{
lng: 114.345,
lat: 31.455,
value: 10,
},
];
layer.source(data, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
}
})
},
});
```
**线段数据**
@ -125,92 +116,73 @@ layer.source(
**注意面数据 coord  是三层数据结构**
```javascript
[ {
type: "Polygon",
'geometryCoord': [
[
{
type: 'Polygon',
geometryCoord: [
[
115.1806640625,
30.637912028341123
[115.1806640625, 30.637912028341123],
[114.9609375, 29.152161283318915],
[117.79541015625001, 27.430289738862594],
[118.740234375, 29.420460341013133],
[117.46582031249999, 31.50362930577303],
[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'
}
})
coordinates: 'geometryCoord',
},
});
```
#### csv
点,线数据配置项同 json 数据类型
```javascript
layer.source(
data,
{
layer.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
    x1:'lng1',
x1: 'lng1',
y1: 'lat2',
}
})
},
});
```
**栅格数据类型****
**栅格数据类型\*\***
#### image
 根据图片的经纬度范围,将图片添加到地图上。 配置项
-  type: image
-  extent: 图像的经纬度范围 []
根据图片的经纬度范围,将图片添加到地图上。  配置项
- type: image
- extent: 图像的经纬度范围 []
```javascript
layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
layer.source(
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{
parser: {
type: 'image',
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
}
})
extent: [121.168, 30.2828, 121.384, 30.4219],
},
},
);
```
 
#### raster
栅格数据类型,主要表示遥感数据类型 data 栅格数据的二维矩阵数据 parser 配置项
- type  raster
- width  数据宽度二维矩阵 columns 
- width  数据宽度二维矩阵 columns
- height 数据高度
- min 数据最大值
- max 数据最小值
@ -224,20 +196,20 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
height: m,
min: 0,
max: 8000,
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
}
})
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
},
});
```
### transforms
目前支持三种数据处理方法 mapgridhexagon transform 配置项
- type 数据处理类型
-  tansform cfg  数据处理配置项
- tansform cfg  数据处理配置项
#### map
数据处理,支持自定义 callback 函数
- callback:function 回调函数
@ -259,15 +231,14 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
},
```
#### grid
生成方格网布局,根据数据字段统计,主要在网格热力图中使用
-  type: 'grid',
-  size: 网格半径
-  field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度
- type: 'grid',
- size: 网格半径
- field: 数据统计字段
- method:聚合方法   count,max,min,sum,mean5 个统计维度
```javascript
layer.source(data, {
@ -282,17 +253,15 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
}
```
#### hexagon
生成六边形网格布局,根据数据字段统计
-  type: 'hexagon',
-  size: 网格半径
-  field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度
- type: 'hexagon',
- size: 网格半径
- field: 数据统计字段
- method:聚合方法   count,max,min,sum,mean5 个统计维度
```
```

View File

@ -3,10 +3,6 @@ title: Source
order: 0
---
# Source
### 概述
source 地理数据处理模块主要包含数据解析parser),和数据处理(transform);
@ -19,7 +15,6 @@ source 地理数据处理模块主要包含数据解析parser),和数据
数据转换,数据统计,网格布局,数据聚合等数据操作。
## API
### parser
@ -30,8 +25,6 @@ source 地理数据处理模块主要包含数据解析parser),和数据
- 栅格数据 支持 imageRaster
#### geojson
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式,可以
@ -42,7 +35,6 @@ source 地理数据处理模块主要包含数据解析parser),和数据
layer.source(data);
```
#### json
json 不是标准的地理数据结构,因此需要设置对应的经纬度字段
@ -54,27 +46,26 @@ x: 经度字段
y: 纬度字段
```javascript
const data = [{
const data = [
{
lng: 112.345,
lat: 30.455,
value: 10
},{
 lng:114.345,
lat:31.455,
value: 10
 }
]
layer.source(
data,
value: 10,
},
{
lng: 114.345,
lat: 31.455,
value: 10,
},
];
layer.source(data, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
}
})
},
});
```
**线段数据**
@ -126,91 +117,73 @@ layer.source(
**注意面数据 coord  是三层数据结构**
```javascript
[ {
type: "Polygon",
'geometryCoord': [
[
{
type: 'Polygon',
geometryCoord: [
[
115.1806640625,
30.637912028341123
[115.1806640625, 30.637912028341123],
[114.9609375, 29.152161283318915],
[117.79541015625001, 27.430289738862594],
[118.740234375, 29.420460341013133],
[117.46582031249999, 31.50362930577303],
[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'
}
coordinates: 'geometryCoord',
},
});
```
#### csv
点,线数据配置项同 json 数据类型
```javascript
layer.source(
data,
{
layer.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
    x1:'lng1',
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 ]
}
},
});
```
 
**栅格数据类型\*\***
#### image
根据图片的经纬度范围,将图片添加到地图上。  配置项
- type: image
- extent: 图像的经纬度范围 []
```javascript
layer.source(
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{
parser: {
type: 'image',
extent: [121.168, 30.2828, 121.384, 30.4219],
},
},
);
```
#### raster
栅格数据类型,主要表示遥感数据类型 data 栅格数据的二维矩阵数据 parser 配置项
- type  raster
- width  数据宽度二维矩阵 columns 
- width  数据宽度二维矩阵 columns
- height 数据高度
- min 数据最大值
- max 数据最小值
@ -224,21 +197,20 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
height: m,
min: 0,
max: 8000,
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
}
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
},
});
```
### transforms
目前支持三种数据处理方法 mapgridhexagon transform 配置项
- type 数据处理类型
-  tansform cfg  数据处理配置项
- tansform cfg  数据处理配置项
#### map
数据处理,支持自定义 callback 函数
- callback:function 回调函数
@ -255,21 +227,20 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
item.v = item.v * 1;
item.coordinates = [x * 1, y * 1];
return item;
}
}
]
},
},
],
});
```
#### grid
生成方格网布局,根据数据字段统计,主要在网格热力图中使用
-  type: 'grid',
-  size: 网格半径
-  field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度
- type: 'grid',
- size: 网格半径
- field: 数据统计字段
- method:聚合方法   count,max,min,sum,mean5 个统计维度
```javascript
layer.source(data, {
@ -278,22 +249,21 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
type: 'grid',
size: 15000,
field: 'v',
method:'sum'
}
method: 'sum',
},
],
})
});
```
#### hexagon
生成六边形网格布局,根据数据字段统计
-  type: 'hexagon',
-  size: 网格半径
-  field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度
- type: 'hexagon',
- size: 网格半径
- field: 数据统计字段
- method:聚合方法   count,max,min,sum,mean5 个统计维度
```
```

View File

@ -40,6 +40,7 @@ order: 0
```javascript
const scene = new L7.Scene({
id: 'map',
map: new L7.Mapbox({

View File

@ -39,8 +39,6 @@ order: 0
### 初始化 L7 Scene
``` javascript
```javascript
const scene = new L7.Scene({
id: 'map',

View File

@ -14,7 +14,6 @@ const scene = new Scene({
addChart();
scene.render();
function addChart() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@ -69,8 +68,7 @@ function addChart() {
chart.render();
const marker = new Marker({
element: el
})
.setLnglat({
}).setLnglat({
lng: item.coordinates[0],
lat: item.coordinates[1]
});

View File

@ -90,8 +90,7 @@ function addChart() {
chart.render();
const marker = new Marker({
element: el
})
.setLnglat({
}).setLnglat({
lng: item.coordinates[0],
lat: item.coordinates[1]
});

View File

@ -67,7 +67,9 @@ Promise.all([
const el = document.createElement('div');
const coord = point.geometry.coordinates;
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 data = [
{
@ -99,8 +101,7 @@ Promise.all([
.color('type', [ '#5CCEA1', '#5B8FF9' ])
.opacity(1);
chart.render();
const marker = new Marker({ element: el })
.setLnglat({
const marker = new Marker({ element: el }).setLnglat({
lng: coord[0],
lat: coord[1]
});

View File

@ -13,7 +13,6 @@ const scene = new Scene({
addMarkers();
scene.render();
function addMarkers() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'
@ -21,7 +20,9 @@ function addMarkers() {
.then(res => res.json())
.then(nodes => {
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');
el.className = 'lableclass';
el.textContent = nodes[i].v + '℃';
@ -29,8 +30,7 @@ function addMarkers() {
el.style.borderColor = getColor(nodes[i].v);
const marker = new Marker({
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);
}
});

View File

@ -22,4 +22,3 @@ layer.source(
}
);
scene.addLayer(layer);

View File

@ -9,19 +9,20 @@ const scene = new Scene({
zoom: 15.056
})
});
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
)
.then(res => res.json())
.then(data => {
const pointLayer =
new PointLayer({
})
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
}).shape('circle')
})
.shape('circle')
.size('unit_price', [ 5, 25 ])
.color('name', [ '#49B5AD', '#5B8FF9' ])
.style({
@ -38,10 +39,8 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
});
scene.addControl(layersControl);
});
const zoomControl = new Zoom({
position: 'topright'
});
@ -50,4 +49,3 @@ const scaleControl = new Scale({
});
scene.addControl(zoomControl);
scene.addControl(scaleControl);

View File

@ -14,4 +14,3 @@ const zoomControl = new Zoom();
const scaleControl = new Scale();
scene.addControl(zoomControl);
scene.addControl(scaleControl);

View File

@ -14,4 +14,3 @@ const zoomControl = new Zoom();
const scaleControl = new Scale();
scene.addControl(zoomControl);
scene.addControl(scaleControl);

View File

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

View File

@ -50,6 +50,7 @@
"clean-webpack-plugin": "^0.1.19",
"commitizen": "^4.0.3",
"copy-webpack-plugin": "^4.5.2",
"core-js": "3",
"coveralls": "^3.0.7",
"cross-env": "^6.0.3",
"css-loader": "^3.2.0",
@ -122,8 +123,8 @@
"site:clean": "gatsby clean",
"site:deploy": "yarn run site:build && gh-pages -d public",
"site:publish": "gh-pages -d public",
"lint-fix:examples": "prettier --write examples/**/**/*.js",
"lint:site": "eslint examples/**/**/*.js --fix",
"lint:fix": "prettier --write docs/api/**/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx",
"lint:examples": "eslint examples/**/**/*.js --fix",
"prebuild": "run-p tsc lint",
"build": "yarn clean && lerna run build",
"postbuild": "yarn build:declarations",
@ -159,6 +160,10 @@
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"browserslist": [
"last 2 version",
"Firefox ESR"
],
"config": {
"commitizen": {
"path": "cz-conventional-changelog"

View File

@ -4,4 +4,5 @@ export const MapTheme: {
dark: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true',
light: 'amap://styles/1fd9f8ef9751298f11f5c56968312c70?isPublic=true',
normal: 'amap://styles/12db649ba3493333b098127ed892c0cb?isPublic=true',
blank: 'amap://styles/07c17002b38775b32a7a76c66cf90e99?isPublic=true',
};

View File

@ -4,4 +4,17 @@ export const MapTheme: {
light: 'mapbox://styles/zcxduo/ck2ypyb1r3q9o1co1766dex29',
dark: 'mapbox://styles/zcxduo/ck241p6413s0b1cpayzldv7x7',
normal: 'mapbox://styles/mapbox/streets-v11',
blank: {
version: 8,
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': 'white',
},
},
],
},
};

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;

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

@ -25,7 +25,7 @@ export default class Polygon3D extends React.Component {
public async componentDidMount() {
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({
id: 'map',
@ -33,8 +33,8 @@ export default class Polygon3D extends React.Component {
pitch: 0,
style: 'dark',
center: [114.050008, 22.529272],
zoom: 14.1
})
zoom: 14.1,
}),
});
const layer = new PolygonLayer({})
@ -48,13 +48,12 @@ export default class Polygon3D extends React.Component {
'#DEB8D4',
'#F5D4E6',
'#FAE4F1',
'#FFF3FC'
'#FFF3FC',
])
.style({
opacity: 1.0
opacity: 1.0,
});
scene.addLayer(layer);
}
public render() {

View File

@ -19,39 +19,39 @@ export default class Column extends React.Component {
style: 'dark',
center: [121.400257, 31.25287],
zoom: 14.55,
rotation: 134.9507
})
rotation: 134.9507,
}),
});
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(data => {
.then((res) => res.json())
.then((data) => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
y: 'latitude',
},
})
.shape('name', [
'cylinder',
'triangleColumn',
'hexagonColumn',
'squareColumn'
'squareColumn',
])
.size('unit_price', h => {
.size('unit_price', (h) => {
return [6, 6, h / 500];
})
.color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
.style({
opacity: 1.0
opacity: 1.0,
});
scene.addLayer(pointLayer);
})
});
}
public render() {

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 />, {});

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,
}}
/>
);
}
}

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,
}}
/>
);
}
}

View File

@ -7496,6 +7496,11 @@ core-js-pure@^3.0.1:
resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.4.2.tgz#ffd4ea4dc1f8517f75d4a929986a214629477417"
integrity sha512-6+iSif/3zO0bSkhjVY9o4MTdv36X+rO6rqs/UxQ+uxBevmC4fsfwyQwFVdZXXONmLlKVLiXCG8PDvQ2Gn/iteA==
core-js@3:
version "3.4.5"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.5.tgz#3dda65611d95699b5eb7742ea451ea052d37aa65"
integrity sha512-OuvejWH6vIaUo59Ndlh89purNm4DCIy/v3QoYlcGnn+PkYI8BhNHfCuAESrWX+ZPfq9JccVJ+XXgOMy77PJexg==
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"