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

Merge pull request #60 from antvis/site 

Site
This commit is contained in:
@thinkinggis 2019-11-15 01:46:21 +08:00 committed by GitHub
parent 3628fc6b2f 8cf6f5d173
commit c163467ef9
154 changed files with 3318 additions and 837 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
.gitignore vendored
View File

@ -69,91 +69,7 @@ dist/
.DS_Store
public
.cache/redirects.json
.cache/redux.state
.cache/caches/gatsby-transformer-remark/diskstore-0b12f383a1ce9a8cdbb2a4f52cf8af84.json
.cache/caches/gatsby-transformer-remark/diskstore-1ea0cd3c8f491f1774b8edd1ce38b1f9.json
.cache/caches/gatsby-transformer-remark/diskstore-2b8cd1df4f8a6941bff4108301b5d6a9.json
.cache/caches/gatsby-transformer-remark/diskstore-2c713f7ba9a30ac45cbadf6d86d5d544.json
.cache/caches/gatsby-transformer-remark/diskstore-2e9a5d11bfbd9e331e877b0e013a0ab8.json
.cache/caches/gatsby-transformer-remark/diskstore-03f70e3c5a52291e52b331e3d35900a4.json
.cache/caches/gatsby-transformer-remark/diskstore-5a894e6dcf41aaf38dcfe7c4ef24bb6c.json
.cache/caches/gatsby-transformer-remark/diskstore-5aa0c32748bae2a74e08828fed4fd3a6.json
.cache/caches/gatsby-transformer-remark/diskstore-5be2deb5db771c62d6348aacc8798213.json
.cache/caches/gatsby-transformer-remark/diskstore-5ce457da6f1384d2d0a1c8d65aa7035f.json
.cache/caches/gatsby-transformer-remark/diskstore-5e29728bfdb977a2a740b90f7e81c026.json
.cache/caches/gatsby-transformer-remark/diskstore-6e44d9bde57e425196c802f385c59145.json
.cache/caches/gatsby-transformer-remark/diskstore-7c691ebc8b681ec76a0dd2b62e2186ba.json
.cache/caches/gatsby-transformer-remark/diskstore-8a657829abac5ed5e9e205e519d6ded0.json
.cache/caches/gatsby-transformer-remark/diskstore-8c6f6648e48a1e25d0879cba52c6f15c.json
.cache/caches/gatsby-transformer-remark/diskstore-9a6db7a621d98f2e40fca942ffec8d7f.json
.cache/caches/gatsby-transformer-remark/diskstore-09be3cfc8fb53b393e594e000fb9c3c4.json
.cache/caches/gatsby-transformer-remark/diskstore-9ea0254de64dbc01eafc57f7dafb6400.json
.cache/caches/gatsby-transformer-remark/diskstore-9fb8c242123b7f40762c92122bacea8e.json
.cache/caches/gatsby-transformer-remark/diskstore-31a80985ee546abb7aa91ce454986fb1.json
.cache/caches/gatsby-transformer-remark/diskstore-34caa57442541fb555e65adf766c9dbf.json
.cache/caches/gatsby-transformer-remark/diskstore-35f1e3ed2504889557819cd85f730da3.json
.cache/caches/gatsby-transformer-remark/diskstore-51d0f3b693c1d063f395570395293fb4.json
.cache/caches/gatsby-transformer-remark/diskstore-60ffaa0253ce67428f5a7e31a4a0bad1.json
.cache/caches/gatsby-transformer-remark/diskstore-61c1d71d82d9e8cb724bc675e994ee07.json
.cache/caches/gatsby-transformer-remark/diskstore-62ff8f6ebb8d87c110d712e03f9a98e9.json
.cache/caches/gatsby-transformer-remark/diskstore-63f86e913288c0406ba43ec83f25684f.json
.cache/caches/gatsby-transformer-remark/diskstore-97cfab1e1ad583ea0fa987b5c84f159c.json
.cache/caches/gatsby-transformer-remark/diskstore-314bc0cb54aa930a49cfb58df8b50ffa.json
.cache/caches/gatsby-transformer-remark/diskstore-335fc52df6558698584a4c58a93133dc.json
.cache/caches/gatsby-transformer-remark/diskstore-468b5bae8ef758f28811323986a026ca.json
.cache/caches/gatsby-transformer-remark/diskstore-479f7412bfaf2ad395f176418584631a.json
.cache/caches/gatsby-transformer-remark/diskstore-509da604a7cd9c41a31392dd15cfd143.json
.cache/caches/gatsby-transformer-remark/diskstore-833c6a9868536cc7f0ee995069745bd6.json
.cache/caches/gatsby-transformer-remark/diskstore-3240b72791cdbb0de473bd7b0fc3f4a3.json
.cache/caches/gatsby-transformer-remark/diskstore-4959c881d2fccc57dea5cba657223041.json
.cache/caches/gatsby-transformer-remark/diskstore-6195db1b342fb1235a247e18694e1cc8.json
.cache/caches/gatsby-transformer-remark/diskstore-8152d0a6832522eb79f34eecc5e89cd4.json
.cache/caches/gatsby-transformer-remark/diskstore-9429c44d730cc08b4b28804d3d7d5a2c.json
.cache/caches/gatsby-transformer-remark/diskstore-19012e1f6f28c599baa0778f3e002c21.json
.cache/caches/gatsby-transformer-remark/diskstore-20649dc8fd4cdde49b1d9ea0c26371b2.json
.cache/caches/gatsby-transformer-remark/diskstore-96374eabb69d89610d3ad583e7ef7bfc.json
.cache/caches/gatsby-transformer-remark/diskstore-164252f91872bc33e77d29eb616fafa1.json
.cache/caches/gatsby-transformer-remark/diskstore-419766453a3a10f392d412948ad4520a.json
.cache/caches/gatsby-transformer-remark/diskstore-2763556052b3406bbcf4532fe8fa5d4e.json
.cache/caches/gatsby-transformer-remark/diskstore-a9a7598872d374acd56469ecbe4a84da.json
.cache/caches/gatsby-transformer-remark/diskstore-a7725b15bd64a40f9d4d5eb35340b314.json
.cache/caches/gatsby-transformer-remark/diskstore-aae05a37d5dbc73377131a3df8a830bd.json
.cache/caches/gatsby-transformer-remark/diskstore-b0407a444ef8acb3f4819a2fd00c5ae3.json
.cache/caches/gatsby-transformer-remark/diskstore-b923ecb39dc7dd6f4752bf9bbf5c94da.json
.cache/caches/gatsby-transformer-remark/diskstore-b089023713dde4294665d832c48ccd63.json
.cache/caches/gatsby-transformer-remark/diskstore-bbdcb1122dc2a86aef4134f4c5c42dc1.json
.cache/caches/gatsby-transformer-remark/diskstore-bd3cd1387f798ad20e18475f0929f324.json
.cache/caches/gatsby-transformer-remark/diskstore-be4a0f00b712d152c6b7536968d29cef.json
.cache/caches/gatsby-transformer-remark/diskstore-bea1dfafb379b4e5e4393814eff70f54.json
.cache/caches/gatsby-transformer-remark/diskstore-bee012580db1a2e5f57e03421caf971f.json
.cache/caches/gatsby-transformer-remark/diskstore-bf54f7f5282b043f03b2a3733bdac4f3.json
.cache/caches/gatsby-transformer-remark/diskstore-bf0995ffe3e44d36b50e8f808495c563.json
.cache/caches/gatsby-transformer-remark/diskstore-bf3648bcc8f9d552a4439069ae408fad.json
.cache/caches/gatsby-transformer-remark/diskstore-c32f0608dadae224d91a44d7bb4b66db.json
.cache/caches/gatsby-transformer-remark/diskstore-c320ffacf9b8eef3d92229d6a1a70d96.json
.cache/caches/gatsby-transformer-remark/diskstore-ca2fb97dfd9c7f243ca223efc08ffba5.json
.cache/caches/gatsby-transformer-remark/diskstore-ca3867e16d821cfd8579d7b29582e0b8.json
.cache/caches/gatsby-transformer-remark/diskstore-cbe5331f7cf63c058404726cdea224c2.json
.cache/caches/gatsby-transformer-remark/diskstore-cc83f0f387424948934f22053503ed85.json
.cache/caches/gatsby-transformer-remark/diskstore-d0b48925fc35a486d2edcefd379a8067.json
.cache/caches/gatsby-transformer-remark/diskstore-d2b3f82b0a8e66040aa810a8958afe0d.json
.cache/caches/gatsby-transformer-remark/diskstore-d4b28ce0015b79c52ff804a21a129aa0.json
.cache/caches/gatsby-transformer-remark/diskstore-d41ece99b0e508f70b31a8152b25f8a5.json
.cache/caches/gatsby-transformer-remark/diskstore-db5d13902d2d007ceff5537b4ca04b11.json
.cache/caches/gatsby-transformer-remark/diskstore-dc1901f7f1baf243df1556f52717b2ba.json
.cache/caches/gatsby-transformer-remark/diskstore-ddc1db31dfe2bcb6d2040bce323f5828.json
.cache/caches/gatsby-transformer-remark/diskstore-df75817e83ad0a2f79b98ce42e6056a8.json
.cache/caches/gatsby-transformer-remark/diskstore-e49d5822f90847d686ab7ed05c412e0b.json
.cache/caches/gatsby-transformer-remark/diskstore-e2145ab61e30e98413fb69c2f3d5098f.json
.cache/caches/gatsby-transformer-remark/diskstore-e8067f3515dcae00ea981c2733ca40cb.json
.cache/caches/gatsby-transformer-remark/diskstore-e72135977ad05cc3007997a59f58e7ed.json
.cache/caches/gatsby-transformer-remark/diskstore-ec259f9adac459854ebecf9375d97a8d.json
.cache/caches/gatsby-transformer-remark/diskstore-ee0df53bccbd3ad6e6ad1b28c1331ca4.json
.cache/caches/gatsby-transformer-remark/diskstore-f5cfa5aac1b0651a071bc0b0f90efa3c.json
.cache/caches/gatsby-transformer-remark/diskstore-f9c2ec20398ba84a7058c3475b4845c3.json
.cache/caches/gatsby-transformer-remark/diskstore-f250d30e0f7c9f0380924fbf1033efc3.json
.cache/caches/gatsby-transformer-remark/diskstore-fb18e835921f3dc32ae5b74bdfb36220.json
.cache/caches/gatsby-transformer-remark/diskstore-fbddf0de549e59cfa8bf242898a85984.json
.cache/caches/gatsby-transformer-remark/diskstore-feb74fcce830febf6919bf3857a7765f.json
.cache/caches/gatsby-transformer-remark/diskstore-fffb15ec8285c18963c880046e7fccce.json
.cache
yarn.lock
package-lock.json

