mirror of https://gitee.com/antv-l7/antv-l7
docs: prettier docs js
This commit is contained in:
commit
9f2827f3c5
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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();
|
||||
```
|
||||
|
||||
|
|
|
@ -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);
|
||||
```
|
||||
|
||||
|
||||
|
|
|
@ -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);
|
||||
```
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 为 grid,hexagon 不需要设置 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();
|
||||
```
|
|
@ -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 为 grid,hexagon 不需要设置 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();
|
||||
```
|
|
@ -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],
|
||||
},
|
||||
},
|
||||
);
|
||||
```
|
||||
|
|
|
@ -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],
|
||||
},
|
||||
},
|
||||
);
|
||||
```
|
||||
|
|
|
@ -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 [transform,transform ] 数据处理转换 可设置多个
|
||||
|
||||
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();
|
||||
```
|
||||
|
|
|
@ -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 [transform,transform ] 数据处理转换 可设置多个
|
||||
|
||||
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();
|
||||
```
|
||||
|
|
|
@ -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
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
|
|
@ -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');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
||||
|
|
|
@ -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 数据
|
||||
|
|
|
@ -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 数据
|
||||
|
|
|
@ -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),和数据
|
|||
|
||||
- 栅格数据 支持 image,Raster
|
||||
|
||||
|
||||
|
||||
#### 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
|
||||
|
||||
目前支持三种数据处理方法 map,grid,hexagon 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 个统计维度
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
|
|
@ -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),和数据
|
|||
|
||||
- 栅格数据 支持 image,Raster
|
||||
|
||||
|
||||
|
||||
#### 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
|
||||
|
||||
目前支持三种数据处理方法 map,grid,hexagon 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 个统计维度
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
|
|
@ -40,6 +40,7 @@ order: 0
|
|||
|
||||
|
||||
```javascript
|
||||
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.Mapbox({
|
||||
|
|
|
@ -39,8 +39,6 @@ order: 0
|
|||
### 初始化 L7 Scene
|
||||
|
||||
|
||||
``` javascript
|
||||
|
||||
```javascript
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
|
|
|
@ -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]
|
||||
});
|
||||
|
|
|
@ -90,8 +90,7 @@ function addChart() {
|
|||
chart.render();
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
}).setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
});
|
||||
|
|
|
@ -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]
|
||||
});
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -22,4 +22,3 @@ layer.source(
|
|||
}
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -14,4 +14,3 @@ const zoomControl = new Zoom();
|
|||
const scaleControl = new Scale();
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
||||
|
|
|
@ -14,4 +14,3 @@ const zoomControl = new Zoom();
|
|||
const scaleControl = new Scale();
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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',
|
||||
};
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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 />, {});
|
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue