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

feat(scene): scene service inTransientScope

This commit is contained in:
thinkinggis 2019-11-07 00:52:03 +08:00
parent a32dc230a0
commit 26c3cca511
71 changed files with 1034 additions and 609 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
.gitignore vendored
View File

@ -68,3 +68,91 @@ lib/
.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

39
examples/data/basic/demo/line.js Normal file
View File

@ -0,0 +1,39 @@
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/data/basic/demo/meta.json Normal file
View File

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

4
examples/data/basic/index.zh.md Normal file
View File

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

39
examples/gallery/basic/demo/line.js Normal file
View File

@ -0,0 +1,39 @@
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/gallery/basic/demo/meta.json Normal file
View File

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

4
examples/gallery/basic/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Gallery
order: 0
---

39
examples/heatmap/basic/demo/line.js Normal file
View File

@ -0,0 +1,39 @@
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/heatmap/basic/demo/meta.json Normal file
View File

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

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

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

39
examples/line/basic/demo/line.js Normal file
View File

@ -0,0 +1,39 @@
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/line/basic/demo/meta.json Normal file
View File

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

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

@ -0,0 +1,4 @@
---
title: 线图层
order: 1
---

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

@ -0,0 +1,39 @@
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 Normal file
View File

@ -0,0 +1,13 @@
{
"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 Normal file
View File

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

351
examples/point/basic/data.json
View File

@ -1,351 +0,0 @@
[{
"id": "5011000000404",
"name": "铁路新村(华池路)",
"longitude": 121.4316962,
"latitude": 31.26082325,
"unit_price": 71469.4,
"count": 2
}, {
"id": "5011000002716",
"name": "金元坊",
"longitude": 121.3810096,
"latitude": 31.25302026,
"unit_price": 47480.5,
"count": 2
}, {
"id": "5011000003403",
"name": "兰溪路231弄",
"longitude": 121.4086229,
"latitude": 31.25291206,
"unit_price": 55218.4,
"count": 2
}, {
"id": "5011000003652",
"name": "兰溪公寓",
"longitude": 121.409227,
"latitude": 31.251014,
"unit_price": 55577.8,
"count": 2
}, {
"id": "5011000004139",
"name": "梅岭新村",
"longitude": 121.400946,
"latitude": 31.24946565,
"unit_price": 63028.1,
"count": 2
}, {
"id": "5011000005647",
"name": "石泉路140弄",
"longitude": 121.4318415,
"latitude": 31.25682515,
"unit_price": 52256.3,
"count": 2
}, {
"id": "5011000006479",
"name": "中山北路2165弄",
"longitude": 121.4350523,
"latitude": 31.25364239,
"unit_price": 55129.4,
"count": 2
}, {
"id": "5011000008328",
"name": "光新路430弄",
"longitude": 121.4374976,
"latitude": 31.26298493,
"unit_price": 49397.2,
"count": 2
}, {
"id": "5011000004973",
"name": "旬阳新村",
"longitude": 121.431054,
"latitude": 31.259485,
"unit_price": 58836.4,
"count": 3
}, {
"id": "5011000005863",
"name": "岚皋路300弄",
"longitude": 121.4290778,
"latitude": 31.2587194,
"unit_price": 56944.2,
"count": 3
}, {
"id": "5011000006645",
"name": "光复西路145弄",
"longitude": 121.4375783,
"latitude": 31.25329386,
"unit_price": 63652.3,
"count": 3
}, {
"id": "5011000011530",
"name": "祥和大厦",
"longitude": 121.3839187,
"latitude": 31.25161362,
"unit_price": 41029.4,
"count": 3
}, {
"id": "5011000013673",
"name": "真光十小区",
"longitude": 121.395288,
"latitude": 31.256758,
"unit_price": 41900.9,
"count": 3
}, {
"id": "5011000013938",
"name": "真光新秀",
"longitude": 121.396422,
"latitude": 31.260857,
"unit_price": 49490.7,
"count": 3
}, {
"id": "5011000017097",
"name": "陆三小区",
"longitude": 121.4259304,
"latitude": 31.24930686,
"unit_price": 56632.3,
"count": 3
}, {
"id": "5011000017118",
"name": "樱花苑",
"longitude": 121.4002071,
"latitude": 31.25485805,
"unit_price": 49650.2,
"count": 3
}, {
"id": "5011000017635",
"name": "宁馨家园",
"longitude": 121.3988072,
"latitude": 31.25289796,
"unit_price": 61407.7,
"count": 3
}, {
"id": "5011000020263",
"name": "南大街22弄",
"longitude": 121.4090896,
"latitude": 31.25320726,
"unit_price": 52482.1,
"count": 3
}, {
"id": "5011000000988",
"name": "芝川新苑",
"longitude": 121.409025,
"latitude": 31.263945,
"unit_price": 59417.8,
"count": 4
}, {
"id": "5011000007885",
"name": "南大街34弄",
"longitude": 121.4080409,
"latitude": 31.2535179,
"unit_price": 49739.4,
"count": 4
}, {
"id": "5011000016119",
"name": "万千公寓",
"longitude": 121.4379659,
"latitude": 31.26270913,
"unit_price": 61846.7,
"count": 4
}, {
"id": "5011000017255",
"name": "上海星港",
"longitude": 121.419023,
"latitude": 31.249904,
"unit_price": 81443.3,
"count": 4
}, {
"id": "5011000018021",
"name": "中岚大楼",
"longitude": 121.432984,
"latitude": 31.251381,
"unit_price": 52858.6,
"count": 4
}, {
"id": "5011000018102",
"name": "武宁苑",
"longitude": 121.424577,
"latitude": 31.249765,
"unit_price": 53966.7,
"count": 4
}, {
"id": "5011000019020",
"name": "天汇国际",
"longitude": 121.4115686,
"latitude": 31.26126002,
"unit_price": 45380,
"count": 4
}, {
"id": "5011102208410",
"name": "三元及地苑",
"longitude": 121.3760233,
"latitude": 31.26220092,
"unit_price": 47857.5,
"count": 4
}, {
"id": "5011000001095",
"name": "长征家苑",
"longitude": 121.3949788,
"latitude": 31.25376373,
"unit_price": 58117.4,
"count": 5
}, {
"id": "5011000009828",
"name": "中环财富杰座",
"longitude": 121.378574,
"latitude": 31.25527816,
"unit_price": 26802.3,
"count": 5
}, {
"id": "5011000013807",
"name": "华轩大厦",
"longitude": 121.375539,
"latitude": 31.258582,
"unit_price": 23147.8,
"count": 5
}, {
"id": "5011000014493",
"name": "金莲坊",
"longitude": 121.3802448,
"latitude": 31.24989653,
"unit_price": 48458.5,
"count": 5
}, {
"id": "5011000017050",
"name": "曹杨家园",
"longitude": 121.4101947,
"latitude": 31.26469667,
"unit_price": 56991.5,
"count": 5
}, {
"id": "5011000018096",
"name": "颐宁苑",
"longitude": 121.415998,
"latitude": 31.252321,
"unit_price": 62755.7,
"count": 5
}, {
"id": "5011000018172",
"name": "城公大厦",
"longitude": 121.4383528,
"latitude": 31.26001489,
"unit_price": 56813.7,
"count": 5
}, {
"id": "509977363956217",
"name": "中骏天悦",
"longitude": 121.409065,
"latitude": 31.260569,
"unit_price": 109279,
"count": 5
}, {
"id": "5011000015683",
"name": "市政馨苑",
"longitude": 121.420237,
"latitude": 31.259543,
"unit_price": 60397.9,
"count": 6
}, {
"id": "5011000003824",
"name": "星光域",
"longitude": 121.413902,
"latitude": 31.264414,
"unit_price": 91223.7,
"count": 7
}, {
"id": "5011000014462",
"name": "大隆花苑",
"longitude": 121.4388425,
"latitude": 31.26340479,
"unit_price": 52720.9,
"count": 7
}, {
"id": "5011000015186",
"name": "光新三村",
"longitude": 121.43749,
"latitude": 31.263028,
"unit_price": 50524.7,
"count": 7
}, {
"id": "5011000015629",
"name": "平民后村",
"longitude": 121.43489,
"latitude": 31.256305,
"unit_price": 59470,
"count": 7
}, {
"id": "5011000015825",
"name": "真光新村",
"longitude": 121.397285,
"latitude": 31.260535,
"unit_price": 48991.6,
"count": 7
}, {
"id": "5011000018225",
"name": "半岛花园",
"longitude": 121.441891,
"latitude": 31.253607,
"unit_price": 73694.6,
"count": 7
}, {
"id": "5011000008852",
"name": "真西新村第二小区",
"longitude": 121.402254,
"latitude": 31.251552,
"unit_price": 55383.5,
"count": 8
}, {
"id": "5011000017348",
"name": "嘉秀坊",
"longitude": 121.3750242,
"latitude": 31.26059388,
"unit_price": 47246.6,
"count": 10
}, {
"id": "5011000018056",
"name": "真情公寓",
"longitude": 121.3909318,
"latitude": 31.26018159,
"unit_price": 56255.2,
"count": 10
}, {
"id": "5011000011380",
"name": "清涧七街坊",
"longitude": 121.3922347,
"latitude": 31.2646608,
"unit_price": 46948.6,
"count": 11
}, {
"id": "5011000015943",
"name": "新体育广场",
"longitude": 121.432549,
"latitude": 31.26324211,
"unit_price": 30852.9,
"count": 11
}, {
"id": "5011000014039",
"name": "清涧六街坊",
"longitude": 121.395639,
"latitude": 31.263124,
"unit_price": 45790.7,
"count": 12
}, {
"id": "5011000015761",
"name": "曹杨八村",
"longitude": 121.4120603,
"latitude": 31.25113592,
"unit_price": 50921.7,
"count": 18
}, {
"id": "5011000017518",
"name": "海棠苑",
"longitude": 121.398276,
"latitude": 31.254232,
"unit_price": 49380.8,
"count": 18
}, {
"id": "5011000012360",
"name": "嘉善坊",
"longitude": 121.3811297,
"latitude": 31.25881044,
"unit_price": 41048.3,
"count": 20
}]

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

@ -1,5 +1,5 @@
import { Scene } from '@l7/scene';
import { PointLayer, PointImageLayer } from '@l7/layers'
import { PointLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
@ -13,7 +13,8 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
.then((res) => res.json())
.then((data) => {
const pointLayer =
new PointLayer()
new PointLayer({
})
.source(data, {
parser: {
type: 'json',
@ -21,38 +22,17 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
y: 'latitude'
}
}).shape('circle')
.size(8)
.color('count',['#d73027','#fc8d59','#fee08b','#d9ef8b','#91cf60','#1a9850'])
.size('unit_price', [5, 25])
.color('#5B8FF9')
.style({
opacity: 1.0,
strokeWidth: 2,
strokeColor: "#fff",
opacity: 0.3,
strokeWidth: 1,
strokeColor: "#5B8FF9",
})
scene.addImage(
'00',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ',
);
const imageLayer = new PointImageLayer()
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
})
.shape('00')
.size(30);
scene.addLayer(imageLayer);
// scene.on('loaded',()=>{
// console.log('----------loaded')
scene.addLayer(pointLayer);
// })
console.log(scene);
scene.on('loaded',()=>{
console.log(scene.map);
})
scene.render();
});