4
.vscode/settings.json vendored
View File

@ -1,3 +1,3 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}
}

35
babel.config.js
View File

@ -1,19 +1,32 @@
// @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
module.exports = (api) => {
api.cache(() => process.env.NODE_ENV);
if (api.env('site')) { //
if(api.env('site')) {
return {
presets: [
[
'@babel/preset-env',
{
loose: true,
modules: false,
},
],
'@babel/preset-react',
'babel-preset-gatsby',
"presets": [
"babel-preset-gatsby"
],
"plugins": [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator',
[
'@babel/plugin-proposal-decorators',
{
legacy: true,
}
],
[
// import glsl as raw text
'babel-plugin-inline-import',
{
extensions: [
// 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
// '.json',
'.glsl',
]
}
],
]
};
}
return {

55
examples/heatmap/basic/demo/grid.js
View File

@ -1,55 +0,0 @@
import { Scene } from '@l7/scene';
import { HeatMapGridLayer } from '@l7/layers';
const scene = new Scene({
id: 'map',
style: 'light',
pitch: 0,
center: [116.49434030056, 39.868073421167621],
type: 'amap',
zoom: 16,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json')
.then((res) => res.json())
.then((data) => {
const layer =
new HeatMapGridLayer({
})
.source(data, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
transforms: [
{
type: 'grid',
size: 50,
field: 'count',
method: 'sum',
},
],
})
.size('sum', (value) => {
return value;
})
.shape('square')
.style({
coverage: 0.8,
angle: 0,
opacity: 0.6,
})
.color('count', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
scene.addLayer(layer);
});

24
examples/heatmap/heatmap/demo/grid.js → examples/heatmap/grid/demo/grid.js
View File

@ -5,7 +5,7 @@ const scene = new Scene({
style: 'light',
pitch: 0,
center: [116.49434030056, 39.868073421167621],
type: 'amap',
type: 'mapbox',
zoom: 16,
});
@ -24,7 +24,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-941
transforms: [
{
type: 'grid',
size: 50,
size: 20,
field: 'count',
method: 'sum',
},
@ -33,23 +33,19 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-941
.size('sum', (value) => {
return value;
})
.shape('square')
.shape('circle')
.style({
coverage: 0.8,
angle: 0,
opacity: 0.6,
opacity: 1.0,
})
.color('count', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
.color('count', ['#0A3663', '#1558AC',
'#3771D9', '#4D89E5',
'#64A5D3', '#72BED6',
'#83CED6', '#A6E1E0',
'#B8EFE2', '#D7F9F0']);
scene.addLayer(layer);
console.log(layer);
});

6
examples/heatmap/basic/demo/meta.json → examples/heatmap/grid/demo/meta.json
View File

@ -6,11 +6,13 @@
"demos": [
{
"filename": "grid.js",
"title": "网格热力图"
"title": "网格热力图",
"screenshot":""
},
{
"filename": "world.js",
"title": "世界电厂热力图"
"title": "世界电厂热力图",
"screenshot":""
}
]
}

31
examples/heatmap/basic/demo/world.js → examples/heatmap/grid/demo/world.js
View File

@ -1,5 +1,5 @@
import { Scene } from '@l7/scene';
import { HeatMapGridLayer } from '@l7/layers';
import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
const scene = new Scene({
id: 'map',
style: 'light',
@ -13,39 +13,34 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64
.then((res) => res.json())
.then((data) => {
const layer =
new HeatMapGridLayer({
new HeatMapGrid3dLayer({
})
.source(data, {
transforms: [
{
type: 'grid',
size: 100000,
type: 'hexagon',
size: 200000,
field: 'capacity',
method: 'sum',
},
],
})
.size('sum', (value) => {
return value;
return value * 50;
})
.scale('sum',{
type:'quantile',
})
.shape('square')
.shape('hexagon')
.style({
coverage: 1,
coverage: 0.9,
angle: 0,
opacity: 1.0,
})
.color('sum', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49',
]);
scene.addLayer(layer);

0
examples/heatmap/basic/index.zh.md → examples/heatmap/grid/index.zh.md
View File

11
examples/heatmap/heatmap/demo/meta.json
View File

@ -1,16 +1,19 @@
{
"title": {
"zh": "网格热力图",
"zh": "经典热力图",
"en": "heatmap"
},
"demos": [
{
"filename": "grid.js",
"title": "网格热力图"
"filename": "world3d.js",
"title": "经典热力图3D",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*NxFPSrd9oscAAAAAAAAAAABkARQnAQ"
},
{
"filename": "world.js",
"title": "世界电厂热力图"
"title": "经典热力图2D",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9zUcSK07PHgAAAAAAAAAAABkARQnAQ"
}
]
}

34
examples/heatmap/heatmap/demo/world.js
View File

@ -4,35 +4,27 @@ const scene = new Scene({
id: 'map',
style: 'dark',
pitch: 0,
center: [116.49434030056, 39.868073421167621],
center: [127.5671666579043,7.445038892195569],
type: 'mapbox',
zoom: 3,
zoom: 2.632456779444394
});
fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
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)
.size('capacity', [0, 1]) // weight映射通道
.style({
intensity: 10,
radius: 5,
opacity: 1.0,
rampColors: {
colors: [
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49',
],
positions: [0,0.2, 0.4, 0.6, 0.8, 1.0],
},
});
.source(data).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);

42
examples/heatmap/heatmap/demo/world3d.js Normal file
View File

@ -0,0 +1,42 @@
import { Scene } from '@l7/scene';
import { HeatMapLayer } from '@l7/layers';
const scene = new Scene({
id: 'map',
style: 'dark',
pitch: 0,
center: [116.49434030056, 39.868073421167621],
type: 'mapbox',
zoom: 3,
});
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({
})
.source(data)
.size('capacity', [0, 1])
.shape('heatmap3D')
// weight映射通道
.style({
intensity: 10,
radius: 5,
opacity: 1.0,
rampColors: {
colors:[
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49',
],
positions: [0,0.2, 0.4, 0.6, 0.8, 1.0],
},
});
scene.addLayer(layer);
console.log(layer)
});

4
examples/heatmap/heatmap/index.zh.md
View File

@ -1,4 +1,6 @@
---
title: 热力图
title: 经典热力图
order: 0
redirect_from:
- /zh/examples/heatmap/
---

50
examples/heatmap/hexagon/demo/hexagon.ts Normal file
View File

@ -0,0 +1,50 @@
import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
const scene = new Scene({
id: 'map',
style: 'light',
pitch: 0,
center: [114.0500, 22.5441],
zoom: 14,
type: 'mapbox',
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
)
.then((res) => res.json())
.then((data) => {
const layer = new HeatMapGrid3dLayer({})
.source(data, {
transforms: [
{
type: 'hexagon',
size: 200,
field: 'h12',
method: 'sum',
},
],
})
.size('sum', [0, 600])
.shape('hexagon')
.style({
coverage: 0.8,
angle: 0,
opacity: 1.0,
})
.color(
'sum',
[
'#ffffcc',
'#ffeda0',
'#fed976',
'#feb24c',
'#fd8d3c',
'#fc4e2a',
'#e31a1c',
'#bd0026',
'#800026',
].reverse(),
);
scene.addLayer(layer);
});

114
examples/heatmap/hexagon/demo/light.js Normal file
View File

@ -0,0 +1,114 @@
import { HeatMapHexagonLayer, HeatMapGrid3dLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
const scene = new Scene({
id: 'map',
style: 'light',
pitch: 43,
center: [119.9719107,29.4924299],
zoom: 7.2,
type: 'mapbox',
});
window.mapScene = scene;
const colorObj = {
redyellow: [
'#8A191A', '#AE3235',
'#CC464B', '#E26A5D',
'#EC8765', '#F0A66C',
'#F4BC8F', '#FFCEA7',
'#FFE4CE', '#FFF2E8'
],
yellow: [
'#7B320A', '#B35B21',
'#D2722E', '#F0883A',
'#FBA045', '#FAB04B',
'#FAC760', '#FBD78C',
'#FCE6B3', '#FCF3DB'
],
blue_green: [
'#094D4A', '#146968',
'#1D7F7E', '#289899',
'#34B6B7', '#4AC5AF',
'#5FD3A6', '#7BE39E',
'#A1EDB8', '#CEF8D6'
],
blue: [
'#0A3663', '#1558AC',
'#3771D9', '#4D89E5',
'#64A5D3', '#72BED6',
'#83CED6', '#A6E1E0',
'#B8EFE2', '#D7F9F0'
],
purple: [
'#312B60', '#4A457E',
'#615C99', '#816CAD',
'#A67FB5', '#C997C7',
'#DEB8D4', '#F5D4E6',
'#FAE4F1', '#FFF3FC'
],
color1: [
'#E4682F', '#FF8752',
'#FFA783', '#FFBEA8',
'#FFDCD6', '#EEF3FF',
'#C8D7F5', '#A5C1FC',
'#7FA7F9', '#5F8AE5'
],
color2: [
'#F1646A', '#F48789',
'#F7A9AC', '#FBCCCD',
'#FDEEEE', '#EEF3FF',
'#C8DAFE', '#A5C1FC',
'#80A8FB', '#5B8EF8'
],
color3: [
'#EEF3FF', '#C8DAFE',
'#A5C1FC', '#80A8FB',
'#5B8EF8', '#FCF6FA',
'#F5E4EF', '#F7CDDF',
'#ED9CBE', '#D1749B'
],
color4: [ '#421EB2', '#8C1EB2', '#F27DEB', '#FFF598', '#F7B74A', '#FF4818' ],
colors6: [ '#FBE0B2', '#F6BB91', '#F88E8B', '#5C6CE5', '#110A6C', '#0D0943' ],
colors5: [ '#F86A7E', '#F79794', '#D0A8AD', '#8596A4', '#0D7D9E', '#07485B' ],
colors11: [ '#005F6D', '#0F9EA3', '#B9CDC5', '#DF881C', '#AE571E', '#6C2C03' ],
colors7: [ '#D66A74', '#EF808B', '#F09FAF', '#B1C987', '#789676', '#636C58' ],
colors8: [ '#5E023A', '#C52C6A', '#F0C4E8', '#F7CAB8', '#7EBCA9', '#117D8D' ],
colors9: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ]
}
fetch(
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
)
.then((res) => res.text())
.then((data) => {
const layer = new HeatMapGrid3dLayer({})
.source(data, {
parser:{
type:'csv',
x:'lng',
y:'lat',
},
transforms: [
{
type: 'hexagon',
size: 2500,
field: 'v',
method: 'sum',
},
],
})
.size('sum', (sum)=>{
return sum * 200;
})
.shape('hexagon')
.style({
coverage: 0.8,
angle: 0,
opacity: 1.0,
})
.color(
'sum',
colorObj.blue.slice(0,7).reverse(),
);
scene.addLayer(layer);
console.log(layer);
});

4
examples/heatmap/hexagon/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 蜂窝热力图
order: 1
---

2
examples/line/arc/demo/arc.js
View File

@ -5,7 +5,7 @@ const scene = new Scene({
pitch: 0,
type: 'mapbox',
style: 'dark',
center: [102.602992, 23.107329],
center: [0., 23.107329],
zoom: 0,
});

11
examples/line/arc/demo/meta.json
View File

@ -11,13 +11,14 @@
},
{
"filename": "arcCircle.js",
"title": "大圆弧线"
"filename": "arc.js",
"title": "弧线",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
},
{
"filename": "arc.js",
"title": "弧线"
"filename": "arcCircle.js",
"title": "大圆弧线",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
}
]

2
examples/line/arc/index.zh.md
View File

@ -1,4 +1,4 @@
---
title: 弧线
title: 弧线地图
order: 1
---

20
examples/line/basic/demo/meta.json
View File

@ -1,20 +0,0 @@
{
"title": {
"zh": "线图层",
"en": "line"
},
"demos": [
{
"filename": "path.js",
"title": "路径"
},
{
"filename": "line.js",
"title": "等高线"
},
{
"filename": "line2.js",
"title": "等值线"
}
]
}

4
examples/line/basic/index.zh.md
View File

@ -1,4 +0,0 @@
---
title: 路径
order: 0
---

20
examples/line/dash/demo/meta.json
View File

@ -1,20 +0,0 @@
{
"title": {
"zh": "线图层",
"en": "line"
},
"demos": [
{
"filename": "path.js",
"title": "路径"
},
{
"filename": "line.js",
"title": "等高线"
},
{
"filename": "line2.js",
"title": "等值线"
}
]
}

96
examples/line/dash/demo/path.js
View File

@ -1,96 +0,0 @@
import { Scene } from '@l7/scene';
import { DashLineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [120.2336, 30.2002],
zoom: 3,
});
const lineData ={
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
102.98583984374999,
37.666429212090605
],
[
111.33544921874999,
37.23032838760387
],
[
111.24755859375,
34.92197103616377
],
[
98.15185546874999,
35.44277092585766
],
[
98.701171875,
41.09591205639546
],
[
100.5908203125,
41.0130657870063
],
[
101.09619140625,
41.0130657870063
],
[
101.689453125,
41.0130657870063
],
[
102.26074218749999,
41.0130657870063
],
[
102.26074218749999,
40.58058466412761
],
[
102.23876953125,
40.329795743702064
],
[
102.23876953125,
39.977120098439634
],
[
102.26074218749999,
40.212440718286466
],
[
102.48046875,
39.87601941962116
]
]
}
}
]
};
fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727da84e9908.json')
.then((res) => res.json())
.then((data) => {
const layer =
new DashLineLayer({
})
.source(lineData)
.size(1.5)
.shape('line')
.color(
'#5B8FF9'
)
scene.addLayer(layer);
console.log(layer);
});

