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('绘制面', () => , {}); diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index 1742766e0f..3eb895b846 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -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; }); } diff --git a/stories/Layers/components/citybuilding.tsx b/stories/Layers/components/citybuilding.tsx index 6e6d90b7ac..718fcd6c8d 100644 --- a/stories/Layers/components/citybuilding.tsx +++ b/stories/Layers/components/citybuilding.tsx @@ -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)',