mirror of https://gitee.com/antv-l7/antv-l7
refactor(example): add lint
This commit is contained in:
thinkinggis
parent
bf0f834d34
commit
cd612223c1
48
.eslintrc
48
.eslintrc
|
|
@ -1,5 +1,51 @@
|
|||
{
|
||||
"extends": [
|
||||
"eslint-config-egg"
|
||||
],
|
||||
"globals": {
|
||||
"AMap": true
|
||||
"$": true,
|
||||
"AMap": true,
|
||||
"L7": true,
|
||||
"AMapUI": true,
|
||||
"DataSet": true,
|
||||
"G2": true,
|
||||
"_": true,
|
||||
"mapboxgl":true,
|
||||
},
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"html"
|
||||
],
|
||||
"rules": {
|
||||
"no-console": [
|
||||
"error",
|
||||
{
|
||||
"allow": [
|
||||
"warn",
|
||||
"error"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-bitwise": [
|
||||
0
|
||||
],
|
||||
"experimentalDecorators": [
|
||||
0
|
||||
],
|
||||
"comma-dangle": [
|
||||
"error",
|
||||
"never"
|
||||
],
|
||||
"jsdoc/require-param": 0,
|
||||
"linebreak-style": [
|
||||
0
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
# L7
|
||||
|
||||
|
||||
[](https://www.npmjs.com/@antv/l7)
|
||||
[](http://npmjs.com/@antv/l7)
|
||||
|
||||
|
||||
L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
|
||||
|
|
|
|||
|
|
@ -2,3 +2,6 @@
|
|||
export * from '@l7/scene';
|
||||
// @ts-ignore
|
||||
export * from '@l7/layers';
|
||||
|
||||
// @ts-ignore
|
||||
export * from '@l7/component';
|
||||
|
|
|
|||
|
|
@ -1,10 +1,24 @@
|
|||
---
|
||||
title: Scene
|
||||
title: 场景 Scene
|
||||
order: 1
|
||||
---
|
||||
|
||||
## 简介
|
||||
`Scene `基础的地图类,提供地图创建，图层创建，管理等功能
|
||||
# 简介
|
||||
|
||||
## Scene
|
||||
|
||||
L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理
|
||||
|
||||
|
||||
## Map
|
||||
|
||||
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理
|
||||
只需要通过Scene传入地图配置项即可。
|
||||
|
||||
目前L7 支持两种地图底图
|
||||
- 高德地图 国内业务场景 合规中国地图
|
||||
- MapBox 国际业务，或者内网离线部署场景
|
||||
|
||||
|
||||
示例代码
|
||||
|
||||
|
|
|
|||
|
|
@ -93,11 +93,11 @@ layer.source(data, {
|
|||
|
||||
},
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 6000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
type: 'hexagon',
|
||||
size: 6000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
```
|
||||
|
|
@ -121,7 +121,7 @@ layer.source(data, {
|
|||
|
||||
```javascript
|
||||
{
|
||||
type: {string} // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow
|
||||
type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -63,3 +63,12 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支
|
|||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改GeoJSON数据
|
||||
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据
|
||||
|
||||
## 数据资源
|
||||
|
||||
#### 全国行政区划边界
|
||||
[支持 geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
|
||||
|
||||
#### HighCharts 全球行政区划数据集
|
||||
|
||||
[https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/)
|
||||
|
|
|
|||
|
|
@ -5,31 +5,29 @@ const scene = new Scene({
|
|||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [107.77791556935472, 35.443286920228644],
|
||||
zoom: 2.9142882493605033,
|
||||
center: [ 107.77791556935472, 35.443286920228644 ],
|
||||
zoom: 2.9142882493605033
|
||||
});
|
||||
window.mapScene = scene;
|
||||
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);
|
||||
})
|
||||
.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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,42 +1,45 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [103.83735604457024,1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
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({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.source(data,{
|
||||
parser:{
|
||||
type:'json',
|
||||
coordinates:'path'
|
||||
}
|
||||
})
|
||||
.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)
|
||||
)
|
||||
.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);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,44 +1,44 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer} from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 35.210526315789465,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [108.524505, 29.873128],
|
||||
zoom: 4.4,
|
||||
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [1, 2, level * 2 + 20];
|
||||
})
|
||||
.color('t',[
|
||||
'#094D4A', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#CEF8D6'
|
||||
],)
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
})
|
||||
scene.addLayer(pointLayer);
|
||||
console.log(pointLayer);
|
||||
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
@ -4,56 +4,56 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 43,
|
||||
center: [120.13383079335335,29.651873105004427],
|
||||
center: [ 120.13383079335335, 29.651873105004427 ],
|
||||
zoom: 7.068989519212174,
|
||||
type: 'mapbox',
|
||||
type: 'mapbox'
|
||||
});
|
||||
|
||||
|
||||
window.mapScene = scene;
|
||||
|
||||
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',
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
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', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#C3F9CC',
|
||||
'#DEFAC0', '#ECFFB1'
|
||||
]
|
||||
);
|
||||
.color('sum', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#C3F9CC',
|
||||
'#DEFAC0',
|
||||
'#ECFFB1'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,34 +1,30 @@
|
|||
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [121.417463, 31.215175],
|
||||
center: [ 121.417463, 31.215175 ],
|
||||
pitch: 0,
|
||||
zoom: 11
|
||||
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
})
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
}).size(0.5)
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity:1.,
|
||||
})
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
})
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,36 +1,37 @@
|
|||
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 64.88,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [114.060288, 22.53684],
|
||||
zoom: 15.63,
|
||||
|
||||
center: [ 114.060288, 22.53684 ],
|
||||
zoom: 15.63
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
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
|
||||
});
|
||||
|
||||
})
|
||||
.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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,49 +4,59 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [110.097892, 33.853662],
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap',
|
||||
type: 'amap'
|
||||
});
|
||||
window.mapScene = scene;
|
||||
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'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'grid',
|
||||
size: 20000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count',(value)=>{
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0,
|
||||
})
|
||||
.color('count', [
|
||||
'#0B0030', '#100243',
|
||||
'#100243', '#1B048B',
|
||||
'#051FB7', '#0350C1',
|
||||
'#0350C1', '#0072C4',
|
||||
'#0796D3', '#2BA9DF',
|
||||
'#30C7C4', '#6BD5A0',
|
||||
'#A7ECB2', '#D0F4CA'
|
||||
].reverse())
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 20000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,44 +4,50 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [110.097892, 33.853662],
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap',
|
||||
type: 'amap'
|
||||
});
|
||||
window.mapScene = scene;
|
||||
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'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count',(value)=>{
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0,
|
||||
})
|
||||
.color('count', [
|
||||
'#FF4818', '#F7B74A',
|
||||
'#FFF598', '#FF40F3',
|
||||
'#9415FF', '#421EB2'
|
||||
].reverse())
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#FF40F3',
|
||||
'#9415FF',
|
||||
'#421EB2'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,17 +4,16 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
pitch: 0,
|
||||
center: [110.097892, 33.853662],
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap',
|
||||
type: 'amap'
|
||||
});
|
||||
|
||||
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: {
|
||||
|
|
@ -31,20 +30,30 @@ fetch(
|
|||
}
|
||||
]
|
||||
})
|
||||
.size('count', (value) => {
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('circle')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
angle: 0
|
||||
})
|
||||
.color('count', [
|
||||
'#8C1EB2', '#8C1EB2', '#DA05AA',
|
||||
'#F0051A', '#FF2A3C', '#FF4818',
|
||||
'#FF4818', '#FF8B18',
|
||||
'#F77B00', '#ED9909',
|
||||
'#ECC357', '#EDE59C'
|
||||
].reverse())
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#8C1EB2',
|
||||
'#8C1EB2',
|
||||
'#DA05AA',
|
||||
'#F0051A',
|
||||
'#FF2A3C',
|
||||
'#FF4818',
|
||||
'#FF4818',
|
||||
'#FF8B18',
|
||||
'#F77B00',
|
||||
'#ED9909',
|
||||
'#ECC357',
|
||||
'#EDE59C'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,46 +4,53 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [110.097892, 33.853662],
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap',
|
||||
type: 'amap'
|
||||
});
|
||||
|
||||
window.mapScene = scene;
|
||||
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'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count',(value)=>{
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0,
|
||||
})
|
||||
.color('count', [
|
||||
'#FF3417', '#FF7412',
|
||||
'#FFB02A', '#FFE754',
|
||||
'#46F3FF', '#02BEFF',
|
||||
'#1A7AFF', '#0A1FB2'
|
||||
].reverse())
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF3417',
|
||||
'#FF7412',
|
||||
'#FFB02A',
|
||||
'#FFE754',
|
||||
'#46F3FF',
|
||||
'#02BEFF',
|
||||
'#1A7AFF',
|
||||
'#0A1FB2'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 网格热力图
|
||||
order: 1
|
||||
---
|
||||
热力图的变体，网格布局呈现数据分级分布的聚合现象。
|
||||
|
|
@ -4,30 +4,35 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [127.5671666579043, 7.445038892195569],
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
type: 'mapbox',
|
||||
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]
|
||||
}
|
||||
})
|
||||
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);
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,40 +3,39 @@ import { HeatmapLayer } from '@l7/layers';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 57.4999999,
|
||||
center: [116.49434030056, 39.868073421167621],
|
||||
pitch: 58.5,
|
||||
center: [ 111.8759, 30.6942 ],
|
||||
rotation: 0.519,
|
||||
type: 'mapbox',
|
||||
zoom: 3,
|
||||
zoom: 3.6116
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new HeatmapLayer({
|
||||
})
|
||||
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])
|
||||
.size('capacity', [ 0, 1 ])
|
||||
.shape('heatmap3D')
|
||||
// weight映射通道
|
||||
// weight映射通道
|
||||
.style({
|
||||
intensity: 10,
|
||||
radius: 5,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors:[
|
||||
colors: [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#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);
|
||||
console.log(layer)
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,30 +4,35 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [127.5671666579043,7.445038892195569],
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
type: 'mapbox',
|
||||
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({
|
||||
})
|
||||
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]
|
||||
}
|
||||
})
|
||||
.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);
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 经典热力图
|
||||
order: 0
|
||||
---
|
||||
区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。
|
||||
|
|
@ -4,45 +4,51 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 47.49999999999995,
|
||||
center: [112.50447776627743,30.830476390931125],
|
||||
center: [ 112.50447776627743, 30.830476390931125 ],
|
||||
zoom: 3.9879693680088626,
|
||||
type: 'mapbox',
|
||||
type: 'mapbox'
|
||||
});
|
||||
window.mapScene = scene;
|
||||
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'
|
||||
},
|
||||
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,
|
||||
})
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,17 +3,18 @@ import { Scene } from '@l7/scene';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 47.49999999999995,
|
||||
center: [114.05737552216226, 22.542656745583486],
|
||||
zoom: 12.405122702055305,
|
||||
type: 'mapbox',
|
||||
pitch: 56.499,
|
||||
center: [ 114.07737552216226, 22.542656745583486 ],
|
||||
rotation: 39.19,
|
||||
zoom: 12.47985,
|
||||
type: 'mapbox'
|
||||
});
|
||||
window.mapScene = scene;
|
||||
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: [
|
||||
|
|
@ -21,26 +22,31 @@ 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',
|
||||
[
|
||||
'#094D4A', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#CEF8D6'
|
||||
].reverse()
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,59 +1,59 @@
|
|||
import { HeatMapHexagonLayer, HeatMapGrid3dLayer } from '@l7/layers';
|
||||
import { HeatmapLayer } from '@l7/layers';
|
||||
import { Scene } from '@l7/scene';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 43,
|
||||
center: [120.13383079335335,29.651873105004427],
|
||||
center: [ 120.13383079335335, 29.651873105004427 ],
|
||||
zoom: 7.068989519212174,
|
||||
type: 'mapbox',
|
||||
type: 'mapbox'
|
||||
});
|
||||
|
||||
|
||||
window.mapScene = scene;
|
||||
|
||||
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) => {
|
||||
const layer = new HeatMapGrid3dLayer({})
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:'lng',
|
||||
y:'lat',
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
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', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#C3F9CC',
|
||||
'#DEFAC0', '#ECFFB1'
|
||||
]
|
||||
);
|
||||
.color('sum', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#C3F9CC',
|
||||
'#DEFAC0',
|
||||
'#ECFFB1'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
{
|
||||
"filename": "world.js",
|
||||
"title": "蜂窝热力图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tq4hR7QfQ0AAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*C3V7ToIoEvkAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,46 +4,52 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [116.49434030056, 39.868073421167621],
|
||||
center: [ 104.995156, 31.450658 ],
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
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({
|
||||
})
|
||||
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',
|
||||
},
|
||||
],
|
||||
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', [
|
||||
'#1D2BB2', '#06117C',
|
||||
'#06117C', '#06117C',
|
||||
'#1D2BB2', '#1D2BB2',
|
||||
'#1D2BB2', '#0F62FF',
|
||||
'#0F62FF', '#0CB7FF',
|
||||
'#0CB7FF', '#52F1FC'
|
||||
|
||||
].reverse());
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#0F62FF',
|
||||
'#0F62FF',
|
||||
'#30B2E9',
|
||||
'#30B2E9',
|
||||
'#40C4CE'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 蜂窝热力图
|
||||
order: 1
|
||||
---
|
||||
热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。
|
||||
|
|
@ -5,40 +5,34 @@ const scene = new Scene({
|
|||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [0., 23.107329],
|
||||
zoom: 0,
|
||||
center: [ 0, 23.107329 ],
|
||||
zoom: 0
|
||||
});
|
||||
console.time('loadData');
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
console.timeEnd('loadData');
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json'
|
||||
)
|
||||
.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) {
|
||||
const routes = data.routes.map(function(airline) {
|
||||
return {
|
||||
coord: [
|
||||
getAirportCoord(airline[1]),
|
||||
getAirportCoord(airline[2])
|
||||
]
|
||||
}
|
||||
coord: [ getAirportCoord(airline[1]), getAirportCoord(airline[2]) ]
|
||||
};
|
||||
});
|
||||
console.timeEnd('loadData');
|
||||
const layer =
|
||||
new LineLayer({})
|
||||
.source(routes, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord',
|
||||
},
|
||||
})
|
||||
.size(0.6)
|
||||
.shape('arc')
|
||||
.color('rgb(5, 5, 50)')
|
||||
.style({
|
||||
opacity: 0.05,
|
||||
})
|
||||
;
|
||||
const layer = new LineLayer({})
|
||||
.source(routes, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.size(0.6)
|
||||
.shape('arc')
|
||||
.color('rgb(5, 5, 50)')
|
||||
.style({
|
||||
opacity: 0.05
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,30 +5,28 @@ const scene = new Scene({
|
|||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
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) => {
|
||||
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,
|
||||
blur: 0.99
|
||||
})
|
||||
;
|
||||
.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,
|
||||
blur: 0.99
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,30 +5,30 @@ const scene = new Scene({
|
|||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [-74.06355155037261,40.73507179789368],
|
||||
zoom: 11.8623,
|
||||
center: [ -74.06967, 40.720399 ],
|
||||
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);
|
||||
})
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,31 +5,29 @@ const scene = new Scene({
|
|||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [104.92827320100344,41.209090496438364],
|
||||
zoom: 2.8844827033002813,
|
||||
rotation: 80,
|
||||
center: [ 104.34278, 41.12554 ],
|
||||
zoom: 2.94888,
|
||||
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,
|
||||
})
|
||||
.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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 弧线地图
|
||||
order: 1
|
||||
---
|
||||
将两个点的连线绘制成弧形，绘制的弧形可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。
|
||||
|
|
@ -1,42 +1,40 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 40.89473684210526,
|
||||
pitch: 53.6305,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [102.60244, 23.10556],
|
||||
zoom: 14.28,
|
||||
center: [ 102.600579, 23.114887 ],
|
||||
zoom: 14.66
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new LineLayer({
|
||||
.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 ];
|
||||
})
|
||||
.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()
|
||||
)
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize'
|
||||
})
|
||||
.color(
|
||||
'ELEV',
|
||||
[
|
||||
'#E4682F',
|
||||
'#FF8752',
|
||||
'#FFA783',
|
||||
'#FFBEA8',
|
||||
'#FFDCD6',
|
||||
'#EEF3FF',
|
||||
'#C8D7F5',
|
||||
'#A5C1FC',
|
||||
'#7FA7F9',
|
||||
'#5F8AE5'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,38 +1,37 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 26.842105263157915,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [102.601919, 23.108997],
|
||||
zoom: 14.22,
|
||||
center: [ 102.599436, 23.116371 ],
|
||||
zoom: 14.78
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new LineLayer({
|
||||
.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 ];
|
||||
})
|
||||
.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'
|
||||
],
|
||||
)
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize'
|
||||
})
|
||||
.color('ELEV', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
@ -1,33 +1,40 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
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')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new LineLayer({
|
||||
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'
|
||||
})
|
||||
.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())
|
||||
.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);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,33 +1,40 @@
|
|||
import { Scene } from './node_modules/@l7/scene';
|
||||
import { LineLayer } from './node_modules/@l7/layers'
|
||||
import { LineLayer } from './node_modules/@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
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')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new LineLayer({
|
||||
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'
|
||||
})
|
||||
.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())
|
||||
.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);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,42 +1,45 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [103.83735604457024,1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
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({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.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)
|
||||
)
|
||||
.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);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,42 +1,47 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [103.83735604457024,1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
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({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.source(data,{
|
||||
parser:{
|
||||
type:'json',
|
||||
coordinates:'path'
|
||||
}
|
||||
})
|
||||
.size('level',(level)=>{
|
||||
return [0.8 , level * 1]
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
'level',
|
||||
[
|
||||
'#0A3663', '#1558AC',
|
||||
'#3771D9', '#4D89E5',
|
||||
'#64A5D3', '#72BED6',
|
||||
'#83CED6', '#A6E1E0',
|
||||
'#B8EFE2', '#D7F9F0'
|
||||
].slice(0,8)
|
||||
)
|
||||
.size('level', level => {
|
||||
return [ 0.8, level * 1 ];
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
'level',
|
||||
[
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
]
|
||||
.reverse()
|
||||
.slice(0, 8)
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,29 +1,24 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [116.3956,39.9392],
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
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' ]
|
||||
)
|
||||
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);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,29 +1,24 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [116.3956,39.9392],
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
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' ]
|
||||
)
|
||||
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);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
@ -2,3 +2,4 @@
|
|||
title: 路径地图
|
||||
order: 0
|
||||
---
|
||||
指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
|
||||
|
|
@ -1,48 +1,44 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [121.40, 31.258134],
|
||||
zoom: 15,
|
||||
center: [ 121.435159, 31.256971 ],
|
||||
zoom: 14.89,
|
||||
minZoom: 10
|
||||
});
|
||||
scene.mapScene = scene;
|
||||
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('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);
|
||||
.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);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,31 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [140.067171, 36.26186],
|
||||
center: [ 140.067171, 36.26186 ],
|
||||
zoom: 5.32,
|
||||
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';
|
||||
})
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
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)
|
||||
.shape('circle')
|
||||
.size('mag', [1, 25])
|
||||
.color('mag',(mag)=>{
|
||||
return mag > 4.5? "#5B8FF9" : '#5CCEA1';
|
||||
})
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,43 +1,45 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [-122.80009283836715, 37.05881309947238],
|
||||
center: [ -121.24357, 37.58264 ],
|
||||
pitch: 0,
|
||||
zoom: 5.740491857794806
|
||||
zoom: 6.45
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv')
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.source(data,{
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:'Longitude',
|
||||
y:'Latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.size(4)
|
||||
.color('Magnitude',[
|
||||
'#0A3663', '#1558AC',
|
||||
'#3771D9', '#4D89E5',
|
||||
'#64A5D3', '#72BED6',
|
||||
'#83CED6', '#A6E1E0',
|
||||
'#B8EFE2', '#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0,
|
||||
})
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
.shape('circle')
|
||||
.size(4)
|
||||
.color('Magnitude', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,38 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [ 96.99215001469588, 29.281597225674773],
|
||||
center: [ 96.99215001469588, 29.281597225674773 ],
|
||||
zoom: 2.194613775109773,
|
||||
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'])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
})
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
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'
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 气泡地图
|
||||
order: 0
|
||||
---
|
||||
指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。
|
||||
|
|
@ -1,70 +1,78 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { Marker, Popup } from '@l7/component'
|
||||
import * as G2 from '@antv/g2'
|
||||
import { Marker } from '@l7/component';
|
||||
import * as G2 from '@antv/g2';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [2.6125016864608597,49.359131],
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
pitch: 0,
|
||||
zoom: 4.19
|
||||
});
|
||||
|
||||
scene.on('loaded',()=>{
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
})
|
||||
});
|
||||
function addChart() {
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach(function (item) {
|
||||
const el = document.createElement('div');
|
||||
const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.nodes.forEach(function(item) {
|
||||
const el = document.createElement('div');
|
||||
const total =
|
||||
item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
|
||||
const size = Math.min(parseInt(total / 30000), 70);
|
||||
if(size< 30) {
|
||||
return
|
||||
}
|
||||
console.log(total);
|
||||
const itemData = [{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
}, {
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
}, {
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}];
|
||||
const size = Math.min(parseInt(total / 30000, 10), 70);
|
||||
if (size < 30) {
|
||||
return;
|
||||
}
|
||||
const itemData = [
|
||||
{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
},
|
||||
{
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
},
|
||||
{
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0,
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.tooltip(false);
|
||||
chart.axis('count', {
|
||||
grid: false
|
||||
});
|
||||
chart
|
||||
.interval()
|
||||
.position('item*count')
|
||||
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
|
||||
.opacity(1);
|
||||
chart.render();
|
||||
new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
})
|
||||
.addTo(scene);
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.tooltip(false);
|
||||
chart.axis('count', {
|
||||
grid:false
|
||||
});
|
||||
chart.interval().position('item*count').color('item',['#5CCEA1','#5D7092','#5B8FF9']).opacity(1);
|
||||
chart.render();
|
||||
new Marker({
|
||||
element: el
|
||||
}).setLnglat({
|
||||
lng:item.coordinates[0],
|
||||
lat:item.coordinates[1]
|
||||
}).addTo(scene);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,91 +1,101 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { Marker, Popup } from '@l7/component'
|
||||
import * as G2 from '@antv/g2'
|
||||
import { Marker } from '@l7/component';
|
||||
import * as G2 from '@antv/g2';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [2.6125016864608597,49.359131],
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
pitch: 0,
|
||||
zoom: 4.19
|
||||
});
|
||||
|
||||
scene.on('loaded',()=>{
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
})
|
||||
});
|
||||
window.mapScene = scene;
|
||||
function addChart() {
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach(function (item) {
|
||||
const el = document.createElement('div');
|
||||
const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.nodes.forEach(function(item) {
|
||||
const el = document.createElement('div');
|
||||
const total =
|
||||
item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
|
||||
const size = Math.min(parseInt(total / 30000), 70);
|
||||
if(size< 30) {
|
||||
return
|
||||
}
|
||||
const itemData = [{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
}, {
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
}, {
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}];
|
||||
|
||||
var sliceNumber = 0.02;
|
||||
|
||||
// 自定义 other 的图形，增加两条线
|
||||
G2.Shape.registerShape('interval', 'sliceShape', {
|
||||
draw: function draw(cfg, container) {
|
||||
var points = cfg.points;
|
||||
var 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('Z');
|
||||
path = this.parsePath(path);
|
||||
return container.addShape('path', {
|
||||
attrs: {
|
||||
fill: cfg.color,
|
||||
path: path
|
||||
}
|
||||
});
|
||||
const size = Math.min(parseInt(total / 30000, 10), 70);
|
||||
if (size < 30) {
|
||||
return;
|
||||
}
|
||||
});
|
||||
const itemData = [
|
||||
{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
},
|
||||
{
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
},
|
||||
{
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}
|
||||
];
|
||||
|
||||
var chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0,
|
||||
const sliceNumber = 0.02;
|
||||
|
||||
// 自定义 other 的图形，增加两条线
|
||||
G2.Shape.registerShape('interval', 'sliceShape', {
|
||||
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('Z');
|
||||
path = this.parsePath(path);
|
||||
return container.addShape('path', {
|
||||
attrs: {
|
||||
fill: cfg.color,
|
||||
path
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.coord('theta', {
|
||||
innerRadius: 0.6
|
||||
});
|
||||
chart.tooltip(false);
|
||||
chart
|
||||
.intervalStack()
|
||||
.position('percent')
|
||||
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
|
||||
.shape('sliceShape');
|
||||
chart.render();
|
||||
new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
})
|
||||
.addTo(scene);
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.coord('theta', {
|
||||
innerRadius: 0.6
|
||||
});
|
||||
chart.tooltip(false);
|
||||
chart.intervalStack().position('percent').color('item',['#5CCEA1','#5D7092','#5B8FF9']).shape('sliceShape');
|
||||
chart.render();
|
||||
new Marker({
|
||||
element: el
|
||||
}).setLnglat({
|
||||
lng:item.coordinates[0],
|
||||
lat:item.coordinates[1]
|
||||
}).addTo(scene);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { Marker, Popup } from '@l7/component'
|
||||
import * as G2 from '@antv/g2'
|
||||
import { Marker } from '@l7/component';
|
||||
import * as G2 from '@antv/g2';
|
||||
|
||||
const CSS = `.l7-marker .g2-guide-html {
|
||||
width: 50px;
|
||||
|
|
@ -21,16 +21,16 @@ l7-marker .g2-guide-html .value {
|
|||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
`
|
||||
`;
|
||||
function loadCssCode(code) {
|
||||
var style = document.createElement('style');
|
||||
const style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.rel = 'stylesheet';
|
||||
// for Chrome Firefox Opera Safari
|
||||
style.appendChild(document.createTextNode(code));
|
||||
// for IE
|
||||
// style.styleSheet.cssText = code;
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
const head = document.getElementsByTagName('head')[0];
|
||||
head.appendChild(style);
|
||||
}
|
||||
loadCssCode(CSS);
|
||||
|
|
@ -40,40 +40,46 @@ const scene = new Scene({
|
|||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [52.21496184144132, 24.121126851768906],
|
||||
zoom: 3.802,
|
||||
center: [ 52.21496184144132, 24.121126851768906 ],
|
||||
zoom: 3.802
|
||||
});
|
||||
window.mapScene = scene;
|
||||
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/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([world, center, population]) {
|
||||
|
||||
fetch(
|
||||
'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 ]) {
|
||||
const popobj = {};
|
||||
population.forEach(element => {
|
||||
popobj[element.Code] = element['Population, female (% of total) (% of total)']
|
||||
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, index) => {
|
||||
});
|
||||
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.00 - v.toFixed(2)
|
||||
}, {
|
||||
type: '女性',
|
||||
value: v.toFixed(2) * 1
|
||||
}];
|
||||
const data = [
|
||||
{
|
||||
type: '男性',
|
||||
value: 100.0 - v.toFixed(2)
|
||||
},
|
||||
{
|
||||
type: '女性',
|
||||
value: v.toFixed(2) * 1
|
||||
}
|
||||
];
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
|
|
@ -88,15 +94,18 @@ scene.on('loaded', () => {
|
|||
radius: 0.9,
|
||||
innerRadius: 0.6
|
||||
});
|
||||
chart.intervalStack().position('value').color('type', ['#5CCEA1','#5B8FF9']).opacity(1);
|
||||
chart
|
||||
.intervalStack()
|
||||
.position('value')
|
||||
.color('type', [ '#5CCEA1', '#5B8FF9' ])
|
||||
.opacity(1);
|
||||
chart.render();
|
||||
new Marker(
|
||||
{ element: el}
|
||||
).setLnglat({
|
||||
lng: coord[0],
|
||||
lat: coord[1]
|
||||
}).addTo(scene);
|
||||
})
|
||||
|
||||
new Marker({ element: el })
|
||||
.setLnglat({
|
||||
lng: coord[0],
|
||||
lat: coord[1]
|
||||
})
|
||||
.addTo(scene);
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 复合图表地图
|
||||
order: 6
|
||||
---
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
|
@ -1,40 +1,42 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 65.68421052631578,
|
||||
pitch: 66.02383,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [121.3917, 31.259242],
|
||||
center: [ 121.400257, 31.25287 ],
|
||||
zoom: 14.55,
|
||||
rotation: 120
|
||||
|
||||
rotation: 134.9507
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
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('name', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'])
|
||||
.size('unit_price', (h) => {
|
||||
return [6, 6, h / 500]
|
||||
})
|
||||
.color('name', ['#739DFF', "#61FCBF", '#FFDE74', '#FF896F'])
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
})
|
||||
.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);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +1,42 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 65.68421052631578,
|
||||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [121.3917, 31.259242],
|
||||
zoom: 13.55,
|
||||
rotation: 120
|
||||
|
||||
center: [ 121.412224, 31.26192438 ],
|
||||
zoom: 13.13438,
|
||||
rotation: 35.97133
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
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('name', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'])
|
||||
.size('unit_price', (h) => {
|
||||
return [6, 6, h / 500]
|
||||
})
|
||||
.color('name', ['#5B8FF9', "#70E3B5", '#FFD458', '#FF7C6A'])
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
})
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn'
|
||||
])
|
||||
.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,44 +1,44 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 35.210526315789465,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [108.524505, 29.873128],
|
||||
zoom: 4.4,
|
||||
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function (level) {
|
||||
return [1, 2, level * 2 + 20];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
console.log(pointLayer);
|
||||
|
||||
});
|
||||
|
|
@ -1,38 +1,33 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 35.210526315789465,
|
||||
pitch: 48.62562,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [108.524505, 29.873128],
|
||||
zoom: 4.4,
|
||||
|
||||
center: [ 104.026043, 31.847 ],
|
||||
rotation: -0.76,
|
||||
zoom: 4.48
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function (level) {
|
||||
return [1, 2, level * 2 + 20];
|
||||
})
|
||||
.color('#006CFF')
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.color('#006CFF')
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
console.log(pointLayer);
|
||||
|
||||
});
|
||||
|
|
@ -2,3 +2,4 @@
|
|||
title: 3D 柱状地图
|
||||
order: 4
|
||||
---
|
||||
用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图
|
||||
|
|
@ -1,29 +1,30 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
console.log(this);
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
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')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
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',
|
||||
'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, {
|
||||
|
|
@ -33,9 +34,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
|
|||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', ['00', '01', '02'])
|
||||
.shape('name', [ '00', '01', '02' ])
|
||||
.size(20);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,26 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
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')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
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',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data)
|
||||
.shape('marker')
|
||||
.size(12);
|
||||
scene.addLayer(imageLayer);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,72 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [120.5969, 29.7918],
|
||||
center: [ 120.5969, 29.7918 ],
|
||||
pitch: 35,
|
||||
zoom: 7,
|
||||
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) => {
|
||||
|
||||
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) {
|
||||
.shape('w', function(w) {
|
||||
return w;
|
||||
})
|
||||
.size(15)
|
||||
.size(15);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 符号地图
|
||||
order: 2
|
||||
---
|
||||
以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。
|
||||
|
|
@ -1,40 +1,54 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { Marker } from '@l7/component'
|
||||
import { Marker } from '@l7/component';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [110.80009283836715, 37.05881309947238],
|
||||
center: [ 105.790327, 36.495636 ],
|
||||
pitch: 0,
|
||||
zoom: 4
|
||||
});
|
||||
|
||||
scene.on('loaded',()=>{
|
||||
scene.on('loaded', () => {
|
||||
addMarkers();
|
||||
})
|
||||
});
|
||||
|
||||
function addMarkers() {
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json')
|
||||
.then((res) => res.json())
|
||||
.then((nodes) => {
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
|
||||
if (nodes[i].g !== '1' || nodes[i].v === '') continue;
|
||||
console.log(nodes[i],nodes[i].v === '')
|
||||
var 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 })
|
||||
.addTo(scene);;
|
||||
|
||||
}
|
||||
})
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(nodes => {
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
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);
|
||||
new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
|
||||
.addTo(scene);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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';
|
||||
}
|
||||
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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 自定义 Marker
|
||||
order: 7
|
||||
---
|
||||
可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
|
@ -1,34 +1,30 @@
|
|||
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [121.417463, 31.215175],
|
||||
center: [ 121.417463, 31.215175 ],
|
||||
pitch: 0,
|
||||
zoom: 11
|
||||
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
})
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
}).size(0.5)
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity:1.,
|
||||
})
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
})
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,36 +1,37 @@
|
|||
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 64.88,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [114.060288, 22.53684],
|
||||
zoom: 15.63,
|
||||
|
||||
center: [ 114.060288, 22.53684 ],
|
||||
zoom: 15.63
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
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
|
||||
});
|
||||
|
||||
})
|
||||
.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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: "散点地图"
|
||||
order: 1
|
||||
---
|
||||
指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。
|
||||
|
|
@ -1,28 +1,33 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers'
|
||||
import { PolygonLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 15.05263,
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [114.056128, 22.529272],
|
||||
zoom: 14.2,
|
||||
center: [ 114.050008, 22.529272 ],
|
||||
zoom: 14.1
|
||||
});
|
||||
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new PolygonLayer ({
|
||||
})
|
||||
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'])
|
||||
.size('h20', [ 100, 120, 160, 200, 260, 500 ])
|
||||
.color('h20', [
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
'#C997C7',
|
||||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 3D填充图
|
||||
order: 0
|
||||
---
|
||||
填充地图的增强实现，通过三维视角中的高度体现数据差异。
|
||||
|
|
@ -1,44 +1,50 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer, LineLayer } from '@l7/layers'
|
||||
import { PolygonLayer, LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [116.3237, 39.8829],
|
||||
zoom: 9
|
||||
center: [ 116.368652, 39.93866 ],
|
||||
zoom: 10.07
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new PolygonLayer({
|
||||
})
|
||||
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')
|
||||
.style({
|
||||
.color(
|
||||
'unit_price',
|
||||
[
|
||||
'#1A4397',
|
||||
'#2555B7',
|
||||
'#3165D1',
|
||||
'#467BE8',
|
||||
'#6296FE',
|
||||
'#7EA6F9',
|
||||
'#98B7F7',
|
||||
'#BDD0F8',
|
||||
'#DDE6F7',
|
||||
'#F2F5FC'
|
||||
].reverse()
|
||||
)
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 1
|
||||
})
|
||||
const layer2 =
|
||||
new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
});
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
opacity: 1
|
||||
})
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
console.log(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,39 +1,45 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer, LineLayer } from '@l7/layers'
|
||||
import { PolygonLayer, LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [102.430994, 29.877025],
|
||||
zoom: 3.52,
|
||||
center: [ 107.042225, 37.66565 ],
|
||||
zoom: 3.87
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
var colors = ["#D7F9F0", "#A6E1E0", "#72BED6", "#5B8FF9", "#3474DB", "#005CBE",'#00419F','#00287E'];
|
||||
const layer =
|
||||
new PolygonLayer({
|
||||
})
|
||||
.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')
|
||||
.color('name', colors)
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.9
|
||||
});
|
||||
|
||||
const layer2 =
|
||||
new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
opacity: 1
|
||||
})
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
console.log(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,55 +1,63 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer, LineLayer } from '@l7/layers'
|
||||
import { PolygonLayer, LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [0.29399925603274824,0.15507808202093543],
|
||||
zoom: 0.057043970584144114,
|
||||
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()),
|
||||
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;
|
||||
})
|
||||
var colors = [
|
||||
'#0A3663', '#1558AC',
|
||||
'#3771D9', '#4D89E5',
|
||||
'#64A5D3', '#72BED6',
|
||||
'#83CED6', '#A6E1E0',
|
||||
'#B8EFE2', '#D7F9F0'
|
||||
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')
|
||||
.style({
|
||||
opacity: 0.9
|
||||
});
|
||||
|
||||
const layer2 =
|
||||
new LineLayer({
|
||||
zIndex: 2
|
||||
const layer = new PolygonLayer({})
|
||||
.source(world)
|
||||
.scale('female', {
|
||||
type: 'quantile'
|
||||
})
|
||||
.source(world)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
opacity: 1
|
||||
})
|
||||
.color('female', colors)
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.9
|
||||
});
|
||||
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(world)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 填充地图
|
||||
order: 0
|
||||
---
|
||||
填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { ImageLayer } from '@l7/layers'
|
||||
import { ImageLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [121.2680, 30.3628],
|
||||
zoom: 13,
|
||||
center: [ 121.268, 30.3628 ],
|
||||
zoom: 13
|
||||
});
|
||||
|
||||
const layer = new ImageLayer({});
|
||||
|
|
@ -15,11 +15,10 @@ layer.source(
|
|||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [121.168, 30.2828, 121.384, 30.4219],
|
||||
},
|
||||
},
|
||||
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
|
||||
}
|
||||
}
|
||||
);
|
||||
scene.on('loaded',()=>{
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
})
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { ImageLayer } from '@l7/layers'
|
||||
import { ImageLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [115.52680, 34.3628],
|
||||
zoom: 7,
|
||||
center: [ 115.5268, 34.3628 ],
|
||||
zoom: 7
|
||||
});
|
||||
|
||||
const layer = new ImageLayer({});
|
||||
|
|
@ -15,11 +15,10 @@ layer.source(
|
|||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 113.1277263548,32.3464238863, 118.1365790452, 36.4786759137 ]
|
||||
},
|
||||
},
|
||||
extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ]
|
||||
}
|
||||
}
|
||||
);
|
||||
scene.on('loaded',()=>{
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
})
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ module.exports = {
|
|||
{
|
||||
slug: 'api/l7',
|
||||
title: {
|
||||
zh: '简介',
|
||||
zh: '简介 L7',
|
||||
en: 'Introduction',
|
||||
},
|
||||
order:0,
|
||||
|
|
@ -58,7 +58,7 @@ module.exports = {
|
|||
{
|
||||
slug: 'api/scene',
|
||||
title: {
|
||||
zh: 'Scene',
|
||||
zh: '场景 Scene',
|
||||
en: 'Scene',
|
||||
},
|
||||
order:1,
|
||||
|
|
@ -66,23 +66,23 @@ module.exports = {
|
|||
{
|
||||
slug: 'api/layer',
|
||||
title: {
|
||||
zh: 'Layer',
|
||||
en: 'layer',
|
||||
zh: '图层 Layer',
|
||||
en: 'Layer'
|
||||
},
|
||||
order:2,
|
||||
},
|
||||
{
|
||||
slug: 'api/source',
|
||||
title: {
|
||||
zh: 'source',
|
||||
en: 'source',
|
||||
zh: '数据 Source',
|
||||
en: 'Source',
|
||||
},
|
||||
order:3,
|
||||
},
|
||||
{
|
||||
slug: 'api/component',
|
||||
title: {
|
||||
zh: 'Component',
|
||||
zh: '组件 Component',
|
||||
en: 'Component',
|
||||
},
|
||||
order:4,
|
||||
|
|
|
|||
|
|
@ -54,6 +54,8 @@
|
|||
"enzyme": "^3.6.0",
|
||||
"enzyme-adapter-react-16": "^1.5.0",
|
||||
"enzyme-to-json": "^3.0.0-beta6",
|
||||
"eslint-config-egg": "^7.5.1",
|
||||
"eslint-plugin-html": "^6.0.0",
|
||||
"gatsby": "^2.17.7",
|
||||
"gatsby-plugin-google-analytics": "^2.1.27",
|
||||
"gatsby-remark-prettier": "^1.0.0",
|
||||
|
|
@ -113,11 +115,13 @@
|
|||
"site:clean": "gatsby clean",
|
||||
"site:deploy": "NODE_ENV=site npm 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",
|
||||
"prebuild": "run-p tsc lint",
|
||||
"build": "yarn clean && lerna run build",
|
||||
"todo:postbuild": "yarn build:declarations",
|
||||
"fix": "run-p -c 'lint:ts-* --fix'",
|
||||
"lint:css": "stylelint 'packages/**/*.ts{,x}'",
|
||||
"lint:css": "stylelint 'packages/**/*.js{,x}'",
|
||||
"lint:ts-prod": "tslint --config tslint.prod.json 'packages/**/*.ts{,x}'",
|
||||
"lint:ts-test": "tslint --config tslint.test.json 'packages/**/*.{spec,story}.ts{,x}'",
|
||||
"lint:ts": "run-p -c lint:ts-*",
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export interface IMapConfig {
|
|||
/**
|
||||
* 地图旋转角度
|
||||
*/
|
||||
bearing?: number;
|
||||
rotation?: number;
|
||||
|
||||
/**
|
||||
* 缩放等级
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ export function RasterImageTriangulation(feature: IEncodeFeature) {
|
|||
* @param segNum 弧线线段数
|
||||
*/
|
||||
export function LineArcTriangulation(feature: IEncodeFeature) {
|
||||
const segNum = 20;
|
||||
const segNum = 30;
|
||||
const coordinates = feature.coordinates as IPosition[];
|
||||
const positions = [];
|
||||
const indexArray = [];
|
||||
|
|
|
|||
|
|
@ -174,6 +174,7 @@ export default class MapboxService implements IMapService {
|
|||
attributionControl = false,
|
||||
style = 'light',
|
||||
token = 'pk.eyJ1IjoieGlhb2l2ZXIiLCJhIjoiY2pxcmc5OGNkMDY3cjQzbG42cXk5NTl3YiJ9.hUC5Chlqzzh0FFd_aEc-uQ',
|
||||
rotation = 0,
|
||||
...rest
|
||||
} = mapConfig;
|
||||
this.$mapContainer = document.getElementById(id);
|
||||
|
|
@ -190,6 +191,7 @@ export default class MapboxService implements IMapService {
|
|||
container: id,
|
||||
style: this.getMapStyle(style),
|
||||
attributionControl,
|
||||
bearing: rotation,
|
||||
...rest,
|
||||
});
|
||||
this.map.on('load', this.handleCameraChanged);
|
||||
|
|
|
|||
|
|
@ -58,18 +58,18 @@ const IndexPage = () => {
|
|||
{
|
||||
logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ',
|
||||
title: t('浅色色板'),
|
||||
description: t('一个个真实的数据可视化案例，复杂的地理数据,简单，易用的API接口,让用户达到开箱即用的效果。'),
|
||||
description: t('一个个真实的数据可视化案例，复杂的地理数据,通过简单，易用的API接口,让用户达到开箱即用的效果。'),
|
||||
link: `/${i18n.language}/examples/gallery/basic`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8Pa8Toh3-OsAAAAAAAAAAABkARQnAQ',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RPxeQZ8Uk7EAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ',
|
||||
title: t('深色色板'),
|
||||
description: t('一个个真实的数据可视化案例，复杂的地理数据,简单，易用的API接口,让用户达到开箱即用的效果.'),
|
||||
description: t('一个个真实的数据可视化案例，复杂的地理数据,通过简单，易用的API接口,让用户达到开箱即用的效果'),
|
||||
link: `/${i18n.language}/examples/gallery/basic`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ryTVQ49K8SkAAAAAAAAAAABkARQnAQ',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*B8rtTpvkqTgAAAAAAAAAAABkARQnAQ',
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { HeatMapGridLayer } from '@l7/layers';
|
||||
import { HeatmapLayer } from '@l7/layers';
|
||||
import { Scene } from '@l7/scene';
|
||||
import * as React from 'react';
|
||||
|
||||
|
|
|
|||
184
yarn.lock
184
yarn.lock
|
|
@ -212,6 +212,13 @@
|
|||
optionalDependencies:
|
||||
chokidar "^2.1.8"
|
||||
|
||||
"@babel/code-frame@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/code-frame/download/@babel/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9"
|
||||
integrity sha1-KgJkM2jegJFhYr5whlyXd08629k=
|
||||
dependencies:
|
||||
"@babel/highlight" "7.0.0-beta.44"
|
||||
|
||||
"@babel/code-frame@7.5.5", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
|
||||
version "7.5.5"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/code-frame/download/@babel/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
|
||||
|
|
@ -259,6 +266,17 @@
|
|||
semver "^5.4.1"
|
||||
source-map "^0.5.0"
|
||||
|
||||
"@babel/generator@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/generator/download/@babel/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
|
||||
integrity sha1-x+Z7m1KEr89pswm1DX038+UDPUI=
|
||||
dependencies:
|
||||
"@babel/types" "7.0.0-beta.44"
|
||||
jsesc "^2.5.1"
|
||||
lodash "^4.2.0"
|
||||
source-map "^0.5.0"
|
||||
trim-right "^1.0.1"
|
||||
|
||||
"@babel/generator@^7.0.0", "@babel/generator@^7.4.0", "@babel/generator@^7.6.0", "@babel/generator@^7.7.2":
|
||||
version "7.7.2"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/generator/download/@babel/generator-7.7.2.tgz#2f4852d04131a5e17ea4f6645488b5da66ebf3af"
|
||||
|
|
@ -338,6 +356,15 @@
|
|||
"@babel/traverse" "^7.7.0"
|
||||
"@babel/types" "^7.7.0"
|
||||
|
||||
"@babel/helper-function-name@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/helper-function-name/download/@babel/helper-function-name-7.0.0-beta.44.tgz#e18552aaae2231100a6e485e03854bc3532d44dd"
|
||||
integrity sha1-4YVSqq4iMRAKbkheA4VLw1MtRN0=
|
||||
dependencies:
|
||||
"@babel/helper-get-function-arity" "7.0.0-beta.44"
|
||||
"@babel/template" "7.0.0-beta.44"
|
||||
"@babel/types" "7.0.0-beta.44"
|
||||
|
||||
"@babel/helper-function-name@^7.7.0":
|
||||
version "7.7.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/helper-function-name/download/@babel/helper-function-name-7.7.0.tgz#44a5ad151cfff8ed2599c91682dda2ec2c8430a3"
|
||||
|
|
@ -347,6 +374,13 @@
|
|||
"@babel/template" "^7.7.0"
|
||||
"@babel/types" "^7.7.0"
|
||||
|
||||
"@babel/helper-get-function-arity@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/helper-get-function-arity/download/@babel/helper-get-function-arity-7.0.0-beta.44.tgz#d03ca6dd2b9f7b0b1e6b32c56c72836140db3a15"
|
||||
integrity sha1-0Dym3SufewseazLFbHKDYUDbOhU=
|
||||
dependencies:
|
||||
"@babel/types" "7.0.0-beta.44"
|
||||
|
||||
"@babel/helper-get-function-arity@^7.0.0", "@babel/helper-get-function-arity@^7.7.0":
|
||||
version "7.7.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/helper-get-function-arity/download/@babel/helper-get-function-arity-7.7.0.tgz#c604886bc97287a1d1398092bc666bc3d7d7aa2d"
|
||||
|
|
@ -435,6 +469,13 @@
|
|||
"@babel/template" "^7.7.0"
|
||||
"@babel/types" "^7.7.0"
|
||||
|
||||
"@babel/helper-split-export-declaration@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/helper-split-export-declaration/download/@babel/helper-split-export-declaration-7.0.0-beta.44.tgz#c0b351735e0fbcb3822c8ad8db4e583b05ebd9dc"
|
||||
integrity sha1-wLNRc14PvLOCLIrY205YOwXr2dw=
|
||||
dependencies:
|
||||
"@babel/types" "7.0.0-beta.44"
|
||||
|
||||
"@babel/helper-split-export-declaration@^7.7.0":
|
||||
version "7.7.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/helper-split-export-declaration/download/@babel/helper-split-export-declaration-7.7.0.tgz#1365e74ea6c614deeb56ebffabd71006a0eb2300"
|
||||
|
|
@ -461,6 +502,15 @@
|
|||
"@babel/traverse" "^7.7.0"
|
||||
"@babel/types" "^7.7.0"
|
||||
|
||||
"@babel/highlight@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/highlight/download/@babel/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
|
||||
integrity sha1-GMlM5UORaoBVPtzc9oGJCyAHR9U=
|
||||
dependencies:
|
||||
chalk "^2.0.0"
|
||||
esutils "^2.0.2"
|
||||
js-tokens "^3.0.0"
|
||||
|
||||
"@babel/highlight@^7.0.0":
|
||||
version "7.5.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/highlight/download/@babel/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
|
||||
|
|
@ -1196,6 +1246,16 @@
|
|||
resolved "https://registry.npm.alibaba-inc.com/@babel/standalone/download/@babel/standalone-7.7.3.tgz#9a4f7fc64876b11398e7371665969ccfdb0c9806"
|
||||
integrity sha1-mk9/xkh2sROY5zcWZZacz9sMmAY=
|
||||
|
||||
"@babel/template@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/template/download/@babel/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
|
||||
integrity sha1-+IMvT9zuXVm/UV5ZX8UQbFKbOU8=
|
||||
dependencies:
|
||||
"@babel/code-frame" "7.0.0-beta.44"
|
||||
"@babel/types" "7.0.0-beta.44"
|
||||
babylon "7.0.0-beta.44"
|
||||
lodash "^4.2.0"
|
||||
|
||||
"@babel/template@^7.4.0", "@babel/template@^7.6.0", "@babel/template@^7.7.0":
|
||||
version "7.7.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/template/download/@babel/template-7.7.0.tgz#4fadc1b8e734d97f56de39c77de76f2562e597d0"
|
||||
|
|
@ -1205,6 +1265,22 @@
|
|||
"@babel/parser" "^7.7.0"
|
||||
"@babel/types" "^7.7.0"
|
||||
|
||||
"@babel/traverse@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/traverse/download/@babel/traverse-7.0.0-beta.44.tgz#a970a2c45477ad18017e2e465a0606feee0d2966"
|
||||
integrity sha1-qXCixFR3rRgBfi5GWgYG/u4NKWY=
|
||||
dependencies:
|
||||
"@babel/code-frame" "7.0.0-beta.44"
|
||||
"@babel/generator" "7.0.0-beta.44"
|
||||
"@babel/helper-function-name" "7.0.0-beta.44"
|
||||
"@babel/helper-split-export-declaration" "7.0.0-beta.44"
|
||||
"@babel/types" "7.0.0-beta.44"
|
||||
babylon "7.0.0-beta.44"
|
||||
debug "^3.1.0"
|
||||
globals "^11.1.0"
|
||||
invariant "^2.2.0"
|
||||
lodash "^4.2.0"
|
||||
|
||||
"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.6.0", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
|
||||
version "7.7.2"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/traverse/download/@babel/traverse-7.7.2.tgz#ef0a65e07a2f3c550967366b3d9b62a2dcbeae09"
|
||||
|
|
@ -1220,6 +1296,15 @@
|
|||
globals "^11.1.0"
|
||||
lodash "^4.17.13"
|
||||
|
||||
"@babel/types@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/types/download/@babel/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
|
||||
integrity sha1-axsWRZH3fewKA0KsqZXy0Eazp1c=
|
||||
dependencies:
|
||||
esutils "^2.0.2"
|
||||
lodash "^4.2.0"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.6.0", "@babel/types@^7.7.0", "@babel/types@^7.7.1", "@babel/types@^7.7.2":
|
||||
version "7.7.2"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@babel/types/download/@babel/types-7.7.2.tgz#550b82e5571dcd174af576e23f0adba7ffc683f7"
|
||||
|
|
@ -3944,7 +4029,7 @@
|
|||
dependencies:
|
||||
"@types/yargs-parser" "*"
|
||||
|
||||
"@typescript-eslint/eslint-plugin@^2.7.0":
|
||||
"@typescript-eslint/eslint-plugin@^2.0.0", "@typescript-eslint/eslint-plugin@^2.7.0":
|
||||
version "2.8.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-2.8.0.tgz#eca584d46094ebebc3cb3e9fb625bfbc904a534d"
|
||||
integrity sha1-7KWE1GCU6+vDyz6ftiW/vJBKU00=
|
||||
|
|
@ -3964,7 +4049,7 @@
|
|||
"@typescript-eslint/typescript-estree" "2.8.0"
|
||||
eslint-scope "^5.0.0"
|
||||
|
||||
"@typescript-eslint/parser@^2.7.0":
|
||||
"@typescript-eslint/parser@^2.0.0", "@typescript-eslint/parser@^2.7.0":
|
||||
version "2.8.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/@typescript-eslint/parser/download/@typescript-eslint/parser-2.8.0.tgz#e10f7c40c8cf2fb19920c879311e6c46ad17bacb"
|
||||
integrity sha1-4Q98QMjPL7GZIMh5MR5sRq0Xuss=
|
||||
|
|
@ -4972,6 +5057,18 @@ babel-eslint@^10.0.3:
|
|||
eslint-visitor-keys "^1.0.0"
|
||||
resolve "^1.12.0"
|
||||
|
||||
babel-eslint@^8.2.6:
|
||||
version "8.2.6"
|
||||
resolved "https://registry.npm.alibaba-inc.com/babel-eslint/download/babel-eslint-8.2.6.tgz#6270d0c73205628067c0f7ae1693a9e797acefd9"
|
||||
integrity sha1-YnDQxzIFYoBnwPeuFpOp55es79k=
|
||||
dependencies:
|
||||
"@babel/code-frame" "7.0.0-beta.44"
|
||||
"@babel/traverse" "7.0.0-beta.44"
|
||||
"@babel/types" "7.0.0-beta.44"
|
||||
babylon "7.0.0-beta.44"
|
||||
eslint-scope "3.7.1"
|
||||
eslint-visitor-keys "^1.0.0"
|
||||
|
||||
babel-extract-comments@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/babel-extract-comments/download/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
|
||||
|
|
@ -5476,6 +5573,11 @@ babel-standalone@^6.26.0:
|
|||
resolved "https://registry.npm.alibaba-inc.com/babel-standalone/download/babel-standalone-6.26.0.tgz#15fb3d35f2c456695815ebf1ed96fe7f015b6886"
|
||||
integrity sha1-Ffs9NfLEVmlYFevx7Zb+fwFbaIY=
|
||||
|
||||
babylon@7.0.0-beta.44:
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.npm.alibaba-inc.com/babylon/download/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
|
||||
integrity sha1-iRWeFebjDFCW4i1zjYwK+KDoyh0=
|
||||
|
||||
babylon@^6.18.0:
|
||||
version "6.18.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/babylon/download/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
|
||||
|
|
@ -6812,6 +6914,11 @@ commander@~2.8.1:
|
|||
dependencies:
|
||||
graceful-readlink ">= 1.0.0"
|
||||
|
||||
comment-parser@^0.5.4:
|
||||
version "0.5.5"
|
||||
resolved "https://registry.npm.alibaba-inc.com/comment-parser/download/comment-parser-0.5.5.tgz#c2584cae7c2f0afc773e96b2ee98f8c10cbd693d"
|
||||
integrity sha1-wlhMrnwvCvx3Ppay7pj4wQy9aT0=
|
||||
|
||||
commitizen@^4.0.3:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.npm.alibaba-inc.com/commitizen/download/commitizen-4.0.3.tgz#c19a4213257d0525b85139e2f36db7cc3b4f6dae"
|
||||
|
|
@ -9111,6 +9218,20 @@ escodegen@^1.9.1:
|
|||
optionalDependencies:
|
||||
source-map "~0.6.1"
|
||||
|
||||
eslint-config-egg@^7.5.1:
|
||||
version "7.5.1"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-config-egg/download/eslint-config-egg-7.5.1.tgz#d62a345e1a541cce7601750941b5840c476e27cc"
|
||||
integrity sha1-1io0XhpUHM52AXUJQbWEDEduJ8w=
|
||||
dependencies:
|
||||
"@typescript-eslint/eslint-plugin" "^2.0.0"
|
||||
"@typescript-eslint/parser" "^2.0.0"
|
||||
babel-eslint "^8.2.6"
|
||||
eslint-plugin-eggache "^1.0.0"
|
||||
eslint-plugin-import "^2.14.0"
|
||||
eslint-plugin-jsdoc "^4.1.1"
|
||||
eslint-plugin-jsx-a11y "^6.1.1"
|
||||
eslint-plugin-react "^7.11.1"
|
||||
|
||||
eslint-config-react-app@^5.0.2:
|
||||
version "5.0.2"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-config-react-app/download/eslint-config-react-app-5.0.2.tgz#df40d73a1402986030680c040bbee520db5a32a4"
|
||||
|
|
@ -9145,6 +9266,11 @@ eslint-module-utils@^2.4.0:
|
|||
debug "^2.6.8"
|
||||
pkg-dir "^2.0.0"
|
||||
|
||||
eslint-plugin-eggache@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-plugin-eggache/download/eslint-plugin-eggache-1.0.0.tgz#1f8f98c698d2b511519fbdefbae78fe230487aa4"
|
||||
integrity sha1-H4+YxpjStRFRn73vuueP4jBIeqQ=
|
||||
|
||||
eslint-plugin-flowtype@^3.13.0:
|
||||
version "3.13.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-plugin-flowtype/download/eslint-plugin-flowtype-3.13.0.tgz#e241ebd39c0ce519345a3f074ec1ebde4cf80f2c"
|
||||
|
|
@ -9160,7 +9286,14 @@ eslint-plugin-graphql@^3.1.0:
|
|||
graphql-config "^2.0.1"
|
||||
lodash "^4.11.1"
|
||||
|
||||
eslint-plugin-import@^2.18.2:
|
||||
eslint-plugin-html@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-plugin-html/download/eslint-plugin-html-6.0.0.tgz#28e5c3e71e6f612e07e73d7c215e469766628c13"
|
||||
integrity sha1-KOXD5x5vYS4H5z18IV5Gl2ZijBM=
|
||||
dependencies:
|
||||
htmlparser2 "^3.10.1"
|
||||
|
||||
eslint-plugin-import@^2.14.0, eslint-plugin-import@^2.18.2:
|
||||
version "2.18.2"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-plugin-import/download/eslint-plugin-import-2.18.2.tgz#02f1180b90b077b33d447a17a2326ceb400aceb6"
|
||||
integrity sha1-AvEYC5Cwd7M9RHoXojJs60AKzrY=
|
||||
|
|
@ -9177,7 +9310,16 @@ eslint-plugin-import@^2.18.2:
|
|||
read-pkg-up "^2.0.0"
|
||||
resolve "^1.11.0"
|
||||
|
||||
eslint-plugin-jsx-a11y@^6.2.3:
|
||||
eslint-plugin-jsdoc@^4.1.1:
|
||||
version "4.8.4"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-plugin-jsdoc/download/eslint-plugin-jsdoc-4.8.4.tgz#31f413c8a31fe656881398d8920b381bfdfac618"
|
||||
integrity sha1-MfQTyKMf5laIE5jYkgs4G/36xhg=
|
||||
dependencies:
|
||||
comment-parser "^0.5.4"
|
||||
jsdoctypeparser "3.1.0"
|
||||
lodash "^4.17.11"
|
||||
|
||||
eslint-plugin-jsx-a11y@^6.1.1, eslint-plugin-jsx-a11y@^6.2.3:
|
||||
version "6.2.3"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-plugin-jsx-a11y/download/eslint-plugin-jsx-a11y-6.2.3.tgz#b872a09d5de51af70a97db1eea7dc933043708aa"
|
||||
integrity sha1-uHKgnV3lGvcKl9se6n3JMwQ3CKo=
|
||||
|
|
@ -9205,7 +9347,7 @@ eslint-plugin-react-hooks@^1.7.0:
|
|||
resolved "https://registry.npm.alibaba-inc.com/eslint-plugin-react-hooks/download/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
|
||||
integrity sha1-YhC21aNyBfC5KFj4laToJwIKfQQ=
|
||||
|
||||
eslint-plugin-react@^7.16.0:
|
||||
eslint-plugin-react@^7.11.1, eslint-plugin-react@^7.16.0:
|
||||
version "7.16.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-plugin-react/download/eslint-plugin-react-7.16.0.tgz#9928e4f3e2122ed3ba6a5b56d0303ba3e41d8c09"
|
||||
integrity sha1-mSjk8+ISLtO6altW0DA7o+QdjAk=
|
||||
|
|
@ -9220,6 +9362,14 @@ eslint-plugin-react@^7.16.0:
|
|||
prop-types "^15.7.2"
|
||||
resolve "^1.12.0"
|
||||
|
||||
eslint-scope@3.7.1:
|
||||
version "3.7.1"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-scope/download/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
|
||||
integrity sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=
|
||||
dependencies:
|
||||
esrecurse "^4.1.0"
|
||||
estraverse "^4.1.1"
|
||||
|
||||
eslint-scope@^4.0.3:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.npm.alibaba-inc.com/eslint-scope/download/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
|
||||
|
|
@ -12329,7 +12479,7 @@ html-webpack-plugin@^4.0.0-beta.2:
|
|||
tapable "^1.1.3"
|
||||
util.promisify "1.0.0"
|
||||
|
||||
htmlparser2@^3.10.0, htmlparser2@^3.3.0, htmlparser2@^3.9.1:
|
||||
htmlparser2@^3.10.0, htmlparser2@^3.10.1, htmlparser2@^3.3.0, htmlparser2@^3.9.1:
|
||||
version "3.10.1"
|
||||
resolved "https://registry.npm.alibaba-inc.com/htmlparser2/download/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
|
||||
integrity sha1-vWedw/WYl7ajS7EHSchVu1OpOS8=
|
||||
|
|
@ -14114,16 +14264,16 @@ js-levenshtein@^1.1.3:
|
|||
resolved "https://registry.npm.alibaba-inc.com/js-levenshtein/download/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
|
||||
integrity sha1-xs7ljrNVA3LfjeuF+tXOZs4B1Z0=
|
||||
|
||||
js-tokens@^3.0.0, js-tokens@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.npm.alibaba-inc.com/js-tokens/download/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
|
||||
integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
|
||||
|
||||
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/js-tokens/download/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
||||
integrity sha1-GSA/tZmR35jjoocFDUZHzerzJJk=
|
||||
|
||||
js-tokens@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.npm.alibaba-inc.com/js-tokens/download/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
|
||||
integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
|
||||
|
||||
js-yaml@^3.10.0, js-yaml@^3.11.0, js-yaml@^3.13.1, js-yaml@^3.4.3, js-yaml@^3.5.2:
|
||||
version "3.13.1"
|
||||
resolved "https://registry.npm.alibaba-inc.com/js-yaml/download/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
|
||||
|
|
@ -14137,6 +14287,11 @@ jsbn@~0.1.0:
|
|||
resolved "https://registry.npm.alibaba-inc.com/jsbn/download/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
|
||||
integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
|
||||
|
||||
jsdoctypeparser@3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/jsdoctypeparser/download/jsdoctypeparser-3.1.0.tgz#2f65f75165c4d9c632bb4fda13ed36b78321a43b"
|
||||
integrity sha1-L2X3UWXE2cYyu0/aE+02t4MhpDs=
|
||||
|
||||
jsdom@^11.5.1:
|
||||
version "11.12.0"
|
||||
resolved "https://registry.npm.alibaba-inc.com/jsdom/download/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
|
||||
|
|
@ -14883,7 +15038,7 @@ lodash@4.17.14:
|
|||
resolved "https://registry.npm.alibaba-inc.com/lodash/download/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
|
||||
integrity sha1-nOSHrmbJYlT+ILWZ8htoFgKAeLo=
|
||||
|
||||
lodash@4.17.15, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.15.0, lodash@^4.16.5, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@~4.17.10, lodash@~4.17.5:
|
||||
lodash@4.17.15, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.15.0, lodash@^4.16.5, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@~4.17.10, lodash@~4.17.5:
|
||||
version "4.17.15"
|
||||
resolved "https://registry.npm.alibaba-inc.com/lodash/download/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
integrity sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg=
|
||||
|
|
@ -22686,6 +22841,11 @@ trim-repeated@^1.0.0:
|
|||
dependencies:
|
||||
escape-string-regexp "^1.0.2"
|
||||
|
||||
trim-right@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npm.alibaba-inc.com/trim-right/download/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
|
||||
integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
|
||||
|
||||
trim-trailing-lines@^1.0.0:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.npm.alibaba-inc.com/trim-trailing-lines/download/trim-trailing-lines-1.1.2.tgz#d2f1e153161152e9f02fabc670fb40bec2ea2e3a"
|
||||
|
|
|
|||
Loading…
Reference in New Issue