4
examples/line/dash/index.zh.md
View File

@ -1,4 +0,0 @@
---
title: 虚线
order: 0
---

2
examples/line/basic/demo/line.js → examples/line/line/demo/ele.js
View File

@ -17,7 +17,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
})
.source(data)
.size('ELEV', (h) => {
return h % 50 === 0 ? 1.0 : 0.5;
return [h % 50 === 0 ? 1.0 : 0.5, (h -1300) *20 ];
})
.shape('line')
.scale('ELEV', {

12
examples/line/dash/demo/line.js → examples/line/line/demo/ele_dark.js
View File

@ -1,10 +1,10 @@
import { Scene } from '@l7/scene';
import { DashLineLayer } from '@l7/layers'
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
style: 'dark',
center: [102.602992, 23.107329],
zoom: 14,
});
@ -13,11 +13,11 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.then((res) => res.json())
.then((data) => {
const layer =
new DashLineLayer({
new LineLayer({
})
.source(data)
.size('ELEV', (h) => {
return h % 50 === 0 ? 1.0 : 0.5;
return [h % 50 === 0 ? 1.0 : 0.5, (h -1300) *20 ];
})
.shape('line')
.scale('ELEV', {
@ -35,9 +35,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
'#A5C1FC',
'#7FA7F9',
'#5F8AE5' ].reverse()
).style({
dashArray:[10, 1],
})
)
scene.addLayer(layer);
console.log(layer);

4
examples/line/basic/demo/line2.js → examples/line/line/demo/linedash.js
View File

@ -5,8 +5,8 @@ const scene = new Scene({
pitch: 0,
type: 'amap',
style: 'light',
center: [102.602992, 23.107329],
zoom: 4,
center: [102.602992, 33.107329],
zoom: 3.5,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')

24
examples/line/line/demo/meta.json Normal file
View File

@ -0,0 +1,24 @@
{
"title": {
"zh": "线图层",
"en": "line"
},
"demos": [
{
"filename": "ele.js",
"title": "等高线",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FGliTJ7eSBIAAAAAAAAAAABkARQnAQ"
},
{
"filename": "ele_dark.js",
"title": "等高线",
"screenshot":""
},
{
"filename": "linedash.js",
"title": "等高线",
"screenshot":""
}
]
}

6
examples/line/line/index.zh.md Normal file
View File

@ -0,0 +1,6 @@
---
title: 等值线
order: 0
redirect_from:
- /zh/examples/line/
---

4
examples/line/dash/demo/line2.js → examples/line/path/demo/linedash.js
View File

@ -5,8 +5,8 @@ const scene = new Scene({
pitch: 0,
type: 'amap',
style: 'light',
center: [102.602992, 23.107329],
zoom: 4,
center: [102.602992, 33.107329],
zoom: 3.5,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')

28
examples/line/path/demo/meta.json Normal file
View File

@ -0,0 +1,28 @@
{
"title": {
"zh": "线图层",
"en": "line"
},
"demos": [
{
"filename": "road_light.js",
"title": "路径",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1gddQ6x8Jq4AAAAAAAAAAABkARQnAQ"
},
{
"filename": "line.js",
"title": "等高线",
"screenshot":""
},
{
"filename": "line2.js",
"title": "等值线",
"screenshot":""
},
{
"filename": "road_dark.js",
"title": "路径",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1FVsSLUncw4AAAAAAAAAAABkARQnAQ"
}
]
}

29
examples/line/path/demo/road_dark.js Normal file
View File

@ -0,0 +1,29 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
center: [116.3956,39.9392],
pitch: 0,
zoom: 10,
rotation: 0,
type: 'mapbox',
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' ]
)
scene.addLayer(layer);
console.log(layer);
});

15
examples/line/basic/demo/path.js → examples/line/path/demo/road_light.js
View File

@ -2,14 +2,15 @@ import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
center: [116.3956,39.9392],
pitch: 0,
type: 'amap',
zoom: 10,
rotation: 0,
type: 'mapbox',
style: 'light',
center: [120.2336, 30.2002],
zoom: 15,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727da84e9908.json')
fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json')
.then((res) => res.json())
.then((data) => {
const layer =
@ -19,10 +20,10 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727
.size(1.5)
.shape('line')
.color(
'name',
['#5B8FF9','#5CCEA1','#7B320A' ]
'标准名称',
['#5B8FF9','#5CCEA1','#5D7092' ]
)
scene.addLayer(layer);
console.log(layer);
});
});

6
examples/line/path/index.zh.md Normal file
View File

@ -0,0 +1,6 @@
---
title: 路径地图
order: 0
redirect_from:
- /zh/examples/line/
---

39
examples/marker/basic/demo/line.js
View File

@ -1,39 +0,0 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'light',
center: [102.602992, 23.107329],
zoom: 13,
});
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.then((res) => res.json())
.then((data) => {
const layer =
new LineLayer({
})
.source(data)
.size(1)
.shape('line')
.color(
'ELEV',
[
'#E8FCFF',
'#CFF6FF',
'#A1E9ff',
'#65CEF7',
'#3CB1F0',
'#2894E0',
'#1772c2',
'#105CB3',
'#0D408C',
'#002466',
].reverse(),
)
scene.addLayer(layer);
console.log(layer);
});