20
examples/point/basic/demo/point.js
View File

@ -1,11 +1,10 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers'
console.log(scene);
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'dark',
style: 'light',
center: [121.40, 31.258134],
zoom: 15,
});
@ -14,7 +13,8 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
.then((res) => res.json())
.then((data) => {
const pointLayer =
new PointLayer()
new PointLayer({
})
.source(data, {
parser: {
type: 'json',
@ -23,18 +23,14 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
}
}).shape('circle')
.size('unit_price', [5, 25])
.color('#2F54EB')
.color('name',['#49B5AD', "#5B8FF9"])
.style({
opacity: 1.0,
strokeWidth: 2,
strokeColor: "#fff",
opacity: 0.3,
strokeWidth: 1,
})
// scene.on('loaded',()=>{
// console.log('----------loaded')
scene.addLayer(pointLayer);
// })
scene.render();
});

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

@ -4,8 +4,3 @@ order: 0
redirect_from:
- /zh/examples
---
图表的基本描述。
### 何时使用

41
examples/point/image/demo/image.js Normal file
View File

@ -0,0 +1,41 @@
import { Scene } from '@l7/scene';
import { PointImageLayer } from '@l7/layers'
console.log(this);
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) => {
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'
}
})
.shape('name', ['00', '01','02'])
.size(60);
scene.addLayer(imageLayer);
});

