From 39258c59991f0333eee6edc85ebf858800ae41a4 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 8 Jan 2020 17:54:23 +0800 Subject: [PATCH] docs: update demo --- docs/api/changelog.en.md | 1 + docs/api/changelog.zh.md | 2 + .../animate/demo/animate_path.js} | 8 +- examples/gallery/animate/demo/build.js | 81 ++++++++++------ examples/gallery/animate/demo/meta.json | 15 +++ examples/gallery/animate/demo/world.js | 53 ++++++---- examples/gallery/animate/demo/world2.js | 96 +++++++++++++++++++ examples/gallery/animate/index.en.md | 2 +- examples/gallery/animate/index.zh.md | 2 +- examples/gallery/basic/index.en.md | 2 +- examples/gallery/basic/index.zh.md | 2 +- examples/line/path/demo/bus_light.js | 12 ++- examples/polygon/fill/demo/usa.js | 22 +++-- examples/raster/basic/demo/light.js | 10 +- .../layers/src/line/shaders/line_frag.glsl | 2 +- packages/layers/src/point/models/text.ts | 2 +- packages/layers/src/raster/models/raster.ts | 16 +++- stories/Layers/components/Line.tsx | 13 ++- stories/Layers/components/Point.tsx | 32 ------- stories/Layers/components/RasterLayer.tsx | 74 ++++++++------ stories/Layers/components/Text.tsx | 57 ++++++----- 21 files changed, 337 insertions(+), 167 deletions(-) rename examples/{line/path/demo/animate.js => gallery/animate/demo/animate_path.js} (79%) create mode 100644 examples/gallery/animate/demo/world2.js diff --git a/docs/api/changelog.en.md b/docs/api/changelog.en.md index 6ea9806908..f09c2a50d5 100644 --- a/docs/api/changelog.en.md +++ b/docs/api/changelog.en.md @@ -5,6 +5,7 @@ order: 10 ## 2020.01.06 2.0 正式版 +[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star ###✨ Features • 新增弧线图，路径图动画功能 • 新增气泡图水波动画功能 diff --git a/docs/api/changelog.zh.md b/docs/api/changelog.zh.md index e59437f190..b9ac8346a5 100644 --- a/docs/api/changelog.zh.md +++ b/docs/api/changelog.zh.md @@ -5,6 +5,8 @@ order: 10 ## 2020.01.06 2.0 正式版 +[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star + ###✨ Features • 新增弧线图，路径图动画功能 diff --git a/examples/line/path/demo/animate.js b/examples/gallery/animate/demo/animate_path.js similarity index 79% rename from examples/line/path/demo/animate.js rename to examples/gallery/animate/demo/animate_path.js index aad0b89846..b4ce03f234 100644 --- a/examples/line/path/demo/animate.js +++ b/examples/gallery/animate/demo/animate_path.js @@ -20,11 +20,11 @@ fetch( .source(data) .size(1) .shape('line') - .color('#ff893a') + .color('#25d8b7') .animate({ - interval: 0.4, - duration: 1, - trailLength: 0.8 + interval: 1, // 间隔 + duration: 1, // 持续时间，延时 + trailLength: 2 // 流线长度 }); scene.addLayer(layer); }); diff --git a/examples/gallery/animate/demo/build.js b/examples/gallery/animate/demo/build.js index 3fd8301fd2..47d0205076 100644 --- a/examples/gallery/animate/demo/build.js +++ b/examples/gallery/animate/demo/build.js @@ -1,36 +1,63 @@ -import { Scene, CityBuildingLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { Scene, CityBuildingLayer, LineLayer } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', - map: new Mapbox({ + map: new GaodeMap({ style: 'dark', - center: [ 121.507674, 31.223043 ], - pitch: 65.59312320916906, - zoom: 15.4, - minZoom: 15, + center: [ 120.173104, 30.244072 ], + pitch: 66.50572, + zoom: 15.79, + minZoom: 10, maxZoom: 18 }) }); -fetch( - 'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json' -) - .then(res => res.json()) - .then(data => { - const layer = new CityBuildingLayer(); - layer - .source(data) - .size('floor', [ 0, 500 ]) - .color('rgba(242,246,250,1.0)') - .animate({ - enable: true +scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json' + ) + .then(res => res.json()) + .then(data => { + const layer = new CityBuildingLayer( + { + zIndex: 0 + } + ); + layer + .source(data) + .size('floor', [ 100, 3000 ]) + .color('rgba(242,246,250,1.0)') + .animate({ + enable: true + }) + .style({ + opacity: 1.0, + baseColor: 'rgb(16,16,16)', + windowColor: 'rgb(30,60,89)', + brightColor: 'rgb(255,176,38)' + }); + scene.addLayer(layer); + }); + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json' + ) + .then(res => res.json()) + .then(data => { + const layer = new LineLayer({ + zIndex: 0 }) - .style({ - opacity: 1.0, - baseColor: 'rgb(16,16,16)', - windowColor: 'rgb(30,60,89)', - brightColor: 'rgb(255,176,38)' - }); - scene.addLayer(layer); - }); + .source(data) + .size(1) + .shape('line') + .color('#ff893a') + .animate({ + interval: 1, // 间隔 + duration: 2, // 持续时间，延时 + trailLength: 2 // 流线长度 + }); + scene.addLayer(layer); + }); + +}); + diff --git a/examples/gallery/animate/demo/meta.json b/examples/gallery/animate/demo/meta.json index 9b3a0af97a..05de900825 100644 --- a/examples/gallery/animate/demo/meta.json +++ b/examples/gallery/animate/demo/meta.json @@ -4,6 +4,21 @@ "en": "Gallery" }, "demos": [ + { + "filename": "animate_path.js", + "title": "路径动画", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VJX5Qo7ufaAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "world.js", + "title": "流向图", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Sbx4S4w7nL8AAAAAAAAAAABkARQnAQ" + }, + { + "filename": "world2.js", + "title": "流向图", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*u5BsQbn30pkAAAAAAAAAAABkARQnAQ" + }, { "filename": "animate.js", "title": "轨迹动画", diff --git a/examples/gallery/animate/demo/world.js b/examples/gallery/animate/demo/world.js index 0281b6dc43..76723065f3 100644 --- a/examples/gallery/animate/demo/world.js +++ b/examples/gallery/animate/demo/world.js @@ -1,12 +1,27 @@ /* eslint-disable no-eval */ -import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7'; +import { Scene, LineLayer, PointLayer } from '@antv/l7'; import { Mapbox } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new Mapbox({ pitch: 40, - style: 'blank', + style: { + version: 8, + sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite', + glyphs: + 'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf', + sources: {}, + layers: [ + { + id: 'background', + type: 'background', + paint: { + 'background-color': '#2b2b3a' + } + } + ] + }, center: [ 3.438, 40.16797 ], zoom: 0.51329 }) @@ -22,20 +37,20 @@ Promise.all([ const latlng2 = item.to.split(',').map(e => { return e * 1; }); return { coord: [ latlng1, latlng2 ] }; }); - const worldFill = new PolygonLayer() - .source(world) - .color('#98E3FA') - .shape('fill') - .style({ - opacity: 1 - }); + // const worldFill = new PolygonLayer() + // .source(world) + // .color('#98E3FA') + // .shape('fill') + // .style({ + // opacity: 1 + // }); const worldLine = new LineLayer() .source(world) - .color('#fff') - .size(0.6) + .color('#41fc9d') + .size(0.5) .style({ - opacity: 1 + opacity: 0.4 }); const dotPoint = new PointLayer() .source(dotData, { @@ -46,7 +61,7 @@ Promise.all([ } }) .shape('circle') - .color('red') + .color('#ffed11') .animate(true) .size(40) .style({ @@ -59,18 +74,18 @@ Promise.all([ coordinates: 'coord' } }) - .color('#faad14') + .color('#ff6b34') .shape('arc3d') - .size(2.0) + .size(2) .animate({ - interval: 0.1, - trailLength: 1.0, - duration: 2 + interval: 2, + trailLength: 2, + duration: 1 }) .style({ opacity: 1 }); - scene.addLayer(worldFill); + // scene.addLayer(worldFill); scene.addLayer(worldLine); scene.addLayer(dotPoint); scene.addLayer(flyLine); diff --git a/examples/gallery/animate/demo/world2.js b/examples/gallery/animate/demo/world2.js new file mode 100644 index 0000000000..565996ee40 --- /dev/null +++ b/examples/gallery/animate/demo/world2.js @@ -0,0 +1,96 @@ +/* eslint-disable no-eval */ +import { Scene, LineLayer, PointLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + pitch: 40, + style: { + version: 8, + sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite', + glyphs: + 'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf', + sources: {}, + layers: [ + { + id: 'background', + type: 'background', + paint: { + 'background-color': '#2b2b3a' + } + } + ] + }, + center: [ 3.438, 40.16797 ], + zoom: 0.51329 + }) +}); +Promise.all([ + fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()), + fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()), + fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text()) +]).then(function onLoad([ world, dot, flyline ]) { + const dotData = eval(dot); + const flydata = eval(flyline).map(item => { + const latlng1 = item.from.split(',').map(e => { return e * 1; }); + const latlng2 = item.to.split(',').map(e => { return e * 1; }); + return { coord: [ latlng1, latlng2 ] }; + }); + // const worldFill = new PolygonLayer() + // .source(world) + // .color('#98E3FA') + // .shape('fill') + // .style({ + // opacity: 1 + // }); + + const worldLine = new LineLayer() + .source(world) + .color('#495e96') + .size(0.6) + .style({ + opacity: 0.2 + }); + const dotPoint = new PointLayer() + .source(dotData, { + parser: { + type: 'json', + x: 'lng', + y: 'lat' + } + }) + .shape('circle') + .color('#abc7e9') + .animate({ + speed: 0.8 + } + ) + .size(30) + .style({ + opacity: 1.0 + }); + const flyLine = new LineLayer() + .source(flydata, { + parser: { + type: 'json', + coordinates: 'coord' + } + }) + .color('#b97feb') + .shape('arc3d') + .size(2) + .animate({ + interval: 2, + trailLength: 2, + duration: 1 + }) + .style({ + opacity: 1 + }); + // scene.addLayer(worldFill); + scene.addLayer(worldLine); + scene.addLayer(dotPoint); + scene.addLayer(flyLine); +}); + diff --git a/examples/gallery/animate/index.en.md b/examples/gallery/animate/index.en.md index 74cacd64b2..25962dacff 100644 --- a/examples/gallery/animate/index.en.md +++ b/examples/gallery/animate/index.en.md @@ -1,4 +1,4 @@ --- title: Animate -order: 1 +order: 0 --- diff --git a/examples/gallery/animate/index.zh.md b/examples/gallery/animate/index.zh.md index 3be864dda9..640811416a 100644 --- a/examples/gallery/animate/index.zh.md +++ b/examples/gallery/animate/index.zh.md @@ -1,4 +1,4 @@ --- title: 动画 -order: 1 +order: 0 --- diff --git a/examples/gallery/basic/index.en.md b/examples/gallery/basic/index.en.md index c847fa588d..eb7c9a2668 100644 --- a/examples/gallery/basic/index.en.md +++ b/examples/gallery/basic/index.en.md @@ -1,4 +1,4 @@ --- title: Featured -order: 0 +order: 1 --- diff --git a/examples/gallery/basic/index.zh.md b/examples/gallery/basic/index.zh.md index f0d63d2a5d..507602f2d5 100644 --- a/examples/gallery/basic/index.zh.md +++ b/examples/gallery/basic/index.zh.md @@ -1,4 +1,4 @@ --- title: 基础可视化 -order: 0 +order: 1 --- diff --git a/examples/line/path/demo/bus_light.js b/examples/line/path/demo/bus_light.js index 4df4774e4c..811e5ec821 100644 --- a/examples/line/path/demo/bus_light.js +++ b/examples/line/path/demo/bus_light.js @@ -1,6 +1,6 @@ // Data Source https://busrouter.sg/visualization/ -import { Scene, LineLayer } from '@antv/l7'; +import { Scene, LineLayer, Popup } from '@antv/l7'; import { Mapbox } from '@antv/l7-maps'; const scene = new Scene({ @@ -30,6 +30,7 @@ fetch( return [ 0.8, level * 1 ]; }) .shape('line') + .active(true) .color( 'level', [ @@ -47,5 +48,14 @@ fetch( .reverse() .slice(0, 8) ); + layer.on('mousemove', e => { + const popup = new Popup({ + offsets: [ 0, 0 ], + closeButton: false + }) + .setLnglat(e.lngLat) + .setHTML(`车次: ${e.feature.number}`); + scene.addPopup(popup); + }); scene.addLayer(layer); }); diff --git a/examples/polygon/fill/demo/usa.js b/examples/polygon/fill/demo/usa.js index f458053bd2..d0d4f48829 100644 --- a/examples/polygon/fill/demo/usa.js +++ b/examples/polygon/fill/demo/usa.js @@ -16,24 +16,25 @@ fetch( ) .then(res => res.json()) .then(data => { + const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ]; const layer = new PolygonLayer({}) .source(data) .color( 'density', d => { - return d > 1000 ? '#800026' : - d > 500 ? '#BD0026' : - d > 200 ? '#E31A1C' : - d > 100 ? '#FC4E2A' : - d > 50 ? '#FD8D3C' : - d > 20 ? '#FEB24C' : - d > 10 ? '#FED976' : - '#FFEDA0'; + return d > 1000 ? color[7] : + d > 500 ? color[6] : + d > 200 ? color[5] : + d > 100 ? color[4] : + d > 50 ? color[3] : + d > 20 ? color[2] : + d > 10 ? color[1] : + color[0]; } ) .shape('fill') .active(true) .style({ - opacity: 0.8 + opacity: 1.0 }); const layer2 = new LineLayer({ zIndex: 2 @@ -52,7 +53,8 @@ fetch( layer.on('mousemove', e => { const popup = new Popup({ - offsets: [ 0, 0 ] + offsets: [ 0, 0 ], + closeButton: false }) .setLnglat(e.lngLat) .setHTML(`${e.feature.properties.name}: ${e.feature.properties.density}`); diff --git a/examples/raster/basic/demo/light.js b/examples/raster/basic/demo/light.js index e6cb73ec1f..2b81b3f23b 100644 --- a/examples/raster/basic/demo/light.js +++ b/examples/raster/basic/demo/light.js @@ -14,7 +14,7 @@ const scene = new Scene({ addLayer(); async function getTiffData() { const response = await fetch( - 'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF141999.tiff' + 'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff' ); const arrayBuffer = await response.arrayBuffer(); const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer); @@ -44,13 +44,13 @@ async function addLayer() { }) .style({ opacity: 1.0, - clampLow: true, - clampHigh: true, + clampLow: false, + clampHigh: false, domain: [ 0, 90 ], nodataValue: 0, rampColors: { - colors: [ 'rgba(166,97,26,0)', '#c3aa00', '#fadb14', '#fef346', '#ffff96' ], - positions: [ 0, 0.1, 0.25, 0.5, 1.0 ] + colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#f8501a', '#f6961f', '#f8d069', '#fffdf8' ], + positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ] } }); diff --git a/packages/layers/src/line/shaders/line_frag.glsl b/packages/layers/src/line/shaders/line_frag.glsl index 5ae4b8a93b..a9374b50c4 100644 --- a/packages/layers/src/line/shaders/line_frag.glsl +++ b/packages/layers/src/line/shaders/line_frag.glsl @@ -31,7 +31,7 @@ void main() { float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y); alpha = (alpha + u_aimate.w -1.0) / u_aimate.w; alpha = smoothstep(0., 1., alpha); - // float alpha2 = exp(-abs(v_side)); + float alpha2 = exp(-abs(v_side)); gl_FragColor.a *= alpha * blur; // gl_FragColor.a = fract(u_time); } diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts index 70b775f2e6..8c49331a97 100644 --- a/packages/layers/src/point/models/text.ts +++ b/packages/layers/src/point/models/text.ts @@ -88,7 +88,7 @@ export default class TextModel extends BaseModel { public getUninforms(): IModelUniform { const { fontWeight = 800, - fontFamily, + fontFamily = 'sans-serif', stroke = '#fff', strokeWidth = 0, } = this.layer.getLayerConfig() as IPointTextLayerStyleOptions; diff --git a/packages/layers/src/raster/models/raster.ts b/packages/layers/src/raster/models/raster.ts index f9e579fb38..33bdc7bbdb 100644 --- a/packages/layers/src/raster/models/raster.ts +++ b/packages/layers/src/raster/models/raster.ts @@ -38,7 +38,7 @@ export default class RasterModel extends BaseModel { noDataValue = -9999999, domain = [0, 1], } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; - + this.updateColorTexure(); return { u_opacity: opacity || 1, u_texture: this.texture, @@ -110,4 +110,18 @@ export default class RasterModel extends BaseModel { }, }); } + + private updateColorTexure() { + const { createTexture2D } = this.rendererService; + const { + rampColors, + } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; + const imageData = generateColorRamp(rampColors as IColorRamp); + this.colorTexture = createTexture2D({ + data: imageData.data, + width: imageData.width, + height: imageData.height, + flipY: true, + }); + } } diff --git a/stories/Layers/components/Line.tsx b/stories/Layers/components/Line.tsx index 40b48f4618..9d8bea4e18 100644 --- a/stories/Layers/components/Line.tsx +++ b/stories/Layers/components/Line.tsx @@ -33,16 +33,15 @@ export default class LineDemo extends React.Component { .shape('line') .color('color', (v) => { return `rgb(${v[0]})`; + }) + .animate({ + enable: true, + interval: 0.5, + trailLength: 0.4, + duration: 4, }); - // .animate({ - // enable: false, - // interval: 0.5, - // trailLength: 0.4, - // duration: 4, - // }) scene.addLayer(lineLayer); - scene.render(); this.scene = scene; } diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index d97f5a2fc6..9b78844a7e 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -44,38 +44,6 @@ export default class Point3D extends React.Component { strokeWidth: 1, }); scene.addLayer(pointLayer); - pointLayer.on('mousemove', (e) => { - const id = e.featureId; - console.log(e.type); - pointLayer.setActive(id); - }); - pointLayer.on('mousedown', (e) => { - const id = e.featureId; - console.log(e.type); - pointLayer.setActive(id); - }); - pointLayer.on('mouseup', (e) => { - const id = e.featureId; - console.log(e.type); - pointLayer.setActive(id); - }); - pointLayer.on('click', (e) => { - const id = e.featureId; - console.log(e.type); - pointLayer.setActive(id); - }); - - pointLayer.on('contextmenu', (e) => { - const id = e.featureId; - console.log(e.type); - pointLayer.setActive(id); - }); - pointLayer.on('unpick', (e) => { - const id = e.featureId; - console.log(e.type); - pointLayer.setActive(id); - }); - this.scene = scene; // }); } diff --git a/stories/Layers/components/RasterLayer.tsx b/stories/Layers/components/RasterLayer.tsx index 4f2a97a641..381a9930c4 100644 --- a/stories/Layers/components/RasterLayer.tsx +++ b/stories/Layers/components/RasterLayer.tsx @@ -4,7 +4,7 @@ import * as dat from 'dat.gui'; // @ts-ignore import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js'; import * as React from 'react'; - +import { colorScales } from '../lib/colorscales'; export default class ImageLayerDemo extends React.Component { private scene: Scene; private gui: dat.GUI; @@ -28,35 +28,36 @@ export default class ImageLayerDemo extends React.Component { }); const tiffdata = await this.getTiffData(); const layer = new RasterLayer({}); + const mindata = -5000; + const maxdata = 10000; layer .source(tiffdata.data, { parser: { type: 'raster', width: tiffdata.width, height: tiffdata.height, - min: 0, - max: 8000, - extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963], + // extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963], + extent: [ + 73.4766000000000048, + 18.1054999999999993, + 135.1066187, + 57.630046, + ], }, }) .style({ opacity: 0.8, - domain: [100, 4000], + domain: [mindata, maxdata], clampLow: true, rampColors: { colors: [ - '#002466', - '#0D408C', - '#105CB3', - '#1A76C7', - '#2894E0', - '#3CB4F0', - '#65CEF7', - '#98E3FA', - '#CFF6FF', - '#E8FCFF', + 'rgb(166,97,26)', + 'rgb(223,194,125)', + 'rgb(245,245,245)', + 'rgb(128,205,193)', + 'rgb(1,133,113)', ], - positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0], + positions: [0, 0.25, 0.5, 0.75, 1.0], }, }); scene.addLayer(layer); @@ -69,8 +70,9 @@ export default class ImageLayerDemo extends React.Component { clampLow: true, clampHigh: true, noDataValue: -9999999, - min: 100, - max: 4000, + min: mindata, + max: maxdata, + colorScales: 'jet', }; const rasterFolder = gui.addFolder('栅格可视化'); rasterFolder.add(styleOptions, 'clampLow').onChange((clampLow: boolean) => { @@ -87,18 +89,31 @@ export default class ImageLayerDemo extends React.Component { }); scene.render(); }); - rasterFolder.add(styleOptions, 'min', 0, 9000).onChange((min: number) => { - layer.style({ - domain: [min, styleOptions.max], + rasterFolder + .add(styleOptions, 'min', mindata, maxdata) + .onChange((min: number) => { + layer.style({ + domain: [min, styleOptions.max], + }); + scene.render(); }); - scene.render(); - }); - rasterFolder.add(styleOptions, 'max', 0, 9000).onChange((max: number) => { - layer.style({ - domain: [styleOptions.min, max], + rasterFolder + .add(styleOptions, 'max', mindata, maxdata) + .onChange((max: number) => { + layer.style({ + domain: [styleOptions.min, max], + }); + scene.render(); + }); + rasterFolder + .add(styleOptions, 'colorScales', Object.keys(colorScales)) + .onChange((color: string) => { + colorScales[color].colors = colorScales[color].colors.reverse(); + layer.style({ + rampColors: colorScales[color], + }); + scene.render(); }); - scene.render(); - }); } public render() { @@ -117,7 +132,8 @@ export default class ImageLayerDemo extends React.Component { } private async getTiffData() { const response = await fetch( - 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat', + // 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat', + 'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff', ); const arrayBuffer = await response.arrayBuffer(); const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer); diff --git a/stories/Layers/components/Text.tsx b/stories/Layers/components/Text.tsx index 6416100926..b057f9cf74 100644 --- a/stories/Layers/components/Text.tsx +++ b/stories/Layers/components/Text.tsx @@ -1,42 +1,21 @@ import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; +import * as dat from 'dat.gui'; // @ts-ignore import data from '../data/data.json'; export default class TextLayerDemo extends React.Component { // @ts-ignore private scene: Scene; + private gui: dat.GUI; public componentWillUnmount() { this.scene.destroy(); + if (this.gui) { + this.gui.destroy(); + } } - public async componentDidMount() { - const data = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - name: '中华人民共和国', - }, - geometry: { - type: 'Point', - coordinates: [103.0078125, 36.03133177633187], - }, - }, - { - type: 'Feature', - properties: { - name: '中华人民共和国', - }, - geometry: { - type: 'Point', - coordinates: [122.6953125, 10.833305983642491], - }, - }, - ], - }; const response = await fetch( 'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', ); @@ -76,6 +55,32 @@ export default class TextLayerDemo extends React.Component { scene.addLayer(pointLayer); this.scene = scene; + + const gui = new dat.GUI(); + this.gui = gui; + const styleOptions = { + textAnchor: 'center', + strokeWidth: 1, + }; + const rasterFolder = gui.addFolder('栅格可视化'); + rasterFolder + .add(styleOptions, 'textAnchor', [ + 'center', + 'left', + 'right', + 'top', + 'bottom', + 'top-left', + 'bottom-right', + 'bottom-left', + 'top-right', + ]) + .onChange((anchor: string) => { + pointLayer.style({ + textAnchor: anchor, + }); + scene.render(); + }); // }); }