13
examples/marker/basic/demo/meta.json
View File

@ -1,13 +0,0 @@
{
"title": {
"zh": "图库",
"en": "Gallery"
},
"demos": [
{
"filename": "line.js",
"title": "线图层",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
}
]
}

4
examples/marker/basic/index.zh.md
View File

@ -1,4 +0,0 @@
---
title: 标注
order: 0
---

44
examples/point/3d/demo/column_dark.js Normal file
View File

@ -0,0 +1,44 @@
import { Scene } from '@l7/scene';
import { Point3dLayer} from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 35.210526315789465,
type: 'amap',
style: 'dark',
center: [108.524505, 29.873128],
zoom: 4.4,
});
window.mapScene = scene;
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then((res) => res.json())
.then((data) => {
const pointLayer =
new Point3dLayer({
})
.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);
});

38
examples/point/3d/demo/column_light.js Normal file
View File

@ -0,0 +1,38 @@
import { Scene } from '@l7/scene';
import { Point3dLayer} from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 35.210526315789465,
type: 'amap',
style: 'light',
center: [108.524505, 29.873128],
zoom: 4.4,
});
window.mapScene = scene;
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then((res) => res.json())
.then((data) => {
const pointLayer =
new Point3dLayer({
})
.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,
})
scene.addLayer(pointLayer);
console.log(pointLayer);
});

25
examples/point/3d/demo/meta.json Normal file
View File

@ -0,0 +1,25 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "column_light.js",
"title": "3D柱图_浅色底图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*5WdiT7MmU_cAAAAAAAAAAABkARQnAQ"
},
{
"filename": "world.js",
"title": "气泡图 - 电厂装机量"
},
{
"filename": "column_dark.js",
"title": "3D柱图_深色底图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*WkpEQqzuM-oAAAAAAAAAAABkARQnAQ"
}
]
}

38
examples/point/3d/demo/point.js Normal file
View File

@ -0,0 +1,38 @@
import { Scene } from '@l7/scene';
import { Point3dLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [121.40, 31.258134],
zoom: 15,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
.then((res) => res.json())
.then((data) => {
const pointLayer =
new Point3dLayer({
})
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
}).shape('name',['cylinder', 'triangleColumn', 'hexagonColumn','squareColumn'])
.size('unit_price', (h)=>{
return [ 15,15, h / 1000 ]
})
.color('name',['#49B5AD', "#5B8FF9",'#E4504A','#E99431'])
.style({
opacity: 1.0,
})
scene.addLayer(pointLayer);
});

4
examples/point/3d/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 3D柱状地图
order: 4
---

36
examples/point/basic/demo/buble.js Normal file
View File

@ -0,0 +1,36 @@
import { Scene } from '@l7/scene';
import { PointLayer, PointImageLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [140.067171, 36.26186],
zoom: 5.32,
maxZoom: 10
});
window.mapScene = scene;
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', [5, 16])
.scale('mag',{
type:'quantile'
})
.color('mag',(mag)=>{
return mag > 4.5? "#5B8FF9" : '#5CCEA1';
})
.style({
opacity: 0.3,
strokeWidth: 1
})
scene.addLayer(pointLayer);
});

19
examples/point/basic/demo/color.js
View File

@ -22,13 +22,22 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
x: 'longitude',
y: 'latitude'
}
}).shape('circle')
.size('unit_price', [5, 25])
.color('#5B8FF9')
}).shape('name',[
'circle',
'triangle',
'square',
'pentagon',
'hexagon',
'octogon',
'hexagram',
'rhombus',
'vesica',
])
.size('unit_price', [10, 25])
.color('name',['#E4504A',"#E99431", "#EBCC53","#43A5DA","#6CC175"])
.style({
opacity: 0.3,
opacity:1.0,
strokeWidth: 1,
strokeColor: "#5B8FF9",
})

14
examples/point/basic/demo/meta.json
View File

@ -5,13 +5,21 @@
},
"demos": [
{
"filename": "point.js",
"title": "气泡图"
"filename": "buble.js",
"title": "气泡图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_9ETS5_1yCEAAAAAAAAAAABkARQnAQ"
},
{
"filename": "world.js",
"title": "气泡图 - 电厂装机量"
"title": "气泡图 - 电厂装机量",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DMREQYwsCF4AAAAAAAAAAABkARQnAQ"
},
{
"filename": "normal.js",
"title": "城市亮度图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Xp7iRaORYuIAAAAAAAAAAABkARQnAQ"
}
]

36
examples/point/basic/demo/normal.js Normal file
View File

@ -0,0 +1,36 @@
import { Scene } from '@l7/scene';
import { PointNormalLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 64.88,
type: 'amap',
style: 'dark',
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 PointNormalLayer({
})
.source(data)
.size(2)
.color('h8',[
'#0A3663', '#1558AC',
'#3771D9', '#4D89E5',
'#64A5D3', '#72BED6',
'#83CED6', '#A6E1E0',
'#B8EFE2', '#D7F9F0'
])
.style({
opacity:1.,
})
scene.addLayer(pointLayer);
})

41
examples/point/basic/demo/text.js Normal file
View File

@ -0,0 +1,41 @@
import { Scene } from '@l7/scene';
import { PointLayer, PointImageLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [121.40, 31.258134],
zoom: 15,
minZoom: 10
});
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
.then((res) => res.json())
.then((data) => {
const pointLayer =
new PointLayer({
})
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
}).shape('circle')
.size('unit_price', [5, 25])
.color('#5B8FF9')
.label('name')
.style({
opacity: 0.3,
strokeWidth: 1,
strokeColor: "#5B8FF9",
})
scene.addLayer(pointLayer);
console.log(pointLayer);
});

18
examples/point/basic/demo/world.js
View File

@ -5,24 +5,26 @@ const scene = new Scene({
pitch: 0,
type: 'mapbox',
style: 'dark',
center: [121.40, 31.258134],
zoom: 1,
center: [ 96.99215001469588, 29.281597225674773],
zoom: 2.194613775109773,
maxZoom: 10
});
window.mapScene = scene;
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, 20])
.color('status', ['#ced1cc','#ffc83e','#ff8767','#dd54b6','#a45edb'])
.size('capacity', [0, 16])
.color('capacity',['#34B6B7', '#4AC5AF','#5FD3A6', '#7BE39E','#A1EDB8', '#CEF8D6'])
.style({
opacity: 0.3,
strokeWidth: 1,
opacity: 0.5,
strokeWidth: 0
})
scene.addLayer(pointLayer);

2
examples/point/basic/index.zh.md
View File

@ -1,5 +1,5 @@
---
title: 气泡图
title: 气泡地图
order: 0
redirect_from:
- /zh/examples

139
examples/point/chartmap/demo/chart.js Normal file
View File