13
examples/point/image/demo/meta.json Normal file
View File

@ -0,0 +1,13 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "point.js",
"title": "气泡图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
}
]
}

41
examples/point/image/demo/size.js Normal file
View File

@ -0,0 +1,41 @@
import { Scene } from '@l7/scene';
import { PointImageLayer } from '@l7/layers'
console.log(this);
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) => {
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'
}
})
.shape('name', ['00', '01','02'])
.size('unit_price', [30, 100])
scene.addLayer(imageLayer);
});

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

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

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

@ -0,0 +1,13 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "point.js",
"title": "面图层",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
}
]
}

41
examples/polygon/basic/demo/polygon.js Normal file
View File

@ -0,0 +1,41 @@
import { Scene } from '@l7/scene';
import { PolygonLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'dark',
center: [121.40, 31.258134],
zoom: 3,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json')
.then((res) => res.json())
.then((data) => {
const layer =
new PolygonLayer({
enablePicking: true,
enableHighlight: true,
highlightColor: 'red',
onHover: (pickedFeature) => {
// tslint:disable-next-line:no-console
console.log(pickedFeature);
},
})
.source(data)
.color('name', [
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49',
])
.shape('fill')
.style({
opacity: 1.0,
});
scene.addLayer(layer);
});

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

@ -0,0 +1,6 @@
---
title: 面图层
order: 0
redirect_from:
- /zh/examples
---

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

@ -0,0 +1,39 @@
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/raster/basic/demo/meta.json Normal file
View File

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

4
examples/raster/basic/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 栅格图层
order: 0
---

3
examples/scene/demo/amap.js → examples/scene/basic/demo/amap.js
View File

@ -7,6 +7,3 @@ const scene = new Scene({
center: [121.40, 31.258134],
zoom: 5,
});
scene.render();
console.log(scene);

3
examples/scene/demo/mapbox.js → examples/scene/basic/demo/mapbox.js
View File

@ -2,10 +2,9 @@ import { Scene } from '@l7/scene';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
type: 'mapbox',
style: 'light',
center: [ -97.119140625, 38.75408327579141],
zoom: 2,
});
scene.render();

6
examples/scene/demo/meta.json → examples/scene/basic/demo/meta.json
View File

