mirror of https://gitee.com/antv-l7/antv-l7
fix(demo): update demo
This commit is contained in:
thinkinggis
parent
8cf6f5d173
commit
ff25461d2d
|
|
@ -4,16 +4,16 @@
|
|||
"en": "heatmap"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "world3d.js",
|
||||
|
||||
"title": "经典热力图3D",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*NxFPSrd9oscAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
|
||||
{
|
||||
"filename": "world.js",
|
||||
"title": "经典热力图2D",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9zUcSK07PHgAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename": "world3d.js",
|
||||
"title": "经典热力图3D",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K_nOTa1C7PoAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { HeatMapLayer } from '@l7/layers';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
pitch: 57.4999999,
|
||||
center: [116.49434030056, 39.868073421167621],
|
||||
type: 'mapbox',
|
||||
zoom: 3,
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
|||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#113681')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
blur: 0.99
|
||||
|
|
|
|||
|
|
@ -4,22 +4,21 @@
|
|||
"en": "line"
|
||||
},
|
||||
"demos": [
|
||||
|
||||
{
|
||||
"filename": "arc3d.js",
|
||||
"title": "3D弧线"
|
||||
|
||||
},
|
||||
{
|
||||
"filename": "arcCircle.js",
|
||||
"title": "大圆弧线",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FTp1Roy34qgAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
},
|
||||
{
|
||||
"filename": "arc.js",
|
||||
"title": "弧线",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "arcCircle.js",
|
||||
"title": "大圆弧线",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import { Scene } from '@l7/scene';
|
|||
import { LineLayer } from '@l7/layers'
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
pitch: 40.89473684210526,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [102.602992, 23.107329],
|
||||
zoom: 14,
|
||||
center: [102.60244, 23.10556],
|
||||
zoom: 14.28,
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import { Scene } from '@l7/scene';
|
|||
import { LineLayer } from '@l7/layers'
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
pitch: 26.842105263157915,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [102.602992, 23.107329],
|
||||
zoom: 14,
|
||||
center: [102.601919, 23.108997],
|
||||
zoom: 14.22,
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
|
|
@ -24,19 +24,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
|||
type: 'quantize'
|
||||
})
|
||||
.color(
|
||||
'ELEV',
|
||||
[ '#E4682F',
|
||||
'#FF8752',
|
||||
'#FFA783',
|
||||
'#FFBEA8',
|
||||
'#FFDCD6',
|
||||
'#EEF3FF',
|
||||
'#C8D7F5',
|
||||
'#A5C1FC',
|
||||
'#7FA7F9',
|
||||
'#5F8AE5' ].reverse()
|
||||
'ELEV',[
|
||||
'#094D4A', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#CEF8D6'
|
||||
],
|
||||
)
|
||||
scene.addLayer(layer);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
});
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
{
|
||||
"filename": "ele_dark.js",
|
||||
"title": "等高线",
|
||||
"screenshot":""
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*X1LgSKQbrD0AAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "linedash.js",
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
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);
|
||||
|
||||
});
|
||||
|
|
@ -34,10 +34,10 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
|
|||
'vesica',
|
||||
])
|
||||
.size('unit_price', [10, 25])
|
||||
.color('name',['#E4504A',"#E99431", "#EBCC53","#43A5DA","#6CC175"])
|
||||
.color('name',['#5B8FF9',"#5CCEA1", "#5D7092","#F6BD16","#E86452"])
|
||||
.style({
|
||||
opacity:1.0,
|
||||
strokeWidth: 1,
|
||||
opacity:0.3,
|
||||
strokeWidth: 2,
|
||||
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,19 @@
|
|||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "buble.js",
|
||||
"filename": "point.js",
|
||||
"title": "气泡图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_9ETS5_1yCEAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
},
|
||||
{
|
||||
"filename": "color.js",
|
||||
"title": "形状映射",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K8ACRr5TY7UAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "world.js",
|
||||
"title": "气泡图 - 电厂装机量",
|
||||
"title": "气泡图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DMREQYwsCF4AAAAAAAAAAABkARQnAQ"
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,37 +1,36 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
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,
|
||||
|
||||
center: [140.067171, 36.26186],
|
||||
zoom: 5.32,
|
||||
maxZoom: 10
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
|
||||
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, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
}).shape('circle')
|
||||
.size('unit_price', [5, 25])
|
||||
.color('name',['#49B5AD', "#5B8FF9"])
|
||||
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,
|
||||
strokeWidth: 1
|
||||
})
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
});
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
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);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -1,139 +1,86 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { Marker } from '@l7/component'
|
||||
import G2Plot from '@antv/g2plot'
|
||||
import { Marker, Popup } from '@l7/component'
|
||||
import * as G2Plot from '@antv/g2plot'
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [-122.80009283836715, 37.05881309947238],
|
||||
center: [122.80009283836715, 37.05881309947238],
|
||||
pitch: 0,
|
||||
zoom: 5
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
// 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;
|
||||
scene.on('loaded',()=>{
|
||||
addChart();
|
||||
})
|
||||
function addChart() {
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach(function (item) {
|
||||
const el = document.createElement('div');
|
||||
const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
|
||||
// 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 size = Math.max(Math.min(parseInt(total / 20000), 100), 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);
|
||||
// });
|
||||
const config = {
|
||||
"tooltip": {
|
||||
"visible": true,
|
||||
"shared": false,
|
||||
"crosshairs": null
|
||||
},
|
||||
legend:{
|
||||
"visible": false,
|
||||
},
|
||||
"label": {
|
||||
"visible": false,
|
||||
"type": "outer",
|
||||
"style": {
|
||||
"fill": "rgba(0, 0, 0, 0.65)"
|
||||
}
|
||||
},
|
||||
"width": size,
|
||||
"height": size,
|
||||
"forceFit": false,
|
||||
"radius": 1,
|
||||
"pieStyle": {
|
||||
"stroke": "white",
|
||||
"lineWidth": 1
|
||||
},
|
||||
"innerRadius": 0.64,
|
||||
"animation": false,
|
||||
"colorField": "item",
|
||||
"angleField": "percent",
|
||||
"color": ["#5CCEA1", "#5D7092", "#5B8FF9"]
|
||||
}
|
||||
const plot = new G2Plot.Ring(el, {
|
||||
data: itemData,
|
||||
...config,
|
||||
});
|
||||
plot.render();
|
||||
new Marker({
|
||||
element: el
|
||||
}).setLnglat({
|
||||
lng:item.coordinates[0],
|
||||
lat:item.coordinates[1]
|
||||
}).addTo(scene);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// });
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: "聚合地图"
|
||||
order: 6
|
||||
---
|
||||
|
|
@ -2,7 +2,7 @@ import { Scene } from '@l7/scene';
|
|||
import { Marker } from '@l7/component'
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [122.80009283836715, 37.05881309947238],
|
||||
pitch: 0,
|
||||
|
|
@ -25,7 +25,8 @@ function addMarkers() {
|
|||
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);;
|
||||
}).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
|
||||
.addTo(scene);;
|
||||
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "中文分类",
|
||||
"en": "Category"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "normal.js",
|
||||
"title": "海量点",
|
||||
"screenshot":""
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 自定义符号
|
||||
order: 7
|
||||
---
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
---
|
||||
title: "等值线"
|
||||
title: "散点图"
|
||||
order: 1
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers'
|
||||
import { PolygonLayer, LineLayer } from '@l7/layers'
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
|
|
@ -79,6 +79,18 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7
|
|||
.style({
|
||||
opacity: 1
|
||||
})
|
||||
const layer2 =
|
||||
new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.size(0.5)
|
||||
.style({
|
||||
opacity: 1
|
||||
})
|
||||
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
console.log(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { RasterLayer } from '@l7/layers'
|
||||
// import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
|
||||
import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
|
|
@ -9,9 +9,29 @@ const scene = new Scene({
|
|||
center: [121.2680, 30.3628],
|
||||
zoom: 13,
|
||||
});
|
||||
async function getTiffData() {
|
||||
debugger
|
||||
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,
|
||||
};
|
||||
}
|
||||
|
||||
async function addLayer() {
|
||||
const tiffdata = await this.getTiffData();
|
||||
const tiffdata = await getTiffData();
|
||||
|
||||
const layer = new RasterLayer({});
|
||||
layer
|
||||
.source(tiffdata.data, {
|
||||
|
|
@ -44,27 +64,7 @@ async function addLayer() {
|
|||
});
|
||||
return layer;
|
||||
}
|
||||
addLayer()
|
||||
scene.on('loaded',()=>{
|
||||
const layer = addLayer();
|
||||
scene.addLayer(layer);
|
||||
addLayer();
|
||||
})
|
||||
|
||||
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,8 +2,8 @@
|
|||
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.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');
|
||||
window.g2plot = require('@antv/g2plot');
|
||||
|
|
@ -5,7 +5,7 @@ module.exports = {
|
|||
options: {
|
||||
pathPrefix: '/gatsby-theme-antv',
|
||||
GATrackingId: 'UA-148148901-7',
|
||||
pathPrefix: '/l7',
|
||||
pathPrefix: 'L7',
|
||||
theme: {
|
||||
'primary-color': '#722ED1',
|
||||
},
|
||||
|
|
@ -15,7 +15,7 @@ module.exports = {
|
|||
siteMetadata: {
|
||||
title: 'L7',
|
||||
description: 'Large-scale WebGL-powered Geospatial data visualization analysis framework',
|
||||
githubUrl: 'https://github.com/antvis/antvis.github.io',
|
||||
githubUrl: 'https://github.com/antvis/L7',
|
||||
navs: [
|
||||
{
|
||||
slug: 'docs/specification',
|
||||
|
|
|
|||
|
|
@ -105,10 +105,11 @@
|
|||
},
|
||||
"scripts": {
|
||||
"start": "NODE_ENV=site npm run site:develop",
|
||||
"build_site": "NODE_ENV=site npm run site:build",
|
||||
"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:build": "npm run site:clean && gatsby build --prefix-paths",
|
||||
"site:clean": "gatsby clean",
|
||||
"site:deploy": "npm run site:build && gh-pages -d public",
|
||||
"site:deploy": "NODE_ENV=site npm run site:build && gh-pages -d public",
|
||||
"prebuild": "run-p tsc lint",
|
||||
"build": "lerna exec --parallel 'BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
|
||||
"todo:postbuild": "yarn build:declarations",
|
||||
|
|
|
|||
|
|
@ -69,7 +69,11 @@ export function PointImageTriangulation(feature: IEncodeFeature) {
|
|||
*/
|
||||
export function LineTriangulation(feature: IEncodeFeature) {
|
||||
const { coordinates } = feature;
|
||||
const line = getNormals(coordinates as number[][], false, 0);
|
||||
let path = coordinates;
|
||||
if (Array.isArray(path[0][0])) {
|
||||
path = coordinates[0];
|
||||
}
|
||||
const line = getNormals(path as number[][], false, 0);
|
||||
return {
|
||||
vertices: line.attrPos, // [ x,y,z, distance, miter,total ]
|
||||
indices: line.attrIndex,
|
||||
|
|
|
|||
|
|
@ -1,95 +0,0 @@
|
|||
// import { lngLatToMeters, Point } from '@l7/utils';
|
||||
// import BufferBase, { IEncodeFeature, Position } from '../../core/BaseBuffer';
|
||||
// import getNormals from '../../utils/polylineNormal';
|
||||
// interface IBufferInfo {
|
||||
// normals: number[];
|
||||
// arrayIndex: number[];
|
||||
// positions: number[];
|
||||
// attrDistance: number[];
|
||||
// miters: number[];
|
||||
// verticesOffset: number;
|
||||
// indexOffset: number;
|
||||
// }
|
||||
// export default class LineBuffer extends BufferBase {
|
||||
// private hasPattern: boolean;
|
||||
// protected buildFeatures() {
|
||||
// const layerData = this.data as IEncodeFeature[];
|
||||
// layerData.forEach((feature: IEncodeFeature) => {
|
||||
// this.calculateLine(feature);
|
||||
// delete feature.bufferInfo;
|
||||
// });
|
||||
// this.hasPattern = layerData.some((feature: IEncodeFeature) => {
|
||||
// return feature.pattern;
|
||||
// });
|
||||
// }
|
||||
// protected initAttributes() {
|
||||
// super.initAttributes();
|
||||
// this.attributes.dashArray = new Float32Array(this.verticesCount);
|
||||
// this.attributes.attrDistance = new Float32Array(this.verticesCount);
|
||||
// this.attributes.totalDistances = new Float32Array(this.verticesCount);
|
||||
// this.attributes.patterns = new Float32Array(this.verticesCount * 2);
|
||||
// this.attributes.miters = new Float32Array(this.verticesCount);
|
||||
// this.attributes.normals = new Float32Array(this.verticesCount * 3);
|
||||
// }
|
||||
// protected calculateFeatures() {
|
||||
// const layerData = this.data as IEncodeFeature[];
|
||||
// // 计算长
|
||||
// layerData.forEach((feature: IEncodeFeature, index: number) => {
|
||||
// let coordinates = feature.coordinates as Position[] | Position[][];
|
||||
// if (Array.isArray(coordinates[0][0])) {
|
||||
// coordinates = coordinates[0] as Position[];
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// const projectCoord: number[][] = coordinates.map((item: Position[]) => {
|
||||
// // @ts-ignore
|
||||
// const p: Point = [...item];
|
||||
// return lngLatToMeters(p);
|
||||
// });
|
||||
// const { normals, attrIndex, attrPos, attrDistance, miters } = getNormals(
|
||||
// coordinates as number[][],
|
||||
// false,
|
||||
// this.verticesCount,
|
||||
// );
|
||||
// const bufferInfo: IBufferInfo = {
|
||||
// normals,
|
||||
// arrayIndex: attrIndex,
|
||||
// positions: attrPos,
|
||||
// attrDistance,
|
||||
// miters,
|
||||
// verticesOffset: this.verticesCount,
|
||||
// indexOffset: this.indexCount,
|
||||
// };
|
||||
// this.verticesCount += attrPos.length / 3;
|
||||
// this.indexCount += attrIndex.length;
|
||||
// feature.bufferInfo = bufferInfo;
|
||||
// });
|
||||
// }
|
||||
// private calculateLine(feature: IEncodeFeature) {
|
||||
// const bufferInfo = feature.bufferInfo as IBufferInfo;
|
||||
// const {
|
||||
// normals,
|
||||
// arrayIndex,
|
||||
// positions,
|
||||
// attrDistance,
|
||||
// miters,
|
||||
// verticesOffset,
|
||||
// indexOffset,
|
||||
// } = bufferInfo;
|
||||
// const { dashArray = 200 } = this.style;
|
||||
|
||||
// this.encodeArray(feature, positions.length / 3);
|
||||
// const totalLength = attrDistance[attrDistance.length - 1];
|
||||
// // 增加长度
|
||||
// const totalDistances = Array(positions.length / 3).fill(totalLength);
|
||||
// // 虚线比例
|
||||
// const ratio = dashArray / totalLength;
|
||||
// const dashArrays = Array(positions.length / 3).fill(ratio);
|
||||
// this.attributes.positions.set(positions, verticesOffset * 3);
|
||||
// this.indexArray.set(arrayIndex, indexOffset);
|
||||
// this.attributes.miters.set(miters, verticesOffset);
|
||||
// this.attributes.normals.set(normals, verticesOffset * 3);
|
||||
// this.attributes.attrDistance.set(attrDistance, verticesOffset);
|
||||
// this.attributes.totalDistances.set(totalDistances, verticesOffset);
|
||||
// this.attributes.dashArray.set(dashArrays, verticesOffset);
|
||||
// }
|
||||
// }
|
||||
|
|
@ -18,15 +18,6 @@ interface IPointLayerStyleOptions {
|
|||
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';
|
||||
|
||||
|
|
@ -41,114 +32,4 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
|
|||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected renderModels() {
|
||||
const {
|
||||
opacity = 1,
|
||||
strokeColor = '#fff',
|
||||
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];
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,10 @@ void main() {
|
|||
}
|
||||
|
||||
float opacity_t = smoothstep(0.0, antialiased_blur, outer_df);
|
||||
|
||||
if(u_stroke_width <0.01 ) {
|
||||
gl_FragColor = v_color * opacity_t;
|
||||
return;
|
||||
}
|
||||
float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(
|
||||
antialiased_blur,
|
||||
0.0,
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export default class MapboxService implements IMapService {
|
|||
|
||||
// map event
|
||||
public on(type: string, handle: (...args: any[]) => void): void {
|
||||
if (MapServiceEvent.indexOf('mapload') !== -1) {
|
||||
if (MapServiceEvent.indexOf(type) !== -1) {
|
||||
this.eventEmitter.on(type, handle);
|
||||
} else {
|
||||
// 统一事件名称
|
||||
|
|
|
|||
|
|
@ -79,9 +79,9 @@ const IndexPage = () => {
|
|||
{
|
||||
logo:
|
||||
'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ',
|
||||
title: '灯塔专业版',
|
||||
title: '浅色朴素色板',
|
||||
description:
|
||||
'深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金',
|
||||
'可视化分析应用',
|
||||
link: '#',
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ',
|
||||
|
|
@ -89,9 +89,9 @@ const IndexPage = () => {
|
|||
{
|
||||
logo:
|
||||
'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*ekkhR7ISzUsAAAAAAAAAAABkARQnAQ',
|
||||
title: '灯塔专业版2',
|
||||
title: '深色酷炫色板',
|
||||
description:
|
||||
'深2222222入金融的基金深入金融的基金深2222222入金融的基金深入金融的基金深2222222入金融的基金深入金融的基金',
|
||||
'酷炫地图应用',
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
|
|
@ -104,10 +104,10 @@ const IndexPage = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SEO title={t('蚂蚁数据可视化')} lang={i18n.language} />
|
||||
<SEO title={t('蚂蚁地理空间数据可视化')} lang={i18n.language} />
|
||||
<Banner
|
||||
coverImage={<BannerSVG />}
|
||||
title={t('让数据栩栩如生')}
|
||||
title={t('L7 地理空间可视化引擎')}
|
||||
description={t(
|
||||
'L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于WebGL的开源大规模地理空间数据可视分析开发框架。',
|
||||
)}
|
||||
|
|
|
|||
17
yarn.lock
17
yarn.lock
|
|
@ -5741,13 +5741,6 @@ babel-plugin-react-docgen@^3.0.0:
|
|||
react-docgen "^4.1.1"
|
||||
recast "^0.14.7"
|
||||
|
||||
babel-plugin-remove-glsl-comments@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npm.taobao.org/babel-plugin-remove-glsl-comments/download/babel-plugin-remove-glsl-comments-1.0.0.tgz#62c0910707798a60504b70d09f9e2733ae10fc93"
|
||||
integrity sha1-YsCRBwd5imBQS3DQn54nM64Q/JM=
|
||||
dependencies:
|
||||
minimatch "^3.0.0"
|
||||
|
||||
babel-plugin-remove-graphql-queries@^2.7.15:
|
||||
version "2.7.15"
|
||||
resolved "https://registry.npm.taobao.org/babel-plugin-remove-graphql-queries/download/babel-plugin-remove-graphql-queries-2.7.15.tgz#d1f9dcf885dfc0141cf3ac203f94050bf0f94ea4"
|
||||
|
|
@ -15640,7 +15633,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
|
||||
integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
|
||||
|
||||
"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
|
||||
"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
|
||||
integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
|
||||
|
|
@ -21204,15 +21197,9 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
|
|||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
|
||||
|
||||
<<<<<<< HEAD
|
||||
sourcemap-codec@^1.4.1:
|
||||
sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4:
|
||||
version "1.4.6"
|
||||
resolved "https://registry.npm.taobao.org/sourcemap-codec/download/sourcemap-codec-1.4.6.tgz?cache=0&sync_timestamp=1562200915929&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsourcemap-codec%2Fdownload%2Fsourcemap-codec-1.4.6.tgz#e30a74f0402bad09807640d39e971090a08ce1e9"
|
||||
=======
|
||||
sourcemap-codec@^1.4.4:
|
||||
version "1.4.6"
|
||||
resolved "https://registry.npm.taobao.org/sourcemap-codec/download/sourcemap-codec-1.4.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsourcemap-codec%2Fdownload%2Fsourcemap-codec-1.4.6.tgz#e30a74f0402bad09807640d39e971090a08ce1e9"
|
||||
>>>>>>> next
|
||||
integrity sha1-4wp08EArrQmAdkDTnpcQkKCM4ek=
|
||||
|
||||
space-separated-tokens@^1.0.0:
|
||||
|
|
|
|||
Loading…
Reference in New Issue