@ -0,0 +1,139 @@
import { Scene } from '@l7/scene';
import { Marker } from '@l7/component'
import G2Plot from '@antv/g2plot'
const scene = new Scene({
id: 'map',
type: 'amap',
style: 'light',
center: [-122.80009283836715, 37.05881309947238],
pitch: 0,
zoom: 5
});
// fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
// .then((res) => res.text())
// .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.max(Math.min(parseInt(total / 20000), 150), 30);
// 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 config = {
// "title": {
// "visible": false,
// "text": "环图",
// "style": {
// "fill": "rgba(0, 0, 0, 0.85)"
// }
// },
// "description": {
// "visible": false,
// "text": "一个简单的环图",
// "style": {
// "fill": "rgba(0, 0, 0, 0.85)",
// "bottom_margin": 10
// }
// },
// "padding": "auto",
// "legend": {
// "visible": false,
// "position": "top-left"
// },
// "tooltip": {
// "visible": false,
// "shared": false,
// "crosshairs": null
// },
// "xAxis": {
// "visible": true,
// "autoHideLabel": false,
// "autoRotateLabel": false,
// "autoRotateTitle": false,
// "grid": {
// "visible": false
// },
// "line": {
// "visible": false
// },
// "tickLine": {
// "visible": true
// },
// "label": {
// "visible": true
// },
// "title": {
// "visible": false,
// "offset": 12
// }
// },
// "yAxis": {
// "visible": true,
// "autoHideLabel": false,
// "autoRotateLabel": false,
// "autoRotateTitle": true,
// "grid": {
// "visible": true
// },
// "line": {
// "visible": false
// },
// "tickLine": {
// "visible": false
// },
// "label": {
// "visible": true
// },
// "title": {
// "visible": false,
// "offset": 12
// }
// },
// "label": {
// "visible": true,
// "type": "outer",
// "style": {
// "fill": "rgba(0, 0, 0, 0.65)"
// }
// },
// "width": 317,
// "height": 249,
// "forceFit": false,
// "radius": 1,
// "pieStyle": {
// "stroke": "white",
// "lineWidth": 1
// },
// "innerRadius": 0.74,
// "animation": false,
// "colorField": "x",
// "angleField": "y",
// "color": null
// }
// const plot = new G2Plot.Ring(el, {
// data: itemData,
// ...config,
// });
// plot.render();
// var popup = new L7.Popup({
// anchor: 'left'
// }).setText(item.name);
// new Marker({
// element: el
// }).setLnglat(item.coordinates).setPopup(popup).addTo(scene);
// });
// });

37
examples/point/chartmap/demo/marker.js Normal file
View File

@ -0,0 +1,37 @@
import { Scene } from '@l7/scene';
import { Marker } from '@l7/component'
const scene = new Scene({
id: 'map',
type: 'amap',
style: 'light',
center: [122.80009283836715, 37.05881309947238],
pitch: 0,
zoom: 3
});
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') continue;
var el = document.createElement('label');
el.className = 'lableclass';
el.textContent = nodes[i].v;
el.style.background = getColor(nodes[i].v);
const marker = 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';
}

14
examples/point/chartmap/demo/meta.json Normal file
View File

@ -0,0 +1,14 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "normal.js",
"title": "海量点",
"screenshot":""
}
]
}

4
examples/point/chartmap/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 复合图表地图
order: 7
---

4
examples/point/cluster/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: "聚合地图"
order: 6
---

40
examples/point/image/demo/size.js
View File

@ -9,32 +9,28 @@ const scene = new Scene({
center: [121.40, 31.258134],
zoom: 15,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
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*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ',
);
scene.addImage(
'01',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0D0SQ6AgkRMAAAAAAAAAAABkARQnAQ',
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*o16fSIvcKdUAAAAAAAAAAABkARQnAQ',
);
const imageLayer = new PointImageLayer()
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
.source(data)
.shape('w', function(w) {
return w;
})
.shape('name', ['00', '01','02'])
.size('unit_price', [30, 100])
.size(20)
scene.addLayer(imageLayer);
});

4
examples/point/image/index.zh.md
View File

@ -1,4 +1,4 @@
---
title: 符号图
order: 1
title: 符号地图
order: 2
---

19
examples/point/scatter/demo/meta.json Normal file
View File

@ -0,0 +1,19 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "normal.js",
"title": "海量点",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
},
{
"filename": "scatter.js",
"title": "定点图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*s5lpTYp2hZYAAAAAAAAAAABkARQnAQ"
}
]
}

34
examples/point/scatter/demo/normal.js Normal file
View File

@ -0,0 +1,34 @@
import { Scene } from '@l7/scene';
import { PointNormalLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
type: 'amap',
style: 'dark',
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 PointNormalLayer({
})
.source(data, {
parser: {
type: 'csv',
y: 'lat',
x: 'lng'
}
}).size(0.5)
.color('#080298')
.style({
opacity:1.,
})
scene.addLayer(pointLayer);
})

94
examples/point/scatter/demo/scater.js Normal file
View File

@ -0,0 +1,94 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
type: 'amap',
style: 'light',
center: [-122.80009283836715, 37.05881309947238],
pitch: 0,
zoom: 5.740491857794806
});
const colorObj = {
redyellow: [
'#8A191A', '#AE3235',
'#CC464B', '#E26A5D',
'#EC8765', '#F0A66C',
'#F4BC8F', '#FFCEA7',
'#FFE4CE', '#FFF2E8'
],
yellow: [
'#7B320A', '#B35B21',
'#D2722E', '#F0883A',
'#FBA045', '#FAB04B',
'#FAC760', '#FBD78C',
'#FCE6B3', '#FCF3DB'
],
blue_green: [
'#094D4A', '#146968',
'#1D7F7E', '#289899',
'#34B6B7', '#4AC5AF',
'#5FD3A6', '#7BE39E',
'#A1EDB8', '#CEF8D6'
],
blue: [
'#0A3663', '#1558AC',
'#3771D9', '#4D89E5',
'#64A5D3', '#72BED6',
'#83CED6', '#A6E1E0',
'#B8EFE2', '#D7F9F0'
],
purple: [
'#312B60', '#4A457E',
'#615C99', '#816CAD',
'#A67FB5', '#C997C7',
'#DEB8D4', '#F5D4E6',
'#FAE4F1', '#FFF3FC'
],
color1: [
'#E4682F', '#FF8752',
'#FFA783', '#FFBEA8',
'#FFDCD6', '#EEF3FF',
'#C8D7F5', '#A5C1FC',
'#7FA7F9', '#5F8AE5'
],
color2: [
'#F1646A', '#F48789',
'#F7A9AC', '#FBCCCD',
'#FDEEEE', '#EEF3FF',
'#C8DAFE', '#A5C1FC',
'#80A8FB', '#5B8EF8'
],
color3: [
'#EEF3FF', '#C8DAFE',
'#A5C1FC', '#80A8FB',
'#5B8EF8', '#FCF6FA',
'#F5E4EF', '#F7CDDF',
'#ED9CBE', '#D1749B'
]
}
fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv')
.then((res) => res.text())
.then((data) => {
const pointLayer =
new PointLayer({
})
.source(data,{
parser:{
type:'csv',
x:'Longitude',
y:'Latitude'
}
})
.shape('circle')
.size(4)
.color('Magnitude',colorObj.yellow)
.style({
opacity: 0.5,
strokeWidth: 0,
})
scene.addLayer(pointLayer);
});

94
examples/point/scatter/demo/scatter.js Normal file
View File

@ -0,0 +1,94 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
type: 'amap',
style: 'light',
center: [-122.80009283836715, 37.05881309947238],
pitch: 0,
zoom: 5.740491857794806
});
const colorObj = {
redyellow: [
'#8A191A', '#AE3235',
'#CC464B', '#E26A5D',
'#EC8765', '#F0A66C',
'#F4BC8F', '#FFCEA7',
'#FFE4CE', '#FFF2E8'
],
yellow: [
'#7B320A', '#B35B21',
'#D2722E', '#F0883A',
'#FBA045', '#FAB04B',
'#FAC760', '#FBD78C',
'#FCE6B3', '#FCF3DB'
],
blue_green: [
'#094D4A', '#146968',
'#1D7F7E', '#289899',
'#34B6B7', '#4AC5AF',
'#5FD3A6', '#7BE39E',
'#A1EDB8', '#CEF8D6'
],
blue: [
'#0A3663', '#1558AC',
'#3771D9', '#4D89E5',
'#64A5D3', '#72BED6',
'#83CED6', '#A6E1E0',
'#B8EFE2', '#D7F9F0'
],
purple: [
'#312B60', '#4A457E',
'#615C99', '#816CAD',
'#A67FB5', '#C997C7',
'#DEB8D4', '#F5D4E6',
'#FAE4F1', '#FFF3FC'
],
color1: [
'#E4682F', '#FF8752',
'#FFA783', '#FFBEA8',
'#FFDCD6', '#EEF3FF',
'#C8D7F5', '#A5C1FC',
'#7FA7F9', '#5F8AE5'
],
color2: [
'#F1646A', '#F48789',
'#F7A9AC', '#FBCCCD',
'#FDEEEE', '#EEF3FF',
'#C8DAFE', '#A5C1FC',
'#80A8FB', '#5B8EF8'
],
color3: [
'#EEF3FF', '#C8DAFE',
'#A5C1FC', '#80A8FB',
'#5B8EF8', '#FCF6FA',
'#F5E4EF', '#F7CDDF',
'#ED9CBE', '#D1749B'
]
}
fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv')
.then((res) => res.text())
.then((data) => {
const pointLayer =
new PointLayer({
})
.source(data,{
parser:{
type:'csv',
x:'Longitude',
y:'Latitude'
}
})
.shape('circle')
.size(4)
.color('Magnitude',colorObj.yellow)
.style({
opacity: 0.5,
strokeWidth: 0,
})
scene.addLayer(pointLayer);
});

