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

refactor: refactor demos

This commit is contained in:
thinkinggis 2020-03-15 20:09:16 +08:00
parent 98c4aa7cfb
commit 4ef8507285
81 changed files with 2035 additions and 1899 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,11 +38,15 @@ scene.addLayer(layer);
### minZoom
图层显示最小缩放等级，（0-18）   {number}  default 0
图层显示最小缩放等级，（0-18）   {number}  Mapbox （0-24） 高德 （3-18）
### maxZoom
图层显示最大缩放等级 （0-18）   {number}  default 18
图层显示最大缩放等级 （0-18）   {number}  Mapbox （0-24） 高德 （3-18）
### autoFit
layer 初始化完成之后，是否自动缩放到图层范围 {bool } default false
### blend
@ -67,7 +71,7 @@ scene.addLayer(layer);
- parser 数据解析，默认是解析层 geojson
- transforms [transform，transform ]  数据处理转换 可设置多个
parser 和  transforms [见 source 文档](https://www.yuque.com/antv/l7/source)
parser 和  transforms [见 source 文档](../source/source)
```javascript
layer.source(data, {
@ -100,20 +104,46 @@ layer.source(data, {
### scale
scale('field', scaleConfig)
(field: string, scaleConfig: object)
为指定的数据字段进行列定义，返回 layer 实例。
设置数据字段映射方法
- `field` 字段名。
- `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
#### scale 类型
**连续型**
- linear 线性
- log
- pow 指数型
**连续分类型**
- quantile 等分位
- quantize 等间距
**枚举型**
- cat 枚举
```javascript
{
type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize
}
layer.scale('name', {
type: 'cat',
});
// 设置多个scale
// 字段名为 key, value 为scale配置项
layer.scale({
name: {
type: 'cat',
},
value: {
type: 'linear',
},
});
```
## 视觉编码方法

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

@ -38,11 +38,15 @@ scene.addLayer(layer);
### minZoom
图层显示最小缩放等级，（0-18）   {number}  default 0
图层显示最小缩放等级，（0-18）   {number}  Mapbox （0-24） 高德 （3-18）
### maxZoom
图层显示最大缩放等级 （0-18）   {number}  default 18
图层显示最大缩放等级 （0-18）   {number}  Mapbox （0-24） 高德 （3-18）
### autoFit
layer 初始化完成之后，是否自动缩放到图层范围 {bool } default false
### blend

2
docs/api/layer/point_layer/pointlayer.zh.md
View File

@ -3,8 +3,6 @@ title: PointLayer
order: 0
---
# PointLayer
## 简介
点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。

13
docs/api/scene.zh.md
View File

@ -5,8 +5,6 @@ order: 2
# 简介
## Scene
```javascript
// Module 引用
import { Scene } from '@antv/l7';
@ -101,7 +99,7 @@ L7 Logo 的显示位置 默认左下角
### zoom
地图初始显示级别 {number} （0-22）
地图初始显示级别 {number} Mapbox （0-24） 高德 （3-18）
### center
@ -134,11 +132,11 @@ L7 Logo 的显示位置 默认左下角
### minZoom
地图最小缩放等级 {number}  default 0 (0-22)
地图最小缩放等级 {number}  default 0 Mapbox 0-24） 高德 （3-18）
### maxZoom
地图最大缩放等级 {number}  default 22 (0-22)
地图最大缩放等级 {number}  default 22 Mapbox（0-24） 高德 （3-18）
### rotateEnable
@ -402,6 +400,11 @@ scene.on('zoomstart', () => {}); // 缩放开始时触发
scene.on('zoomend', () => {}); // 缩放停止时触发
```
其他地图事件可以查看相应底图的事件文档,地图事件也可以通过 Scene.map 进行设置
[Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/#map.event)
[高德](https://lbs.amap.com/api/javascript-api/reference/map)
### 鼠标事件
```javascript

51
examples/gallery/animate/demo/animate_line.js
View File

@ -8,28 +8,29 @@ const scene = new Scene({
style: 'dark'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/5592c737-1c70-4d6b-82c1-e74e5a019b04.json'
)
.then(res => res.json())
.then(data => {
const lineLayer = new LineLayer()
.source(data, {
parser: {
type: 'json',
coordinates: 'path'
}
})
.size(1.5)
.shape('line')
.color('color', v => {
return `rgb(${v})`;
})
.animate({
interval: 0.6,
trailLength: 1.5,
duration: 6
});
scene.addLayer(lineLayer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/5592c737-1c70-4d6b-82c1-e74e5a019b04.json'
)
.then(res => res.json())
.then(data => {
const lineLayer = new LineLayer()
.source(data, {
parser: {
type: 'json',
coordinates: 'path'
}
})
.size(1.5)
.shape('line')
.color('color', v => {
return `rgb(${v})`;
})
.animate({
interval: 0.6,
trailLength: 1.5,
duration: 6
});
scene.addLayer(lineLayer);
});
});

37
examples/gallery/animate/demo/animate_path.js
View File

@ -10,21 +10,22 @@ const scene = new Scene({
style: 'dark'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer()
.source(data)
.size(1.5)
.shape('line')
.color('#25d8b7')
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间，延时
trailLength: 2 // 流线长度
});
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer()
.source(data)
.size(1.5)
.shape('line')
.color('#25d8b7')
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间，延时
trailLength: 2 // 流线长度
});
scene.addLayer(layer);
});
});

1
examples/gallery/animate/demo/build.js
View File

@ -60,3 +60,4 @@ scene.on('loaded', () => {
});
});

128
examples/gallery/animate/demo/world.js
View File

@ -26,69 +26,71 @@ const scene = new Scene({
zoom: 0.51329
})
});
Promise.all([
fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
]).then(function onLoad([ world, dot, flyline ]) {
const dotData = eval(dot);
const flydata = eval(flyline).map(item => {
const latlng1 = item.from.split(',').map(e => { return e * 1; });
const latlng2 = item.to.split(',').map(e => { return e * 1; });
return { coord: [ latlng1, latlng2 ] };
scene.on('loaded', () => {
Promise.all([
fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
]).then(function onLoad([ world, dot, flyline ]) {
const dotData = eval(dot);
const flydata = eval(flyline).map(item => {
const latlng1 = item.from.split(',').map(e => { return e * 1; });
const latlng2 = item.to.split(',').map(e => { return e * 1; });
return { coord: [ latlng1, latlng2 ] };
});
// const worldFill = new PolygonLayer()
// .source(world)
// .color('#98E3FA')
// .shape('fill')
// .style({
// opacity: 1
// });
const worldLine = new LineLayer()
.source(world)
.color('#41fc9d')
.size(0.5)
.style({
opacity: 0.4
});
const dotPoint = new PointLayer()
.source(dotData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('#ffed11')
.animate(true)
.size(40)
.style({
opacity: 1.0
});
const flyLine = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#ff6b34')
.shape('arc3d')
.size(2)
.active(true)
.animate({
interval: 2,
trailLength: 2,
duration: 1
})
.style({
opacity: 1
});
// scene.addLayer(worldFill);
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine);
});
// const worldFill = new PolygonLayer()
// .source(world)
// .color('#98E3FA')
// .shape('fill')
// .style({
// opacity: 1
// });
const worldLine = new LineLayer()
.source(world)
.color('#41fc9d')
.size(0.5)
.style({
opacity: 0.4
});
const dotPoint = new PointLayer()
.source(dotData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('#ffed11')
.animate(true)
.size(40)
.style({
opacity: 1.0
});
const flyLine = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#ff6b34')
.shape('arc3d')
.size(2)
.active(true)
.animate({
interval: 2,
trailLength: 2,
duration: 1
})
.style({
opacity: 1
});
// scene.addLayer(worldFill);
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine);
});

132
examples/gallery/animate/demo/world2.js
View File

@ -26,72 +26,74 @@ const scene = new Scene({
zoom: 0.51329
})
});
Promise.all([
fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
]).then(function onLoad([ world, dot, flyline ]) {
const dotData = eval(dot);
const flydata = eval(flyline).map(item => {
const latlng1 = item.from.split(',').map(e => { return e * 1; });
const latlng2 = item.to.split(',').map(e => { return e * 1; });
return { coord: [ latlng1, latlng2 ] };
});
// const worldFill = new PolygonLayer()
// .source(world)
// .color('#98E3FA')
// .shape('fill')
// .style({
// opacity: 1
// });
scene.on('loaded', () => {
Promise.all([
fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
]).then(function onLoad([ world, dot, flyline ]) {
const dotData = eval(dot);
const flydata = eval(flyline).map(item => {
const latlng1 = item.from.split(',').map(e => { return e * 1; });
const latlng2 = item.to.split(',').map(e => { return e * 1; });
return { coord: [ latlng1, latlng2 ] };
});
// const worldFill = new PolygonLayer()
// .source(world)
// .color('#98E3FA')
// .shape('fill')
// .style({
// opacity: 1
// });
const worldLine = new LineLayer()
.source(world)
.color('#495e96')
.size(0.6)
.style({
opacity: 0.2
});
const dotPoint = new PointLayer()
.source(dotData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
const worldLine = new LineLayer()
.source(world)
.color('#495e96')
.size(0.6)
.style({
opacity: 0.2
});
const dotPoint = new PointLayer()
.source(dotData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('#abc7e9')
.animate({
speed: 0.8
}
})
.shape('circle')
.color('#abc7e9')
.animate({
speed: 0.8
}
)
.size(30)
.style({
opacity: 1.0
});
const flyLine = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#b97feb')
.shape('arc3d')
.size(2)
.active(true)
.animate({
interval: 2,
trailLength: 2,
duration: 1
})
.style({
opacity: 1
});
// scene.addLayer(worldFill);
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine);
)
.size(30)
.style({
opacity: 1.0
});
const flyLine = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#b97feb')
.shape('arc3d')
.size(2)
.active(true)
.animate({
interval: 2,
trailLength: 2,
duration: 1
})
.style({
opacity: 1
});
// scene.addLayer(worldFill);
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine);
});
});

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

@ -10,26 +10,27 @@ const scene = new Scene({
zoom: 2.9142882493605033
})
});
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2'
}
})
.size(1)
.shape('arc')
.color('#8C1EB2')
.style({
opacity: 0.8,
blur: 0.99
});
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2'
}
})
.size(1)
.shape('arc')
.color('#8C1EB2')
.style({
opacity: 0.8,
blur: 0.99
});
scene.addLayer(layer);
});
});

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

@ -13,37 +13,38 @@ const scene = new Scene({
rotation: 19.313180925794313
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
coordinates: 'path',
type: 'json'
}
})
.size('level', level => {
return [ 1.0, level * 1 ];
})
.shape('line')
.color(
'level',
[
'#312B60',
'#4A457E',
'#615C99',
'#816CAD',
'#A67FB5',
'#C997C7',
'#DEB8D4',
'#F5D4E6',
'#FAE4F1',
'#FFF3FC'
].slice(0, 8)
);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
coordinates: 'path',
type: 'json'
}
})
.size('level', level => {
return [ 1.0, level * 1 ];
})
.shape('line')
.color(
'level',
[
'#312B60',
'#4A457E',
'#615C99',
'#816CAD',
'#A67FB5',
'#C997C7',
'#DEB8D4',
'#F5D4E6',
'#FAE4F1',
'#FFF3FC'
].slice(0, 8)
);
scene.addLayer(layer);
});
});

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

@ -10,37 +10,38 @@ const scene = new Scene({
zoom: 4.4
})
});
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('cylinder')
.size('t', function(level) {
return [ 1, 2, level * 2 + 20 ];
})
.active(true)
.color('t', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
])
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('cylinder')
.size('t', function(level) {
return [ 1, 2, level * 2 + 20 ];
})
.active(true)
.color('t', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
])
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
});
});

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

@ -10,50 +10,51 @@ const scene = new Scene({
zoom: 7.068989519212174
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'hexagon',
size: 2500,
field: 'v',
method: 'sum'
}
]
})
.size('sum', sum => {
return sum * 200;
})
.shape('hexagonColumn')
.style({
coverage: 0.8,
angle: 0,
opacity: 1.0
})
.color('sum', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#C3F9CC',
'#DEFAC0',
'#ECFFB1'
]);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'hexagon',
size: 2500,
field: 'v',
method: 'sum'
}
]
})
.size('sum', sum => {
return sum * 200;
})
.shape('hexagonColumn')
.style({
coverage: 0.8,
angle: 0,
opacity: 1.0
})
.color('sum', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#C3F9CC',
'#DEFAC0',
'#ECFFB1'
]);
scene.addLayer(layer);
});
});

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

@ -10,23 +10,24 @@ const scene = new Scene({
zoom: 11
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
.then(res => res.text())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
y: 'lat',
x: 'lng'
}
})
.size(0.5)
.color('#080298')
.style({
opacity: 1
});
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
.then(res => res.text())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
y: 'lat',
x: 'lng'
}
})
.size(0.5)
.color('#080298')
.style({
opacity: 1
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

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

@ -10,30 +10,31 @@ const scene = new Scene({
zoom: 15.63
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
)
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data)
.size(2)
.color('h8', [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
])
.style({
opacity: 1
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
)
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data)
.size(2)
.color('h8', [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
])
.style({
opacity: 1
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

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

@ -10,52 +10,53 @@ const scene = new Scene({
zoom: 4.056
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'grid',
size: 20000,
field: 'v',
method: 'sum'
}
]
})
.shape('square')
.style({
coverage: 1,
angle: 0
})
.color(
'count',
[
'#0B0030',
'#100243',
'#100243',
'#1B048B',
'#051FB7',
'#0350C1',
'#0350C1',
'#0072C4',
'#0796D3',
'#2BA9DF',
'#30C7C4',
'#6BD5A0',
'#A7ECB2',
'#D0F4CA'
].reverse()
);
fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'grid',
size: 20000,
field: 'v',
method: 'sum'
}
]
})
.shape('square')
.style({
coverage: 1,
angle: 0
})
.color(
'count',
[
'#0B0030',
'#100243',
'#100243',
'#1B048B',
'#051FB7',
'#0350C1',
'#0350C1',
'#0072C4',
'#0796D3',
'#2BA9DF',
'#30C7C4',
'#6BD5A0',
'#A7ECB2',
'#D0F4CA'
].reverse()
);
scene.addLayer(layer);
});
scene.addLayer(layer);
});
});

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

@ -10,43 +10,44 @@ const scene = new Scene({
zoom: 4.056
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'grid',
size: 10000,
field: 'v',
method: 'sum'
}
]
})
.shape('square')
.style({
coverage: 1,
angle: 0
})
.color(
'count',
[
'#FF4818',
'#F7B74A',
'#FFF598',
'#FF40F3',
'#9415FF',
'#421EB2'
].reverse()
);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'grid',
size: 10000,
field: 'v',
method: 'sum'
}
]
})
.shape('square')
.style({
coverage: 1,
angle: 0
})
.color(
'count',
[
'#FF4818',
'#F7B74A',
'#FFF598',
'#FF40F3',
'#9415FF',
'#421EB2'
].reverse()
);
scene.addLayer(layer);
});
});

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

@ -10,49 +10,50 @@ const scene = new Scene({
zoom: 4.056
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'grid',
size: 20000,
field: 'v',
method: 'sum'
}
]
})
.shape('circle')
.style({
coverage: 0.9,
angle: 0
})
.color(
'count',
[
'#8C1EB2',
'#8C1EB2',
'#DA05AA',
'#F0051A',
'#FF2A3C',
'#FF4818',
'#FF4818',
'#FF8B18',
'#F77B00',
'#ED9909',
'#ECC357',
'#EDE59C'
].reverse()
);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'grid',
size: 20000,
field: 'v',
method: 'sum'
}
]
})
.shape('circle')
.style({
coverage: 0.9,
angle: 0
})
.color(
'count',
[
'#8C1EB2',
'#8C1EB2',
'#DA05AA',
'#F0051A',
'#FF2A3C',
'#FF4818',
'#FF4818',
'#FF8B18',
'#F77B00',
'#ED9909',
'#ECC357',
'#EDE59C'
].reverse()
);
scene.addLayer(layer);
});
});

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

@ -10,45 +10,46 @@ const scene = new Scene({
zoom: 4.056
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'grid',
size: 10000,
field: 'v',
method: 'sum'
}
]
})
.shape('square')
.style({
coverage: 1,
angle: 0
})
.color(
'count',
[
'#FF3417',
'#FF7412',
'#FFB02A',
'#FFE754',
'#46F3FF',
'#02BEFF',
'#1A7AFF',
'#0A1FB2'
].reverse()
);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'grid',
size: 10000,
field: 'v',
method: 'sum'
}
]
})
.shape('square')
.style({
coverage: 1,
angle: 0
})
.color(
'count',
[
'#FF3417',
'#FF7412',
'#FFB02A',
'#FFE754',
'#46F3FF',
'#02BEFF',
'#1A7AFF',
'#0A1FB2'
].reverse()
);
scene.addLayer(layer);
});
});

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

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

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

@ -11,32 +11,33 @@ const scene = new Scene({
zoom: 3.6116
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
)
.then(res => res.json())
.then(data => {
const layer = new HeatmapLayer({})
.source(data)
.size('capacity', [ 0, 1 ])
.shape('heatmap3D')
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
)
.then(res => res.json())
.then(data => {
const layer = new HeatmapLayer({})
.source(data)
.size('capacity', [ 0, 1 ])
.shape('heatmap3D')
// weight映射通道
.style({
intensity: 10,
radius: 5,
opacity: 1.0,
rampColors: {
colors: [
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49'
],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
}
});
scene.addLayer(layer);
});
.style({
intensity: 10,
radius: 5,
opacity: 1.0,
rampColors: {
colors: [
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49'
],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
}
});
scene.addLayer(layer);
});
});

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

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

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

@ -10,47 +10,48 @@ const scene = new Scene({
zoom: 3.9879693680088626
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'hexagon',
size: 17000,
field: 'v',
method: 'sum'
}
]
})
.size('sum', value => {
return value * 20;
})
.shape('hexagonColumn')
.color(
'count',
[
'#FF4818',
'#F7B74A',
'#FFF598',
'#FF40F3',
'#9415FF',
'#421EB2'
].reverse()
)
.style({
coverage: 0.9,
angle: 0
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'hexagon',
size: 17000,
field: 'v',
method: 'sum'
}
]
})
.size('sum', value => {
return value * 20;
})
.shape('hexagonColumn')
.color(
'count',
[
'#FF4818',
'#F7B74A',
'#FFF598',
'#FF40F3',
'#9415FF',
'#421EB2'
].reverse()
)
.style({
coverage: 0.9,
angle: 0
});
scene.addLayer(layer);
});
scene.addLayer(layer);
});
});

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

@ -11,44 +11,45 @@ const scene = new Scene({
zoom: 12.47985
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
)
.then(res => res.json())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
transforms: [
{
type: 'hexagon',
size: 100,
field: 'h12',
method: 'sum'
}
]
})
.size('sum', [ 0, 600 ])
.shape('hexagonColumn')
.style({
coverage: 0.8,
angle: 0,
opacity: 1.0
})
.color(
'sum',
[
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
].reverse()
);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
)
.then(res => res.json())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
transforms: [
{
type: 'hexagon',
size: 100,
field: 'h12',
method: 'sum'
}
]
})
.size('sum', [ 0, 600 ])
.shape('hexagonColumn')
.style({
coverage: 0.8,
angle: 0,
opacity: 1.0
})
.color(
'sum',
[
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
].reverse()
);
scene.addLayer(layer);
});
});

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

@ -10,50 +10,51 @@ const scene = new Scene({
zoom: 7.068989519212174
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'hexagon',
size: 2500,
field: 'v',
method: 'sum'
}
]
})
.size('sum', sum => {
return sum * 200;
})
.shape('hexagonColumn')
.style({
coverage: 0.8,
angle: 0,
opacity: 1.0
})
.color('sum', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#C3F9CC',
'#DEFAC0',
'#ECFFB1'
]);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'hexagon',
size: 2500,
field: 'v',
method: 'sum'
}
]
})
.size('sum', sum => {
return sum * 200;
})
.shape('hexagonColumn')
.style({
coverage: 0.8,
angle: 0,
opacity: 1.0
})
.color('sum', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#C3F9CC',
'#DEFAC0',
'#ECFFB1'
]);
scene.addLayer(layer);
});
});

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

@ -10,45 +10,46 @@ const scene = new Scene({
zoom: 3.79
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
)
.then(res => res.json())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
transforms: [
{
type: 'hexagon',
size: 90000,
field: 'capacity',
method: 'sum'
}
]
})
.shape('hexagon')
.style({
coverage: 0.9,
angle: 0,
opacity: 1.0
})
.color(
'sum',
[
'#3F4BBA',
'#3F4BBA',
'#3F4BBA',
'#3F4BBA',
'#3C73DA',
'#3C73DA',
'#3C73DA',
'#0F62FF',
'#0F62FF',
'#30B2E9',
'#30B2E9',
'#40C4CE'
].reverse()
);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
)
.then(res => res.json())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
transforms: [
{
type: 'hexagon',
size: 90000,
field: 'capacity',
method: 'sum'
}
]
})
.shape('hexagon')
.style({
coverage: 0.9,
angle: 0,
opacity: 1.0
})
.color(
'sum',
[
'#3F4BBA',
'#3F4BBA',
'#3F4BBA',
'#3F4BBA',
'#3C73DA',
'#3C73DA',
'#3C73DA',
'#0F62FF',
'#0F62FF',
'#30B2E9',
'#30B2E9',
'#40C4CE'
].reverse()
);
scene.addLayer(layer);
});
});

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

@ -10,24 +10,26 @@ const scene = new Scene({
zoom: 2.9142882493605033
})
});
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2'
}
})
.size(1)
.shape('greatcircle')
.color('#8C1EB2')
.style({
opacity: 0.8
});
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2'
}
})
.size(1)
.shape('greatcircle')
.color('#8C1EB2')
.style({
opacity: 0.8
});
scene.addLayer(layer);
});
});

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

@ -11,27 +11,29 @@ const scene = new Scene({
zoom: 12.45977
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
)
.then(res => res.text())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'start station longitude',
y: 'start station latitude',
x1: 'end station longitude',
y1: 'end station latitude'
}
})
.size(1)
.shape('arc3d')
.color('#0C47BF')
.style({
opacity: 1,
blur: 0.9
});
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
)
.then(res => res.text())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'start station longitude',
y: 'start station latitude',
x1: 'end station longitude',
y1: 'end station latitude'
}
})
.size(1)
.shape('arc3d')
.color('#0C47BF')
.style({
opacity: 1,
blur: 0.9
});
scene.addLayer(layer);
});
});

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

@ -11,25 +11,26 @@ const scene = new Scene({
rotation: 42.3999
})
});
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2'
}
})
.size(1)
.shape('arc3d')
.color('#FF7C6A')
.style({
opacity: 0.8
});
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2'
}
})
.size(1)
.shape('arc3d')
.color('#FF7C6A')
.style({
opacity: 0.8
});
scene.addLayer(layer);
});
});

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

@ -10,33 +10,34 @@ const scene = new Scene({
zoom: 14.66
})
});
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.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 ];
})
.shape('line')
.scale('ELEV', {
type: 'quantize'
})
.color(
'ELEV',
[
'#E4682F',
'#FF8752',
'#FFA783',
'#FFBEA8',
'#FFDCD6',
'#EEF3FF',
'#C8D7F5',
'#A5C1FC',
'#7FA7F9',
'#5F8AE5'
].reverse()
);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.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 ];
})
.shape('line')
.scale('ELEV', {
type: 'quantize'
})
.color(
'ELEV',
[
'#E4682F',
'#FF8752',
'#FFA783',
'#FFBEA8',
'#FFDCD6',
'#EEF3FF',
'#C8D7F5',
'#A5C1FC',
'#7FA7F9',
'#5F8AE5'
].reverse()
);
scene.addLayer(layer);
});
});

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

@ -10,30 +10,31 @@ const scene = new Scene({
zoom: 14.78
})
});
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.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 ];
})
.shape('line')
.scale('ELEV', {
type: 'quantize'
})
.color('ELEV', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
]);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.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 ];
})
.shape('line')
.scale('ELEV', {
type: 'quantize'
})
.color('ELEV', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
]);
scene.addLayer(layer);
});
});

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

@ -10,33 +10,34 @@ const scene = new Scene({
zoom: 3.89
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data)
.scale('value', {
type: 'quantile'
})
.size('value', [ 0.5, 1, 1.5, 2 ])
.shape('line')
.color(
'value',
[
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
].reverse()
);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data)
.scale('value', {
type: 'quantile'
})
.size('value', [ 0.5, 1, 1.5, 2 ])
.shape('line')
.color(
'value',
[
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
].reverse()
);
scene.addLayer(layer);
});
});

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

@ -13,37 +13,38 @@ const scene = new Scene({
style: 'dark'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'json',
coordinates: 'path'
}
})
.size('level', level => {
return [ 0.8, level * 1 ];
})
.shape('line')
.color(
'level',
[
'#312B60',
'#4A457E',
'#615C99',
'#816CAD',
'#A67FB5',
'#C997C7',
'#DEB8D4',
'#F5D4E6',
'#FAE4F1',
'#FFF3FC'
].slice(0, 8)
);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'json',
coordinates: 'path'
}
})
.size('level', level => {
return [ 0.8, level * 1 ];
})
.shape('line')
.color(
'level',
[
'#312B60',
'#4A457E',
'#615C99',
'#816CAD',
'#A67FB5',
'#C997C7',
'#DEB8D4',
'#F5D4E6',
'#FAE4F1',
'#FFF3FC'
].slice(0, 8)
);
scene.addLayer(layer);
});
});

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

@ -13,49 +13,50 @@ const scene = new Scene({
style: 'light'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'json',
coordinates: 'path'
}
})
.size('level', level => {
return [ 0.8, level * 1 ];
})
.shape('line')
.active(true)
.color(
'level',
[
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
]
.reverse()
.slice(0, 8)
);
layer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>车次: ${e.feature.number}</span>`);
scene.addPopup(popup);
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'json',
coordinates: 'path'
}
})
.size('level', level => {
return [ 0.8, level * 1 ];
})
.shape('line')
.active(true)
.color(
'level',
[
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
]
.reverse()
.slice(0, 8)
);
layer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>车次: ${e.feature.number}</span>`);
scene.addPopup(popup);
});
scene.addLayer(layer);
});
scene.addLayer(layer);
});
});

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

@ -11,16 +11,18 @@ const scene = new Scene({
style: 'dark'
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data)
.size(1.5)
.shape('line')
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]);
scene.addLayer(layer);
});
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data)
.size(1.5)
.shape('line')
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]);
scene.addLayer(layer);
});

35
examples/line/path/demo/road_dark_dash.js
View File

@ -11,21 +11,22 @@ const scene = new Scene({
style: 'dark'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data)
.size(1.5)
.shape('line')
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ])
.style({
lineType: 'dash',
dashArray: [ 5, 5 ]
})
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data)
.size(1.5)
.shape('line')
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ])
.style({
lineType: 'dash',
dashArray: [ 5, 5 ]
})
;
scene.addLayer(layer);
});
scene.addLayer(layer);
});
});

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

@ -11,16 +11,17 @@ const scene = new Scene({
style: 'light'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data)
.size(1.5)
.shape('line')
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]);
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data)
.size(1.5)
.shape('line')
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]);
scene.addLayer(layer);
});
});

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

@ -11,37 +11,39 @@ const scene = new Scene({
minZoom: 10
})
});
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'
}
})
.shape('name', [
'circle',
'triangle',
'square',
'pentagon',
'hexagon',
'octogon',
'hexagram',
'rhombus',
'vesica'
])
.size('unit_price', [ 10, 25 ])
.active(true)
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
.style({
opacity: 0.3,
strokeWidth: 2
});
scene.on('loaded', () => {
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'
}
})
.shape('name', [
'circle',
'triangle',
'square',
'pentagon',
'hexagon',
'octogon',
'hexagram',
'rhombus',
'vesica'
])
.size('unit_price', [ 10, 25 ])
.active(true)
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
.style({
opacity: 0.3,
strokeWidth: 2
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

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

@ -12,24 +12,24 @@ const scene = new Scene({
maxZoom: 10
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
)
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data)
.shape('circle')
.size('mag', [ 1, 25 ])
.color('mag', mag => {
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
})
.active(true)
.style({
opacity: 0.3,
strokeWidth: 1
});
scene.addLayer(pointLayer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
)
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data)
.shape('circle')
.size('mag', [ 1, 25 ])
.color('mag', mag => {
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
})
.active(true)
.style({
opacity: 0.3,
strokeWidth: 1
});
scene.addLayer(pointLayer);
});
});

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

@ -10,28 +10,29 @@ const scene = new Scene({
zoom: 2.5
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv'
)
.then(res => res.text())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'Longitude',
y: 'Latitude'
}
})
.shape('circle')
.active(true)
.animate(true)
.size(56)
.color('#4cfd47')
.style({
opacity: 1
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv'
)
.then(res => res.text())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'Longitude',
y: 'Latitude'
}
})
.shape('circle')
.active(true)
.animate(true)
.size(56)
.color('#4cfd47')
.style({
opacity: 1
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

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

@ -11,31 +11,33 @@ const scene = new Scene({
maxZoom: 10
})
});
fetch(
'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 => {
return item.properties.capacity > 800;
});
const pointLayer = new PointLayer({})
.source(data)
.shape('circle')
.size('capacity', [ 0, 16 ])
.color('capacity', [
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
])
.active(true)
.style({
opacity: 0.5,
strokeWidth: 0
scene.on('loaded', () => {
fetch(
'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 => {
return item.properties.capacity > 800;
});
const pointLayer = new PointLayer({})
.source(data)
.shape('circle')
.size('capacity', [ 0, 16 ])
.color('capacity', [
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
])
.active(true)
.style({
opacity: 0.5,
strokeWidth: 0
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

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

@ -11,9 +11,10 @@ const scene = new Scene({
zoom: 4.19
})
});
addChart();
scene.render();
scene.on('loaded', () => {
addChart();
scene.render();
});
function addChart() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'

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

@ -11,9 +11,10 @@ const scene = new Scene({
zoom: 4.19
})
});
addChart();
scene.render();
scene.on('loaded', () => {
addChart();
scene.render();
});
function addChart() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'

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

@ -44,7 +44,9 @@ const scene = new Scene({
zoom: 3.802
})
});
addChart();
scene.on('loaded', () => {
addChart();
});
scene.render();
function addChart() {
Promise.all([

43
examples/point/cluster/demo/cluster.js
View File

@ -10,25 +10,26 @@ const scene = new Scene({
zoom: 3
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
cluster: true
})
.shape('circle')
.scale('point_count', {
type: 'quantile'
})
.size('point_count', [ 5, 10, 15, 20, 25 ])
.active(true)
.color('yellow')
.style({
opacity: 0.5,
strokeWidth: 1
});
fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
cluster: true
})
.shape('circle')
.scale('point_count', {
type: 'quantile'
})
.size('point_count', [ 5, 10, 15, 20, 25 ])
.active(true)
.color('yellow')
.style({
opacity: 0.5,
strokeWidth: 1
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

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

@ -11,34 +11,35 @@ const scene = new Scene({
rotation: 134.9507
})
});
scene.on('loaded', () => {
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'
}
})
.active(true)
.shape('name', [
'cylinder',
'triangleColumn',
'hexagonColumn',
'squareColumn'
])
.size('unit_price', h => {
return [ 6, 6, h / 500 ];
})
.color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])
.style({
opacity: 1.0
});
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'
}
})
.active(true)
.shape('name', [
'cylinder',
'triangleColumn',
'hexagonColumn',
'squareColumn'
])
.size('unit_price', h => {
return [ 6, 6, h / 500 ];
})
.color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

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

@ -11,34 +11,35 @@ const scene = new Scene({
rotation: 35.97133
})
});
scene.on('loaded', () => {
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'
}
})
.shape('name', [
'cylinder',
'triangleColumn',
'hexagonColumn',
'squareColumn'
])
.active(true)
.size('unit_price', h => {
return [ 6, 6, h / 500 ];
})
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
.style({
opacity: 1.0
});
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'
}
})
.shape('name', [
'cylinder',
'triangleColumn',
'hexagonColumn',
'squareColumn'
])
.active(true)
.size('unit_price', h => {
return [ 6, 6, h / 500 ];
})
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

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

@ -10,37 +10,38 @@ const scene = new Scene({
zoom: 4.4
})
});
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('cylinder')
.size('t', function(level) {
return [ 1, 2, level * 2 + 20 ];
})
.active(true)
.color('t', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
])
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('cylinder')
.size('t', function(level) {
return [ 1, 2, level * 2 + 20 ];
})
.active(true)
.color('t', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
])
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
});
});

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

@ -11,35 +11,36 @@ const scene = new Scene({
zoom: 4.48
})
});
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('cylinder')
.size('t', function(level) {
return [ 1, 2, level * 2 + 20 ];
})
.active(true)
.color('#006CFF')
.style({
opacity: 1.0
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('cylinder')
.size('t', function(level) {
return [ 1, 2, level * 2 + 20 ];
})
.active(true)
.color('#006CFF')
.style({
opacity: 1.0
});
pointLayer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>${e.feature.s}: ${e.feature.t}℃</span>`);
scene.addPopup(popup);
});
pointLayer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>${e.feature.s}: ${e.feature.t}℃</span>`);
scene.addPopup(popup);
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

39
examples/point/dot/demo/normal.js
View File

@ -10,23 +10,24 @@ const scene = new Scene({
zoom: 11
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
.then(res => res.text())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
y: 'lat',
x: 'lng'
}
})
.size(0.5)
.color('#080298')
.style({
opacity: 1
});
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
.then(res => res.text())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
y: 'lat',
x: 'lng'
}
})
.size(0.5)
.color('#080298')
.style({
opacity: 1
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

53
examples/point/dot/demo/normal2.js
View File

@ -10,30 +10,31 @@ const scene = new Scene({
zoom: 15.63
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
)
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data)
.size(2)
.color('h8', [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
])
.style({
opacity: 1
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
)
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data)
.size(2)
.color('h8', [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
])
.style({
opacity: 1
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

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

@ -10,33 +10,34 @@ const scene = new Scene({
zoom: 14.83
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
)
.then(res => res.json())
.then(data => {
scene.addImage(
'00',
'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'
);
scene.addImage(
'02',
'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'
}
})
.shape('name', [ '00', '01', '02' ])
.size(20);
scene.addLayer(imageLayer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
)
.then(res => res.json())
.then(data => {
scene.addImage(
'00',
'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'
);
scene.addImage(
'02',
'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'
}
})
.shape('name', [ '00', '01', '02' ])
.size(20);
scene.addLayer(imageLayer);
});
});

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

@ -10,19 +10,20 @@ const scene = new Scene({
zoom: 6
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json'
)
.then(res => res.json())
.then(data => {
scene.addImage(
'marker',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
);
const imageLayer = new PointLayer()
.source(data)
.shape('marker')
.size(12);
scene.addLayer(imageLayer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json'
)
.then(res => res.json())
.then(data => {
scene.addImage(
'marker',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
);
const imageLayer = new PointLayer()
.source(data)
.shape('marker')
.size(12);
scene.addLayer(imageLayer);
});
});

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

@ -11,64 +11,66 @@ const scene = new Scene({
rotation: 4.183582
})
});
scene.addImage(
'00',
'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'
);
scene.addImage(
'02',
'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'
);
scene.addImage(
'11',
'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'
);
scene.addImage(
'07',
'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'
);
scene.addImage(
'06',
'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'
);
scene.addImage(
'17',
'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'
);
fetch(
'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json'
)
.then(res => res.json())
.then(data => {
const imageLayer = new PointLayer()
.source(data)
.shape('w', function(w) {
return w;
})
.size(15);
scene.addLayer(imageLayer);
});
scene.on('loaded', () => {
scene.addImage(
'00',
'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'
);
scene.addImage(
'02',
'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'
);
scene.addImage(
'11',
'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'
);
scene.addImage(
'07',
'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'
);
scene.addImage(
'06',
'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'
);
scene.addImage(
'17',
'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'
);
fetch(
'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json'
)
.then(res => res.json())
.then(data => {
const imageLayer = new PointLayer()
.source(data)
.shape('w', function(w) {
return w;
})
.size(15);
scene.addLayer(imageLayer);
});
});

7
examples/point/marker/demo/clustermarker.js
View File

@ -10,9 +10,10 @@ const scene = new Scene({
zoom: 4
})
});
addMarkers();
scene.render();
scene.on('loaded', () => {
addMarkers();
scene.render();
});
function addMarkers() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'

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

@ -10,9 +10,10 @@ const scene = new Scene({
zoom: 4
})
});
addMarkers();
scene.render();
scene.on('loaded', () => {
addMarkers();
scene.render();
});
function addMarkers() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'

7
examples/point/marker/demo/markerlayer.js
View File

@ -10,9 +10,10 @@ const scene = new Scene({
zoom: 4
})
});
addMarkers();
scene.render();
scene.on('loaded', () => {
addMarkers();
scene.render();
});
function addMarkers() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'

71
examples/point/scatter/demo/scatter.js
View File

@ -10,39 +10,40 @@ const scene = new Scene({
zoom: 6.45
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'
)
.then(res => res.text())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'Longitude',
y: 'Latitude'
}
})
.shape('circle')
.size(4)
.active(true)
.color('Magnitude', [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
])
.style({
opacity: 0.5,
strokeWidth: 0
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'
)
.then(res => res.text())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'Longitude',
y: 'Latitude'
}
})
.shape('circle')
.size(4)
.active(true)
.color('Magnitude', [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
])
.style({
opacity: 0.5,
strokeWidth: 0
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

53
examples/point/text/demo/point_text.js
View File

@ -10,30 +10,31 @@ const scene = new Scene({
zoom: 3
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('m', 'text')
.size(12)
.color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0
});
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('m', 'text')
.size(12)
.color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0
});
scene.addLayer(pointLayer);
});
scene.addLayer(pointLayer);
});
});

45
examples/point/text/demo/polygon_text.js
View File

@ -10,25 +10,26 @@ const scene = new Scene({
zoom: 3
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
)
.then(res => res.json())
.then(data => {
const layer = new PolygonLayer({})
.source(data)
.color('blue')
.shape('name', 'text')
.size(18)
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0
});
scene.addLayer(layer);
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
)
.then(res => res.json())
.then(data => {
const layer = new PolygonLayer({})
.source(data)
.color('blue')
.shape('name', 'text')
.size(18)
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0
});
scene.addLayer(layer);
});
});

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

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

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

@ -10,44 +10,45 @@ const scene = new Scene({
zoom: 10.07
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'
)
.then(res => res.json())
.then(data => {
const layer = new PolygonLayer({})
.source(data)
.color(
'unit_price',
[
'#1A4397',
'#2555B7',
'#3165D1',
'#467BE8',
'#6296FE',
'#7EA6F9',
'#98B7F7',
'#BDD0F8',
'#DDE6F7',
'#F2F5FC'
].reverse()
)
.shape('fill')
.active(true)
.style({
opacity: 1
});
const layer2 = new LineLayer({
zIndex: 2
})
.source(data)
.color('#fff')
.size(0.8)
.style({
opacity: 1
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'
)
.then(res => res.json())
.then(data => {
const layer = new PolygonLayer({})
.source(data)
.color(
'unit_price',
[
'#1A4397',
'#2555B7',
'#3165D1',
'#467BE8',
'#6296FE',
'#7EA6F9',
'#98B7F7',
'#BDD0F8',
'#DDE6F7',
'#F2F5FC'
].reverse()
)
.shape('fill')
.active(true)
.style({
opacity: 1
});
const layer2 = new LineLayer({
zIndex: 2
})
.source(data)
.color('#fff')
.size(0.8)
.style({
opacity: 1
});
scene.addLayer(layer);
scene.addLayer(layer2);
});
scene.addLayer(layer);
scene.addLayer(layer2);
});
});

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

@ -10,39 +10,40 @@ const scene = new Scene({
zoom: 3.87
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
.then(res => res.json())
.then(data => {
const colors = [
'#D7F9F0',
'#A6E1E0',
'#72BED6',
'#5B8FF9',
'#3474DB',
'#005CBE',
'#00419F',
'#00287E'
];
const layer = new PolygonLayer({})
.source(data)
.color('name', colors)
.shape('fill')
.active(true)
.style({
opacity: 0.9
});
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
.then(res => res.json())
.then(data => {
const colors = [
'#D7F9F0',
'#A6E1E0',
'#72BED6',
'#5B8FF9',
'#3474DB',
'#005CBE',
'#00419F',
'#00287E'
];
const layer = new PolygonLayer({})
.source(data)
.color('name', colors)
.shape('fill')
.active(true)
.style({
opacity: 0.9
});
const layer2 = new LineLayer({
zIndex: 2
})
.source(data)
.color('#fff')
.size(0.3)
.style({
opacity: 1
});
const layer2 = new LineLayer({
zIndex: 2
})
.source(data)
.color('#fff')
.size(0.3)
.style({
opacity: 1
});
scene.addLayer(layer);
scene.addLayer(layer2);
});
scene.addLayer(layer);
scene.addLayer(layer2);
});
});

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

@ -10,57 +10,59 @@ const scene = new Scene({
zoom: 0.51329
})
});
Promise.all([
fetch(
'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 ]) {
const popobj = {};
population.forEach(element => {
popobj[element.Code] =
scene.on('loaded', () => {
Promise.all([
fetch(
'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 ]) {
const popobj = {};
population.forEach(element => {
popobj[element.Code] =
element['Population, female (% of total) (% of total)'];
});
// 数据绑定
world.features = world.features.map(fe => {
fe.properties.female = popobj[fe.id] * 1 || 0;
return fe;
});
const colors = [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
];
const layer = new PolygonLayer({})
.source(world)
.scale('female', {
type: 'quantile'
})
.color('female', colors)
.shape('fill')
.active(true)
.style({
opacity: 0.9
});
// 数据绑定
world.features = world.features.map(fe => {
fe.properties.female = popobj[fe.id] * 1 || 0;
return fe;
});
const colors = [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
];
const layer = new PolygonLayer({})
.source(world)
.scale('female', {
type: 'quantile'
})
.color('female', colors)
.shape('fill')
.active(true)
.style({
opacity: 0.9
});
const layer2 = new LineLayer({
zIndex: 2
})
.source(world)
.color('#fff')
.size(0.8)
.style({
opacity: 1
});
scene.addLayer(layer);
scene.addLayer(layer2);
const layer2 = new LineLayer({
zIndex: 2
})
.source(world)
.color('#fff')
.size(0.8)
.style({
opacity: 1
});
scene.addLayer(layer);
scene.addLayer(layer2);
});
});

99
examples/polygon/fill/demo/usa.js
View File

@ -10,54 +10,55 @@ const scene = new Scene({
zoom: 3
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
)
.then(res => res.json())
.then(data => {
const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
const layer = new PolygonLayer({})
.source(data)
.color(
'density', d => {
return d > 1000 ? color[7] :
d > 500 ? color[6] :
d > 200 ? color[5] :
d > 100 ? color[4] :
d > 50 ? color[3] :
d > 20 ? color[2] :
d > 10 ? color[1] :
color[0];
}
)
.shape('fill')
.active(true)
.style({
opacity: 1.0
});
const layer2 = new LineLayer({
zIndex: 2
})
.source(data)
.color('#fff')
.active(true)
.size(1)
.style({
lineType: 'dash',
dashArray: [ 2, 2 ],
opacity: 1
});
scene.addLayer(layer);
scene.addLayer(layer2);
layer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
)
.then(res => res.json())
.then(data => {
const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
const layer = new PolygonLayer({})
.source(data)
.color(
'density', d => {
return d > 1000 ? color[7] :
d > 500 ? color[6] :
d > 200 ? color[5] :
d > 100 ? color[4] :
d > 50 ? color[3] :
d > 20 ? color[2] :
d > 10 ? color[1] :
color[0];
}
)
.shape('fill')
.active(true)
.style({
opacity: 1.0
});
const layer2 = new LineLayer({
zIndex: 2
})
.setLnglat(e.lngLat)
.setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
scene.addPopup(popup);
.source(data)
.color('#fff')
.active(true)
.size(1)
.style({
lineType: 'dash',
dashArray: [ 2, 2 ],
opacity: 1
});
scene.addLayer(layer);
scene.addLayer(layer2);
layer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
scene.addPopup(popup);
});
});
});
});

4
examples/raster/basic/demo/dem.js
View File

@ -10,7 +10,9 @@ const scene = new Scene({
zoom: 3
})
});
addLayer();
scene.on('loaded', () => {
addLayer();
});
async function getTiffData() {
const response = await fetch(
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat'

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

@ -10,15 +10,16 @@ const scene = new Scene({
zoom: 13
})
});
const layer = new ImageLayer({});
layer.source(
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{
parser: {
type: 'image',
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
scene.on('loaded', () => {
const layer = new ImageLayer({});
layer.source(
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{
parser: {
type: 'image',
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
}
}
}
);
scene.addLayer(layer);
);
scene.addLayer(layer);
});

4
examples/raster/basic/demo/light.js
View File

@ -11,7 +11,9 @@ const scene = new Scene({
zoom: 3
})
});
addLayer();
scene.on('loaded', () => {
addLayer();
});
async function getTiffData() {
const response = await fetch(
'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff'

5
examples/raster/basic/demo/ndvi.js
View File

@ -11,8 +11,9 @@ const scene = new Scene({
zoom: 3
})
});
addLayer();
scene.on('loaded', () => {
addLayer();
});
// async function getAllYearData() {
// const allData = [];
// for (let i = 1; i < 13; i++) {

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

@ -10,15 +10,16 @@ const scene = new Scene({
zoom: 7
})
});
const layer = new ImageLayer({});
layer.source(
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ',
{
parser: {
type: 'image',
extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ]
scene.on('loaded', () => {
const layer = new ImageLayer({});
layer.source(
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ',
{
parser: {
type: 'image',
extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ]
}
}
}
);
scene.addLayer(layer);
);
scene.addLayer(layer);
});

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

@ -9,43 +9,45 @@ const scene = new Scene({
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({})
.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
scene.on('loaded', () => {
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'
}
})
.shape('circle')
.size('unit_price', [ 5, 25 ])
.color('name', [ '#49B5AD', '#5B8FF9' ])
.style({
opacity: 0.3,
strokeWidth: 1
});
scene.addLayer(pointLayer);
const overlayers = {
气泡图: pointLayer
};
const layersControl = new Layers({
overlayers
});
scene.addLayer(pointLayer);
const overlayers = {
气泡图: pointLayer
};
const layersControl = new Layers({
overlayers
scene.addControl(layersControl);
});
scene.addControl(layersControl);
const zoomControl = new Zoom({
position: 'topright'
});
const zoomControl = new Zoom({
position: 'topright'
const scaleControl = new Scale({
position: 'bottomright'
});
scene.addControl(zoomControl);
scene.addControl(scaleControl);
});
const scaleControl = new Scale({
position: 'bottomright'
});
scene.addControl(zoomControl);
scene.addControl(scaleControl);

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

@ -9,8 +9,9 @@ const scene = new Scene({
zoom: 4.056
})
});
const zoomControl = new Zoom();
const scaleControl = new Scale();
scene.addControl(zoomControl);
scene.addControl(scaleControl);
scene.on('loaded', () => {
const zoomControl = new Zoom();
const scaleControl = new Scale();
scene.addControl(zoomControl);
scene.addControl(scaleControl);
});

67
examples/tutorial/map/demo/amapInstance.js
View File

@ -16,39 +16,42 @@ window.onLoad = function() {
mapInstance: map
})
});
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'
}
})
.shape('name', [
'circle',
'triangle',
'square',
'pentagon',
'hexagon',
'octogon',
'hexagram',
'rhombus',
'vesica'
])
.size('unit_price', [ 10, 25 ])
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
.style({
opacity: 0.3,
strokeWidth: 2
});
scene.addLayer(pointLayer);
});
scene.on('loaded', () => {
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'
}
})
.shape('name', [
'circle',
'triangle',
'square',
'pentagon',
'hexagon',
'octogon',
'hexagram',
'rhombus',
'vesica'
])
.size('unit_price', [ 10, 25 ])
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
.style({
opacity: 0.3,
strokeWidth: 2
});
scene.addLayer(pointLayer);
});
});
};
const url = 'https://webapi.amap.com/maps?v=1.4.15&key=15cd8a57710d40c9b7c0e3cc120f1200&callback=onLoad';
const jsapi = document.createElement('script');
jsapi.charset = 'utf-8';

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

@ -9,13 +9,15 @@ const scene = new Scene({
zoom: 12.056
})
});
scene.on('loaded', () => {
// 创建默认 marker
const popup = new Popup({
offsets: [ 0, 20 ]
}).setText('hello');
const popup = new Popup({
offsets: [ 0, 20 ]
}).setText('hello');
const marker = new Marker()
.setLnglat([ 121.4316962, 31.26082325 ])
.setPopup(popup);
const marker = new Marker()
.setLnglat([ 121.4316962, 31.26082325 ])
.setPopup(popup);
scene.addMarker(marker);
scene.addMarker(marker);
});

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

@ -9,8 +9,9 @@ const scene = new Scene({
zoom: 4.056
})
});
const zoomControl = new Zoom();
const scaleControl = new Scale();
scene.addControl(zoomControl);
scene.addControl(scaleControl);
scene.on('loaded', () => {
const zoomControl = new Zoom();
const scaleControl = new Scale();
scene.addControl(zoomControl);
scene.addControl(scaleControl);
});

1
packages/core/src/services/interaction/PickingService.ts
View File

@ -140,7 +140,6 @@ export default class PickingService implements IPickingService {
useFramebuffer,
} = this.rendererService;
const { width, height } = getViewportSize();
const { enableHighlight, enableSelect } = layer.getLayerConfig();
const xInDevicePixel = x * window.devicePixelRatio;

1
packages/l7/demo/circle.html
View File

@ -14,6 +14,7 @@
top: 0;
bottom: 0;
width: 100%;
cursor:pointer;
}
</style>
<link

22
packages/l7/demo/polygon.html
View File

@ -23,7 +23,7 @@
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>-->
<!-- <script src="https://cdn.jsdelivr.net/npm/symbol-es6@0.1.2/symbol-es6.min.js"></script> -->
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
@ -88,12 +88,21 @@
const scene = new L7.Scene({
id: "map",
map: new L7.Mapbox({
style: "dark", // 样式URL
style: "blank", // 样式URL
center: [ -96, 37.8 ],
zoom: 3,
pitch: 0,
})
});
document.body.addEventListener('touchstart', ()=>{
//alert('touchstart!');
});
document.body.addEventListener('click', ()=>{
// alert('Click!');
});
scene.on('loaded',()=>{
const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
const layer = new L7.PolygonLayer({})
.source(data)
@ -114,7 +123,14 @@
.style({
opacity: 1.0
});
scene.addLayer(layer);
scene.addLayer(layer);
layer.on('click',()=>{
console.log('click')
})
layer.on('dblclick',()=>{
console.log('dblclickww')
})
})
</script>
</body>
</html>

2
packages/maps/src/mapbox/map.ts
View File

@ -26,6 +26,8 @@ const EventMap: {
} = {
mapmove: 'move',
camerachange: 'move',
zoomChange: 'zoom',
dragging: 'drag',
};
import { MapTheme } from './theme';

9
stories/Layers/components/polygon.tsx
View File

@ -106,15 +106,12 @@ export default class TextLayerDemo extends React.Component {
map: new Mapbox({
center: [120.19382669582967, 30.258134],
pitch: 0,
style: 'dark',
zoom: 3,
style: 'blank',
zoom: 0,
}),
});
scene.on('loaded', () => {
const layer = new PolygonLayer({
minZoom: 3,
maxZoom: 7,
})
const layer = new PolygonLayer({})
.source(data)
.shape('fill')
.color('childrenNum', [

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

@ -31,7 +31,7 @@ export default class World extends React.Component {
id: 'map',
logoVisible: false,
map: new Mapbox({
style: 'light',
style: 'blank',
center: [110.19382669582967, 30.258134],
pitch: 0,
zoom: 0,