diff --git a/examples/react/covid/index.en.md b/examples/react/covid/index.en.md index 0fb7f6ea88..55954bbab1 100644 --- a/examples/react/covid/index.en.md +++ b/examples/react/covid/index.en.md @@ -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) + diff --git a/examples/react/covid/index.zh.md b/examples/react/covid/index.zh.md index 2dc45c18fb..09f8599575 100644 --- a/examples/react/covid/index.zh.md +++ b/examples/react/covid/index.zh.md @@ -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) diff --git a/packages/layers/src/citybuliding/shaders/build_frag.glsl b/packages/layers/src/citybuliding/shaders/build_frag.glsl index 727e421606..049c9b7c8f 100644 --- a/packages/layers/src/citybuliding/shaders/build_frag.glsl +++ b/packages/layers/src/citybuliding/shaders/build_frag.glsl @@ -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); } diff --git a/stories/Draw/Components/DrawPolygon.tsx b/stories/Draw/Components/DrawPolygon.tsx new file mode 100644 index 0000000000..9f2aee5883 --- /dev/null +++ b/stories/Draw/Components/DrawPolygon.tsx @@ -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 ( +
+ ); + } + 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, + }); + } +} diff --git a/stories/Draw/Draw.stories.tsx b/stories/Draw/Draw.stories.tsx new file mode 100644 index 0000000000..bc11103b9f --- /dev/null +++ b/stories/Draw/Draw.stories.tsx @@ -0,0 +1,5 @@ +import { storiesOf } from '@storybook/react'; +import * as React from 'react'; +import DrawPolygon from './Components/DrawPolygon'; + +storiesOf('绘制', module).add('绘制面', () =>