4
examples/point/scatter/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: "等值线"
order: 1
---

121
examples/polygon/3d/demo/city.js Normal file
View File

@ -0,0 +1,121 @@
import { Scene } from '@l7/scene';
import { Polygon3DLayer } from '@l7/layers'
const colorObj = {
redyellow: [
'#8A191A', '#AE3235',
'#CC464B', '#E26A5D',
'#EC8765', '#F0A66C',
'#F4BC8F', '#FFCEA7',
'#FFE4CE', '#FFF2E8'
],
yellow: [
'#7B320A', '#B35B21',
'#D2722E', '#F0883A',
'#FBA045', '#FAB04B',
'#FAC760', '#FBD78C',
'#FCE6B3', '#FCF3DB'
],
blue_green: [
'#094D4A', '#146968',
'#1D7F7E', '#289899',
'#34B6B7', '#4AC5AF',
'#5FD3A6', '#7BE39E',
'#A1EDB8', '#CEF8D6'
],
blue: [
'#0A3663', '#1558AC',
'#3771D9', '#4D89E5',
'#64A5D3', '#72BED6',
'#83CED6', '#A6E1E0',
'#B8EFE2', '#D7F9F0'
],
purple: [
'#312B60', '#4A457E',
'#615C99', '#816CAD',
'#A67FB5', '#C997C7',
'#DEB8D4', '#F5D4E6',
'#FAE4F1', '#FFF3FC'
],
color1: [
'#E4682F', '#FF8752',
'#FFA783', '#FFBEA8',
'#FFDCD6', '#EEF3FF',
'#C8D7F5', '#A5C1FC',
'#7FA7F9', '#5F8AE5'
],
color2: [
'#F1646A', '#F48789',
'#F7A9AC', '#FBCCCD',
'#FDEEEE', '#EEF3FF',
'#C8DAFE', '#A5C1FC',
'#80A8FB', '#5B8EF8'
],
color3: [
'#EEF3FF', '#C8DAFE',
'#A5C1FC', '#80A8FB',
'#5B8EF8', '#FCF6FA',
'#F5E4EF', '#F7CDDF',
'#ED9CBE', '#D1749B'
]
}
const scene = new Scene({
id: 'map',
type: 'amap',
style: 'dark',
center: [120.173104, 30.244072],
pitch: 66.50572,
zoom: 15.79,
minZoom: 10
});
const polygon ={
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
114.05817031860352,
22.543714416963457
],
[
114.07087326049805,
22.543714416963457
],
[
114.07087326049805,
22.55504986643093
],
[
114.05817031860352,
22.55504986643093
],
[
114.05817031860352,
22.543714416963457
]
]
]
}
}
]
}
fetch('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json')
.then((res) => res.json())
.then((data) => {
const layer =
new Polygon3DLayer ({
})
.source(data)
.shape('extrude')
.size('floor', [10, 200])
.color('rgba(242,246,250,0.96)')
.style({
opacity: 1.0
}).render();
scene.addLayer(layer);
console.log(layer);
});

13
examples/polygon/3d/demo/meta.json Normal file
View File

@ -0,0 +1,13 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "polygon.js",
"title": "3D 建筑面",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JgXVSoV03n4AAAAAAAAAAABkARQnAQ"
}
]
}

30
examples/polygon/3d/demo/polygon.js Normal file
View File

@ -0,0 +1,30 @@
import { Scene } from '@l7/scene';
import { Polygon3DLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 15.05263,
type: 'amap',
style: 'dark',
center: [114.056128, 22.529272],
zoom: 14.2,
});
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 Polygon3DLayer ({
})
.source(data)
.shape('fill')
.size('h20',[100, 120, 160, 200, 260, 500])
.color('h20', ['#816CAD',
'#A67FB5', '#C997C7',
'#DEB8D4', '#F5D4E6',
'#FAE4F1', '#FFF3FC'])
.style({
opacity: 1.0
});
scene.addLayer(layer);
});

6
examples/polygon/3d/index.zh.md Normal file
View File

@ -0,0 +1,6 @@
---
title: 3D填充图
order: 0
redirect_from:
- /zh/examples/polygon/
---

84
examples/polygon/basic/demo/fill.js Normal file
View File

@ -0,0 +1,84 @@
import { Scene } from '@l7/scene';
import { PolygonLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [116.3237, 39.8829],
zoom: 8
});
const colorObj = {
redyellow: [
'#8A191A', '#AE3235',
'#CC464B', '#E26A5D',
'#EC8765', '#F0A66C',
'#F4BC8F', '#FFCEA7',
'#FFE4CE', '#FFF2E8'
],
yellow: [
'#7B320A', '#B35B21',
'#D2722E', '#F0883A',
'#FBA045', '#FAB04B',
'#FAC760', '#FBD78C',
'#FCE6B3', '#FCF3DB'
],
blue_green: [
'#094D4A', '#146968',
'#1D7F7E', '#289899',
'#34B6B7', '#4AC5AF',
'#5FD3A6', '#7BE39E',
'#A1EDB8', '#CEF8D6'
],
blue: [
'#0A3663', '#1558AC',
'#3771D9', '#4D89E5',
'#64A5D3', '#72BED6',
'#83CED6', '#A6E1E0',
'#B8EFE2', '#D7F9F0'
],
purple: [
'#312B60', '#4A457E',
'#615C99', '#816CAD',
'#A67FB5', '#C997C7',
'#DEB8D4', '#F5D4E6',
'#FAE4F1', '#FFF3FC'
],
color1: [
'#E4682F', '#FF8752',
'#FFA783', '#FFBEA8',
'#FFDCD6', '#EEF3FF',
'#C8D7F5', '#A5C1FC',
'#7FA7F9', '#5F8AE5'
],
color2: [
'#F1646A', '#F48789',
'#F7A9AC', '#FBCCCD',
'#FDEEEE', '#EEF3FF',
'#C8DAFE', '#A5C1FC',
'#80A8FB', '#5B8EF8'
],
color3: [
'#EEF3FF', '#C8DAFE',
'#A5C1FC', '#80A8FB',
'#5B8EF8', '#FCF6FA',
'#F5E4EF', '#F7CDDF',
'#ED9CBE', '#D1749B'
]
}
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', colorObj.blue_green)
.shape('fill')
.style({
opacity: 1
})
scene.addLayer(layer);
console.log(layer);
});

11
examples/polygon/basic/demo/meta.json
View File

@ -5,9 +5,14 @@
},
"demos": [
{
"filename": "point.js",
"title": "面图层",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
"filename": "polygon.js",
"title": "全国地图行政区划",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*AoD6SZ4kz0wAAAAAAAAAAABkARQnAQ"
},
{
"filename": "fill.js",
"title": "分类填充图",
"screenshot": ""
}
]
}

4
examples/polygon/basic/demo/polygon.js
View File

@ -5,8 +5,8 @@ const scene = new Scene({
pitch: 0,
type: 'amap',
style: 'light',
center: [121.40, 31.258134],
zoom: 3,
center: [102.430994, 29.877025],
zoom: 3.52,
});
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')

2
examples/polygon/basic/index.zh.md
View File

@ -1,5 +1,5 @@
---
title: 面图层
title: 填充地图
order: 0
redirect_from:
- /zh/examples

25
examples/raster/basic/demo/image.js Normal file
View File

@ -0,0 +1,25 @@
import { Scene } from '@l7/scene';
import { ImageLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [121.2680, 30.3628],
zoom: 13,
});
const layer = new ImageLayer({});
layer.source(
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{
parser: {
type: 'image',
extent: [121.168, 30.2828, 121.384, 30.4219],
},
},
);
scene.on('loaded',()=>{
scene.addLayer(layer);
})

39
examples/raster/basic/demo/line.js
View File

@ -1,39 +0,0 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'light',
center: [102.602992, 23.107329],
zoom: 13,
});
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.then((res) => res.json())
.then((data) => {
const layer =
new LineLayer({
})
.source(data)
.size(1)
.shape('line')
.color(
'ELEV',
[
'#E8FCFF',
'#CFF6FF',
'#A1E9ff',
'#65CEF7',
'#3CB1F0',
'#2894E0',
'#1772c2',
'#105CB3',
'#0D408C',
'#002466',
].reverse(),
)
scene.addLayer(layer);
console.log(layer);
});