@ -1,16 +1,16 @@
{
"title": {
"zh": "中文分类",
"zh": "地图",
"en": "Category"
},
"demos": [
{
"filename": "scene.js",
"filename": "amap.js",
"title": "高德底图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
},
{
"filename": "scene.js",
"filename": "mapbox.js",
"title": "MapBox底图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
}

3
examples/scene/index.zh.md → examples/scene/basic/index.zh.md
View File

@ -1,8 +1,7 @@
---
title: Scene
title: 地图
order: 0
---
初始 L7 地图实例
### 何时使用

9
examples/scene/control/demo/amap.js Normal file
View File

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

10
examples/scene/control/demo/mapbox.js Normal file
View File

@ -0,0 +1,10 @@
import { Scene } from '@l7/scene';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'light',
center: [ -97.119140625, 38.75408327579141],
zoom: 2,
});

18
examples/scene/control/demo/meta.json Normal file
View File

@ -0,0 +1,18 @@
{
"title": {
"zh": "地图",
"en": "Category"
},
"demos": [
{
"filename": "amap.js",
"title": "高德底图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
},
{
"filename": "mapbox.js",
"title": "MapBox底图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
}
]
}

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

@ -0,0 +1,9 @@
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,
});

3
gatsby-browser.js
View File

@ -1,2 +1,3 @@
window.scene = require('@l7/scene');
window.layers= require('@l7/layers')
window.layers= require('@l7/layers');
window.component= require('@l7/component');

64
gatsby-config.js
View File

@ -76,6 +76,22 @@ module.exports = {
},
],
examples: [
{
slug: 'gallery',
icon: 'gallery',
title: {
zh: 'Gallery',
en: 'Gallery',
},
},
{
slug: 'data',
icon: 'data',
title: {
zh: '数据源',
en: 'data',
},
},
{
slug: 'scene',
icon: 'map',
@ -91,9 +107,55 @@ module.exports = {
zh: '点图层',
en: 'PointLayer',
},
},
{
slug: 'line',
icon: 'line',
title: {
zh: '线图层',
en: 'LineLayer',
},
},
{
slug: 'polygon',
icon: 'polygon',
title: {
zh: '面图层',
en: 'PolygonLayer',
},
},
{
slug: 'heatmap',
icon: 'heatmap',
title: {
zh: '热力图',
en: 'HeatMapLayer',
},
order:5,
},
{
slug: 'raster',
icon: 'raster',
title: {
zh: '栅格图层',
en: 'RasterLayer',
},
},
{
slug: 'marker',
icon: 'mapmarker',
title: {
zh: '标注',
en: 'Marker',
},
}
],
exampleContainer: '<div style="min-height: 590px; justify-content: center;position: relative" id="map"/>'
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");',
},
},
};

1
packages/core/src/services/asset/FontService.ts
View File

