mirror of https://gitee.com/antv-l7/antv-l7
docs: prettier docs js
This commit is contained in:
thinkinggis
commit
9f2827f3c5
|
|
@ -62,7 +62,7 @@ new Scene({
|
|||
```
|
||||
### Add Layer
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
|
||||
import { PointLayer } from '@antv/l7';
|
||||
const pointLayer = new PointLayer()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -6,36 +6,36 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 0, 23.107329 ],
|
||||
zoom: 0
|
||||
})
|
||||
center: [0, 23.107329],
|
||||
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] ];
|
||||
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,137 +2,138 @@
|
|||
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配置项设置控件添加状态**
|
||||
zoom 地图放大缩小 默认添加<br />Scale 地图比例尺 默认添加<br />attribution 地图数据属性 默认添加<br />layer 图层列表
|
||||
|
||||
**scene 配置项设置控件添加状态**
|
||||
|
||||
```javascript
|
||||
scene = new L7.scene({
|
||||
zoomControl: true,
|
||||
scaleControl: true,
|
||||
attributionControl: true
|
||||
})
|
||||
zoomControl: true,
|
||||
scaleControl: true,
|
||||
attributionControl: true,
|
||||
});
|
||||
```
|
||||
|
||||
####
|
||||
####
|
||||
|
||||
#### Zoom
|
||||
|
||||
放大缩小组件 默认 左上角
|
||||
|
||||
```javascript
|
||||
new L7.Control.Zoom({
|
||||
position: 'topleft'
|
||||
}).addTo(scene);
|
||||
new L7.Control.Zoom({
|
||||
position: 'topleft',
|
||||
}).addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
#### Scale
|
||||
|
||||
比例尺组件默认左下角
|
||||
|
||||
```javascript
|
||||
new L7.Control.Scale({
|
||||
position: 'bottomleft'
|
||||
}).addTo(scene);
|
||||
new L7.Control.Scale({
|
||||
position: 'bottomleft',
|
||||
}).addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
#### attribution
|
||||
|
||||
默认右下角
|
||||
|
||||
```javascript
|
||||
new L7.Control.Attribution({
|
||||
position: 'bottomleft'
|
||||
}).addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
#### layer
|
||||
图层列表目前只支持可视化overlayers 图层控制
|
||||
|
||||
```javascript
|
||||
var overlayers = {
|
||||
"围栏填充": layer,
|
||||
"围栏边界": layer2
|
||||
};
|
||||
new L7.Control.Layers({
|
||||
overlayers: overlayers
|
||||
position: 'bottomleft',
|
||||
}).addTo(scene);
|
||||
```
|
||||
|
||||
#### layer
|
||||
|
||||
图层列表目前只支持可视化 overlayers 图层控制
|
||||
|
||||
```javascript
|
||||
var overlayers = {
|
||||
围栏填充: layer,
|
||||
围栏边界: layer2,
|
||||
};
|
||||
new L7.Control.Layers({
|
||||
overlayers: overlayers,
|
||||
}).addTo(scene);
|
||||
```
|
||||
|
||||
## 方法
|
||||
|
||||
#### onAdd
|
||||
组件添加到地图Scene时调用，自定义组件时需要实现此方法
|
||||
|
||||
组件添加到地图 Scene 时调用，自定义组件时需要实现此方法
|
||||
|
||||
#### addTo
|
||||
添加到地图scene
|
||||
|
||||
添加到地图 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'
|
||||
});
|
||||
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>' : '+');
|
||||
}
|
||||
return el;
|
||||
};
|
||||
legend.addTo(scene);
|
||||
|
||||
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>' : '+');
|
||||
}
|
||||
return el;
|
||||
};
|
||||
legend.addTo(scene);
|
||||
```
|
||||
|
||||
##
|
||||
##
|
||||
|
||||
## FAQ
|
||||
|
||||
|
|
|
|||
|
|
@ -5,28 +5,23 @@ order: 3
|
|||
|
||||
地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
|
||||
|
||||
L7 目前支持 Control
|
||||
|
||||
L7 目前支持Control
|
||||
|
||||
- Zoom 放大缩小
|
||||
- Scale 比例尺
|
||||
- Layers 图层列表
|
||||
|
||||
- Zoom 放大缩小
|
||||
- Scale 比例尺
|
||||
- Layers 图层列表
|
||||
|
||||
## 构造函数
|
||||
|
||||
|
||||
#### option
|
||||
|
||||
position: `string` 控件位置支持是个方位
|
||||
|
||||
position: `string` 控件位置支持是个方位
|
||||
|
||||
- bottomright
|
||||
- topright
|
||||
- bottomleft,
|
||||
- topleft`
|
||||
|
||||
|
||||
|
||||
### 组件介绍
|
||||
|
||||
```
|
||||
|
|
@ -34,67 +29,58 @@ import { Scale Layers, Zoom } from '@antv/l7';
|
|||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### Zoom
|
||||
|
||||
放大缩小组件 默认 左上角
|
||||
|
||||
```javascript
|
||||
const zoomControl = new Zoom({
|
||||
position: 'topleft'
|
||||
})
|
||||
|
||||
scene.addControl(zoomControl);
|
||||
const zoomControl = new Zoom({
|
||||
position: 'topleft',
|
||||
});
|
||||
|
||||
scene.addControl(zoomControl);
|
||||
```
|
||||
|
||||
|
||||
#### Scale
|
||||
|
||||
比例尺组件默认左下角
|
||||
|
||||
```javascript
|
||||
const zoomControl = new Zoom({
|
||||
position: 'topleft'
|
||||
})
|
||||
|
||||
scene.addControl(zoomControl);
|
||||
const zoomControl = new Zoom({
|
||||
position: 'topleft',
|
||||
});
|
||||
|
||||
scene.addControl(zoomControl);
|
||||
```
|
||||
|
||||
|
||||
#### Layers
|
||||
|
||||
图层列表目前支持可视化的图层控制
|
||||
|
||||
```javascript
|
||||
|
||||
const overlayers = {
|
||||
"点图层": layer,
|
||||
|
||||
};
|
||||
const layersControl = new Layers({
|
||||
overlayers
|
||||
});
|
||||
const overlayers = {
|
||||
点图层: layer,
|
||||
};
|
||||
const layersControl = new Layers({
|
||||
overlayers,
|
||||
});
|
||||
scene.addControl(layersControl);
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
#### setPosition
|
||||
|
||||
设置组件位置
|
||||
|
||||
```javascript
|
||||
control.setPosition('bottomright');
|
||||
```
|
||||
|
||||
|
||||
#### remove
|
||||
|
||||
移除地图组件
|
||||
|
||||
```javascript
|
||||
control.remove();
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -3,26 +3,23 @@ title: Marker
|
|||
order: 3
|
||||
---
|
||||
|
||||
Marker 地图标注 目前只支持2D dom标注
|
||||
|
||||
Marker 地图标注 目前只支持 2D dom 标注
|
||||
|
||||
## 构造函数
|
||||
|
||||
Marker
|
||||
|
||||
`const Marker = new L7.Marker(option)`
|
||||
|
||||
|
||||
|
||||
|
||||
#### option
|
||||
|
||||
- color `string ` 设置默认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 的偏移量
|
||||
- color `string` 设置默认 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
|
||||
|
||||
### 添加到Scene
|
||||
```javascript
|
||||
scene.addMarker(marker);
|
||||
```
|
||||
|
|
@ -30,62 +27,67 @@ scene.addMarker(marker);
|
|||
## 方法
|
||||
|
||||
#### setLnglat
|
||||
设置marker经纬度位置
|
||||
|
||||
设置 marker 经纬度位置
|
||||
|
||||
#### addTo
|
||||
将marker添加到地图Scene
|
||||
|
||||
将 marker 添加到地图 Scene
|
||||
|
||||
#### remove
|
||||
移除marker
|
||||
|
||||
移除 marker
|
||||
|
||||
#### getElement
|
||||
获取marker dom Element
|
||||
|
||||
获取 marker dom Element
|
||||
|
||||
#### getLngLat
|
||||
获取marker经纬度坐标
|
||||
|
||||
获取 marker 经纬度坐标
|
||||
|
||||
#### togglePopup
|
||||
开启或者关闭marker弹出框
|
||||
|
||||
开启或者关闭 marker 弹出框
|
||||
|
||||
#### setPopup
|
||||
为marker设置popup
|
||||
|
||||
为 marker 设置 popup
|
||||
|
||||
#### getPopup
|
||||
获取marker弹出框
|
||||
|
||||
获取 marker 弹出框
|
||||
|
||||
## 示例代码
|
||||
|
||||
#### 默认Marker
|
||||
**<br />` const marker = new L7.Marker({color:'blue'})`
|
||||
#### 默认 Marker
|
||||
|
||||
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
|
||||
|
||||
#### 自定义Marker
|
||||
#### 自定义 Marker
|
||||
|
||||
```javascript
|
||||
var el = document.createElement('label');
|
||||
el.className = 'lableclass';
|
||||
el.textContent = data[i].v;
|
||||
el.style.background = getColor(data[i].v);
|
||||
new L7.Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat([data[i].x * 1, data[i].y])
|
||||
.addTo(scene);
|
||||
el.className = 'lableclass';
|
||||
el.textContent = data[i].v;
|
||||
el.style.background = getColor(data[i].v);
|
||||
new L7.Marker({
|
||||
element: el,
|
||||
})
|
||||
.setLnglat([data[i].x * 1, data[i].y])
|
||||
.addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
#### 设置 popup
|
||||
|
||||
```javascript
|
||||
var popup = new L7.Popup({
|
||||
anchor: 'left'
|
||||
}).setText(item.name);
|
||||
var popup = new L7.Popup({
|
||||
anchor: 'left',
|
||||
}).setText(item.name);
|
||||
|
||||
new L7.Marker({
|
||||
element: el
|
||||
}).setLnglat(item.coordinates)
|
||||
.setPopup(popup)
|
||||
element: el,
|
||||
})
|
||||
.setLnglat(item.coordinates)
|
||||
.setPopup(popup);
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,81 +3,84 @@ title: Marker
|
|||
order: 3
|
||||
---
|
||||
|
||||
Marker 地图标注 目前只支持2D dom标注
|
||||
|
||||
Marker 地图标注 目前只支持 2D dom 标注
|
||||
|
||||
## 构造函数
|
||||
Marker<br />`const Marker = new L7.Marker(option)`
|
||||
|
||||
Marker<br />`const Marker = new L7.Marker(option)`
|
||||
|
||||
#### option
|
||||
|
||||
- color `string `  设置默认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 的偏移量
|
||||
|
||||
- color `string`  设置默认 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经纬度位置
|
||||
|
||||
设置 marker 经纬度位置
|
||||
|
||||
#### addTo
|
||||
将marker添加到地图Scene
|
||||
|
||||
将 marker 添加到地图 Scene
|
||||
|
||||
#### remove
|
||||
移除marker
|
||||
|
||||
移除 marker
|
||||
|
||||
#### getElement
|
||||
获取marker dom Element
|
||||
|
||||
获取 marker dom Element
|
||||
|
||||
#### getLngLat
|
||||
获取marker经纬度坐标
|
||||
|
||||
获取 marker 经纬度坐标
|
||||
|
||||
#### togglePopup
|
||||
开启或者关闭marker弹出框
|
||||
|
||||
开启或者关闭 marker 弹出框
|
||||
|
||||
#### setPopup
|
||||
为marker设置popup
|
||||
|
||||
为 marker 设置 popup
|
||||
|
||||
#### getPopup
|
||||
获取marker弹出框
|
||||
|
||||
获取 marker 弹出框
|
||||
|
||||
## 示例代码
|
||||
|
||||
#### 默认Marker
|
||||
**<br />` const marker = new L7.Marker({color:'blue'})`
|
||||
#### 默认 Marker
|
||||
|
||||
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
|
||||
|
||||
#### 自定义Marker
|
||||
#### 自定义 Marker
|
||||
|
||||
```javascript
|
||||
var el = document.createElement('label');
|
||||
el.className = 'lableclass';
|
||||
el.textContent = data[i].v;
|
||||
el.style.background = getColor(data[i].v);
|
||||
new L7.Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat([data[i].x * 1, data[i].y])
|
||||
.addTo(scene);
|
||||
el.className = 'lableclass';
|
||||
el.textContent = data[i].v;
|
||||
el.style.background = getColor(data[i].v);
|
||||
new L7.Marker({
|
||||
element: el,
|
||||
})
|
||||
.setLnglat([data[i].x * 1, data[i].y])
|
||||
.addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
#### 设置 popup
|
||||
|
||||
```javascript
|
||||
var popup = new L7.Popup({
|
||||
anchor: 'left'
|
||||
}).setText(item.name);
|
||||
var popup = new L7.Popup({
|
||||
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,67 +22,71 @@ const popup = new L7.Popup(option)
|
|||
- maxWidth
|
||||
- anchor
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
#### setLnglat
|
||||
设置popup的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
|
||||
|
||||
设置 popup 的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
|
||||
|
||||
```javascript
|
||||
popup.setLnglat([112, 32]);
|
||||
```
|
||||
|
||||
|
||||
#### addTo
|
||||
**参数**：scene 地图scene实例
|
||||
|
||||
将popup添加到地图scene显示
|
||||
**参数**：scene 地图 scene 实例
|
||||
|
||||
将 popup 添加到地图 scene 显示
|
||||
|
||||
```javascript
|
||||
popup.addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
#### setHtml
|
||||
|
||||
**参数**：html 字符串
|
||||
|
||||
设置popup 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
|
||||
|
||||
移除 popup
|
||||
|
||||
```javascript
|
||||
popup.remove()
|
||||
popup.remove();
|
||||
```
|
||||
|
||||
|
||||
## 事件
|
||||
|
||||
#### close
|
||||
|
||||
```javascript
|
||||
popup.on('close',()=>{})
|
||||
popup.on('close', () => {});
|
||||
```
|
||||
|
||||
|
||||
## 示例代码
|
||||
|
||||
#### 添加popup
|
||||
#### 添加 popup
|
||||
|
||||
```
|
||||
var html = '<p>'+feature.m+'</p>';
|
||||
|
|
|
|||
|
|
@ -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,67 +22,71 @@ const popup = new L7.Popup(option)
|
|||
- maxWidth
|
||||
- anchor
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
#### setLnglat
|
||||
设置popup的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
|
||||
|
||||
设置 popup 的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
|
||||
|
||||
```javascript
|
||||
popup.setLnglat([112, 32]);
|
||||
```
|
||||
|
||||
|
||||
#### addTo
|
||||
**参数**：scene 地图scene实例
|
||||
|
||||
将popup添加到地图scene显示
|
||||
**参数**：scene 地图 scene 实例
|
||||
|
||||
将 popup 添加到地图 scene 显示
|
||||
|
||||
```javascript
|
||||
popup.addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
#### setHtml
|
||||
|
||||
**参数**：html 字符串
|
||||
|
||||
设置popup 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
|
||||
|
||||
移除 popup
|
||||
|
||||
```javascript
|
||||
popup.remove()
|
||||
popup.remove();
|
||||
```
|
||||
|
||||
|
||||
## 事件
|
||||
|
||||
#### close
|
||||
|
||||
```javascript
|
||||
popup.on('close',()=>{})
|
||||
popup.on('close', () => {});
|
||||
```
|
||||
|
||||
|
||||
## 示例代码
|
||||
|
||||
#### 添加popup
|
||||
#### 添加 popup
|
||||
|
||||
```
|
||||
var html = '<p>'+feature.m+'</p>';
|
||||
|
|
|
|||
|
|
@ -5,37 +5,35 @@ order: 5
|
|||
|
||||
# heatmapLayer
|
||||
|
||||
|
||||
### 简介
|
||||
|
||||
热力图图层，包含三种类型的，
|
||||
- 方格热力图
|
||||
|
||||
- 方格热力图
|
||||
|
||||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||
|
||||
- 六边形热力图
|
||||
- 六边形热力图
|
||||
|
||||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||
|
||||
- 经典热力图
|
||||
- 经典热力图
|
||||
|
||||
|
||||
|
||||
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法
|
||||
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在 source 方法设置数据聚合方法
|
||||
|
||||
### source
|
||||
|
||||
热力图只支持点数据作为数据源
|
||||
|
||||
布局方法 通过source的 tansforms属性配置
|
||||
布局方法 通过 source 的 tansforms 属性配置
|
||||
|
||||
- type 数据聚合类型 grid、hexagon
|
||||
- size 网格半径 单位 米
|
||||
- field 聚合字段
|
||||
- method 聚合方法 count,max,min,sum,mean5个统计维度
|
||||
- method 聚合方法 count,max,min,sum,mean5 个统计维度
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
|
|
@ -46,7 +44,7 @@ layer.source(data, {
|
|||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
],
|
||||
|
|
@ -55,16 +53,15 @@ layer.source(data, {
|
|||
|
||||
### shape
|
||||
|
||||
不同类型热力图shape支持
|
||||
不同类型热力图 shape 支持
|
||||
|
||||
| | 2D | 3d |
|
||||
| --- | --- | --- |
|
||||
| | 2D | 3d |
|
||||
| ------------ | ------------------------------ | ------------------------------------------------- |
|
||||
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
|
||||
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
|
||||
| 普通热力图 | heatmap | heatmap |
|
||||
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
|
||||
| 普通热力图 | heatmap | heatmap |
|
||||
|
||||
|
||||
热力图布局下只shape方法只支持常量的可视化。
|
||||
热力图布局下只 shape 方法只支持常量的可视化。
|
||||
|
||||
```javascript
|
||||
HeatmapLayer.shape('square');
|
||||
|
|
@ -73,9 +70,10 @@ HeatmapLayer.shape('hexagon');
|
|||
```
|
||||
|
||||
### size
|
||||
当前版本 shape 为grid，hexagon不需要设置 size 映射
|
||||
|
||||
default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
|
||||
当前版本 shape 为 grid，hexagon 不需要设置 size 映射
|
||||
|
||||
default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
|
||||
|
||||
**size(field,values) **
|
||||
|
||||
|
|
@ -83,123 +81,139 @@ 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映射
|
||||
|
||||
default heatMap 类型不需设置 color 映射
|
||||
|
||||
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
|
||||
|
||||
|
||||
|
||||
### style
|
||||
|
||||
grid hexagon 可以通过style 设置透明度
|
||||
grid hexagon 可以通过 style 设置透明度
|
||||
|
||||
default热力图需要通过style配置参数热力图参数
|
||||
default 热力图需要通过 style 配置参数热力图参数
|
||||
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
- rampColors 色带参数
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
```javascript
|
||||
HeatmapLayer.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 ]
|
||||
}
|
||||
})
|
||||
HeatmapLayer.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],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### 完整代码示例
|
||||
|
||||
#### 普通热力图
|
||||
|
||||
```javascript
|
||||
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
|
||||
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
|
||||
|
||||
HeatmapLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.size('mag', [ 0, 1 ]) // weight映射通道
|
||||
.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 ]
|
||||
}
|
||||
})
|
||||
HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(data)
|
||||
.size('mag', [0, 1]) // weight映射通道
|
||||
.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],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 网格热力图
|
||||
|
||||
```javascript
|
||||
var layer = scene.HeatmapLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
|
||||
{
|
||||
var layer = scene
|
||||
.HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('grid')
|
||||
.style({
|
||||
coverage: 0.8
|
||||
})
|
||||
.color('count',
|
||||
["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||||
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('grid')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
})
|
||||
.color('count', [
|
||||
'#002466',
|
||||
'#105CB3',
|
||||
'#2894E0',
|
||||
'#CFF6FF',
|
||||
'#FFF5B8',
|
||||
'#FFAB5C',
|
||||
'#F27049',
|
||||
'#730D1C',
|
||||
]);
|
||||
```
|
||||
|
||||
|
||||
#### 六边形热力图
|
||||
|
||||
```javascript
|
||||
var layer = scene.HeatmapLayer({
|
||||
zIndex: 2
|
||||
}).
|
||||
souce(data,{
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:lng,
|
||||
y:lat,
|
||||
var layer = scene
|
||||
.HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.souce(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: lng,
|
||||
y: lat,
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type:'hexgon',
|
||||
size:1500,
|
||||
field:'count',
|
||||
operation: 'sum',
|
||||
}
|
||||
]
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexgon',
|
||||
size: 1500,
|
||||
field: 'count',
|
||||
operation: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('hexgon')
|
||||
.size(1000)
|
||||
.size(1000)
|
||||
.color('sum')
|
||||
.style({
|
||||
coverage:0.8
|
||||
})
|
||||
render()
|
||||
```
|
||||
coverage: 0.8,
|
||||
});
|
||||
render();
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,39 +2,38 @@
|
|||
title: HeatmapLayer
|
||||
order: 5
|
||||
---
|
||||
# heatmapLayer
|
||||
|
||||
# heatmapLayer
|
||||
|
||||
### 简介
|
||||
|
||||
热力图图层，包含三种类型的，
|
||||
- 方格热力图
|
||||
|
||||
- 方格热力图
|
||||
|
||||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||
|
||||
- 六边形热力图
|
||||
- 六边形热力图
|
||||
|
||||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||
|
||||
- 经典热力图
|
||||
- 经典热力图
|
||||
|
||||
|
||||
|
||||
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法
|
||||
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在 source 方法设置数据聚合方法
|
||||
|
||||
### source
|
||||
|
||||
热力图只支持点数据作为数据源
|
||||
|
||||
布局方法 通过source的 tansforms属性配置
|
||||
布局方法 通过 source 的 tansforms 属性配置
|
||||
|
||||
- type 数据聚合类型 grid、hexagon
|
||||
- size 网格半径 单位 米
|
||||
- field 聚合字段
|
||||
- method 聚合方法 count,max,min,sum,mean5个统计维度
|
||||
- method 聚合方法 count,max,min,sum,mean5 个统计维度
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
|
|
@ -45,7 +44,7 @@ layer.source(data, {
|
|||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
],
|
||||
|
|
@ -54,16 +53,15 @@ layer.source(data, {
|
|||
|
||||
### shape
|
||||
|
||||
不同类型热力图shape支持
|
||||
不同类型热力图 shape 支持
|
||||
|
||||
| | 2D | 3d |
|
||||
| --- | --- | --- |
|
||||
| | 2D | 3d |
|
||||
| ------------ | ------------------------------ | ------------------------------------------------- |
|
||||
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
|
||||
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
|
||||
| 普通热力图 | heatmap | heatmap |
|
||||
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
|
||||
| 普通热力图 | heatmap | heatmap |
|
||||
|
||||
|
||||
热力图布局下只shape方法只支持常量的可视化。
|
||||
热力图布局下只 shape 方法只支持常量的可视化。
|
||||
|
||||
```javascript
|
||||
HeatmapLayer.shape('square');
|
||||
|
|
@ -72,9 +70,10 @@ HeatmapLayer.shape('hexagon');
|
|||
```
|
||||
|
||||
### size
|
||||
当前版本 shape 为grid，hexagon不需要设置 size 映射
|
||||
|
||||
default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
|
||||
当前版本 shape 为 grid，hexagon 不需要设置 size 映射
|
||||
|
||||
default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
|
||||
|
||||
**size(field,values) **
|
||||
|
||||
|
|
@ -82,123 +81,139 @@ 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映射
|
||||
|
||||
default heatMap 类型不需设置 color 映射
|
||||
|
||||
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
|
||||
|
||||
|
||||
|
||||
### style
|
||||
|
||||
grid hexagon 可以通过style 设置透明度
|
||||
grid hexagon 可以通过 style 设置透明度
|
||||
|
||||
default热力图需要通过style配置参数热力图参数
|
||||
default 热力图需要通过 style 配置参数热力图参数
|
||||
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
- rampColors 色带参数
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
```javascript
|
||||
HeatmapLayer.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 ]
|
||||
}
|
||||
})
|
||||
HeatmapLayer.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],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### 完整代码示例
|
||||
|
||||
#### 普通热力图
|
||||
|
||||
```javascript
|
||||
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
|
||||
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
|
||||
|
||||
HeatmapLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.size('mag', [ 0, 1 ]) // weight映射通道
|
||||
.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 ]
|
||||
}
|
||||
})
|
||||
HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(data)
|
||||
.size('mag', [0, 1]) // weight映射通道
|
||||
.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],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 网格热力图
|
||||
|
||||
```javascript
|
||||
var layer = scene.HeatmapLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
|
||||
{
|
||||
var layer = scene
|
||||
.HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('grid')
|
||||
.style({
|
||||
coverage: 0.8
|
||||
})
|
||||
.color('count',
|
||||
["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||||
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('grid')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
})
|
||||
.color('count', [
|
||||
'#002466',
|
||||
'#105CB3',
|
||||
'#2894E0',
|
||||
'#CFF6FF',
|
||||
'#FFF5B8',
|
||||
'#FFAB5C',
|
||||
'#F27049',
|
||||
'#730D1C',
|
||||
]);
|
||||
```
|
||||
|
||||
|
||||
#### 六边形热力图
|
||||
|
||||
```javascript
|
||||
var layer = scene.HeatmapLayer({
|
||||
zIndex: 2
|
||||
}).
|
||||
souce(data,{
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:lng,
|
||||
y:lat,
|
||||
var layer = scene
|
||||
.HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.souce(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: lng,
|
||||
y: lat,
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type:'hexgon',
|
||||
size:1500,
|
||||
field:'count',
|
||||
operation: 'sum',
|
||||
},
|
||||
],
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexgon',
|
||||
size: 1500,
|
||||
field: 'count',
|
||||
operation: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('hexgon')
|
||||
.size(1000)
|
||||
.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,135 +2,130 @@
|
|||
title: Map Layer
|
||||
order: 0
|
||||
---
|
||||
|
||||
# Layer
|
||||
|
||||
|
||||
## 简介
|
||||
|
||||
L7 Layer 接口设计遵循图形语法，在可视表达上
|
||||
|
||||
语法示例
|
||||
|
||||
```javascript
|
||||
new Layer(option)
|
||||
.source()
|
||||
.color()
|
||||
.size()
|
||||
.shape()
|
||||
.style()
|
||||
|
||||
.source()
|
||||
.color()
|
||||
.size()
|
||||
.shape()
|
||||
.style();
|
||||
```
|
||||
|
||||
|
||||
## 构造函数
|
||||
|
||||
|
||||
## 配置项
|
||||
|
||||
### visable
|
||||
图层是否可见 {bool } default true
|
||||
|
||||
图层是否可见 {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
|
||||
|
||||
## 鼠标事件
|
||||
## 鼠标事件
|
||||
|
||||
⚠️ beta版当前不支持，正式版会支持
|
||||
⚠️ beta 版当前不支持，正式版会支持
|
||||
|
||||
```javascript
|
||||
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
|
||||
layer.on('dblclick', (ev)=>{}); // 鼠标左键双击图层事件
|
||||
layer.on('mousemove', (ev)=>{}); // 鼠标在图层上移动时触发
|
||||
layer.on('mouseover', (ev)=>{}); // 鼠标移入图层要素内时触发
|
||||
layer.on('mouseout', (ev)=>{}); // 鼠标移出图层要素时触发
|
||||
layer.on('mouseup', (ev)=>{}); // 鼠标在图层上单击抬起时触发
|
||||
layer.on('mousedown', (ev)=>{}); // 鼠标在图层上单击按下时触发
|
||||
layer.on('mouseleave', (ev)=>{}); // 鼠标离开图层要素
|
||||
layer.on('rightclick', (ev)=>{}); // 鼠标右键图层要素
|
||||
|
||||
layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
|
||||
layer.on('dblclick', (ev) => {}); // 鼠标左键双击图层事件
|
||||
layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
|
||||
layer.on('mouseover', (ev) => {}); // 鼠标移入图层要素内时触发
|
||||
layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
|
||||
layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
|
||||
layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
|
||||
layer.on('mouseleave', (ev) => {}); // 鼠标离开图层要素
|
||||
layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
|
||||
```
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
### source
|
||||
数据源为layer设置数据 source(data,config)
|
||||
|
||||
数据源为 layer 设置数据 source(data,config)
|
||||
|
||||
- data {geojson|json|csv}
|
||||
|
||||
源数据
|
||||
|
||||
源数据
|
||||
|
||||
- config 可选 数据源配置项
|
||||
- parser 数据解析，默认是解析层geojson
|
||||
- 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'
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'map',
|
||||
callback: function(item) {
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat * 1;
|
||||
item.lng = item.lng * 1;
|
||||
item.v = item.v * 1;
|
||||
item.coordinates = [x * 1, y * 1];
|
||||
return item;
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'map',
|
||||
callback:function(item){
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat*1;
|
||||
item.lng = item.lng*1;
|
||||
item.v = item.v *1;
|
||||
item.coordinates = [x*1,y*1];
|
||||
return item;
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 6000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 6000,
|
||||
field: 'v',
|
||||
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,36 +135,36 @@ cscle('field', scaleConfig)
|
|||
|
||||
- polygon size 影响的是高度
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
pointLayer.size(10); // 常量
|
||||
pointLayer.size('type'); // 使用字段映射到大小
|
||||
pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值
|
||||
pointLayer.size('type', (type) => { // 回调函数
|
||||
if(type === 'a') {
|
||||
pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值
|
||||
pointLayer.size('type', (type) => {
|
||||
// 回调函数
|
||||
if (type === 'a') {
|
||||
return 10;
|
||||
}
|
||||
return 5;
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### size(value）
|
||||
|
||||
传入数字常量，如 `pointLayer.size(20)`
|
||||
传入数字常量，如 `pointLayer.size(20)`
|
||||
|
||||
#### size(field)
|
||||
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
|
||||
|
||||
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
|
||||
|
||||
#### size(field, callback)
|
||||
|
||||
使用回调函数控制图形大小。
|
||||
|
||||
- `callback`: function 回调函数。
|
||||
|
||||
```javascript
|
||||
pointLayer.size('age', (value) => {
|
||||
if(value === 1) {
|
||||
if (value === 1) {
|
||||
return 5;
|
||||
}
|
||||
return 10;
|
||||
|
|
@ -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,36 +217,34 @@ layer.color('white') // 指定颜色
|
|||
|
||||
- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
|
||||
|
||||
- `colors`: string | array | function
|
||||
- `colors`: string | array | function
|
||||
|
||||
|
||||
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
|
||||
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
|
||||
|
||||
```javascript
|
||||
layer.color('name'); // 使用默认的颜色
|
||||
layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色
|
||||
layer.color('name', ['red', 'blue']); // 使用传入的指定颜色
|
||||
```
|
||||
|
||||
- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
layer.color('gender', (value) => {
|
||||
if(value === 1) {
|
||||
return 'red'
|
||||
if (value === 1) {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
layer.color('gender*age', (gender, age) => {
|
||||
if(age === 20 && gender ==' 男' ) {
|
||||
return 'red'
|
||||
if (age === 20 && gender == ' 男') {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
将数据值映射到图形的形状上的方法。
|
||||
|
||||
**shape(shape)**
|
||||
|
|
@ -261,48 +253,44 @@ 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 | |
|
||||
|
||||
| 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
|
||||
|
||||
用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
|
||||
|
||||
- fill
|
||||
|
||||
- opacity 设置透明度
|
||||
- opacity 设置透明度
|
||||
|
||||
- stroke 线填充颜色
|
||||
- stroke 线填充颜色
|
||||
|
||||
- strokeWidth 线的宽度
|
||||
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
fill:'red',
|
||||
opacity:0.8,
|
||||
stroke:'white'
|
||||
})
|
||||
fill: 'red',
|
||||
opacity: 0.8,
|
||||
stroke: 'white',
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### show
|
||||
|
||||
图层显示
|
||||
|
||||
```javascript
|
||||
layer.show();
|
||||
```
|
||||
|
||||
|
||||
### hide
|
||||
|
||||
图层隐藏
|
||||
|
|
@ -311,12 +299,10 @@ layer.show();
|
|||
layer.hide();
|
||||
```
|
||||
|
||||
|
||||
### fitBounds
|
||||
|
||||
缩放到图层范围
|
||||
|
||||
```javascript
|
||||
layer.fitBounds()
|
||||
|
||||
layer.fitBounds();
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,135 +2,130 @@
|
|||
title: Layer
|
||||
order: 0
|
||||
---
|
||||
|
||||
# Layer
|
||||
|
||||
|
||||
## 简介
|
||||
|
||||
L7 Layer 接口设计遵循图形语法，在可视表达上
|
||||
|
||||
语法示例
|
||||
|
||||
```javascript
|
||||
new Layer(option)
|
||||
.source()
|
||||
.color()
|
||||
.size()
|
||||
.shape()
|
||||
.style()
|
||||
|
||||
.source()
|
||||
.color()
|
||||
.size()
|
||||
.shape()
|
||||
.style();
|
||||
```
|
||||
|
||||
|
||||
## 构造函数
|
||||
|
||||
|
||||
## 配置项
|
||||
|
||||
### visable
|
||||
图层是否可见 {bool } default true
|
||||
|
||||
图层是否可见 {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
|
||||
|
||||
## 鼠标事件
|
||||
## 鼠标事件
|
||||
|
||||
⚠️ beta版当前不支持，正式版会支持
|
||||
⚠️ beta 版当前不支持，正式版会支持
|
||||
|
||||
```javascript
|
||||
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
|
||||
layer.on('dblclick', (ev)=>{}); // 鼠标左键双击图层事件
|
||||
layer.on('mousemove', (ev)=>{}); // 鼠标在图层上移动时触发
|
||||
layer.on('mouseover', (ev)=>{}); // 鼠标移入图层要素内时触发
|
||||
layer.on('mouseout', (ev)=>{}); // 鼠标移出图层要素时触发
|
||||
layer.on('mouseup', (ev)=>{}); // 鼠标在图层上单击抬起时触发
|
||||
layer.on('mousedown', (ev)=>{}); // 鼠标在图层上单击按下时触发
|
||||
layer.on('mouseleave', (ev)=>{}); // 鼠标离开图层要素
|
||||
layer.on('rightclick', (ev)=>{}); // 鼠标右键图层要素
|
||||
|
||||
layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
|
||||
layer.on('dblclick', (ev) => {}); // 鼠标左键双击图层事件
|
||||
layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
|
||||
layer.on('mouseover', (ev) => {}); // 鼠标移入图层要素内时触发
|
||||
layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
|
||||
layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
|
||||
layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
|
||||
layer.on('mouseleave', (ev) => {}); // 鼠标离开图层要素
|
||||
layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
|
||||
```
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
### source
|
||||
数据源为layer设置数据 source(data,config)
|
||||
|
||||
数据源为 layer 设置数据 source(data,config)
|
||||
|
||||
- data {geojson|json|csv}
|
||||
|
||||
源数据
|
||||
|
||||
源数据
|
||||
|
||||
- config 可选 数据源配置项
|
||||
- parser 数据解析，默认是解析层geojson
|
||||
- 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'
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'map',
|
||||
callback: function(item) {
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat * 1;
|
||||
item.lng = item.lng * 1;
|
||||
item.v = item.v * 1;
|
||||
item.coordinates = [x * 1, y * 1];
|
||||
return item;
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'map',
|
||||
callback:function(item){
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat*1;
|
||||
item.lng = item.lng*1;
|
||||
item.v = item.v *1;
|
||||
item.coordinates = [x*1,y*1];
|
||||
return item;
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 6000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 6000,
|
||||
field: 'v',
|
||||
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,36 +135,36 @@ cscle('field', scaleConfig)
|
|||
|
||||
- polygon size 影响的是高度
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
pointLayer.size(10); // 常量
|
||||
pointLayer.size('type'); // 使用字段映射到大小
|
||||
pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值
|
||||
pointLayer.size('type', (type) => { // 回调函数
|
||||
if(type === 'a') {
|
||||
pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值
|
||||
pointLayer.size('type', (type) => {
|
||||
// 回调函数
|
||||
if (type === 'a') {
|
||||
return 10;
|
||||
}
|
||||
return 5;
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### size(value）
|
||||
|
||||
传入数字常量，如 `pointLayer.size(20)`
|
||||
传入数字常量，如 `pointLayer.size(20)`
|
||||
|
||||
#### size(field)
|
||||
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
|
||||
|
||||
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
|
||||
|
||||
#### size(field, callback)
|
||||
|
||||
使用回调函数控制图形大小。
|
||||
|
||||
- `callback`: function 回调函数。
|
||||
|
||||
```javascript
|
||||
pointLayer.size('age', (value) => {
|
||||
if(value === 1) {
|
||||
if (value === 1) {
|
||||
return 5;
|
||||
}
|
||||
return 10;
|
||||
|
|
@ -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,36 +217,34 @@ layer.color('white') // 指定颜色
|
|||
|
||||
- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
|
||||
|
||||
- `colors`: string | array | function
|
||||
- `colors`: string | array | function
|
||||
|
||||
|
||||
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
|
||||
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
|
||||
|
||||
```javascript
|
||||
layer.color('name'); // 使用默认的颜色
|
||||
layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色
|
||||
layer.color('name', ['red', 'blue']); // 使用传入的指定颜色
|
||||
```
|
||||
|
||||
- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
layer.color('gender', (value) => {
|
||||
if(value === 1) {
|
||||
return 'red'
|
||||
if (value === 1) {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
layer.color('gender*age', (gender, age) => {
|
||||
if(age === 20 && gender ==' 男' ) {
|
||||
return 'red'
|
||||
if (age === 20 && gender == ' 男') {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
将数据值映射到图形的形状上的方法。
|
||||
|
||||
**shape(shape)**
|
||||
|
|
@ -261,48 +253,44 @@ 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 | |
|
||||
|
||||
| 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
|
||||
|
||||
用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
|
||||
|
||||
- fill
|
||||
|
||||
- opacity 设置透明度
|
||||
- opacity 设置透明度
|
||||
|
||||
- stroke 线填充颜色
|
||||
- stroke 线填充颜色
|
||||
|
||||
- strokeWidth 线的宽度
|
||||
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
fill:'red',
|
||||
opacity:0.8,
|
||||
stroke:'white'
|
||||
})
|
||||
fill: 'red',
|
||||
opacity: 0.8,
|
||||
stroke: 'white',
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### show
|
||||
|
||||
图层显示
|
||||
|
||||
```javascript
|
||||
layer.show();
|
||||
```
|
||||
|
||||
|
||||
### hide
|
||||
|
||||
图层隐藏
|
||||
|
|
@ -311,12 +299,10 @@ layer.show();
|
|||
layer.hide();
|
||||
```
|
||||
|
||||
|
||||
### fitBounds
|
||||
|
||||
缩放到图层范围
|
||||
|
||||
```javascript
|
||||
layer.fitBounds()
|
||||
|
||||
layer.fitBounds();
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,16 +2,17 @@
|
|||
title: LineLayer
|
||||
order: 2
|
||||
---
|
||||
|
||||
## 线图层
|
||||
|
||||
### shape
|
||||
|
||||
线图层支持4种 shape
|
||||
线图层支持 4 种 shape
|
||||
|
||||
- line 绘制路径图，
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d弧线地图 3D视角
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
|
||||
⚠️ 弧线只需要设置起始点坐标即可
|
||||
|
||||
|
|
@ -28,7 +29,8 @@ order: 2
|
|||
})
|
||||
```
|
||||
|
||||
如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
|
||||
如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
|
||||
|
||||
```
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
|
|
@ -59,14 +61,10 @@ order: 2
|
|||
|
||||
线图层 可以设置高度
|
||||
|
||||
- size 类型为number 则表示 line的宽度
|
||||
- size 类型为 number 则表示 line 的宽度
|
||||
- size 类型为 [number , number] 分别表示宽度和高度
|
||||
|
||||
```javascript
|
||||
|
||||
lineLayer.size(1); // 线的宽度为 1
|
||||
lineLayer.size([1,2]); // 宽度为1，高度2
|
||||
|
||||
lineLayer.size([1, 2]); // 宽度为1，高度2
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,16 +2,17 @@
|
|||
title: LineLayer
|
||||
order: 2
|
||||
---
|
||||
|
||||
## 线图层
|
||||
|
||||
### shape
|
||||
|
||||
线图层支持4种 shape
|
||||
线图层支持 4 种 shape
|
||||
|
||||
- line 绘制路径图，
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d弧线地图 3D视角
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
|
||||
⚠️ 弧线只需要设置起始点坐标即可
|
||||
|
||||
|
|
@ -28,7 +29,8 @@ order: 2
|
|||
})
|
||||
```
|
||||
|
||||
如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
|
||||
如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
|
||||
|
||||
```
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
|
|
@ -59,14 +61,10 @@ order: 2
|
|||
|
||||
线图层 可以设置高度
|
||||
|
||||
- size 类型为number 则表示 line的宽度
|
||||
- size 类型为 number 则表示 line 的宽度
|
||||
- size 类型为 [number , number] 分别表示宽度和高度
|
||||
|
||||
```javascript
|
||||
|
||||
lineLayer.size(1); // 线的宽度为 1
|
||||
lineLayer.size([1,2]); // 宽度为1，高度2
|
||||
|
||||
lineLayer.size([1, 2]); // 宽度为1，高度2
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,16 @@
|
|||
title: PointLayer
|
||||
order: 1
|
||||
---
|
||||
|
||||
# PointLayer
|
||||
|
||||
|
||||
## 简介
|
||||
点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。
|
||||
|
||||
点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
||||
|
||||
shape 支持
|
||||
|
||||
**3D类型 柱图**
|
||||
**3D 类型 柱图**
|
||||
|
||||
```
|
||||
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
|
||||
|
|
@ -26,52 +27,54 @@ shape 支持
|
|||
|
||||
**图片标注**
|
||||
|
||||
通过 ```Scene.addImage()``` 可以添加图片资源，
|
||||
|
||||
通过 `Scene.addImage()` 可以添加图片资源，
|
||||
|
||||
### 代码示例
|
||||
|
||||
|
||||
#### 基本图形显示示例
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from "@antv/l7"
|
||||
import { PointLayer } from '@antv/l7';
|
||||
|
||||
const layer = PointLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data.list, {
|
||||
type: 'array',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t',(level)=> {
|
||||
return [4,4,(level+40)];
|
||||
})
|
||||
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||||
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(data.list, {
|
||||
type: 'array',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', (level) => {
|
||||
return [4, 4, level + 40];
|
||||
})
|
||||
.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
|
||||
})
|
||||
.source(city)
|
||||
.size(20.0)
|
||||
.shape('local')
|
||||
.color('#0D408C')
|
||||
|
||||
const layer = new PointLayer({
|
||||
zIndex: 4,
|
||||
})
|
||||
.source(city)
|
||||
.size(20.0)
|
||||
.shape('local')
|
||||
.color('#0D408C');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ order: 1
|
|||
|
||||
# PointLayer
|
||||
|
||||
|
||||
## 简介
|
||||
点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。
|
||||
|
||||
点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
||||
|
||||
shape 支持
|
||||
|
||||
**3D类型 柱图**
|
||||
**3D 类型 柱图**
|
||||
|
||||
```
|
||||
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
|
||||
|
|
@ -27,52 +27,54 @@ shape 支持
|
|||
|
||||
**图片标注**
|
||||
|
||||
通过 ```Scene.addImage()``` 可以添加图片资源，
|
||||
|
||||
通过 `Scene.addImage()` 可以添加图片资源，
|
||||
|
||||
### 代码示例
|
||||
|
||||
|
||||
#### 基本图形显示示例
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from "@antv/l7"
|
||||
import { PointLayer } from '@antv/l7';
|
||||
|
||||
const layer = PointLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data.list, {
|
||||
type: 'array',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t',(level)=> {
|
||||
return [4,4,(level+40)];
|
||||
})
|
||||
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||||
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(data.list, {
|
||||
type: 'array',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', (level) => {
|
||||
return [4, 4, level + 40];
|
||||
})
|
||||
.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
|
||||
})
|
||||
.source(city)
|
||||
.size(20.0)
|
||||
.shape('local')
|
||||
.color('#0D408C')
|
||||
|
||||
const layer = new PointLayer({
|
||||
zIndex: 4,
|
||||
})
|
||||
.source(city)
|
||||
.size(20.0)
|
||||
.shape('local')
|
||||
.color('#0D408C');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,25 +2,23 @@
|
|||
title: PolygonLayer
|
||||
order: 3
|
||||
---
|
||||
|
||||
# 填充图
|
||||
|
||||
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
||||
|
||||
### shape
|
||||
|
||||
填充图支持3种shape
|
||||
填充图支持 3 种 shape
|
||||
|
||||
- fill 绘制填充面 不支持数据映射
|
||||
- line 绘制填充图描边 不支持数据映射
|
||||
- extrude 对填充图3D拉伸 不支持数据映射
|
||||
|
||||
``` javascript
|
||||
PolyonLayer.shape('fill');
|
||||
PolyonLayer.shape('line').size(1); // size 表示线宽度
|
||||
PolyonLayer.shape('extrude'); // size 表示高度
|
||||
- fill 绘制填充面 不支持数据映射
|
||||
- line 绘制填充图描边 不支持数据映射
|
||||
- extrude 对填充图 3D 拉伸 不支持数据映射
|
||||
|
||||
```javascript
|
||||
PolyonLayer.shape('fill');
|
||||
PolyonLayer.shape('line').size(1); // size 表示线宽度
|
||||
PolyonLayer.shape('extrude'); // size 表示高度
|
||||
```
|
||||
|
||||
其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,25 +2,23 @@
|
|||
title: PolygonLayer
|
||||
order: 3
|
||||
---
|
||||
|
||||
# 填充图
|
||||
|
||||
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
||||
|
||||
### shape
|
||||
|
||||
填充图支持3种shape
|
||||
填充图支持 3 种 shape
|
||||
|
||||
- fill 绘制填充面 不支持数据映射
|
||||
- line 绘制填充图描边 不支持数据映射
|
||||
- extrude 对填充图3D拉伸 不支持数据映射
|
||||
|
||||
``` javascript
|
||||
PolyonLayer.shape('fill');
|
||||
PolyonLayer.shape('line').size(1); // size 表示线宽度
|
||||
PolyonLayer.shape('extrude'); // size 表示高度
|
||||
- fill 绘制填充面 不支持数据映射
|
||||
- line 绘制填充图描边 不支持数据映射
|
||||
- extrude 对填充图 3D 拉伸 不支持数据映射
|
||||
|
||||
```javascript
|
||||
PolyonLayer.shape('fill');
|
||||
PolyonLayer.shape('line').size(1); // size 表示线宽度
|
||||
PolyonLayer.shape('extrude'); // size 表示高度
|
||||
```
|
||||
|
||||
其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,25 +3,196 @@ title: geojson
|
|||
order: 1
|
||||
---
|
||||
|
||||
|
||||
# geojson 数据介绍
|
||||
|
||||
|
||||
## 简介
|
||||
|
||||
GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
|
||||
GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
|
||||
[The GeoJSON Format](https://tools.ietf.org/html/draft-butler-geojson-06)
|
||||
|
||||
[geojson详细文档]()
|
||||
L7 数据 source 支持 传入 Geometry 集合 FeatureCollection
|
||||
|
||||
## Geojson相关的JS库
|
||||
### Feature Collection Object
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
"name": "tom"
|
||||
},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[-2.8125, 34.59704151614417],
|
||||
[65.390625, 34.59704151614417],
|
||||
[65.390625, 61.10078883158897],
|
||||
[-2.8125, 61.10078883158897],
|
||||
[-2.8125, 34.59704151614417]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Feature Object
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {}
|
||||
}
|
||||
```
|
||||
|
||||
### Gemetry Object
|
||||
|
||||
支持 Gemetry Object 类型
|
||||
|
||||
### Point
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "Point",
|
||||
"coordinates": [100.0, 0.0]
|
||||
}
|
||||
```
|
||||
|
||||
### MultiPoint
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "MultiPoint",
|
||||
"coordinates": [
|
||||
[100.0, 0.0],
|
||||
[101.0, 1.0]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Line
|
||||
|
||||
### LineSring
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[100.0, 0.0],
|
||||
[101.0, 1.0]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### MultiLineString
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "MultiLineString",
|
||||
"coordinates": [
|
||||
[
|
||||
[100.0, 0.0],
|
||||
[101.0, 1.0]
|
||||
],
|
||||
[
|
||||
[102.0, 2.0],
|
||||
[103.0, 3.0]
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Polygon
|
||||
|
||||
### Polygon
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[100.0, 0.0],
|
||||
[101.0, 0.0],
|
||||
[101.0, 1.0],
|
||||
[100.0, 1.0],
|
||||
[100.0, 0.0]
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
With holes:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[-170.0, 10.0],
|
||||
[170.0, 10.0],
|
||||
[170.0, -10.0],
|
||||
[-170.0, -10.0],
|
||||
[-170.0, 10.0]
|
||||
],
|
||||
[
|
||||
[175.0, 5.0],
|
||||
[-175.0, 5.0],
|
||||
[-175.0, -5.0],
|
||||
[175.0, -5.0],
|
||||
[175.0, 5.0]
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### MultiPolygon
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "MultiPolygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
[102.0, 2.0],
|
||||
[103.0, 2.0],
|
||||
[103.0, 3.0],
|
||||
[102.0, 3.0],
|
||||
[102.0, 2.0]
|
||||
]
|
||||
],
|
||||
[
|
||||
[
|
||||
[100.0, 0.0],
|
||||
[101.0, 0.0],
|
||||
[101.0, 1.0],
|
||||
[100.0, 1.0],
|
||||
[100.0, 0.0]
|
||||
],
|
||||
[
|
||||
[100.2, 0.2],
|
||||
[100.8, 0.2],
|
||||
[100.8, 0.8],
|
||||
[100.2, 0.8],
|
||||
[100.2, 0.2]
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
[geojson 详细文档]()
|
||||
|
||||
## Geojson 相关的 JS 库
|
||||
|
||||
### 地理统计分析工具
|
||||
|
||||
[turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的Javascript 库
|
||||
|
||||
[turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的 Javascript 库
|
||||
|
||||
### 在线工具：
|
||||
|
||||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改GeoJSON数据
|
||||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改 GeoJSON 数据
|
||||
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的 geojson，还能够简化 GeoJSON 数据
|
||||
|
|
|
|||
|
|
@ -3,25 +3,200 @@ title: geojson
|
|||
order: 1
|
||||
---
|
||||
|
||||
|
||||
# geojson 数据介绍
|
||||
|
||||
|
||||
## 简介
|
||||
|
||||
GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
|
||||
GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
|
||||
[The GeoJSON Format](https://tools.ietf.org/html/draft-butler-geojson-06)
|
||||
|
||||
[geojson详细文档]()
|
||||
L7 数据 source 支持 传入 Geometry 集合 FeatureCollection
|
||||
|
||||
## Geojson相关的JS库
|
||||
### Feature Collection Object
|
||||
|
||||
一个 feature Colletion 由对个 feature 组成
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
"name": "tom"
|
||||
},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[-2.8125, 34.59704151614417],
|
||||
[65.390625, 34.59704151614417],
|
||||
[65.390625, 61.10078883158897],
|
||||
[-2.8125, 61.10078883158897],
|
||||
[-2.8125, 34.59704151614417]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Feature Object
|
||||
|
||||
一个 feature 有 geometry 空间信息，properties 属性信息，其中 geometry 是必须字段
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {}
|
||||
}
|
||||
```
|
||||
|
||||
### Gemetry Object
|
||||
|
||||
支持 Gemetry Object 类型
|
||||
|
||||
#### Point
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "Point",
|
||||
"coordinates": [100.0, 0.0]
|
||||
}
|
||||
```
|
||||
|
||||
#### MultiPoint
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "MultiPoint",
|
||||
"coordinates": [
|
||||
[100.0, 0.0],
|
||||
[101.0, 1.0]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Line
|
||||
|
||||
#### LineSring
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[100.0, 0.0],
|
||||
[101.0, 1.0]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### MultiLineString
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "MultiLineString",
|
||||
"coordinates": [
|
||||
[
|
||||
[100.0, 0.0],
|
||||
[101.0, 1.0]
|
||||
],
|
||||
[
|
||||
[102.0, 2.0],
|
||||
[103.0, 3.0]
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Polygon
|
||||
|
||||
#### Polygon
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[100.0, 0.0],
|
||||
[101.0, 0.0],
|
||||
[101.0, 1.0],
|
||||
[100.0, 1.0],
|
||||
[100.0, 0.0]
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
With holes:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[-170.0, 10.0],
|
||||
[170.0, 10.0],
|
||||
[170.0, -10.0],
|
||||
[-170.0, -10.0],
|
||||
[-170.0, 10.0]
|
||||
],
|
||||
[
|
||||
[175.0, 5.0],
|
||||
[-175.0, 5.0],
|
||||
[-175.0, -5.0],
|
||||
[175.0, -5.0],
|
||||
[175.0, 5.0]
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### MultiPolygon
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "MultiPolygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
[102.0, 2.0],
|
||||
[103.0, 2.0],
|
||||
[103.0, 3.0],
|
||||
[102.0, 3.0],
|
||||
[102.0, 2.0]
|
||||
]
|
||||
],
|
||||
[
|
||||
[
|
||||
[100.0, 0.0],
|
||||
[101.0, 0.0],
|
||||
[101.0, 1.0],
|
||||
[100.0, 1.0],
|
||||
[100.0, 0.0]
|
||||
],
|
||||
[
|
||||
[100.2, 0.2],
|
||||
[100.8, 0.2],
|
||||
[100.8, 0.8],
|
||||
[100.2, 0.8],
|
||||
[100.2, 0.2]
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
[geojson 详细文档]()
|
||||
|
||||
## Geojson 相关的 JS 库
|
||||
|
||||
### 地理统计分析工具
|
||||
|
||||
[turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的Javascript 库
|
||||
|
||||
[turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的 Javascript 库
|
||||
|
||||
### 在线工具：
|
||||
|
||||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改GeoJSON数据
|
||||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改 GeoJSON 数据
|
||||
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的 geojson，还能够简化 GeoJSON 数据
|
||||
|
|
|
|||
|
|
@ -3,23 +3,18 @@ title: Source
|
|||
order: 0
|
||||
---
|
||||
|
||||
|
||||
# Source
|
||||
|
||||
|
||||
### 概述
|
||||
|
||||
source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
|
||||
|
||||
**parser:**
|
||||
|
||||
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。
|
||||
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json 等不同数据格式，栅格数据，包括 Raster，Image 数据。将来还会支持瓦片格式数据。
|
||||
|
||||
**transform**
|
||||
|
||||
数据转换，数据统计，网格布局，数据聚合等数据操作。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### parser
|
||||
|
|
@ -28,65 +23,61 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
|
|||
|
||||
- 矢量数据 支持 csv，geojson，json 三种数据类型
|
||||
|
||||
- 栅格数据 支持 image，Raster
|
||||
|
||||
|
||||
- 栅格数据 支持 image，Raster
|
||||
|
||||
#### geojson
|
||||
|
||||
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
|
||||
|
||||
不需要设置parser 参数
|
||||
不需要设置 parser 参数
|
||||
|
||||
```javascript
|
||||
layer.source(data)
|
||||
layer.source(data);
|
||||
```
|
||||
|
||||
|
||||
#### json
|
||||
|
||||
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
|
||||
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
|
||||
|
||||
**点数据**
|
||||
|
||||
x: 经度字段
|
||||
x: 经度字段
|
||||
|
||||
y: 纬度字段
|
||||
|
||||
```javascript
|
||||
const data = [
|
||||
{
|
||||
lng: 112.345,
|
||||
lat: 30.455,
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
lng: 114.345,
|
||||
lat: 31.455,
|
||||
value: 10,
|
||||
},
|
||||
];
|
||||
|
||||
const data = [{
|
||||
lng:112.345,
|
||||
lat:30.455,
|
||||
value: 10
|
||||
},{
|
||||
lng:114.345,
|
||||
lat:31.455,
|
||||
value: 10
|
||||
}
|
||||
]
|
||||
|
||||
layer.source(
|
||||
data,
|
||||
{
|
||||
parser: {
|
||||
type:'json',
|
||||
x:'lng',
|
||||
y:'lat',
|
||||
}
|
||||
})
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
**线段数据**
|
||||
|
||||
type: json
|
||||
type: json
|
||||
|
||||
这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标
|
||||
|
||||
x:经度字段 起点经度
|
||||
y:纬度字段 起点纬度
|
||||
x1:经度字段 终点经度
|
||||
y1:纬度字段 终点纬度
|
||||
x:经度字段 起点经度
|
||||
y:纬度字段 起点纬度
|
||||
x1:经度字段 终点经度
|
||||
y1:纬度字段 终点纬度
|
||||
|
||||
```javascript
|
||||
const data = [{
|
||||
|
|
@ -101,7 +92,7 @@ const data = [{
|
|||
lng2:112.345,
|
||||
lat2:30.455,
|
||||
value: 10
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
layer.source(
|
||||
|
|
@ -110,9 +101,9 @@ layer.source(
|
|||
parser:{
|
||||
type:'json',
|
||||
x:'lng1',
|
||||
y:'lat1' ,
|
||||
y:'lat1' ,
|
||||
x1:'lng1',
|
||||
y1:'lat2' ,
|
||||
y1:'lat2' ,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -120,125 +111,106 @@ layer.source(
|
|||
|
||||
**面数据**
|
||||
|
||||
需要指定coordinates 字段, coordinates据格式
|
||||
需要指定 coordinates 字段, coordinates 据格式
|
||||
|
||||
**注意面数据 coord 是三层数据结构**
|
||||
|
||||
```javascript
|
||||
[
|
||||
{
|
||||
type: 'Polygon',
|
||||
geometryCoord: [
|
||||
[
|
||||
[115.1806640625, 30.637912028341123],
|
||||
[114.9609375, 29.152161283318915],
|
||||
[117.79541015625001, 27.430289738862594],
|
||||
[118.740234375, 29.420460341013133],
|
||||
[117.46582031249999, 31.50362930577303],
|
||||
[115.1806640625, 30.637912028341123],
|
||||
],
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
[ {
|
||||
type: "Polygon",
|
||||
'geometryCoord': [
|
||||
[
|
||||
[
|
||||
115.1806640625,
|
||||
30.637912028341123
|
||||
],
|
||||
[
|
||||
114.9609375,
|
||||
29.152161283318915
|
||||
],
|
||||
[
|
||||
117.79541015625001,
|
||||
27.430289738862594
|
||||
],
|
||||
[
|
||||
118.740234375,
|
||||
29.420460341013133
|
||||
],
|
||||
[
|
||||
117.46582031249999,
|
||||
31.50362930577303
|
||||
],
|
||||
[
|
||||
115.1806640625,
|
||||
30.637912028341123
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
layer.source(data,{
|
||||
parser:{
|
||||
type:'json',
|
||||
coordinates:'geometryCoord'
|
||||
}
|
||||
})
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'geometryCoord',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### csv
|
||||
点，线数据配置项同json数据类型
|
||||
|
||||
点，线数据配置项同 json 数据类型
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng1',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
**栅格数据类型\*\***
|
||||
|
||||
#### image
|
||||
|
||||
根据图片的经纬度范围，将图片添加到地图上。 配置项
|
||||
|
||||
- type: image
|
||||
- extent: 图像的经纬度范围 []
|
||||
|
||||
```javascript
|
||||
layer.source(
|
||||
data,
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
|
||||
{
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:'lng1',
|
||||
y:'lat1' ,
|
||||
x1:'lng1',
|
||||
y1:'lat2' ,
|
||||
}
|
||||
})
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [121.168, 30.2828, 121.384, 30.4219],
|
||||
},
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
**栅格数据类型****
|
||||
|
||||
#### image
|
||||
根据图片的经纬度范围，将图片添加到地图上。 配置项
|
||||
|
||||
- type: image
|
||||
- extent: 图像的经纬度范围 []
|
||||
|
||||
```javascript
|
||||
layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
|
||||
parser:{
|
||||
type:'image',
|
||||
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
|
||||
}
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
#### raster
|
||||
栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项
|
||||
|
||||
栅格数据类型，主要表示遥感数据类型 data 栅格数据的二维矩阵数据 parser 配置项
|
||||
|
||||
- type raster
|
||||
- width 数据宽度二维矩阵 columns
|
||||
- width 数据宽度二维矩阵 columns
|
||||
- height 数据高度
|
||||
- min 数据最大值
|
||||
- max 数据最小值
|
||||
- extent 经纬度范围
|
||||
|
||||
```javascript
|
||||
source(values, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width: n,
|
||||
height: m,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
|
||||
}
|
||||
})
|
||||
source(values, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width: n,
|
||||
height: m,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### transforms
|
||||
目前支持三种数据处理方法 map，grid，hexagon transform配置项
|
||||
|
||||
目前支持三种数据处理方法 map，grid，hexagon transform 配置项
|
||||
|
||||
- type 数据处理类型
|
||||
- tansform cfg 数据处理配置项
|
||||
|
||||
- tansform cfg 数据处理配置项
|
||||
|
||||
#### map
|
||||
数据处理，支持自定义callback函数
|
||||
|
||||
数据处理，支持自定义 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,23 +3,18 @@ title: Source
|
|||
order: 0
|
||||
---
|
||||
|
||||
|
||||
# Source
|
||||
|
||||
|
||||
### 概述
|
||||
|
||||
source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
|
||||
|
||||
**parser:**
|
||||
|
||||
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。
|
||||
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json 等不同数据格式，栅格数据，包括 Raster，Image 数据。将来还会支持瓦片格式数据。
|
||||
|
||||
**transform:**
|
||||
|
||||
数据转换，数据统计，网格布局，数据聚合等数据操作。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### parser
|
||||
|
|
@ -28,65 +23,61 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
|
|||
|
||||
- 矢量数据 支持 csv，geojson，json 三种数据类型
|
||||
|
||||
- 栅格数据 支持 image，Raster
|
||||
|
||||
|
||||
- 栅格数据 支持 image，Raster
|
||||
|
||||
#### geojson
|
||||
|
||||
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
|
||||
|
||||
不需要设置parser 参数
|
||||
不需要设置 parser 参数
|
||||
|
||||
```javascript
|
||||
layer.source(data);
|
||||
```
|
||||
|
||||
|
||||
#### json
|
||||
|
||||
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
|
||||
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
|
||||
|
||||
**点数据**
|
||||
|
||||
x: 经度字段
|
||||
x: 经度字段
|
||||
|
||||
y: 纬度字段
|
||||
|
||||
```javascript
|
||||
const data = [
|
||||
{
|
||||
lng: 112.345,
|
||||
lat: 30.455,
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
lng: 114.345,
|
||||
lat: 31.455,
|
||||
value: 10,
|
||||
},
|
||||
];
|
||||
|
||||
const data = [{
|
||||
lng:112.345,
|
||||
lat:30.455,
|
||||
value: 10
|
||||
},{
|
||||
lng:114.345,
|
||||
lat:31.455,
|
||||
value: 10
|
||||
}
|
||||
]
|
||||
|
||||
layer.source(
|
||||
data,
|
||||
{
|
||||
parser: {
|
||||
type:'json',
|
||||
x:'lng',
|
||||
y:'lat',
|
||||
}
|
||||
})
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
**线段数据**
|
||||
|
||||
type: json
|
||||
type: json
|
||||
|
||||
这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标
|
||||
|
||||
x:经度字段 起点经度
|
||||
y:纬度字段 起点纬度
|
||||
x1:经度字段 终点经度
|
||||
y1:纬度字段 终点纬度
|
||||
x:经度字段 起点经度
|
||||
y:纬度字段 起点纬度
|
||||
x1:经度字段 终点经度
|
||||
y1:纬度字段 终点纬度
|
||||
|
||||
```javascript
|
||||
const data = [{
|
||||
|
|
@ -102,7 +93,7 @@ const data = [{
|
|||
lng2:112.345,
|
||||
lat2:30.455,
|
||||
value: 10
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
layer.source(
|
||||
|
|
@ -111,9 +102,9 @@ layer.source(
|
|||
parser:{
|
||||
type:'json',
|
||||
x:'lng1',
|
||||
y:'lat1' ,
|
||||
y:'lat1' ,
|
||||
x1:'lng1',
|
||||
y1:'lat2' ,
|
||||
y1:'lat2' ,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -121,179 +112,158 @@ layer.source(
|
|||
|
||||
**面数据**
|
||||
|
||||
需要指定coordinates 字段, coordinates据格式
|
||||
需要指定 coordinates 字段, coordinates 据格式
|
||||
|
||||
**注意面数据 coord 是三层数据结构**
|
||||
|
||||
```javascript
|
||||
[
|
||||
{
|
||||
type: 'Polygon',
|
||||
geometryCoord: [
|
||||
[
|
||||
[115.1806640625, 30.637912028341123],
|
||||
[114.9609375, 29.152161283318915],
|
||||
[117.79541015625001, 27.430289738862594],
|
||||
[118.740234375, 29.420460341013133],
|
||||
[117.46582031249999, 31.50362930577303],
|
||||
[115.1806640625, 30.637912028341123],
|
||||
],
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
[ {
|
||||
type: "Polygon",
|
||||
'geometryCoord': [
|
||||
[
|
||||
[
|
||||
115.1806640625,
|
||||
30.637912028341123
|
||||
],
|
||||
[
|
||||
114.9609375,
|
||||
29.152161283318915
|
||||
],
|
||||
[
|
||||
117.79541015625001,
|
||||
27.430289738862594
|
||||
],
|
||||
[
|
||||
118.740234375,
|
||||
29.420460341013133
|
||||
],
|
||||
[
|
||||
117.46582031249999,
|
||||
31.50362930577303
|
||||
],
|
||||
[
|
||||
115.1806640625,
|
||||
30.637912028341123
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
layer.source(data,{
|
||||
parser:{
|
||||
type:'json',
|
||||
coordinates:'geometryCoord'
|
||||
}
|
||||
});
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'geometryCoord',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### csv
|
||||
点，线数据配置项同json数据类型
|
||||
|
||||
点，线数据配置项同 json 数据类型
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng1',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
**栅格数据类型\*\***
|
||||
|
||||
#### image
|
||||
|
||||
根据图片的经纬度范围，将图片添加到地图上。 配置项
|
||||
|
||||
- type: image
|
||||
- extent: 图像的经纬度范围 []
|
||||
|
||||
```javascript
|
||||
layer.source(
|
||||
data,
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
|
||||
{
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:'lng1',
|
||||
y:'lat1' ,
|
||||
x1:'lng1',
|
||||
y1:'lat2' ,
|
||||
}
|
||||
})
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [121.168, 30.2828, 121.384, 30.4219],
|
||||
},
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
**栅格数据类型****
|
||||
|
||||
#### image
|
||||
根据图片的经纬度范围，将图片添加到地图上。 配置项
|
||||
|
||||
- type: image
|
||||
- extent: 图像的经纬度范围 []
|
||||
|
||||
```javascript
|
||||
layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
|
||||
parser:{
|
||||
type:'image',
|
||||
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### raster
|
||||
栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项
|
||||
|
||||
栅格数据类型，主要表示遥感数据类型 data 栅格数据的二维矩阵数据 parser 配置项
|
||||
|
||||
- type raster
|
||||
- width 数据宽度二维矩阵 columns
|
||||
- width 数据宽度二维矩阵 columns
|
||||
- height 数据高度
|
||||
- min 数据最大值
|
||||
- max 数据最小值
|
||||
- extent 经纬度范围
|
||||
|
||||
```javascript
|
||||
source(values, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width: n,
|
||||
height: m,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
|
||||
}
|
||||
});
|
||||
source(values, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width: n,
|
||||
height: m,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### transforms
|
||||
|
||||
目前支持三种数据处理方法 map，grid，hexagon transform配置项
|
||||
目前支持三种数据处理方法 map，grid，hexagon transform 配置项
|
||||
|
||||
- type 数据处理类型
|
||||
- tansform cfg 数据处理配置项
|
||||
|
||||
- tansform cfg 数据处理配置项
|
||||
|
||||
#### map
|
||||
数据处理，支持自定义callback函数
|
||||
|
||||
数据处理，支持自定义 callback 函数
|
||||
|
||||
- callback:function 回调函数
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
transforms:[
|
||||
{
|
||||
type: 'map',
|
||||
callback:function(item){
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat*1;
|
||||
item.lng = item.lng*1;
|
||||
item.v = item.v *1;
|
||||
item.coordinates = [x*1,y*1];
|
||||
return item;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
layer.source(data, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'map',
|
||||
callback: function(item) {
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat * 1;
|
||||
item.lng = item.lng * 1;
|
||||
item.v = item.v * 1;
|
||||
item.coordinates = [x * 1, y * 1];
|
||||
return item;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### 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, {
|
||||
transforms:[
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
],
|
||||
})
|
||||
layer.source(data, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### hexagon
|
||||
|
||||
生成六边形网格布局，根据数据字段统计
|
||||
|
||||
- type: 'hexagon',
|
||||
- size: 网格半径
|
||||
- field: 数据统计字段
|
||||
- method:聚合方法 count,max,min,sum,mean5个统计维度
|
||||
- type: 'hexagon',
|
||||
- size: 网格半径
|
||||
- field: 数据统计字段
|
||||
- method:聚合方法 count,max,min,sum,mean5 个统计维度
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ order: 0
|
|||
### 初始化 L7 Scene
|
||||
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.GaodeMap({
|
||||
|
|
@ -54,7 +54,7 @@ order: 0
|
|||
- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据
|
||||
- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ order: 0
|
|||
### 初始化 L7 Scene
|
||||
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.GaodeMap({
|
||||
|
|
@ -54,7 +54,7 @@ order: 0
|
|||
- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据
|
||||
- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
|
|
|
|||
|
|
@ -39,7 +39,8 @@ order: 0
|
|||
### 初始化 L7 Scene
|
||||
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.Mapbox({
|
||||
|
|
@ -62,7 +63,7 @@ order: 0
|
|||
- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据
|
||||
- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
|
|
|
|||
|
|
@ -39,9 +39,7 @@ order: 0
|
|||
### 初始化 L7 Scene
|
||||
|
||||
|
||||
``` javascript
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.Mapbox({
|
||||
|
|
@ -63,7 +61,7 @@ order: 0
|
|||
|
||||
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
|
|
|
|||
|
|
@ -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,11 +68,10 @@ function addChart() {
|
|||
chart.render();
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
});
|
||||
}).setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -90,11 +90,10 @@ function addChart() {
|
|||
chart.render();
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
});
|
||||
}).setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,11 +101,10 @@ Promise.all([
|
|||
.color('type', [ '#5CCEA1', '#5B8FF9' ])
|
||||
.opacity(1);
|
||||
chart.render();
|
||||
const marker = new Marker({ element: el })
|
||||
.setLnglat({
|
||||
lng: coord[0],
|
||||
lat: coord[1]
|
||||
});
|
||||
const marker = new Marker({ element: el }).setLnglat({
|
||||
lng: coord[0],
|
||||
lat: coord[1]
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,25 +9,26 @@ 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'
|
||||
}
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
}).shape('circle')
|
||||
.size('unit_price', [ 5, 25 ])
|
||||
.color('name', [ '#49B5AD', '#5B8FF9' ])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
});
|
||||
.shape('circle')
|
||||
.size('unit_price', [ 5, 25 ])
|
||||
.color('name', [ '#49B5AD', '#5B8FF9' ])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
const overlayers = {
|
||||
|
|
@ -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',
|
||||
});
|
||||
expect(result.dataArray.length).toEqual(3);
|
||||
if (result.featureKeys) {
|
||||
expect(Object.keys(result.featureKeys)).toEqual([
|
||||
'408534',
|
||||
'410464',
|
||||
'431974',
|
||||
]);
|
||||
}
|
||||
it('parser multiPolygon', () => {
|
||||
const result = geojson(multiPolygon);
|
||||
expect(result.dataArray.length).toEqual(11);
|
||||
expect(result.dataArray[0]._id).toEqual(0);
|
||||
});
|
||||
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);
|
||||
}
|
||||
const dataItem: IParseDataItem = {
|
||||
...currentFeature.properties,
|
||||
coordinates: coord,
|
||||
_id: id,
|
||||
};
|
||||
resultData.push(dataItem);
|
||||
},
|
||||
);
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -25,16 +25,16 @@ 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',
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 114.050008, 22.529272 ],
|
||||
zoom: 14.1
|
||||
})
|
||||
center: [114.050008, 22.529272],
|
||||
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() {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default class Point3D extends React.Component {
|
|||
'#D42F31',
|
||||
'#730D1C',
|
||||
])
|
||||
.shape('subregion',[
|
||||
.shape('subregion', [
|
||||
'circle',
|
||||
'triangle',
|
||||
'square',
|
||||
|
|
|
|||
|
|
@ -17,42 +17,42 @@ export default class Column extends React.Component {
|
|||
map: new GaodeMap({
|
||||
pitch: 66.02383,
|
||||
style: 'dark',
|
||||
center: [ 121.400257, 31.25287 ],
|
||||
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 => {
|
||||
return [ 6, 6, h / 500];
|
||||
.size('unit_price', (h) => {
|
||||
return [6, 6, h / 500];
|
||||
})
|
||||
.color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])
|
||||
.color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -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