12
examples/raster/basic/demo/meta.json
View File

@ -1,13 +1,17 @@
{
"title": {
"zh": "图库",
"zh": "栅格图层",
"en": "Gallery"
},
"demos": [
{
"filename": "line.js",
"title": "线图层",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
"filename": "image.js",
"title": "图片",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
},
{
"filename": "raster.js",
"title": "地形"
}
]
}

70
examples/raster/basic/demo/raster.js Normal file
View File

@ -0,0 +1,70 @@
import { Scene } from '@l7/scene';
import { RasterLayer } from '@l7/layers'
// import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [121.2680, 30.3628],
zoom: 13,
});
async function addLayer() {
const tiffdata = await this.getTiffData();
const layer = new RasterLayer({});
layer
.source(tiffdata.data, {
parser: {
type: 'raster',
width: tiffdata.width,
height: tiffdata.height,
min: 0,
max: 8000,
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
},
})
.style({
opacity: 0.8,
rampColors: {
colors: [
'#002466',
'#0D408C',
'#105CB3',
'#1A76C7',
'#2894E0',
'#3CB4F0',
'#65CEF7',
'#98E3FA',
'#CFF6FF',
'#E8FCFF',
],
positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0],
},
});
return layer;
}
addLayer()
scene.on('loaded',()=>{
const layer = addLayer();
scene.addLayer(layer);
})
async function getTiffData() {
const response = await fetch(
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
);
const arrayBuffer = await response.arrayBuffer();
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
const image = await tiff.getImage();
const width = image.getWidth();
const height = image.getHeight();
const values = await image.readRasters();
return {
data: values[0],
width,
height,
min: 0,
max: 8000,
};
}

2
examples/raster/basic/index.zh.md
View File

@ -1,4 +1,6 @@
---
title: 栅格图层
order: 0
redirect_from:
- /zh/examples/raster/
---

57
examples/scene/control/demo/popup.js Normal file
View File

@ -0,0 +1,57 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers'
import { Scale, Zoom, Layers } from '@l7/component';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'dark',
center: [121.40, 31.258134],
zoom: 5,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
.then((res) => res.json())
.then((data) => {
const pointLayer =
new PointLayer({
})
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
}).shape('circle')
.size('unit_price', [5, 25])
.color('name',['#49B5AD', "#5B8FF9"])
.style({
opacity: 0.3,
strokeWidth: 1,
})
scene.addLayer(pointLayer);
var overlayers = {
"围栏填充": pointLayer,
};
var baseLayers = {
"基础地图": pointLayer,
};
const layersControl = new Layers({
overlayers: overlayers,
baseLayers,
});
scene.addControl(layersControl);
});
const zoomControl = new Zoom();
const scaleControl = new Scale();
scene.addControl(zoomControl);
scene.addControl(scaleControl);

9
examples/scene/map/demo/amap.js
View File

@ -1,9 +0,0 @@
import { Scene } from './node_modules/@l7/scene';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'dark',
center: [121.40, 31.258134],
zoom: 5,
});

0
examples/scene/control/demo/amap.js → examples/tutorial/control/demo/amap.js
View File

4
examples/scene/control/demo/mapbox.js → examples/tutorial/control/demo/mapbox.js
View File

@ -10,7 +10,9 @@ const scene = new Scene({
});
const zoomControl = new Zoom();
const scaleControl = new Scale();
const scaleControl = new Scale({
position:'rightbottom',
});
scene.addControl(zoomControl);
scene.addControl(scaleControl);

0
examples/scene/control/demo/meta.json → examples/tutorial/control/demo/meta.json
View File

57
examples/tutorial/control/demo/popup.js Normal file
View File

@ -0,0 +1,57 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers'
import { Scale, Zoom, Layers } from '@l7/component';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'dark',
center: [121.40, 31.258134],
zoom: 5,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
.then((res) => res.json())
.then((data) => {
const pointLayer =
new PointLayer({
})
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
}).shape('circle')
.size('unit_price', [5, 25])
.color('name',['#49B5AD', "#5B8FF9"])
.style({
opacity: 0.3,
strokeWidth: 1,
})
scene.addLayer(pointLayer);
var overlayers = {
"围栏填充": pointLayer,
};
var baseLayers = {
"基础地图": pointLayer,
};
const layersControl = new Layers({
overlayers: overlayers,
baseLayers,
});
scene.addControl(layersControl);
});
const zoomControl = new Zoom();
const scaleControl = new Scale();
scene.addControl(zoomControl);
scene.addControl(scaleControl);

2
examples/scene/control/index.zh.md → examples/tutorial/control/index.zh.md
View File

@ -1,6 +1,6 @@
---
title: 组件
order: 0
order: 2
---

0
examples/data/basic/demo/line.js → examples/tutorial/data/demo/line.js
View File

0
examples/data/basic/demo/meta.json → examples/tutorial/data/demo/meta.json
View File

2
examples/data/basic/index.zh.md → examples/tutorial/data/index.zh.md
View File

@ -1,4 +1,4 @@
---
title: 数据
order: 0
order: 1
---

0
examples/scene/basic/demo/amap.js → examples/tutorial/map/demo/amap.js
View File

0
examples/scene/basic/demo/mapbox.js → examples/tutorial/map/demo/mapbox.js
View File

0
examples/scene/basic/demo/meta.json → examples/tutorial/map/demo/meta.json
View File

0
examples/scene/basic/index.zh.md → examples/tutorial/map/index.zh.md
View File

12
gatsby-browser.js
View File

@ -1,5 +1,9 @@
import './packages/component/src/css/l7.css';
window.scene = require('@l7/scene');
window.layers= require('@l7/layers');
window.component= require('@l7/component');
import './packages/component/src/css/l7.css';
import './site/css/demo.css'
require('./packages/component/src/css/l7.css');
// window.GeoTIFF = require('geotiff/dist/geotiff.bundle.js')
window.scene = require('./packages/scene/src');
window.layers= require('./packages/layers/src');
window.component= require('./packages/component/src');
window.g2plot = require('@antv/g2plot');

33
gatsby-config.js
View File

@ -4,6 +4,11 @@ module.exports = {
resolve: '@antv/gatsby-theme-antv',
options: {
pathPrefix: '/gatsby-theme-antv',
GATrackingId: 'UA-148148901-7',
pathPrefix: '/l7',
theme: {
'primary-color': '#722ED1',
},
},
},
],
@ -84,22 +89,6 @@ module.exports = {
en: 'Gallery',
},
},
{
slug: 'data',
icon: 'data',
title: {
zh: '数据源',
en: 'data',
},
},
{
slug: 'scene',
icon: 'map',
title: {
zh: '场景',
en: 'Scene',
},
},
{
slug: 'point',
icon: 'point',
@ -142,19 +131,17 @@ module.exports = {
},
},
{
slug: 'marker',
icon: 'mapmarker',
slug: 'tutorial',
icon: 'map',
title: {
zh: '标注',
en: 'Marker',
zh: '教程示例',
en: 'tutorial',
},
}
},
],
exampleContainer: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
playground: {
container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
playgroundDidMount: 'console.log("playgroundDidMount");',
playgroundWillUnmount: 'console.log("scene");',
},
},

17
gatsby-node.js Normal file
View File

@ -0,0 +1,17 @@
const path = require('path');
exports.onCreateWebpackConfig = ({ getConfig, stage, plugins }) => {
const config = getConfig();
config.resolve.extensions.push('.glsl');
config.resolve.alias = {
...config.resolve.alias,
'@l7/core': path.resolve(__dirname, 'packages/core/src'),
'@l7/component': path.resolve(__dirname, 'packages/component/src'),
'@l7/layers': path.resolve(__dirname, 'packages/layers/src'),
'@l7/maps': path.resolve(__dirname, 'packages/maps/src'),
'@l7/renderer': path.resolve(__dirname, 'packages/renderer/src'),
'@l7/scene': path.resolve(__dirname, 'packages/scene/src'),
'@l7/source': path.resolve(__dirname, 'packages/source/src'),
'@l7/utils': path.resolve(__dirname, 'packages/utils/src'),
};
};

9
package.json
View File

@ -5,7 +5,7 @@
"url": "https://github.com/antvis/L7"
},
"devDependencies": {
"@antv/gatsby-theme-antv": "^0.9.7",
"@antv/gatsby-theme-antv": "^0.9.52",
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-decorators": "^7.6.0",
@ -54,6 +54,7 @@
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.0.0-beta6",
"gatsby": "^2.17.7",
"gatsby-remark-prettier": "^1.0.0",
"geotiff": "^1.0.0-beta.6",
"gh-pages": "^2.1.1",
"gl": "^4.4.0",
@ -103,7 +104,7 @@
"worker-loader": "^2.0.0"
},
"scripts": {
"start": "export NODE_ENV=site && npm run site:develop",
"start": "NODE_ENV=site npm run site:develop",
"site:develop": "gatsby develop --open -H 0.0.0.0",
"site:build": "npm run site:clean && export NODE_ENV=site && gatsby build --prefix-paths",
"site:clean": "gatsby clean",
@ -144,5 +145,9 @@
"commitizen": {
"path": "cz-conventional-changelog"
}
},
"dependencies": {
"@antv/g2plot": "^0.1.0-beta.5",
"geotiff": "^1.0.0-beta.6"
}
}