@ -64,6 +64,7 @@ export default class FontService implements IFontService {
private key: string;
private cache: LRUCache = new LRUCache(CACHE_LIMIT);
public init() {
this.cache.clear();
this.fontOptions = {
fontFamily: DEFAULT_FONT_FAMILY,
fontWeight: DEFAULT_FONT_WEIGHT,

4
packages/core/src/services/asset/IIconService.ts
View File

@ -5,11 +5,11 @@ export type Listener = (...args: any[]) => void;
export interface IIconValue {
x: number;
y: number;
image: HTMLImageElement;
image?: HTMLImageElement;
}
export interface IIcon {
id: string;
image: HTMLImageElement;
image?: HTMLImageElement;
height: number;
width: number;
}

21
packages/core/src/services/asset/IconService.ts
View File

@ -33,15 +33,26 @@ export default class IconService extends EventEmitter implements IIconService {
if (this.hasImage(id)) {
throw new Error('Image Id already exists');
}
this.loadImage(image).then((img) => {
imagedata = img as HTMLImageElement;
this.iconData.push({
id,
image: imagedata,
width: imageSize,
height: imageSize,
});
this.updateIconMap();
this.loadImage(image).then((img) => {
imagedata = img as HTMLImageElement;
const iconImage = this.iconData.find((icon: IIcon) => {
return icon.id === id;
});
if (iconImage) {
iconImage.image = imagedata;
}
// this.iconData.push({
// id,
// image: imagedata,
// width: imageSize,
// height: imageSize,
// });
this.update();
});
}
@ -86,7 +97,9 @@ export default class IconService extends EventEmitter implements IIconService {
this.canvas.height = this.canvasHeight;
Object.keys(this.iconMap).forEach((item: string) => {
const { x, y, image } = this.iconMap[item];
if (image) {
this.ctx.drawImage(image, x, y, imageSize, imageSize);
}
});
}

3
packages/core/src/services/component/ControlService.ts
View File

@ -15,6 +15,7 @@ export default class ControlService implements IControlService {
public controlContainer: HTMLElement;
private controls: IControl[] = [];
public init(cfg: IControlServiceCfg) {
this.destroy();
this.container = cfg.container;
this.initControlPos();
}
@ -68,7 +69,9 @@ export default class ControlService implements IControlService {
DOM.remove(this.controlCorners[i]);
}
}
if (this.controlContainer) {
DOM.remove(this.controlContainer);
}
delete this.controlCorners;
delete this.controlContainer;
}

8
packages/core/src/services/interaction/InteractionService.ts
View File

@ -23,6 +23,7 @@ export default class InteractionService extends EventEmitter
public init() {
// 注册事件在地图底图上
this.clear();
this.addEventListenerOnMap();
}
@ -68,4 +69,11 @@ export default class InteractionService extends EventEmitter
private onHover = ({ x, y }: MouseEvent) => {
this.emit(InteractionEvent.Hover, { x, y });
};
private clear() {
if (this.hammertime) {
this.hammertime.destroy();
}
this.removeEventListenerOnMap();
this.off(InteractionEvent.Hover);
}
}

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

@ -16,8 +16,8 @@ export default class LayerService implements ILayerService {
private readonly configService: IGlobalConfigService;
public add(layer: ILayer) {
// this.initPlugin(layer);
// layer.init();
this.initPlugin(layer);
layer.init();
this.layers.push(layer);
}

2
packages/core/src/services/log/LogService.ts
View File

@ -2,7 +2,7 @@ import { injectable } from 'inversify';
import { Log } from 'probe.gl';
import { ILogService } from './ILogService';
const Logger = new Log({ id: 'L7' }).enable();
const Logger = new Log({ id: 'L7' }).enable(false);
@injectable()
export default class LogService implements ILogService {

2
packages/core/src/services/renderer/IModel.ts
View File

@ -54,6 +54,8 @@ export interface IModelInitializationOptions {
*/
instances?: number;
colorMask?: [boolean, boolean, boolean, boolean];
/**
* depth buffer
*/

2
packages/core/src/services/renderer/passes/PixelPickingPass.ts
View File

@ -97,7 +97,7 @@ export default class PixelPickingPass<InitializationOptions = {}> implements IPa
depth: 1,
});
this.logger.info(`picking fbo cleared ${width} ${height}`);
// this.logger.info(`picking fbo cleared ${width} ${height}`);
/**
* picking pass 不需要 multipass，原因如下：

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

@ -85,6 +85,7 @@ export default class Scene extends EventEmitter implements ISceneService {
}
public init(globalConfig: IGlobalConfig) {
this.initClear();
this.configService.setAndCheckConfig(globalConfig);
// 初始化资源管理 图片
@ -160,7 +161,7 @@ export default class Scene extends EventEmitter implements ISceneService {
this.map.addMarkerContainer();
this.inited = true;
this.layerService.initLayers();
// this.layerService.initLayers();
this.emit('loaded');
}
@ -206,4 +207,14 @@ export default class Scene extends EventEmitter implements ISceneService {
this.cameraService.update(viewport);
this.render();
};
private initClear() {
this.inited = false;
this.layerService.destroy();
this.configService.reset();
this.interactionService.destroy();
this.controlService.destroy();
this.removeAllListeners();
this.map.destroy();
window.removeEventListener('resize', this.handleWindowResized, false);
}
}

1
packages/core/src/services/shader/IShaderModuleService.ts
View File

@ -20,4 +20,5 @@ export interface IShaderModuleService {
* 注册 L7 内置 shader module
*/
registerBuiltinModules(): void;
destroy(): void;
}

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

@ -22,6 +22,7 @@ export default class ShaderModuleService implements IShaderModuleService {
private rawContentCache: { [key: string]: IModuleParams } = {};
public registerBuiltinModules() {
this.destroy();
this.registerModule('common', { vs: common, fs: common });
this.registerModule('decode', { vs: decode, fs: '' });
this.registerModule('projection', { vs: projection, fs: '' });
@ -50,7 +51,10 @@ export default class ShaderModuleService implements IShaderModuleService {
vs: extractedVS,
};
}
public destroy() {
this.moduleCache = {};
this.rawContentCache = {};
}
public getModule(moduleName: string): IModuleParams {
if (this.moduleCache[moduleName]) {
return this.moduleCache[moduleName];

2
packages/layers/src/index.ts
View File

@ -6,8 +6,8 @@ import ArcLineLayer from './line/arc';
import Arc2DLineLayer from './line/arc2d';
import LineLayer from './line/index';
import Point3dLayer from './point/extrude';
import PointLayer from './point/fill';
import PointImageLayer from './point/image';
import PointLayer from './point/index';
import TextLayer from './point/text';
// import Point from './point/point';
import PolygonLayer from './polygon';

1
packages/layers/src/point/extrude.ts
View File

@ -78,7 +78,6 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
if (size) {
let buffersize: number[] = [];
if (Array.isArray(size)) {
// TODO 多维size支持
buffersize =
size.length === 2 ? [size[0], size[0], size[1]] : size;
}

154
packages/layers/src/point/fill.ts Normal file
View File

@ -0,0 +1,154 @@
import {
AttributeType,
gl,
IEncodeFeature,
ILayer,
ILayerPlugin,
ILogService,
IStyleAttributeService,
lazyInject,
TYPES,
} from '@l7/core';
import BaseLayer from '../core/BaseLayer';
import { rgb2arr } from '../utils/color';
import pointFillFrag from './shaders/fill_frag.glsl';
import pointFillVert from './shaders/fill_vert.glsl';
interface IPointLayerStyleOptions {
opacity: number;
strokeWidth: number;
strokeColor: string;
}
export function PointTriangulation(feature: IEncodeFeature) {
const coordinates = feature.coordinates as number[];
return {
vertices: [...coordinates, ...coordinates, ...coordinates, ...coordinates],
extrude: [-1, -1, 1, -1, 1, 1, -1, 1],
indices: [0, 1, 2, 2, 3, 0],
size: coordinates.length,
};
}
export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
public name: string = 'PointLayer';
protected getConfigSchema() {
return {
properties: {
opacity: {
type: 'number',
minimum: 0,
maximum: 1,
},
},
};
}
protected renderModels() {
const {
opacity = 1,
strokeColor = 'rgb(0,0,0,0)',
strokeWidth = 1,
} = this.getStyleOptions();
this.models.forEach((model) =>
model.draw({
uniforms: {
u_opacity: opacity,
u_stroke_width: strokeWidth,
u_stroke_color: rgb2arr(strokeColor),
},
}),
);
return this;
}
protected buildModels() {
this.registerBuiltinAttributes(this);
this.models = [
this.buildLayerModel({
moduleName: 'pointfill',
vertexShader: pointFillVert,
fragmentShader: pointFillFrag,
triangulation: PointTriangulation,
depth: { enable: false },
}),
];
}
private registerBuiltinAttributes(layer: ILayer) {
layer.styleAttributeService.registerStyleAttribute({
name: 'extrude',
type: AttributeType.Attribute,
descriptor: {
name: 'a_Extrude',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 2,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
const extrude = [-1, -1, 1, -1, 1, 1, -1, 1];
const extrudeIndex = (attributeIdx % 4) * 2;
return [extrude[extrudeIndex], extrude[extrudeIndex + 1]];
},
},
});
// point layer size;
layer.styleAttributeService.registerStyleAttribute({
name: 'size',
type: AttributeType.Attribute,
descriptor: {
name: 'a_Size',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 1,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},
});
// point layer size;
layer.styleAttributeService.registerStyleAttribute({
name: 'shape',
type: AttributeType.Attribute,
descriptor: {
name: 'a_Shape',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 1,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
const { shape = 2 } = feature;
const shape2d = layer.configService.getConfig().shape2d as string[];
const shapeIndex = shape2d.indexOf(shape as string);
return [shapeIndex];
},
},
});
}
}

21
packages/layers/src/point/image.ts
View File

@ -6,6 +6,7 @@ import {
ILayerPlugin,
ILogService,
IStyleAttributeService,
ITexture2D,
lazyInject,
TYPES,
} from '@l7/core';
@ -27,7 +28,7 @@ export function PointTriangulation(feature: IEncodeFeature) {
}
export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
public name: string = 'PointLayer';
private texture: ITexture2D;
protected getConfigSchema() {
return {
properties: {
@ -47,11 +48,8 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
model.draw({
uniforms: {
u_opacity: opacity || 1.0,
u_texture: createTexture2D({
data: this.iconService.getCanvas(),
width: 1024,
height: this.iconService.canvasHeight || 64,
}),
u_texture: this.texture,
u_textSize: [1024, this.iconService.canvasHeight || 128],
},
}),
);
@ -61,7 +59,9 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
protected buildModels() {
this.registerBuiltinAttributes(this);
this.updateTexture();
this.iconService.on('imageUpdate', () => {
this.updateTexture();
this.renderModels();
});
this.models = [
@ -131,6 +131,7 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
attributeIdx: number,
) => {
const iconMap = this.iconService.getIconMap();
const { shape } = feature;
const { x, y } = iconMap[shape as string] || { x: 0, y: 0 };
return [x, y];
@ -138,4 +139,12 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
},
});
}
private updateTexture() {
const { createTexture2D } = this.rendererService;
this.texture = createTexture2D({
data: this.iconService.getCanvas(),
width: 1024,
height: this.iconService.canvasHeight || 128,
});
}
}

130
packages/layers/src/point/point.ts
View File

@ -1,130 +0,0 @@
// import {
// gl,
// IIconService,
// IRendererService,
// IShaderModuleService,
// lazyInject,
// TYPES,
// } from '@l7/core';
// import BaseLayer from '../core/BaseLayer';
// import ExtrudeBuffer from './buffers/ExtrudeBuffer';
// import ImageBuffer from './buffers/ImageBuffer';
// import extrude_frag from './shaders/extrude_frag.glsl';
// import extrude_vert from './shaders/extrude_vert.glsl';
// import image_frag from './shaders/image_frag.glsl';
// import image_vert from './shaders/image_vert.glsl';
// export default class PointLayer extends BaseLayer {
// public name: string = 'PointLayer';
// @lazyInject(TYPES.IShaderModuleService)
// private readonly shaderModule: IShaderModuleService;
// @lazyInject(TYPES.IRendererService)
// private readonly renderer: IRendererService;
// protected renderModels() {
// this.models.forEach((model) =>
// model.draw({
// uniforms: {
// u_ModelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
// },
// }),
// );
// return this;
// }
// protected buildModels(): void {
// this.shaderModule.registerModule('point', {
// vs: extrude_vert,
// fs: extrude_frag,
// });
// this.shaderModule.registerModule('pointImage', {
// vs: image_vert,
// fs: image_frag,
// });
// this.models = [];
// const { vs, fs, uniforms } = this.shaderModule.getModule('pointImage');
// // const buffer = new ExtrudeBuffer({
// // data: this.getEncodedData(),
// // });
// // buffer.computeVertexNormals('miters', false);
// const {
// createAttribute,
// createBuffer,
// createElements,
// createTexture2D,
// createModel,
// } = this.renderer;
// const buffer = new ImageBuffer({
// data: this.getEncodedData(),
// iconMap: this.iconService.getIconMap(),
// });
// this.models.push(
// createModel({
// attributes: {
// a_Position: createAttribute({
// buffer: createBuffer({
// data: buffer.attributes.positions,
// type: gl.FLOAT,
// }),
// size: 3,
// }),
// a_normal: createAttribute({
// buffer: createBuffer({
// data: buffer.attributes.normals,
// type: gl.FLOAT,
// }),
// size: 3,
// }),
// a_color: createAttribute({
// buffer: createBuffer({
// data: buffer.attributes.colors,
// type: gl.FLOAT,
// }),
// size: 4,
// }),
// a_size: createAttribute({
// buffer: createBuffer({
// data: buffer.attributes.sizes,
// type: gl.FLOAT,
// }),
// size: 1,
// }),
// a_uv: createAttribute({
// buffer: createBuffer({
// data: buffer.attributes.uv,
// type: gl.FLOAT,
// }),
// size: 2,
// }),
// // a_shape: createAttribute({
// // buffer: createBuffer({
// // data: buffer.attributes.miters,
// // type: gl.FLOAT,
// // }),
// // size: 3,
// // }),
// },
// uniforms: {
// ...uniforms,
// u_opacity: this.styleOption.opacity as number,
// u_texture: createTexture2D({
// data: this.iconService.getCanvas(),
// width: 1024,
// height: this.iconService.canvasHeight,
// }),
// },
// fs,
// vs,
// primitive: gl.POINTS,
// count: buffer.verticesCount,
// // elements: createElements({
// // data: buffer.indexArray,
// // type: gl.UNSIGNED_INT,
// // }),
// }),
// );
// }
// }

6
packages/layers/src/point/shaders/fill_frag.glsl
View File

@ -1,7 +1,7 @@
uniform float u_blur : 0;
uniform float u_opacity : 1;
uniform float u_stroke_width : 1;
uniform vec4 u_stroke_color : [1, 1, 1, 1];
uniform vec4 u_stroke_color : [0, 0, 0, 0];
uniform float u_stroke_opacity : 1;
varying vec4 v_data;
@ -9,6 +9,7 @@ varying vec4 v_color;
varying float v_radius;
#pragma include "sdf_2d"
#pragma include "picking"
void main() {
int shape = int(floor(v_data.w + 0.5));
@ -56,6 +57,7 @@ void main() {
0.0,
inner_df
);
vec4 strokeColor = u_stroke_color == vec4(0) ? v_color : u_stroke_color;
gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity, color_t);
gl_FragColor = opacity_t * mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
}

4
packages/layers/src/point/shaders/fill_vert.glsl
View File

@ -10,7 +10,9 @@ uniform float u_stroke_width : 2;
varying vec4 v_data;
varying vec4 v_color;
varying float v_radius;
#pragma include "projection"
#pragma include "picking"
void main() {
// unpack color(vec2)
@ -33,4 +35,6 @@ void main() {
// construct point coords
v_data = vec4(extrude, antialiasblur, shape_type);
setPickingColor(a_PickingColor);
}

20
packages/layers/src/point/shaders/image_frag.glsl
View File

@ -1,12 +1,26 @@
uniform sampler2D u_texture;
varying vec4 v_color;
varying vec2 v_uv;
uniform vec2 u_textSize;
uniform float u_stroke_width : 1;
uniform vec4 u_stroke_color : [1, 1, 1, 1];
uniform float u_stroke_opacity : 1;
uniform float u_opacity : 1;
varying float v_size;
void main(){
vec2 pos= v_uv + gl_PointCoord / vec2(1024.,128.)* 64.;
// pos.y= 1.- pos.y;
vec2 pos= v_uv / u_textSize + gl_PointCoord / u_textSize * 64.;
vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
float distance = length(fragmentPosition);
float distanceSqrd = distance * distance;
float radius = 1.;
float r = 1.0 - smoothstep(radius-(radius*0.01),
radius+(radius*0.01),
distanceSqrd);
vec4 textureColor=texture2D(u_texture,pos);
if(v_color == vec4(0.)){
gl_FragColor= textureColor;
gl_FragColor= vec4(textureColor.xyz, textureColor.w * r);
}else {
gl_FragColor= step(0.01, textureColor.x) * v_color;
}

8
packages/layers/src/point/shaders/image_vert.glsl
View File

@ -1,3 +1,4 @@
precision highp float;
attribute vec3 a_Position;
attribute vec4 a_Color;
@ -6,12 +7,17 @@ attribute float a_Size;
varying vec4 v_color;
varying vec2 v_uv;
uniform mat4 u_ModelMatrix;
uniform float u_stroke_width : 1;
varying float v_size;
#pragma include "projection"
void main() {
v_color = a_Color;
v_uv = a_Uv;
vec4 project_pos = project_position(vec4(a_Position, 1.0));
v_size = a_Size;
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
gl_PointSize = a_Size;
gl_PointSize = a_Size + u_stroke_width;
}

1
packages/maps/src/amap/Viewport.ts
View File

@ -24,7 +24,6 @@ export default class Viewport implements IViewport {
far = 1000,
fov = 0,
} = mapCamera;
this.zoom = zoom;
this.center = center;

6
packages/maps/src/amap/index.ts
View File

@ -20,7 +20,7 @@ import { MapTheme } from './theme';
import Viewport from './Viewport';
const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200';
const AMAP_VERSION: string = '1.4.8';
const AMAP_VERSION: string = '1.4.15';
const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
/**
@ -208,9 +208,11 @@ export default class AMapService implements IMapService {
}
public destroy() {
if (this.map) {
this.map.destroy();
document.head.removeChild(this.$jsapi);
}
}
public getMapContainer() {
return this.$mapContainer;
@ -232,7 +234,6 @@ export default class AMapService implements IMapService {
position,
} = e.camera;
const { lng, lat } = this.getCenter();
if (this.cameraChangedCallback) {
// resync viewport
this.viewport.syncWithMapCamera({
@ -253,6 +254,7 @@ export default class AMapService implements IMapService {
// set coordinate system
if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD) {
// TODO:偏移坐标系高德地图不支持 pith bear 同步
this.coordinateSystemService.setCoordinateSystem(
CoordinateSystem.P20_OFFSET,
);

2
packages/maps/src/amap/theme.ts
View File

@ -2,5 +2,5 @@ export const MapTheme: {
[key: string]: any;
} = {
dark: 'amap://styles/ba3e9759545cd618392ef073c0dfda8c?isPublic=true',
light: 'amap://styles/a80c558f91b29cf56fa47f895fb1773c?isPublic=true',
light: 'amap://styles/1fd9f8ef9751298f11f5c56968312c70?isPublic=true',
};

4
packages/maps/src/mapbox/index.ts
View File

@ -197,9 +197,11 @@ export default class MapboxService implements IMapService {
}
public destroy() {
if (this.map) {
this.map.remove();
document.head.removeChild(this.$link);
this.$mapContainer = null;
this.map.remove();
}
}
public getMapContainer() {

2
packages/scene/src/index.ts
View File

@ -103,8 +103,8 @@ class Scene {
this.mapService = container.get<IMapService>(TYPES.IMapService);
this.iconService = container.get<IIconService>(TYPES.IIconService);
this.controlService = container.get<IControlService>(TYPES.IControlService);
// this.map = this.mapService.map; // 暴露原生map方法
mapType = this.mapService.getType();
this.render();
}
public getMapService(): IMapService {

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

@ -57,7 +57,7 @@ export default class LineDemo extends React.Component {
'#002466',
].reverse(),
)
.render();
scene.addLayer(lineLayer);
scene.render();
this.scene = scene;

54
stories/Layers/components/pointImage.tsx
View File

@ -9,37 +9,51 @@ export default class PointImage extends React.Component {
this.scene.destroy();
}
public componentDidMount() {
public async componentDidMount() {
const response = await fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
);
const scene = new Scene({
center: [120.19382669582967, 30.258134],
center: [121.40, 31.258134],
zoom: 15,
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'mapbox://styles/mapbox/streets-v9',
zoom: 1,
});
const pointLayer = new PointImageLayer({});
scene.addImage(
'00',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ',
);
pointLayer
.source(data)
.shape('00')
.size(30);
const pointLayer2 = new PointLayer({})
.source(data)
.shape('circle')
.size(8)
.color('red')
.style({
opacity: 1.0,
strokeWidth: 2,
strokeColor: '#fff',
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',
);
this.scene = scene;
scene.on('loaded', () => {
run();
});
scene.addLayer(pointLayer2);
scene.addLayer(pointLayer);
const imageLayer = new PointImageLayer({})
.source(await response.json(), {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
}
})
.shape('name', ['00', '01', '02'])
.size(60);
scene.addLayer(imageLayer);
function run() {
scene.render();
console.log('render');
requestAnimationFrame(run);
}
this.scene = scene;
}

4
stories/Picking/components/Highlight.tsx
View File

@ -38,7 +38,7 @@ export default class Highlight extends React.Component {
highlightColor: [0, 0, 1, 1],
onHover: (pickedFeature) => {
// tslint:disable-next-line:no-console
console.log(pickedFeature);
// console.log(pickedFeature);
},
});
@ -59,7 +59,7 @@ export default class Highlight extends React.Component {
});
scene.addLayer(layer);
scene.render();
console.log(layer);
this.scene = scene;
/*** 运行时修改样式属性 ***/

2
stories/Picking/components/Tooltip.tsx
View File

@ -29,7 +29,7 @@ export default class Mapbox extends React.Component {
enableHighlight: false,
onHover: (pickedFeature) => {
// tslint:disable-next-line:no-console
console.log(pickedFeature);
// console.log(pickedFeature);
},
});