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

fix: fix build layer opactiy

This commit is contained in:
thinkinggis 2020-03-16 23:31:15 +08:00
parent c4f8df8e4b
commit 5a58ab8f86
7 changed files with 253 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/react/covid/index.en.md
View File

@ -1,4 +1,6 @@
---
title: COVID-19 Map
title: COVID-19 Map
order: 0
---
[![github](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ)](https://github.com/antvis/L7)

1
examples/react/covid/index.zh.md
View File

@ -2,3 +2,4 @@
title: COVID-19 地图
order: 0
---
[![github](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ)](https://github.com/antvis/L7)

3
packages/layers/src/citybuliding/shaders/build_frag.glsl
View File

@ -42,8 +42,6 @@ float sdRect(vec2 p, vec2 sz) {
void main() {
gl_FragColor = v_Color;
gl_FragColor.a *= u_opacity;
vec3 baseColor = u_baseColor.xyz;
vec3 brightColor = u_brightColor.xyz;
vec3 windowColor = u_windowColor.xyz;
@ -100,5 +98,6 @@ void main() {
gl_FragColor = vec4(foggedColor,1.0);
}
gl_FragColor.a *= u_opacity;
gl_FragColor = filterColor(gl_FragColor);
}

203
stories/Draw/Components/DrawPolygon.tsx Normal file
View File

@ -0,0 +1,203 @@
import { LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { Mapbox, GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
function convertRGB2Hex(rgb: number[]) {
return (
'#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
);
}
function calcMid(data1: number[], data2: number[]) {
return {
x: (data1[0] + data2[0]) / 2,
y: (data1[1] + data2[1]) / 2,
};
}
export default class MultiPolygon extends React.Component {
private gui: dat.GUI;
private $stats: Node;
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[108.6328125, 40.17887331434696],
[92.28515625, 37.3002752813443],
[99.31640625, 25.799891182088334],
[111.26953125, 23.885837699862005],
[115.83984375, 36.87962060502676],
[108.6328125, 40.17887331434696],
],
],
},
},
],
};
const data2 = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[117.59765625, 45.9511496866914],
[120.76171875, 35.60371874069731],
[129.0234375, 30.90222470517144],
[135.703125, 37.43997405227057],
[135.703125, 45.9511496866914],
[117.59765625, 45.9511496866914],
],
],
},
},
],
};
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
style: 'dark',
center: [121.775374, 31.31067],
zoom: 2,
}),
});
const layer = new PolygonLayer()
.source(data)
.shape('fill')
.color('#3bb2d0')
.style({
opacity: 0.1,
});
const line = new PolygonLayer()
.source(data)
.shape('line')
.size(1)
.color('#3bb2d0')
.style({
opacity: 1,
});
scene.addLayer(layer);
scene.addLayer(line);
const activelayer = new PolygonLayer()
.source(data2)
.shape('fill')
.color('#fbb03b')
.style({
opacity: 0.1,
});
const activeline = new PolygonLayer()
.source(data2)
.shape('line')
.size(1)
.color('#fbb03b')
.style({
opacity: 1,
lineType: 'dash',
dashArray: [2, 2],
});
scene.addLayer(activelayer);
scene.addLayer(activeline);
scene.addLayer(this.addPoint(data2));
scene.addLayer(this.addActivePoint());
scene.addLayer(this.addMidPoint(data2));
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
private addPoint(data: any) {
const pointData = data.features[0].geometry.coordinates[0].map(
(coor: any) => {
return {
x: coor[0],
y: coor[1],
};
},
);
return new PointLayer()
.source(pointData, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.shape('circle')
.color('#fbb03b')
.size(3)
.style({
stroke: '#fff',
strokeWidth: 2,
});
}
private addMidPoint(data: any) {
const coords = data.features[0].geometry.coordinates[0];
const midPoint = [];
for (let i = 0; i < coords.length - 1; i++) {
midPoint.push(calcMid(coords[i], coords[i + 1]));
}
return new PointLayer()
.source(midPoint, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.shape('circle')
.color('#fbb03b')
.size(2);
}
private addActivePoint() {
return new PointLayer()
.source(
[
{
x: 117.59765625,
y: 45.9511496866914,
},
],
{
parser: {
type: 'json',
x: 'x',
y: 'y',
},
},
)
.shape('circle')
.color('#fbb03b')
.size(5)
.style({
stroke: '#fff',
strokeWidth: 2,
});
}
}

5
stories/Draw/Draw.stories.tsx Normal file
View File

@ -0,0 +1,5 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import DrawPolygon from './Components/DrawPolygon';
storiesOf('绘制', module).add('绘制面', () => <DrawPolygon />, {});

76
stories/Layers/components/Point.tsx
View File

@ -12,50 +12,52 @@ export default class Point3D extends React.Component {
}
public async componentDidMount() {
const response = await fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
);
const pointsData = await response.json();
const scene = new Scene({
id: document.getElementById('map') as HTMLDivElement,
id: 'map',
map: new GaodeMap({
center: [120.19382669582967, 30.258134],
style: 'light',
center: [-121.24357, 37.58264],
pitch: 0,
style: 'dark',
zoom: 0,
zoom: 6.45,
}),
});
scene.on('loaded', () => {
const pointLayer = new PointLayer({})
.source(pointsData, {
cluster: false,
})
.scale({
size: {
type: 'power',
field: 'mag',
},
color: {
type: 'linear',
field: 'mag',
},
})
.shape('circle')
.size('mag', [2, 8, 14, 20, 26, 32, 40])
.animate(false)
.active(true)
.color('mag', ['red', 'blue', 'yellow', 'green'])
.style({
opacity: 0.5,
strokeWidth: 1,
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(8)
.active(true)
.color('Magnitude', [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0',
])
.style({
opacity: 1,
strokeWidth: 0,
});
scene.addLayer(pointLayer);
this.scene = scene;
});
scene.addLayer(pointLayer);
const hander = () => {
console.log('click');
};
scene.on('click', hander);
this.scene = scene;
});
}

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

@ -34,7 +34,7 @@ export default class CityBuildingLayerDemo extends React.Component {
enable: false,
})
.style({
opacity: 1.0,
opacity: 0.7,
baseColor: 'rgb(16,16,16)',
windowColor: 'rgb(30,60,89)',
brightColor: 'rgb(255,176,38)',