4
packages/component/src/css/l7.css
View File

@ -791,8 +791,8 @@
padding: 8px;
}
.l7-control-layers label input[type="radio"], input[type="checkbox"]{
width: 19px;
height: 19px;
width: 14px;
height: 14px;
margin: 0;
vertical-align: middle;
-ms-transform: scale(1.5); /* IE 9 */

7
packages/core/src/services/layer/ILayerService.ts
View File

@ -1,9 +1,11 @@
import { SyncBailHook, SyncHook } from 'tapable';
import Clock from '../../utils/clock';
import { IGlobalConfigService } from '../config/IConfigService';
import { IModel } from '../renderer/IModel';
import { IMultiPassRenderer } from '../renderer/IMultiPassRenderer';
import { ISource, ISourceCFG } from '../source/ISourceService';
import {
IAnimateOption,
IEncodeFeature,
IScale,
IScaleOptions,
@ -61,6 +63,8 @@ export interface ILayer {
size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
color(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
label(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
animate(option: IAnimateOption): ILayer;
// pattern(field: string, value: StyleAttributeOption): ILayer;
// filter(field: string, value: StyleAttributeOption): ILayer;
// active(option: ActiveOption): ILayer;
@ -145,8 +149,11 @@ export interface ILayerInitializationOptions {
* 提供 Layer 管理服务
*/
export interface ILayerService {
clock: Clock;
add(layer: ILayer): void;
initLayers(): void;
startAnimate(): void;
stopAnimate(): void;
getLayers(): ILayer[];
getLayer(name: string): ILayer | undefined;
remove(layer: ILayer): void;

7
packages/core/src/services/layer/IStyleAttributeService.ts
View File

@ -61,6 +61,13 @@ export enum AttributeType {
Uniform,
}
export interface IAnimateOption {
enable: boolean;
interval?: number;
duration?: number;
trailLength?: number;
}
export interface IEncodeFeature {
color?: Color;
size?: number | number[];

36
packages/core/src/services/layer/LayerService.ts
View File

@ -1,14 +1,21 @@
import { inject, injectable } from 'inversify';
import { container, ILayer } from '../..';
import { TYPES } from '../../types';
import Clock from '../../utils/clock';
import { IGlobalConfigService } from '../config/IConfigService';
import { IRendererService } from '../renderer/IRendererService';
import { ILayerService } from './ILayerService';
@injectable()
export default class LayerService implements ILayerService {
public clock = new Clock();
private layers: ILayer[] = [];
private layerRenderID: number;
private animateInstanceCount: number = 0;
@inject(TYPES.IRendererService)
private readonly renderService: IRendererService;
@ -17,6 +24,8 @@ export default class LayerService implements ILayerService {
public add(layer: ILayer) {
this.layers.push(layer);
this.initPlugin(layer);
layer.init();
}
public initLayers() {
@ -72,6 +81,24 @@ export default class LayerService implements ILayerService {
this.layers = [];
}
public startAnimate() {
if (this.animateInstanceCount++ === 0) {
this.runRender();
}
}
public stopAnimate() {
if (--this.animateInstanceCount === 0) {
this.stopRender();
}
}
private initPlugin(layer: ILayer) {
for (const plugin of layer.plugins) {
plugin.apply(layer);
}
}
private clear() {
this.renderService.clear({
color: [0, 0, 0, 0],
@ -79,4 +106,13 @@ export default class LayerService implements ILayerService {
framebuffer: null,
});
}
private runRender() {
this.renderLayers();
this.layerRenderID = requestAnimationFrame(this.renderLayers.bind(this));
}
private stopRender() {
cancelAnimationFrame(this.layerRenderID);
}
}

8
packages/core/src/services/scene/SceneService.ts
View File

@ -119,6 +119,9 @@ export default class Scene extends EventEmitter implements ISceneService {
// 重新绑定非首次相机更新事件
this.map.onCameraChanged(this.handleMapCameraChanged);
this.logger.info('map loaded');
// scene 创建完成自动调用render 方法
this.render();
});
/**
@ -161,14 +164,13 @@ export default class Scene extends EventEmitter implements ISceneService {
await this.initPromise;
// 初始化 marker 容器 TODO: 可以放到 map 初始化方法中？
this.map.addMarkerContainer();
this.layerService.initLayers();
this.logger.info(' render inited');
this.inited = true;
this.emit('loaded');
}
this.layerService.renderLayers();
// this.logger.info('render');
this.logger.info('render');
}
public destroy() {

4
packages/core/src/services/shader/ShaderModuleService.ts
View File

@ -5,9 +5,11 @@ import { IModuleParams, IShaderModuleService } from './IShaderModuleService';
import common from '../../shaders/common.glsl';
import decode from '../../shaders/decode.glsl';
import light from '../../shaders/light.glsl';
import lighting from '../../shaders/lighting.glsl';
import pickingFrag from '../../shaders/picking.frag.glsl';
import pickingVert from '../../shaders/picking.vert.glsl';
import project from '../../shaders/project.glsl';
import projection from '../../shaders/projection.glsl';
import sdf2d from '../../shaders/sdf_2d.glsl';
@ -26,8 +28,10 @@ export default class ShaderModuleService implements IShaderModuleService {
this.registerModule('common', { vs: common, fs: common });
this.registerModule('decode', { vs: decode, fs: '' });
this.registerModule('projection', { vs: projection, fs: '' });
this.registerModule('project', { vs: project, fs: '' });
this.registerModule('sdf_2d', { vs: '', fs: sdf2d });
this.registerModule('lighting', { vs: lighting, fs: '' });
this.registerModule('light', { vs: light, fs: '' });
this.registerModule('picking', { vs: pickingVert, fs: pickingFrag });
}

25
packages/core/src/shaders/light.glsl Normal file
View File

@ -0,0 +1,25 @@
#define ambientRatio 0.5
#define diffuseRatio 0.3
#define specularRatio 0.2
float calc_lighting(vec4 pos) {
vec3 worldPos = vec3(pos * u_ModelMatrix);
vec3 worldNormal = vec3(vec4(a_Normal,1.0));
// //cal light weight
vec3 viewDir = normalize(u_CameraPosition - worldPos);
vec3 lightDir = normalize(vec3(1, -10.5, 12));
vec3 halfDir = normalize(viewDir+lightDir);
// //lambert
float lambert = dot(worldNormal, lightDir);
//specular
float specular = pow( max(0.0, dot(worldNormal, halfDir)), 32.0);
//sum to light weight
float lightWeight = ambientRatio + diffuseRatio * lambert + specularRatio * specular;
return lightWeight;
}

34
packages/core/src/shaders/project.glsl Normal file
View File

@ -0,0 +1,34 @@
#define E 2.718281828459045
vec2 ProjectFlat(vec2 lnglat){
float maxs=85.0511287798;
float lat=max(min(maxs,lnglat.y),-maxs);
float scale= 268435456.;
float d=PI/180.;
float x=lnglat.x*d;
float y=lat*d;
y=log(tan((PI/4.)+(y/2.)));
float a=.5/PI,
b=.5,
c=-.5/PI;
d=.5;
x=scale*(a*x+b);
y=scale*(c*y+d);
return vec2(x,y);
}
vec2 unProjectFlat(vec2 px){
float a=.5/PI;
float b=.5;
float c=-.5/PI;
float d=.5;
float scale = 268435456.;
float x=(px.x/scale-b)/a;
float y=(px.y/scale-d)/c;
y=(atan(pow(E,y))-(PI/4.))*2.;
d=PI/180.;
float lat=y/d;
float lng=x/d;
return vec2(lng,lat);
}

12
packages/core/src/shaders/projection.glsl
View File

@ -41,6 +41,7 @@ float project_scale(float meters) {
return meters * u_PixelsPerMeter.z;
}
// offset coords -> world coords
vec4 project_offset(vec4 offset) {
float dy = offset.y;
@ -103,6 +104,14 @@ vec2 project_pixel_size_to_clipspace(vec2 pixels) {
return offset * u_FocalDistance;
}
float project_pixel(float pixel) {
if (u_CoordinateSystem == COORDINATE_SYSTEM_P20
|| u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
// P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
return pixel * pow(2.0, (19.0 - u_Zoom));
}
return pixel;
}
vec2 project_pixel(vec2 pixel) {
if (u_CoordinateSystem == COORDINATE_SYSTEM_P20
|| u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
@ -132,10 +141,11 @@ vec4 project_common_position_to_clipspace(vec4 position) {
vec4 unproject_clipspace_to_position(vec4 clipspacePos, mat4 u_InverseViewProjectionMatrix) {
vec4 pos = u_InverseViewProjectionMatrix * (clipspacePos - u_ViewportCenterProjection);
if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||
u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
// Needs to be divided with project_uCommonUnitsPerMeter
pos.w /= u_PixelsPerMeter.z;
pos.w = pos.w / u_PixelsPerMeter.z;
}
return pos;
}

Some files were not shown because too many files have changed in this diff Show More