mirror of https://gitee.com/antv-l7/antv-l7
Merge pull request #114 from antvis/source
fix(parser): fix multipolygom parser
This commit is contained in:
@thinkinggis
GitHub
commit
6f9491e637
|
|
@ -62,7 +62,7 @@ new Scene({
|
|||
```
|
||||
### Add Layer
|
||||
|
||||
``` javascript
|
||||
```javascript
|
||||
|
||||
import { PointLayer } from '@antv/l7';
|
||||
const pointLayer = new PointLayer()
|
||||
|
|
|
|||
|
|
@ -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 数据
|
||||
|
|
|
|||
|
|
@ -2,26 +2,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())
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 107.77791556935472, 35.443286920228644 ],
|
||||
zoom: 2.9142882493605033
|
||||
})
|
||||
center: [107.77791556935472, 35.443286920228644],
|
||||
zoom: 2.9142882493605033,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
|
|
@ -21,15 +21,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
|||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
blur: 0.99
|
||||
blur: 0.99,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,27 +5,27 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
center: [103.83735604457024, 1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313
|
||||
})
|
||||
rotation: 19.313180925794313,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
coordinates: 'path',
|
||||
type: 'json'
|
||||
}
|
||||
type: 'json',
|
||||
},
|
||||
})
|
||||
.size('level', level => {
|
||||
return [ 1.0, level * 1 ];
|
||||
.size('level', (level) => {
|
||||
return [1.0, level * 1];
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
|
|
@ -40,8 +40,8 @@ fetch(
|
|||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
].slice(0, 8)
|
||||
'#FFF3FC',
|
||||
].slice(0, 8),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,25 +6,25 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4
|
||||
})
|
||||
center: [104.288144, 31.239692],
|
||||
zoom: 4.4,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
y: 'w',
|
||||
},
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
return [1, 2, level * 2 + 20];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
|
|
@ -36,10 +36,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
|||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
'#CEF8D6',
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,40 +6,40 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 43,
|
||||
center: [ 120.13383079335335, 29.651873105004427 ],
|
||||
zoom: 7.068989519212174
|
||||
})
|
||||
center: [120.13383079335335, 29.651873105004427],
|
||||
zoom: 7.068989519212174,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 2500,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('sum', sum => {
|
||||
.size('sum', (sum) => {
|
||||
return sum * 200;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
})
|
||||
.color('sum', [
|
||||
'#094D4A',
|
||||
|
|
@ -53,7 +53,7 @@ fetch(
|
|||
'#A1EDB8',
|
||||
'#C3F9CC',
|
||||
'#DEFAC0',
|
||||
'#ECFFB1'
|
||||
'#ECFFB1',
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,27 +4,27 @@ import { GaodeMap } from '@antv/l7-maps';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 121.417463, 31.215175 ],
|
||||
center: [121.417463, 31.215175],
|
||||
pitch: 0,
|
||||
zoom: 11
|
||||
})
|
||||
zoom: 11,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
x: 'lng',
|
||||
},
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 64.88,
|
||||
style: 'dark',
|
||||
center: [ 114.060288, 22.53684 ],
|
||||
zoom: 15.63
|
||||
})
|
||||
center: [114.060288, 22.53684],
|
||||
zoom: 15.63,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data)
|
||||
.size(2)
|
||||
|
|
@ -29,10 +29,10 @@ fetch(
|
|||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
'#D7F9F0',
|
||||
])
|
||||
.style({
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
|
|||
|
|
@ -6,39 +6,39 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
center: [107.054293, 35.246265],
|
||||
zoom: 4.056,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 20000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('count', value => {
|
||||
.size('count', (value) => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
angle: 0,
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
|
|
@ -56,8 +56,8 @@ fetch(
|
|||
'#30C7C4',
|
||||
'#6BD5A0',
|
||||
'#A7ECB2',
|
||||
'#D0F4CA'
|
||||
].reverse()
|
||||
'#D0F4CA',
|
||||
].reverse(),
|
||||
);
|
||||
|
||||
scene.addLayer(layer);
|
||||
|
|
|
|||
|
|
@ -6,39 +6,39 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
center: [110.097892, 33.853662],
|
||||
zoom: 4.056,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('count', value => {
|
||||
.size('count', (value) => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
angle: 0,
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
|
|
@ -48,8 +48,8 @@ fetch(
|
|||
'#FFF598',
|
||||
'#FF40F3',
|
||||
'#9415FF',
|
||||
'#421EB2'
|
||||
].reverse()
|
||||
'#421EB2',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,39 +6,39 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
center: [110.097892, 33.853662],
|
||||
zoom: 4.056,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 20000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('count', value => {
|
||||
.size('count', (value) => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('circle')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0
|
||||
angle: 0,
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
|
|
@ -54,8 +54,8 @@ fetch(
|
|||
'#F77B00',
|
||||
'#ED9909',
|
||||
'#ECC357',
|
||||
'#EDE59C'
|
||||
].reverse()
|
||||
'#EDE59C',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,39 +6,39 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
center: [110.097892, 33.853662],
|
||||
zoom: 4.056,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('count', value => {
|
||||
.size('count', (value) => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
angle: 0,
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
|
|
@ -50,8 +50,8 @@ fetch(
|
|||
'#46F3FF',
|
||||
'#02BEFF',
|
||||
'#1A7AFF',
|
||||
'#0A1FB2'
|
||||
].reverse()
|
||||
'#0A1FB2',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
zoom: 2.632456779444394
|
||||
})
|
||||
center: [127.5671666579043, 7.445038892195569],
|
||||
zoom: 2.632456779444394,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.shape('heatmap')
|
||||
.size('mag', [ 0, 1.0 ]) // weight映射通道
|
||||
.size('mag', [0, 1.0]) // weight映射通道
|
||||
.style({
|
||||
intensity: 2,
|
||||
radius: 20,
|
||||
|
|
@ -31,10 +31,10 @@ fetch(
|
|||
'#FFF598',
|
||||
'#91EABC',
|
||||
'#2EA9A1',
|
||||
'#206C7C'
|
||||
'#206C7C',
|
||||
].reverse(),
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 58.5,
|
||||
center: [ 111.8759, 30.6942 ],
|
||||
center: [111.8759, 30.6942],
|
||||
rotation: 0.519,
|
||||
zoom: 3.6116
|
||||
})
|
||||
zoom: 3.6116,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.size('capacity', [ 0, 1 ])
|
||||
.size('capacity', [0, 1])
|
||||
.shape('heatmap3D')
|
||||
// weight映射通道
|
||||
.style({
|
||||
|
|
@ -33,10 +33,10 @@ fetch(
|
|||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49'
|
||||
'#CF1D49',
|
||||
],
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
zoom: 2.632456779444394
|
||||
})
|
||||
center: [127.5671666579043, 7.445038892195569],
|
||||
zoom: 2.632456779444394,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.shape('heatmap')
|
||||
.size('mag', [ 0, 1.0 ]) // weight映射通道
|
||||
.size('mag', [0, 1.0]) // weight映射通道
|
||||
.style({
|
||||
intensity: 2,
|
||||
radius: 20,
|
||||
|
|
@ -31,10 +31,10 @@ fetch(
|
|||
'#FFF598',
|
||||
'#F27DEB',
|
||||
'#8C1EB2',
|
||||
'#421EB2'
|
||||
'#421EB2',
|
||||
].reverse(),
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,33 +6,33 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 47.49999999999995,
|
||||
center: [ 112.50447776627743, 30.830476390931125 ],
|
||||
zoom: 3.9879693680088626
|
||||
})
|
||||
center: [112.50447776627743, 30.830476390931125],
|
||||
zoom: 3.9879693680088626,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 17000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('sum', value => {
|
||||
.size('sum', (value) => {
|
||||
return value * 20;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
|
|
@ -44,12 +44,12 @@ fetch(
|
|||
'#FFF598',
|
||||
'#FF40F3',
|
||||
'#9415FF',
|
||||
'#421EB2'
|
||||
].reverse()
|
||||
'#421EB2',
|
||||
].reverse(),
|
||||
)
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0
|
||||
angle: 0,
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 56.499,
|
||||
center: [ 114.07737552216226, 22.542656745583486 ],
|
||||
center: [114.07737552216226, 22.542656745583486],
|
||||
rotation: 39.19,
|
||||
zoom: 12.47985
|
||||
})
|
||||
zoom: 12.47985,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
transforms: [
|
||||
|
|
@ -24,16 +24,16 @@ fetch(
|
|||
type: 'hexagon',
|
||||
size: 100,
|
||||
field: 'h12',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('sum', [ 0, 600 ])
|
||||
.size('sum', [0, 600])
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
|
|
@ -47,8 +47,8 @@ fetch(
|
|||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
].reverse()
|
||||
'#CEF8D6',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,40 +6,40 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 43,
|
||||
center: [ 120.13383079335335, 29.651873105004427 ],
|
||||
zoom: 7.068989519212174
|
||||
})
|
||||
center: [120.13383079335335, 29.651873105004427],
|
||||
zoom: 7.068989519212174,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 2500,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('sum', sum => {
|
||||
.size('sum', (sum) => {
|
||||
return sum * 200;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
})
|
||||
.color('sum', [
|
||||
'#094D4A',
|
||||
|
|
@ -53,7 +53,7 @@ fetch(
|
|||
'#A1EDB8',
|
||||
'#C3F9CC',
|
||||
'#DEFAC0',
|
||||
'#ECFFB1'
|
||||
'#ECFFB1',
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 104.995156, 31.450658 ],
|
||||
zoom: 3.79
|
||||
})
|
||||
center: [104.995156, 31.450658],
|
||||
zoom: 3.79,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
transforms: [
|
||||
|
|
@ -23,18 +23,18 @@ fetch(
|
|||
type: 'hexagon',
|
||||
size: 90000,
|
||||
field: 'capacity',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('sum', value => {
|
||||
.size('sum', (value) => {
|
||||
return value * 50;
|
||||
})
|
||||
.shape('hexagon')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
|
|
@ -50,8 +50,8 @@ fetch(
|
|||
'#0F62FF',
|
||||
'#30B2E9',
|
||||
'#30B2E9',
|
||||
'#40C4CE'
|
||||
].reverse()
|
||||
'#40C4CE',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 107.77791556935472, 35.443286920228644 ],
|
||||
zoom: 2.9142882493605033
|
||||
})
|
||||
center: [107.77791556935472, 35.443286920228644],
|
||||
zoom: 2.9142882493605033,
|
||||
}),
|
||||
});
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
|
|
@ -20,15 +20,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
|||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('greatcircle')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
blur: 0.99
|
||||
blur: 0.99,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@ const scene = new Scene({
|
|||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [ -74.06967, 40.720399 ],
|
||||
zoom: 12.45977
|
||||
})
|
||||
center: [-74.06967, 40.720399],
|
||||
zoom: 12.45977,
|
||||
}),
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv',
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
|
|
@ -23,15 +23,15 @@ fetch(
|
|||
x: 'start station longitude',
|
||||
y: 'start station latitude',
|
||||
x1: 'end station longitude',
|
||||
y1: 'end station latitude'
|
||||
}
|
||||
y1: 'end station latitude',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc3d')
|
||||
.color('#0C47BF')
|
||||
.style({
|
||||
opacity: 1,
|
||||
blur: 0.9
|
||||
blur: 0.9,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
pitch: 60,
|
||||
style: 'dark',
|
||||
center: [ 104.34278, 41.12554 ],
|
||||
center: [104.34278, 41.12554],
|
||||
zoom: 2.94888,
|
||||
rotation: 42.3999
|
||||
})
|
||||
rotation: 42.3999,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
|
|
@ -22,14 +22,14 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
|||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc3d')
|
||||
.color('#FF7C6A')
|
||||
.style({
|
||||
opacity: 0.8
|
||||
opacity: 0.8,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,22 +6,22 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 53.6305,
|
||||
style: 'light',
|
||||
center: [ 102.600579, 23.114887 ],
|
||||
zoom: 14.66
|
||||
})
|
||||
center: [102.600579, 23.114887],
|
||||
zoom: 14.66,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size('ELEV', h => {
|
||||
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];
|
||||
.size('ELEV', (h) => {
|
||||
return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];
|
||||
})
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize'
|
||||
type: 'quantize',
|
||||
})
|
||||
.color(
|
||||
'ELEV',
|
||||
|
|
@ -35,8 +35,8 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
|||
'#C8D7F5',
|
||||
'#A5C1FC',
|
||||
'#7FA7F9',
|
||||
'#5F8AE5'
|
||||
].reverse()
|
||||
'#5F8AE5',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,22 +6,22 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 26.842105263157915,
|
||||
style: 'dark',
|
||||
center: [ 102.599436, 23.116371 ],
|
||||
zoom: 14.78
|
||||
})
|
||||
center: [102.599436, 23.116371],
|
||||
zoom: 14.78,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size('ELEV', h => {
|
||||
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];
|
||||
.size('ELEV', (h) => {
|
||||
return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];
|
||||
})
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize'
|
||||
type: 'quantize',
|
||||
})
|
||||
.color('ELEV', [
|
||||
'#094D4A',
|
||||
|
|
@ -33,7 +33,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
|||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
'#CEF8D6',
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,22 +6,22 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 104.117492, 36.492696 ],
|
||||
zoom: 3.89
|
||||
})
|
||||
center: [104.117492, 36.492696],
|
||||
zoom: 3.89,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.scale('value', {
|
||||
type: 'quantile'
|
||||
type: 'quantile',
|
||||
})
|
||||
.size('value', [ 0.5, 1, 1.5, 2 ])
|
||||
.size('value', [0.5, 1, 1.5, 2])
|
||||
.shape('line')
|
||||
.color(
|
||||
'value',
|
||||
|
|
@ -35,8 +35,8 @@ fetch(
|
|||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
].reverse()
|
||||
'#D7F9F0',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,22 +6,22 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 104.117492, 36.492696 ],
|
||||
zoom: 3.89
|
||||
})
|
||||
center: [104.117492, 36.492696],
|
||||
zoom: 3.89,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.scale('value', {
|
||||
type: 'quantile'
|
||||
type: 'quantile',
|
||||
})
|
||||
.size('value', [ 0.5, 1, 1.5, 2 ])
|
||||
.size('value', [0.5, 1, 1.5, 2])
|
||||
.shape('line')
|
||||
.color(
|
||||
'value',
|
||||
|
|
@ -35,8 +35,8 @@ fetch(
|
|||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
].reverse()
|
||||
'#D7F9F0',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,28 +4,28 @@ import { Mapbox } from '@antv/l7-maps';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [ 103.83735, 1.3602538 ],
|
||||
center: [103.83735, 1.3602538],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
style: 'dark'
|
||||
})
|
||||
style: 'dark',
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'path'
|
||||
}
|
||||
coordinates: 'path',
|
||||
},
|
||||
})
|
||||
.size('level', level => {
|
||||
return [ 0.8, level * 1 ];
|
||||
.size('level', (level) => {
|
||||
return [0.8, level * 1];
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
|
|
@ -40,8 +40,8 @@ fetch(
|
|||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
].slice(0, 8)
|
||||
'#FFF3FC',
|
||||
].slice(0, 8),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,28 +4,28 @@ import { Mapbox } from '@antv/l7-maps';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
center: [103.83735604457024, 1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
style: 'light'
|
||||
})
|
||||
style: 'light',
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'path'
|
||||
}
|
||||
coordinates: 'path',
|
||||
},
|
||||
})
|
||||
.size('level', level => {
|
||||
return [ 0.8, level * 1 ];
|
||||
.size('level', (level) => {
|
||||
return [0.8, level * 1];
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
|
|
@ -40,10 +40,10 @@ fetch(
|
|||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
'#D7F9F0',
|
||||
]
|
||||
.reverse()
|
||||
.slice(0, 8)
|
||||
.slice(0, 8),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,23 +4,23 @@ import { Mapbox } from '@antv/l7-maps';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
center: [116.3956, 39.9392],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
style: 'dark'
|
||||
})
|
||||
style: 'dark',
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(1.5)
|
||||
.shape('line')
|
||||
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]);
|
||||
.color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16']);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,23 +4,23 @@ import { Mapbox } from '@antv/l7-maps';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
center: [116.3956, 39.9392],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
style: 'light'
|
||||
})
|
||||
style: 'light',
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(1.5)
|
||||
.shape('line')
|
||||
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]);
|
||||
.color('标准名称', ['#5B8FF9', '#5CCEA1', '#5D7092']);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,23 +6,23 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 121.435159, 31.256971 ],
|
||||
center: [121.435159, 31.256971],
|
||||
zoom: 14.89,
|
||||
minZoom: 10
|
||||
})
|
||||
minZoom: 10,
|
||||
}),
|
||||
});
|
||||
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', [
|
||||
'circle',
|
||||
|
|
@ -33,13 +33,13 @@ fetch(
|
|||
'octogon',
|
||||
'hexagram',
|
||||
'rhombus',
|
||||
'vesica'
|
||||
'vesica',
|
||||
])
|
||||
.size('unit_price', [ 10, 25 ])
|
||||
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
|
||||
.size('unit_price', [10, 25])
|
||||
.color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 2
|
||||
strokeWidth: 2,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
|
|||
|
|
@ -7,27 +7,27 @@ const scene = new Scene({
|
|||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 140.067171, 36.26186 ],
|
||||
center: [140.067171, 36.26186],
|
||||
zoom: 5.32,
|
||||
maxZoom: 10
|
||||
})
|
||||
maxZoom: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data)
|
||||
.shape('circle')
|
||||
.size('mag', [ 1, 25 ])
|
||||
.color('mag', mag => {
|
||||
.size('mag', [1, 25])
|
||||
.color('mag', (mag) => {
|
||||
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
|
||||
})
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
strokeWidth: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
|
|||
|
|
@ -5,24 +5,24 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ -121.24357, 37.58264 ],
|
||||
center: [-121.24357, 37.58264],
|
||||
pitch: 0,
|
||||
zoom: 6.45
|
||||
})
|
||||
zoom: 6.45,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv',
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'Longitude',
|
||||
y: 'Latitude'
|
||||
}
|
||||
y: 'Latitude',
|
||||
},
|
||||
})
|
||||
.shape('circle')
|
||||
.size(4)
|
||||
|
|
@ -36,11 +36,11 @@ fetch(
|
|||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
'#D7F9F0',
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
strokeWidth: 0,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
|
|||
|
|
@ -6,34 +6,34 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 96.99215001469588, 29.281597225674773 ],
|
||||
center: [96.99215001469588, 29.281597225674773],
|
||||
zoom: 2.194613775109773,
|
||||
maxZoom: 10
|
||||
})
|
||||
maxZoom: 10,
|
||||
}),
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.features = data.features.filter(item => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.features = data.features.filter((item) => {
|
||||
return item.properties.capacity > 800;
|
||||
});
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data)
|
||||
.shape('circle')
|
||||
.size('capacity', [ 0, 16 ])
|
||||
.size('capacity', [0, 16])
|
||||
.color('capacity', [
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
'#CEF8D6',
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
strokeWidth: 0,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
|
|||
|
|
@ -6,21 +6,20 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
center: [2.6125016864608597, 49.359131],
|
||||
pitch: 0,
|
||||
zoom: 4.19
|
||||
})
|
||||
zoom: 4.19,
|
||||
}),
|
||||
});
|
||||
addChart();
|
||||
scene.render();
|
||||
|
||||
|
||||
function addChart() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach(function(item) {
|
||||
const el = document.createElement('div');
|
||||
const total =
|
||||
|
|
@ -34,18 +33,18 @@ function addChart() {
|
|||
{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
percent: item.gdp.Agriculture / total,
|
||||
},
|
||||
{
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
percent: item.gdp.Industry / total,
|
||||
},
|
||||
{
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}
|
||||
percent: item.gdp.Service / total,
|
||||
},
|
||||
];
|
||||
|
||||
const chart = new G2.Chart({
|
||||
|
|
@ -53,27 +52,26 @@ function addChart() {
|
|||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
padding: 0,
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.tooltip(false);
|
||||
chart.axis('count', {
|
||||
grid: false
|
||||
grid: false,
|
||||
});
|
||||
chart
|
||||
.interval()
|
||||
.position('item*count')
|
||||
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
|
||||
.color('item', ['#5CCEA1', '#5D7092', '#5B8FF9'])
|
||||
.opacity(1);
|
||||
chart.render();
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
});
|
||||
element: el,
|
||||
}).setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1],
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
center: [2.6125016864608597, 49.359131],
|
||||
pitch: 0,
|
||||
zoom: 4.19
|
||||
})
|
||||
zoom: 4.19,
|
||||
}),
|
||||
});
|
||||
addChart();
|
||||
scene.render();
|
||||
|
||||
function addChart() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach(function(item) {
|
||||
const el = document.createElement('div');
|
||||
const total =
|
||||
|
|
@ -33,18 +33,18 @@ function addChart() {
|
|||
{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
percent: item.gdp.Agriculture / total,
|
||||
},
|
||||
{
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
percent: item.gdp.Industry / total,
|
||||
},
|
||||
{
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}
|
||||
percent: item.gdp.Service / total,
|
||||
},
|
||||
];
|
||||
|
||||
const sliceNumber = 0.02;
|
||||
|
|
@ -54,19 +54,19 @@ function addChart() {
|
|||
draw: function draw(cfg, container) {
|
||||
const points = cfg.points;
|
||||
let path = [];
|
||||
path.push([ 'M', points[0].x, points[0].y ]);
|
||||
path.push([ 'L', points[1].x, points[1].y - sliceNumber ]);
|
||||
path.push([ 'L', points[2].x, points[2].y - sliceNumber ]);
|
||||
path.push([ 'L', points[3].x, points[3].y ]);
|
||||
path.push(['M', points[0].x, points[0].y]);
|
||||
path.push(['L', points[1].x, points[1].y - sliceNumber]);
|
||||
path.push(['L', points[2].x, points[2].y - sliceNumber]);
|
||||
path.push(['L', points[3].x, points[3].y]);
|
||||
path.push('Z');
|
||||
path = this.parsePath(path);
|
||||
return container.addShape('path', {
|
||||
attrs: {
|
||||
fill: cfg.color,
|
||||
path
|
||||
}
|
||||
path,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const chart = new G2.Chart({
|
||||
|
|
@ -74,27 +74,26 @@ function addChart() {
|
|||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
padding: 0,
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.coord('theta', {
|
||||
innerRadius: 0.6
|
||||
innerRadius: 0.6,
|
||||
});
|
||||
chart.tooltip(false);
|
||||
chart
|
||||
.intervalStack()
|
||||
.position('percent')
|
||||
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
|
||||
.color('item', ['#5CCEA1', '#5D7092', '#5B8FF9'])
|
||||
.shape('sliceShape');
|
||||
chart.render();
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
});
|
||||
element: el,
|
||||
}).setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1],
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -40,70 +40,71 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 52.21496184144132, 24.121126851768906 ],
|
||||
zoom: 3.802
|
||||
})
|
||||
center: [52.21496184144132, 24.121126851768906],
|
||||
zoom: 3.802,
|
||||
}),
|
||||
});
|
||||
Promise.all([
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
|
||||
).then(d => d.json()),
|
||||
'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json',
|
||||
).then((d) => d.json()),
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
|
||||
).then(d => d.json())
|
||||
]).then(function onLoad([ center, population ]) {
|
||||
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json',
|
||||
).then((d) => d.json()),
|
||||
]).then(function onLoad([center, population]) {
|
||||
const popobj = {};
|
||||
population.forEach(element => {
|
||||
population.forEach((element) => {
|
||||
popobj[element.Code] =
|
||||
element['Population, female (% of total) (% of total)'];
|
||||
});
|
||||
// 数据绑定
|
||||
|
||||
center.features = center.features.map(fe => {
|
||||
center.features = center.features.map((fe) => {
|
||||
fe.properties.female = popobj[fe.properties.id] * 1 || 0;
|
||||
return fe;
|
||||
});
|
||||
center.features.forEach(point => {
|
||||
center.features.forEach((point) => {
|
||||
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 = [
|
||||
{
|
||||
type: '男性',
|
||||
value: 100.0 - v.toFixed(2)
|
||||
value: 100.0 - v.toFixed(2),
|
||||
},
|
||||
{
|
||||
type: '女性',
|
||||
value: v.toFixed(2) * 1
|
||||
}
|
||||
value: v.toFixed(2) * 1,
|
||||
},
|
||||
];
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
padding: 0,
|
||||
});
|
||||
chart.source(data);
|
||||
chart.legend(false);
|
||||
chart.tooltip(false);
|
||||
chart.coord('theta', {
|
||||
radius: 0.9,
|
||||
innerRadius: 0.6
|
||||
innerRadius: 0.6,
|
||||
});
|
||||
chart
|
||||
.intervalStack()
|
||||
.position('value')
|
||||
.color('type', [ '#5CCEA1', '#5B8FF9' ])
|
||||
.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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,37 +6,37 @@ const scene = new Scene({
|
|||
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);
|
||||
|
|
|
|||
|
|
@ -6,37 +6,37 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
pitch: 60,
|
||||
style: 'light',
|
||||
center: [ 121.412224, 31.26192438 ],
|
||||
center: [121.412224, 31.26192438],
|
||||
zoom: 13.13438,
|
||||
rotation: 35.97133
|
||||
})
|
||||
rotation: 35.97133,
|
||||
}),
|
||||
});
|
||||
|
||||
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', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||
.color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A'])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
|
|||
|
|
@ -6,25 +6,25 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4
|
||||
})
|
||||
center: [104.288144, 31.239692],
|
||||
zoom: 4.4,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
y: 'w',
|
||||
},
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
return [1, 2, level * 2 + 20];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
|
|
@ -36,10 +36,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
|||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
'#CEF8D6',
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,30 +6,30 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 48.62562,
|
||||
style: 'light',
|
||||
center: [ 104.026043, 31.847 ],
|
||||
center: [104.026043, 31.847],
|
||||
rotation: -0.76,
|
||||
zoom: 4.48
|
||||
})
|
||||
zoom: 4.48,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
y: 'w',
|
||||
},
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
return [1, 2, level * 2 + 20];
|
||||
})
|
||||
.color('#006CFF')
|
||||
.style({
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,37 +6,37 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 121.434765, 31.256735 ],
|
||||
zoom: 14.83
|
||||
})
|
||||
center: [121.434765, 31.256735],
|
||||
zoom: 14.83,
|
||||
}),
|
||||
});
|
||||
|
||||
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) => {
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
);
|
||||
scene.addImage(
|
||||
'01',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
|
||||
);
|
||||
scene.addImage(
|
||||
'02',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
y: 'latitude',
|
||||
},
|
||||
})
|
||||
.shape('name', [ '00', '01', '02' ])
|
||||
.shape('name', ['00', '01', '02'])
|
||||
.size(20);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 116.276227, 35.256776 ],
|
||||
zoom: 6
|
||||
})
|
||||
center: [116.276227, 35.256776],
|
||||
zoom: 6,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
scene.addImage(
|
||||
'marker',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data)
|
||||
|
|
|
|||
|
|
@ -5,65 +5,65 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 120.5969, 29.7918 ],
|
||||
center: [120.5969, 29.7918],
|
||||
pitch: 35,
|
||||
zoom: 7,
|
||||
rotation: 4.183582
|
||||
})
|
||||
rotation: 4.183582,
|
||||
}),
|
||||
});
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'01',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'02',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'04',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'11',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'15',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'07',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'16',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'06',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'08',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'17',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
scene.addImage(
|
||||
'05',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ'
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ',
|
||||
);
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data)
|
||||
.shape('w', function(w) {
|
||||
|
|
|
|||
|
|
@ -5,32 +5,32 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ 105.790327, 36.495636 ],
|
||||
center: [105.790327, 36.495636],
|
||||
pitch: 0,
|
||||
zoom: 4
|
||||
})
|
||||
zoom: 4,
|
||||
}),
|
||||
});
|
||||
addMarkers();
|
||||
scene.render();
|
||||
|
||||
|
||||
function addMarkers() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(nodes => {
|
||||
.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 + '℃';
|
||||
el.style.background = getColor(nodes[i].v);
|
||||
el.style.borderColor = getColor(nodes[i].v);
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
|
||||
element: el,
|
||||
}).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
|
||||
scene.addMarker(marker);
|
||||
}
|
||||
});
|
||||
|
|
@ -40,16 +40,16 @@ function getColor(v) {
|
|||
return v > 50
|
||||
? '#800026'
|
||||
: v > 40
|
||||
? '#BD0026'
|
||||
: v > 30
|
||||
? '#E31A1C'
|
||||
: v > 20
|
||||
? '#FC4E2A'
|
||||
: v > 10
|
||||
? '#FD8D3C'
|
||||
: v > 5
|
||||
? '#FEB24C'
|
||||
: v > 0
|
||||
? '#FED976'
|
||||
: '#FFEDA0';
|
||||
? '#BD0026'
|
||||
: v > 30
|
||||
? '#E31A1C'
|
||||
: v > 20
|
||||
? '#FC4E2A'
|
||||
: v > 10
|
||||
? '#FD8D3C'
|
||||
: v > 5
|
||||
? '#FEB24C'
|
||||
: v > 0
|
||||
? '#FED976'
|
||||
: '#FFEDA0';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,27 +5,27 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 121.417463, 31.215175 ],
|
||||
center: [121.417463, 31.215175],
|
||||
pitch: 0,
|
||||
zoom: 11
|
||||
})
|
||||
zoom: 11,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
x: 'lng',
|
||||
},
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 64.88,
|
||||
style: 'dark',
|
||||
center: [ 114.060288, 22.53684 ],
|
||||
zoom: 15.63
|
||||
})
|
||||
center: [114.060288, 22.53684],
|
||||
zoom: 15.63,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data)
|
||||
.size(2)
|
||||
|
|
@ -29,10 +29,10 @@ fetch(
|
|||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
'#D7F9F0',
|
||||
])
|
||||
.style({
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 114.050008, 22.529272 ],
|
||||
zoom: 14.1
|
||||
})
|
||||
center: [114.050008, 22.529272],
|
||||
zoom: 14.1,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.shape('extrude')
|
||||
.size('h20', [ 100, 120, 160, 200, 260, 500 ])
|
||||
.size('h20', [100, 120, 160, 200, 260, 500])
|
||||
.color('h20', [
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
|
|
@ -27,10 +27,10 @@ fetch(
|
|||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
'#FFF3FC',
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
opacity: 1.0,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 116.368652, 39.93866 ],
|
||||
zoom: 10.07
|
||||
})
|
||||
center: [116.368652, 39.93866],
|
||||
zoom: 10.07,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.color(
|
||||
|
|
@ -30,21 +30,21 @@ fetch(
|
|||
'#98B7F7',
|
||||
'#BDD0F8',
|
||||
'#DDE6F7',
|
||||
'#F2F5FC'
|
||||
].reverse()
|
||||
'#F2F5FC',
|
||||
].reverse(),
|
||||
)
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
});
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 107.042225, 37.66565 ],
|
||||
zoom: 3.87
|
||||
})
|
||||
center: [107.042225, 37.66565],
|
||||
zoom: 3.87,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const colors = [
|
||||
'#D7F9F0',
|
||||
'#A6E1E0',
|
||||
|
|
@ -22,24 +22,24 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
|
|||
'#3474DB',
|
||||
'#005CBE',
|
||||
'#00419F',
|
||||
'#00287E'
|
||||
'#00287E',
|
||||
];
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.color('name', colors)
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.9
|
||||
opacity: 0.9,
|
||||
});
|
||||
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
|
|
|
|||
|
|
@ -6,25 +6,25 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 3.438, 40.16797 ],
|
||||
zoom: 0.51329
|
||||
})
|
||||
center: [3.438, 40.16797],
|
||||
zoom: 0.51329,
|
||||
}),
|
||||
});
|
||||
Promise.all([
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json'
|
||||
).then(d => d.json()),
|
||||
'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json',
|
||||
).then((d) => d.json()),
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
|
||||
).then(d => d.json())
|
||||
]).then(function onLoad([ world, population ]) {
|
||||
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json',
|
||||
).then((d) => d.json()),
|
||||
]).then(function onLoad([world, population]) {
|
||||
const popobj = {};
|
||||
population.forEach(element => {
|
||||
population.forEach((element) => {
|
||||
popobj[element.Code] =
|
||||
element['Population, female (% of total) (% of total)'];
|
||||
});
|
||||
// 数据绑定
|
||||
world.features = world.features.map(fe => {
|
||||
world.features = world.features.map((fe) => {
|
||||
fe.properties.female = popobj[fe.id] * 1 || 0;
|
||||
return fe;
|
||||
});
|
||||
|
|
@ -38,27 +38,27 @@ Promise.all([
|
|||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
'#D7F9F0',
|
||||
];
|
||||
const layer = new PolygonLayer({})
|
||||
.source(world)
|
||||
.scale('female', {
|
||||
type: 'quantile'
|
||||
type: 'quantile',
|
||||
})
|
||||
.color('female', colors)
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.9
|
||||
opacity: 0.9,
|
||||
});
|
||||
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(world)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 121.268, 30.3628 ],
|
||||
zoom: 13
|
||||
})
|
||||
center: [121.268, 30.3628],
|
||||
zoom: 13,
|
||||
}),
|
||||
});
|
||||
|
||||
const layer = new ImageLayer({});
|
||||
|
|
@ -17,8 +17,8 @@ layer.source(
|
|||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
|
||||
}
|
||||
}
|
||||
extent: [121.168, 30.2828, 121.384, 30.4219],
|
||||
},
|
||||
},
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 115.5268, 34.3628 ],
|
||||
zoom: 7
|
||||
})
|
||||
center: [115.5268, 34.3628],
|
||||
zoom: 7,
|
||||
}),
|
||||
});
|
||||
|
||||
const layer = new ImageLayer({});
|
||||
|
|
@ -17,9 +17,8 @@ layer.source(
|
|||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ]
|
||||
}
|
||||
}
|
||||
extent: [113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137],
|
||||
},
|
||||
},
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
|
||||
|
|
|
|||
|
|
@ -5,49 +5,47 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 121.4316962, 31.26082325 ],
|
||||
zoom: 15.056
|
||||
})
|
||||
center: [121.4316962, 31.26082325],
|
||||
zoom: 15.056,
|
||||
}),
|
||||
});
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
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 = {
|
||||
围栏填充: pointLayer
|
||||
围栏填充: pointLayer,
|
||||
};
|
||||
const layersControl = new Layers({
|
||||
overlayers
|
||||
overlayers,
|
||||
});
|
||||
|
||||
scene.addControl(layersControl);
|
||||
|
||||
});
|
||||
|
||||
|
||||
const zoomControl = new Zoom({
|
||||
position: 'topright'
|
||||
position: 'topright',
|
||||
});
|
||||
const scaleControl = new Scale({
|
||||
position: 'bottomright'
|
||||
position: 'bottomright',
|
||||
});
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,12 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
center: [107.054293, 35.246265],
|
||||
zoom: 4.056,
|
||||
}),
|
||||
});
|
||||
|
||||
const zoomControl = new Zoom();
|
||||
const scaleControl = new Scale();
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ new Scene({
|
|||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
center: [107.054293, 35.246265],
|
||||
zoom: 4.056,
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ new Scene({
|
|||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
center: [107.054293, 35.246265],
|
||||
zoom: 4.056,
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
center: [107.054293, 35.246265],
|
||||
zoom: 4.056,
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 121.4316962, 31.26082325 ],
|
||||
zoom: 12.056
|
||||
})
|
||||
center: [121.4316962, 31.26082325],
|
||||
zoom: 12.056,
|
||||
}),
|
||||
});
|
||||
// 创建默认 marker
|
||||
const popup = new Popup({
|
||||
offsets: [ 0, 20 ]
|
||||
offsets: [0, 20],
|
||||
}).setText('hello');
|
||||
|
||||
const marker = new Marker()
|
||||
.setLnglat([ 121.4316962, 31.26082325 ])
|
||||
.setLnglat([121.4316962, 31.26082325])
|
||||
.setPopup(popup);
|
||||
|
||||
scene.addMarker(marker);
|
||||
|
|
|
|||
|
|
@ -5,13 +5,12 @@ const scene = new Scene({
|
|||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
center: [107.054293, 35.246265],
|
||||
zoom: 4.056,
|
||||
}),
|
||||
});
|
||||
|
||||
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',
|
||||
|
|
|
|||
|
|
@ -123,8 +123,7 @@
|
|||
"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 examples/**/**/*.js docs/api/**/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx",
|
||||
"prebuild": "run-p tsc lint",
|
||||
"build": "yarn clean && lerna run build",
|
||||
"postbuild": "yarn build:declarations",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue