diff --git a/demos/raster/basic/data/ndviundefined.be75.tif b/demos/raster/basic/data/ndviundefined.be75.tif new file mode 100755 index 0000000000..b4205d18e4 Binary files /dev/null and b/demos/raster/basic/data/ndviundefined.be75.tif differ diff --git a/demos/raster/basic/demo/image.js b/demos/raster/basic/demo/image.js new file mode 100644 index 0000000000..ade1323c73 --- /dev/null +++ b/demos/raster/basic/demo/image.js @@ -0,0 +1,25 @@ +import { Scene } from '@l7/scene'; +import { ImageLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'amap', + style: 'light', + center: [121.2680, 30.3628], + zoom: 13, +}); + +const layer = new ImageLayer({}); +layer.source( + 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', + { + parser: { + type: 'image', + extent: [121.168, 30.2828, 121.384, 30.4219], + }, + }, +); +scene.on('loaded',()=>{ + scene.addLayer(layer); +}) + diff --git a/demos/raster/basic/demo/meta.json b/demos/raster/basic/demo/meta.json new file mode 100644 index 0000000000..25b9c47b9e --- /dev/null +++ b/demos/raster/basic/demo/meta.json @@ -0,0 +1,21 @@ +{ + "title": { + "zh": "栅格图层", + "en": "Gallery" + }, + "demos": [ + { + "filename": "image.js", + "title": "图片", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "raster.js", + "title": "地形" + }, + { + "filename": "light.js", + "title": "夜光图" + } + ] +} diff --git a/examples/raster/basic/demo/raster.js b/demos/raster/basic/demo/raster.js similarity index 79% rename from examples/raster/basic/demo/raster.js rename to demos/raster/basic/demo/raster.js index 5edee8c397..c63bcaa948 100644 --- a/examples/raster/basic/demo/raster.js +++ b/demos/raster/basic/demo/raster.js @@ -44,22 +44,11 @@ async function addLayer() { }, }) .style({ - heightRatio:10, + heightRatio:100, opacity: 0.8, rampColors: { - colors: [ - '#002466', - '#0D408C', - '#105CB3', - '#1A76C7', - '#2894E0', - '#3CB4F0', - '#65CEF7', - '#98E3FA', - '#CFF6FF', - '#E8FCFF', - ], - positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0], + colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(), + positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0] }, }); return layer; diff --git a/demos/raster/basic/index.en.md b/demos/raster/basic/index.en.md new file mode 100644 index 0000000000..39ed3aaf30 --- /dev/null +++ b/demos/raster/basic/index.en.md @@ -0,0 +1,4 @@ +--- +title: Raster Map +order: 0 +--- diff --git a/demos/raster/basic/index.zh.md b/demos/raster/basic/index.zh.md new file mode 100644 index 0000000000..6147459f75 --- /dev/null +++ b/demos/raster/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 栅格图层 +order: 0 +--- diff --git a/examples/tutorial/control/demo/amap.js b/demos/tutorial/control/demo/amap.js similarity index 100% rename from examples/tutorial/control/demo/amap.js rename to demos/tutorial/control/demo/amap.js diff --git a/examples/tutorial/control/demo/mapbox.js b/demos/tutorial/control/demo/mapbox.js similarity index 100% rename from examples/tutorial/control/demo/mapbox.js rename to demos/tutorial/control/demo/mapbox.js diff --git a/examples/tutorial/control/demo/meta.json b/demos/tutorial/control/demo/meta.json similarity index 100% rename from examples/tutorial/control/demo/meta.json rename to demos/tutorial/control/demo/meta.json diff --git a/examples/tutorial/control/demo/popup.js b/demos/tutorial/control/demo/popup.js similarity index 100% rename from examples/tutorial/control/demo/popup.js rename to demos/tutorial/control/demo/popup.js diff --git a/examples/tutorial/control/index.en.md b/demos/tutorial/control/index.en.md similarity index 100% rename from examples/tutorial/control/index.en.md rename to demos/tutorial/control/index.en.md diff --git a/examples/tutorial/control/index.zh.md b/demos/tutorial/control/index.zh.md similarity index 100% rename from examples/tutorial/control/index.zh.md rename to demos/tutorial/control/index.zh.md diff --git a/examples/gallery/basic/demo/line.js b/demos/tutorial/data/demo/line.js similarity index 100% rename from examples/gallery/basic/demo/line.js rename to demos/tutorial/data/demo/line.js diff --git a/examples/tutorial/data/demo/meta.json b/demos/tutorial/data/demo/meta.json similarity index 100% rename from examples/tutorial/data/demo/meta.json rename to demos/tutorial/data/demo/meta.json diff --git a/examples/tutorial/data/index.en.md b/demos/tutorial/data/index.en.md similarity index 100% rename from examples/tutorial/data/index.en.md rename to demos/tutorial/data/index.en.md diff --git a/examples/tutorial/data/index.zh.md b/demos/tutorial/data/index.zh.md similarity index 100% rename from examples/tutorial/data/index.zh.md rename to demos/tutorial/data/index.zh.md diff --git a/examples/tutorial/map/demo/amap.js b/demos/tutorial/map/demo/amap.js similarity index 100% rename from examples/tutorial/map/demo/amap.js rename to demos/tutorial/map/demo/amap.js diff --git a/examples/tutorial/map/demo/mapbox.js b/demos/tutorial/map/demo/mapbox.js similarity index 100% rename from examples/tutorial/map/demo/mapbox.js rename to demos/tutorial/map/demo/mapbox.js diff --git a/examples/tutorial/map/demo/meta.json b/demos/tutorial/map/demo/meta.json similarity index 100% rename from examples/tutorial/map/demo/meta.json rename to demos/tutorial/map/demo/meta.json diff --git a/examples/tutorial/map/index.en.md b/demos/tutorial/map/index.en.md similarity index 100% rename from examples/tutorial/map/index.en.md rename to demos/tutorial/map/index.en.md diff --git a/examples/tutorial/map/index.zh.md b/demos/tutorial/map/index.zh.md similarity index 100% rename from examples/tutorial/map/index.zh.md rename to demos/tutorial/map/index.zh.md diff --git a/examples/line/arc/demo/arc3d.js b/examples/gallery/basic/demo/arcCircle.js similarity index 66% rename from examples/line/arc/demo/arc3d.js rename to examples/gallery/basic/demo/arcCircle.js index 3a7dcb3650..597aeae5e0 100644 --- a/examples/line/arc/demo/arc3d.js +++ b/examples/gallery/basic/demo/arcCircle.js @@ -1,19 +1,19 @@ -import { Arc3DLineLayer } from '@l7/layers'; +import { Arc2DLineLayer } from '@l7/layers'; import { Scene } from '@l7/scene'; const scene = new Scene({ id: 'map', - pitch: 40, - type: 'amap', + pitch: 0, + type: 'mapbox', style: 'dark', - center: [102.602992, 23.107329], - zoom: 3, + center: [107.77791556935472, 35.443286920228644], + zoom: 2.9142882493605033, }); - +window.mapScene = scene; fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') .then((res) => res.text()) .then((data) => { const layer = - new Arc3DLineLayer({}) + new Arc2DLineLayer({}) .source(data, { parser: { type: 'csv', @@ -25,9 +25,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') }) .size(1) .shape('arc') - .color('#1558AC') + .color('#8C1EB2') .style({ opacity: 0.8, + blur: 0.99 }) ; scene.addLayer(layer); diff --git a/examples/gallery/basic/demo/bus_dark.js b/examples/gallery/basic/demo/bus_dark.js new file mode 100644 index 0000000000..cccbe8c86c --- /dev/null +++ b/examples/gallery/basic/demo/bus_dark.js @@ -0,0 +1,42 @@ +import { Scene } from '@l7/scene'; +import { LineLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + center: [103.83735604457024,1.360253881403068], + pitch: 4.00000000000001, + zoom: 10.210275860702593, + rotation: 19.313180925794313, + type: 'mapbox', + style: 'dark', +}); + +fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json') + .then((res) => res.json()) + .then((data) => { + const layer = + new LineLayer({ + }) + .source(data,{ + parser:{ + type:'json', + coordinates:'path' + } + }) + .size('level',(level)=>{ + return [1.0 , level * 1] + }) + .shape('line') + .color( + 'level', + [ + '#312B60', '#4A457E', + '#615C99', '#816CAD', + '#A67FB5', '#C997C7', + '#DEB8D4', '#F5D4E6', + '#FAE4F1', '#FFF3FC' + ].slice(0,8) + ) + scene.addLayer(layer); + console.log(layer); + + }); diff --git a/examples/gallery/basic/demo/column_dark.js b/examples/gallery/basic/demo/column_dark.js new file mode 100644 index 0000000000..3633414bf5 --- /dev/null +++ b/examples/gallery/basic/demo/column_dark.js @@ -0,0 +1,44 @@ +import { Scene } from '@l7/scene'; +import { Point3dLayer} from '@l7/layers' + +const scene = new Scene({ + id: 'map', + pitch: 35.210526315789465, + type: 'amap', + style: 'dark', + center: [108.524505, 29.873128], + zoom: 4.4, + +}); +window.mapScene = scene; +fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') + .then((res) => res.json()) + .then((data) => { + const pointLayer = + new Point3dLayer({ + }) + .source(data.list, { + parser: { + type: 'json', + x: 'j', + y: 'w' + } + }) + .shape('cylinder') + .size('t', function(level) { + return [1, 2, level * 2 + 20]; + }) + .color('t',[ + '#094D4A', '#146968', + '#1D7F7E', '#289899', + '#34B6B7', '#4AC5AF', + '#5FD3A6', '#7BE39E', + '#A1EDB8', '#CEF8D6' + ],) + .style({ + opacity: 1.0, + }) + scene.addLayer(pointLayer); + console.log(pointLayer); + + }); \ No newline at end of file diff --git a/examples/gallery/basic/demo/light.js b/examples/gallery/basic/demo/light.js new file mode 100644 index 0000000000..d738fd8570 --- /dev/null +++ b/examples/gallery/basic/demo/light.js @@ -0,0 +1,59 @@ +import { HeatMapHexagonLayer, HeatMapGrid3dLayer } from '@l7/layers'; +import { Scene } from '@l7/scene'; +const scene = new Scene({ + id: 'map', + style: 'dark', + pitch: 43, + center: [120.13383079335335,29.651873105004427], + zoom: 7.068989519212174, + type: 'mapbox', +}); + + +window.mapScene = scene; + +fetch( + 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv', +) + .then((res) => res.text()) + .then((data) => { + const layer = new HeatMapGrid3dLayer({}) + .source(data, { + + parser:{ + type:'csv', + x:'lng', + y:'lat', + }, + transforms: [ + { + type: 'hexagon', + size: 2500, + field: 'v', + method: 'sum', + }, + ], + }) + .size('sum', (sum)=>{ + return sum * 200; + }) + .shape('hexagon') + .style({ + coverage: 0.8, + angle: 0, + opacity: 1.0, + }) + .color( + 'sum', + [ + '#094D4A', '#146968', + '#1D7F7E', '#289899', + '#34B6B7', '#4AC5AF', + '#5FD3A6', '#7BE39E', + '#A1EDB8', '#C3F9CC', + '#DEFAC0', '#ECFFB1' + ] + ); + scene.addLayer(layer); + + }); diff --git a/examples/gallery/basic/demo/meta.json b/examples/gallery/basic/demo/meta.json index 42812b23e6..fd3ec679f1 100644 --- a/examples/gallery/basic/demo/meta.json +++ b/examples/gallery/basic/demo/meta.json @@ -5,9 +5,35 @@ }, "demos": [ { - "filename": "line.js", - "title": "线图层", - "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + "filename": "column_dark.js", + "title": "", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*WkpEQqzuM-oAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "arcCircle.js", + "title": "", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FTp1Roy34qgAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "bus_dark.js", + "title": "", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "light.js", + "title": "", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HxpoRIcBA80AAAAAAAAAAABkARQnAQ" + }, + { + "filename": "point.js", + "title": "", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Xp7iRaORYuIAAAAAAAAAAABkARQnAQ" + } + , + { + "filename": "normal.js", + "title": "", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ" } ] } diff --git a/examples/gallery/basic/demo/normal.js b/examples/gallery/basic/demo/normal.js new file mode 100644 index 0000000000..2ff1f932ab --- /dev/null +++ b/examples/gallery/basic/demo/normal.js @@ -0,0 +1,34 @@ + +import { Scene } from '@l7/scene'; +import { PointNormalLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + type: 'amap', + style: 'dark', + center: [121.417463, 31.215175], + pitch: 0, + zoom: 11 + +}); +window.mapScene = scene; +fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt') + .then((res) => res.text()) + .then((data) => { + const pointLayer = + new PointNormalLayer({ + }) + .source(data, { + parser: { + type: 'csv', + y: 'lat', + x: 'lng' + } + }).size(0.5) + .color('#080298') + .style({ + opacity:1., + }) + + scene.addLayer(pointLayer); + + }) diff --git a/examples/gallery/basic/demo/point.js b/examples/gallery/basic/demo/point.js new file mode 100644 index 0000000000..019931bf2b --- /dev/null +++ b/examples/gallery/basic/demo/point.js @@ -0,0 +1,36 @@ + +import { Scene } from '@l7/scene'; +import { PointNormalLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + pitch: 64.88, + type: 'amap', + style: 'dark', + center: [114.060288, 22.53684], + zoom: 15.63, + +}); +window.mapScene = scene; +fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json') + .then((res) => res.json()) + .then((data) => { + const pointLayer = + new PointNormalLayer({ + + }) + .source(data) + .size(2) + .color('h8',[ + '#0A3663', '#1558AC', + '#3771D9', '#4D89E5', + '#64A5D3', '#72BED6', + '#83CED6', '#A6E1E0', + '#B8EFE2', '#D7F9F0' + ]) + .style({ + opacity:1., + }) + + scene.addLayer(pointLayer); + + }) diff --git a/examples/gallery/basic/index.en.md b/examples/gallery/basic/index.en.md index a8885a5a95..b86df30c9c 100644 --- a/examples/gallery/basic/index.en.md +++ b/examples/gallery/basic/index.en.md @@ -1,4 +1,6 @@ --- title: Gallery order: 0 +redirect_from: + - /zh/examples/ --- diff --git a/examples/gallery/basic/index.zh.md b/examples/gallery/basic/index.zh.md index a8885a5a95..b86df30c9c 100644 --- a/examples/gallery/basic/index.zh.md +++ b/examples/gallery/basic/index.zh.md @@ -1,4 +1,6 @@ --- title: Gallery order: 0 +redirect_from: + - /zh/examples/ --- diff --git a/examples/heatmap/grid/demo/china.js b/examples/heatmap/grid/demo/china.js index 059711697d..c9112ec36a 100644 --- a/examples/heatmap/grid/demo/china.js +++ b/examples/heatmap/grid/demo/china.js @@ -3,9 +3,9 @@ import { Scene } from '@l7/scene'; const scene = new Scene({ id: 'map', style: 'light', - pitch: 46.49999999999997, - center: [112.10377141242463, 29.968602656853605], - zoom: 3.856, + pitch: 0, + center: [110.097892, 33.853662], + zoom: 4.056, type: 'amap', }); window.mapScene = scene; diff --git a/examples/heatmap/grid/demo/grid1.js b/examples/heatmap/grid/demo/grid1.js index 1d81e98c2d..f60f3fcb8e 100644 --- a/examples/heatmap/grid/demo/grid1.js +++ b/examples/heatmap/grid/demo/grid1.js @@ -3,9 +3,9 @@ import { Scene } from '@l7/scene'; const scene = new Scene({ id: 'map', style: 'dark', - pitch: 46.49999999999997, - center: [112.10377141242463, 29.968602656853605], - zoom: 3.856, + pitch: 0, + center: [110.097892, 33.853662], + zoom: 4.056, type: 'amap', }); window.mapScene = scene; diff --git a/examples/heatmap/grid/demo/heatmap3.js b/examples/heatmap/grid/demo/heatmap3.js new file mode 100644 index 0000000000..0cbd9874e5 --- /dev/null +++ b/examples/heatmap/grid/demo/heatmap3.js @@ -0,0 +1,50 @@ +import { HeatMapGridLayer } from '@l7/layers'; +import { Scene } from '@l7/scene'; +const scene = new Scene({ + id: 'map', + style: 'light', + pitch: 0, + pitch: 0, + center: [110.097892, 33.853662], + zoom: 4.056, + type: 'amap', +}); + +fetch( + 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', +) + .then((res) => res.text()) + .then((data) => { + const layer = new HeatMapGridLayer({}) + .source(data, { + parser: { + type: 'csv', + x: 'lng', + y: 'lat' + }, + transforms:[ + { + type: 'grid', + size: 20000, + field:'v', + method:'sum' + } + ] + }) + .size('count',(value)=>{ + return value * 0; + }) + .shape('circle') + .style({ + coverage: 0.9, + angle: 0, + }) + .color('count', [ + '#8C1EB2','#8C1EB2','#DA05AA', + '#F0051A','#FF2A3C','#FF4818', + '#FF4818', '#FF8B18', + '#F77B00', '#ED9909', + '#ECC357', '#EDE59C' + ].reverse()) + scene.addLayer(layer); + }); diff --git a/examples/heatmap/grid/demo/meta.json b/examples/heatmap/grid/demo/meta.json index 9abf747746..78fceffda3 100644 --- a/examples/heatmap/grid/demo/meta.json +++ b/examples/heatmap/grid/demo/meta.json @@ -14,6 +14,12 @@ "title": "", "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tAGKS6EClQ4AAAAAAAAAAABkARQnAQ" + }, + { + "filename": "heatmap3.js", + "title": "网格布局 圆形", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6cA0R6us9osAAAAAAAAAAABkARQnAQ" + }, { "filename": "world.js", diff --git a/examples/heatmap/grid/demo/world.js b/examples/heatmap/grid/demo/world.js index 742db9b968..f42b751168 100644 --- a/examples/heatmap/grid/demo/world.js +++ b/examples/heatmap/grid/demo/world.js @@ -3,11 +3,12 @@ import { Scene } from '@l7/scene'; const scene = new Scene({ id: 'map', style: 'dark', - pitch: 46.49999999999997, - center: [112.10377141242463, 29.968602656853605], - zoom: 3.856, + pitch: 0, + center: [110.097892, 33.853662], + zoom: 4.056, type: 'amap', }); + window.mapScene = scene; fetch( 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', @@ -24,7 +25,7 @@ fetch( transforms:[ { type: 'grid', - size: 20000, + size: 10000, field:'v', method:'sum' } @@ -44,6 +45,5 @@ fetch( '#46F3FF', '#02BEFF', '#1A7AFF', '#0A1FB2' ].reverse()) - scene.addLayer(layer); }); diff --git a/examples/heatmap/heatmap/demo/meta.json b/examples/heatmap/heatmap/demo/meta.json index 0f86c75853..48f26cb957 100644 --- a/examples/heatmap/heatmap/demo/meta.json +++ b/examples/heatmap/heatmap/demo/meta.json @@ -19,5 +19,6 @@ "title": "经典热力图3D", "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K_nOTa1C7PoAAAAAAAAAAABkARQnAQ" } + ] } diff --git a/examples/heatmap/hexagon/demo/china.js b/examples/heatmap/hexagon/demo/china.js index 16bf3276be..cb2d6e5b01 100644 --- a/examples/heatmap/hexagon/demo/china.js +++ b/examples/heatmap/hexagon/demo/china.js @@ -2,10 +2,10 @@ import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers'; import { Scene } from '@l7/scene'; const scene = new Scene({ id: 'map', - style: 'light', + style: 'dark', pitch: 47.49999999999995, - center: [114.05737552216226, 22.542656745583486], - zoom: 3, + center: [112.50447776627743,30.830476390931125], + zoom: 3.9879693680088626, type: 'mapbox', }); window.mapScene = scene; @@ -24,21 +24,25 @@ fetch( transforms:[ { type: 'hexagon', - size: 10000, + size: 17000, field:'v', method:'sum' } ] }) .size('sum',(value)=>{ - return value * 10; + return value * 20; }) - .shape('square') - .color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"]) + .shape('hexagon') + .color('count',[ + '#FF4818', '#F7B74A', + '#FFF598', '#FF40F3', + '#9415FF', '#421EB2' + ].reverse()) .style({ - coverage: 0.8, + coverage: 0.9, angle: 0, }) - + scene.addLayer(layer); }); diff --git a/examples/heatmap/hexagon/demo/meta.json b/examples/heatmap/hexagon/demo/meta.json index b8ce930ffb..b9a89b0931 100644 --- a/examples/heatmap/hexagon/demo/meta.json +++ b/examples/heatmap/hexagon/demo/meta.json @@ -3,7 +3,11 @@ "zh": "蜂窝热力图", "en": "heatmap" }, - "demos": [ + "demos": [ { + "filename": "china.js", + "title": "蜂窝热力图", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bx-9TqimungAAAAAAAAAAABkARQnAQ" + }, { "filename": "light.js", "title": "蜂窝热力图", diff --git a/examples/line/arc/demo/meta.json b/examples/line/arc/demo/meta.json index 58a23416a7..aad9b67e22 100644 --- a/examples/line/arc/demo/meta.json +++ b/examples/line/arc/demo/meta.json @@ -5,20 +5,14 @@ }, "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*FTp1Roy34qgAAAAAAAAAAABkARQnAQ" - }, { "filename": "trip_arc_dark.js", diff --git a/examples/line/arc/demo/trip_arc_dark.js b/examples/line/arc/demo/trip_arc_dark.js index b73df5f45d..fc11f18c29 100644 --- a/examples/line/arc/demo/trip_arc_dark.js +++ b/examples/line/arc/demo/trip_arc_dark.js @@ -31,4 +31,5 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') .style({ opacity: 0.8, }) + scene.addLayer(layer); }); diff --git a/examples/line/path/demo/bus_dark.js b/examples/line/path/demo/bus_dark.js index cccbe8c86c..6ba6f3a12b 100644 --- a/examples/line/path/demo/bus_dark.js +++ b/examples/line/path/demo/bus_dark.js @@ -23,7 +23,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-258 } }) .size('level',(level)=>{ - return [1.0 , level * 1] + return [0.8 , level * 1] }) .shape('line') .color( diff --git a/examples/line/path/demo/bus_light.js b/examples/line/path/demo/bus_light.js index c1421408d0..b73c0945f3 100644 --- a/examples/line/path/demo/bus_light.js +++ b/examples/line/path/demo/bus_light.js @@ -23,7 +23,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-258 } }) .size('level',(level)=>{ - return [1.0 , level * 1] + return [0.8 , level * 1] }) .shape('line') .color( diff --git a/examples/line/path/demo/meta.json b/examples/line/path/demo/meta.json index 9bcbb77e66..26b7c15314 100644 --- a/examples/line/path/demo/meta.json +++ b/examples/line/path/demo/meta.json @@ -4,11 +4,6 @@ "en": "line" }, "demos": [ - { - "filename": "road_light.js", - "title": "路径", - "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1gddQ6x8Jq4AAAAAAAAAAABkARQnAQ" - }, { "filename": "bus_light.js", "title": "公交线路", @@ -19,6 +14,11 @@ "title": "公交线路", "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ" }, + { + "filename": "road_light.js", + "title": "路径", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1gddQ6x8Jq4AAAAAAAAAAABkARQnAQ" + }, { "filename": "road_dark.js", "title": "路径", diff --git a/examples/point/bubble/demo/color.js b/examples/point/bubble/demo/color.js index 7547de143b..09dddb35d8 100644 --- a/examples/point/bubble/demo/color.js +++ b/examples/point/bubble/demo/color.js @@ -9,7 +9,7 @@ const scene = new Scene({ zoom: 15, minZoom: 10 }); - +scene.mapScene = scene; fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json') .then((res) => res.json()) .then((data) => { diff --git a/examples/point/bubble/index.en.md b/examples/point/bubble/index.en.md index 5d29ef1abb..d06551432b 100644 --- a/examples/point/bubble/index.en.md +++ b/examples/point/bubble/index.en.md @@ -1,6 +1,4 @@ --- title: Bubble Map order: 0 -redirect_from: - - /en/examples --- diff --git a/examples/point/bubble/index.zh.md b/examples/point/bubble/index.zh.md index 9d4300516e..2a3bb2cc2a 100644 --- a/examples/point/bubble/index.zh.md +++ b/examples/point/bubble/index.zh.md @@ -1,6 +1,4 @@ --- title: 气泡地图 order: 0 -redirect_from: - - /zh/examples/ --- diff --git a/examples/point/chart/demo/bar.js b/examples/point/chart/demo/bar.js index 7c4018eeb5..4be18d25cc 100644 --- a/examples/point/chart/demo/bar.js +++ b/examples/point/chart/demo/bar.js @@ -3,11 +3,11 @@ import { Marker, Popup } from '@l7/component' import * as G2 from '@antv/g2' const scene = new Scene({ id: 'map', - type: 'mapbox', + type: 'amap', style: 'light', - center: [122.80009283836715, 37.05881309947238], + center: [2.6125016864608597,49.359131], pitch: 0, - zoom: 2 + zoom: 4.19 }); scene.on('loaded',()=>{ diff --git a/examples/point/chart/demo/chart.js b/examples/point/chart/demo/chart.js index 9b4e9d4f0d..3fc377accc 100644 --- a/examples/point/chart/demo/chart.js +++ b/examples/point/chart/demo/chart.js @@ -3,16 +3,17 @@ import { Marker, Popup } from '@l7/component' import * as G2 from '@antv/g2' const scene = new Scene({ id: 'map', - type: 'mapbox', + type: 'amap', style: 'light', - center: [122.80009283836715, 37.05881309947238], + center: [2.6125016864608597,49.359131], pitch: 0, - zoom: 2 + zoom: 4.19 }); scene.on('loaded',()=>{ addChart(); }) +window.mapScene = scene; function addChart() { fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json') .then((res) => res.json()) @@ -25,7 +26,6 @@ function addChart() { if(size< 30) { return } - console.log(total); const itemData = [{ item: 'Agriculture', count: item.gdp.Agriculture, @@ -72,7 +72,7 @@ function addChart() { chart.legend(false); chart.source(itemData); chart.coord('theta', { - innerRadius: 0.75 + innerRadius: 0.6 }); chart.tooltip(false); chart.intervalStack().position('percent').color('item',['#5CCEA1','#5D7092','#5B8FF9']).shape('sliceShape'); diff --git a/examples/point/chart/demo/meta.json b/examples/point/chart/demo/meta.json index 7645735553..3a94fcf334 100644 --- a/examples/point/chart/demo/meta.json +++ b/examples/point/chart/demo/meta.json @@ -4,20 +4,20 @@ "en": "Category" }, "demos": [ + { + "filename": "bar.js", + "title": "柱图", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-Tw3TLzyJ5wAAAAAAAAAAABkARQnAQ" + }, { "filename": "chart.js", "title": "环图", - "screenshot":"" + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Uq_RQqyMrbQAAAAAAAAAAABkARQnAQ" }, { "filename": "ring.js", "title": "环图", - "screenshot":"" - }, - { - "filename": "chart.js", - "title": "环图", - "screenshot":"" + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*zUu0RYKaF28AAAAAAAAAAABkARQnAQ" } ] } diff --git a/examples/point/image/demo/image.js b/examples/point/image/demo/image.js index 58b2fc313c..7a27ead997 100644 --- a/examples/point/image/demo/image.js +++ b/examples/point/image/demo/image.js @@ -6,8 +6,8 @@ const scene = new Scene({ pitch: 0, type: 'amap', style: 'light', - center: [121.40, 31.258134], - zoom: 15, + center: [121.434765,31.256735], + zoom: 14.83, }); fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json') diff --git a/examples/point/image/demo/locate.js b/examples/point/image/demo/locate.js index 5759b12f53..1ae31084bb 100644 --- a/examples/point/image/demo/locate.js +++ b/examples/point/image/demo/locate.js @@ -15,14 +15,14 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f .then((data) => { scene.addImage( 'marker', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gxtYSIbHgaYAAAAAAAAAAABkARQnAQ', + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ', ); const imageLayer = new PointImageLayer() .source(data,) .shape('marker') - .size(15); + .size(12); scene.addLayer(imageLayer); - + }); window.mapscene =scene; diff --git a/examples/point/image/demo/meta.json b/examples/point/image/demo/meta.json index 63fdd2f8ef..c6fe6cae81 100644 --- a/examples/point/image/demo/meta.json +++ b/examples/point/image/demo/meta.json @@ -5,9 +5,19 @@ }, "demos": [ { - "filename": "point.js", + "filename": "image.js", "title": "气泡图", - "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c0IDRIg_n4MAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "locate.js", + "title": "顶点符号", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jrFoQrZNL3wAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "weather.js", + "title": "天气", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*a_rnSI6p6RoAAAAAAAAAAABkARQnAQ" } ] } diff --git a/examples/point/image/demo/weather.js b/examples/point/image/demo/weather.js index 3841f953d7..9df619e98d 100644 --- a/examples/point/image/demo/weather.js +++ b/examples/point/image/demo/weather.js @@ -1,10 +1,9 @@ import { Scene } from '@l7/scene'; import { PointImageLayer } from '@l7/layers' -console.log(this); const scene = new Scene({ id: 'map', type: 'amap', - style: 'light', + style: 'dark', center: [120.5969, 29.7918], pitch: 35, zoom: 7, @@ -31,7 +30,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdb .shape('w', function(w) { return w; }) - .size(20) + .size(15) scene.addLayer(imageLayer); }); diff --git a/examples/point/marker/demo/marker.js b/examples/point/marker/demo/marker.js index 5e0e47cc04..eed7c9c3e8 100644 --- a/examples/point/marker/demo/marker.js +++ b/examples/point/marker/demo/marker.js @@ -2,11 +2,11 @@ import { Scene } from '@l7/scene'; import { Marker } from '@l7/component' const scene = new Scene({ id: 'map', - type: 'mapbox', + type: 'amap', style: 'light', - center: [122.80009283836715, 37.05881309947238], + center: [110.80009283836715, 37.05881309947238], pitch: 0, - zoom: 3 + zoom: 4 }); scene.on('loaded',()=>{ @@ -18,11 +18,14 @@ function addMarkers() { .then((res) => res.json()) .then((nodes) => { for (var i = 0; i < nodes.length; i++) { - if (nodes[i].g !== '1') continue; + + if (nodes[i].g !== '1' || nodes[i].v === '') continue; + console.log(nodes[i],nodes[i].v === '') var el = document.createElement('label'); el.className = 'lableclass'; - el.textContent = nodes[i].v; + el.textContent = nodes[i].v +'℃'; el.style.background = getColor(nodes[i].v); + el.style.borderColor = getColor(nodes[i].v); const marker = new Marker({ element: el }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }) @@ -32,7 +35,6 @@ function addMarkers() { }) } - function getColor(v) { return v > 50 ? '#800026' : v > 40 ? '#BD0026' : v > 30 ? '#E31A1C' : v > 20 ? '#FC4E2A' : v > 10 ? '#FD8D3C' : v > 5 ? '#FEB24C' : v > 0 ? '#FED976' : '#FFEDA0'; } diff --git a/examples/point/marker/demo/meta.json b/examples/point/marker/demo/meta.json index 9aac720dac..c09db23baa 100644 --- a/examples/point/marker/demo/meta.json +++ b/examples/point/marker/demo/meta.json @@ -5,9 +5,9 @@ }, "demos": [ { - "filename": "normal.js", - "title": "海量点", - "screenshot":"" + "filename": "marker.js", + "title": "温度", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oPofT5YBOksAAAAAAAAAAABkARQnAQ" } ] diff --git a/examples/polygon/3d/demo/city.js b/examples/polygon/3d/demo/city.js deleted file mode 100644 index 6172473a29..0000000000 --- a/examples/polygon/3d/demo/city.js +++ /dev/null @@ -1,121 +0,0 @@ -import { Scene } from '@l7/scene'; -import { Polygon3DLayer } from '@l7/layers' -const colorObj = { - redyellow: [ - '#8A191A', '#AE3235', - '#CC464B', '#E26A5D', - '#EC8765', '#F0A66C', - '#F4BC8F', '#FFCEA7', - '#FFE4CE', '#FFF2E8' - ], - yellow: [ - '#7B320A', '#B35B21', - '#D2722E', '#F0883A', - '#FBA045', '#FAB04B', - '#FAC760', '#FBD78C', - '#FCE6B3', '#FCF3DB' - ], - blue_green: [ - '#094D4A', '#146968', - '#1D7F7E', '#289899', - '#34B6B7', '#4AC5AF', - '#5FD3A6', '#7BE39E', - '#A1EDB8', '#CEF8D6' - ], - blue: [ - '#0A3663', '#1558AC', - '#3771D9', '#4D89E5', - '#64A5D3', '#72BED6', - '#83CED6', '#A6E1E0', - '#B8EFE2', '#D7F9F0' - ], - purple: [ - '#312B60', '#4A457E', - '#615C99', '#816CAD', - '#A67FB5', '#C997C7', - '#DEB8D4', '#F5D4E6', - '#FAE4F1', '#FFF3FC' - ], - color1: [ - '#E4682F', '#FF8752', - '#FFA783', '#FFBEA8', - '#FFDCD6', '#EEF3FF', - '#C8D7F5', '#A5C1FC', - '#7FA7F9', '#5F8AE5' - ], - color2: [ - '#F1646A', '#F48789', - '#F7A9AC', '#FBCCCD', - '#FDEEEE', '#EEF3FF', - '#C8DAFE', '#A5C1FC', - '#80A8FB', '#5B8EF8' - ], - color3: [ - '#EEF3FF', '#C8DAFE', - '#A5C1FC', '#80A8FB', - '#5B8EF8', '#FCF6FA', - '#F5E4EF', '#F7CDDF', - '#ED9CBE', '#D1749B' - ] -} -const scene = new Scene({ - id: 'map', - type: 'amap', - style: 'dark', - center: [120.173104, 30.244072], - pitch: 66.50572, - zoom: 15.79, - minZoom: 10 -}); -const polygon ={ - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Polygon", - "coordinates": [ - [ - [ - 114.05817031860352, - 22.543714416963457 - ], - [ - 114.07087326049805, - 22.543714416963457 - ], - [ - 114.07087326049805, - 22.55504986643093 - ], - [ - 114.05817031860352, - 22.55504986643093 - ], - [ - 114.05817031860352, - 22.543714416963457 - ] - ] - ] - } - } - ] -} -fetch('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json') - .then((res) => res.json()) - .then((data) => { - const layer = - new Polygon3DLayer ({ - }) - .source(data) - .shape('extrude') - .size('floor', [10, 200]) - .color('rgba(242,246,250,0.96)') - .style({ - opacity: 1.0 - }).render(); - scene.addLayer(layer); - console.log(layer); - }); diff --git a/examples/raster/basic/demo/light.js b/examples/raster/basic/demo/light.js deleted file mode 100644 index 1f2507b153..0000000000 --- a/examples/raster/basic/demo/light.js +++ /dev/null @@ -1,74 +0,0 @@ - -import { Scene } from '@l7/scene'; -import { RasterLayer } from '@l7/layers' -import * as GeoTIFF from 'geotiff'; -const scene = new Scene({ - id: 'map', - pitch: 0, - type: 'mapbox', - style: 'light', - center: [121.2680, 30.3628], - zoom: 3, -}); - async function getTiffData() { - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/6fd83a0e-50da-4266-94e0-05dec9da1c87.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(); - console.log(values); - return { - data: values[0], - width, - height - }; -} - -async function addLayer() { - const tiffdata = await getTiffData(); - - const layer = new RasterLayer({}); - layer - .source(tiffdata.data, { - parser: { - type: 'raster', - width: tiffdata.width, - height: tiffdata.height, - min: 0, - max: 300, - extent: [119.871826171875, - 30.0262995822237, 120.50216674804688, - 30.433281874927655] - }, - }) - .style({ - heightRatio:10, - opacity: 0.8, - rampColors: { - colors: [ - '#002466', - '#0D408C', - '#105CB3', - '#1A76C7', - '#2894E0', - '#3CB4F0', - '#65CEF7', - '#98E3FA', - '#CFF6FF', - '#E8FCFF', - ], - positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0], - }, - }); - return layer; -} -scene.on('loaded', async () =>{ - const layer = await addLayer(); - scene.addLayer(layer); - scene.render(); -}) - diff --git a/examples/raster/basic/demo/meta.json b/examples/raster/basic/demo/meta.json index 25b9c47b9e..9a2b724e4a 100644 --- a/examples/raster/basic/demo/meta.json +++ b/examples/raster/basic/demo/meta.json @@ -10,8 +10,9 @@ "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ" }, { - "filename": "raster.js", - "title": "地形" + "filename": "radar.js", + "title": "地形", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ" }, { "filename": "light.js", diff --git a/examples/raster/basic/demo/radar.js b/examples/raster/basic/demo/radar.js new file mode 100644 index 0000000000..d330bf336b --- /dev/null +++ b/examples/raster/basic/demo/radar.js @@ -0,0 +1,25 @@ +import { Scene } from '@l7/scene'; +import { ImageLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'amap', + style: 'dark', + center: [115.52680, 34.3628], + zoom: 7, +}); + +const layer = new ImageLayer({}); +layer.source( + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ', + { + parser: { + type: 'image', + extent: [ 113.1277263548,32.3464238863, 118.1365790452, 36.4786759137 ] + }, + }, +); +scene.on('loaded',()=>{ + scene.addLayer(layer); +}) + diff --git a/examples/raster/basic/demo/raster2d.ts b/examples/raster/basic/demo/raster2d.ts deleted file mode 100644 index f7ae740b2c..0000000000 --- a/examples/raster/basic/demo/raster2d.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { Scene } from '@l7/scene'; -import { Raster2DLayer } from '@l7/layers' -import * as GeoTIFF from 'geotiff'; -const scene = new Scene({ - id: 'map', - pitch: 0, - type: 'mapbox', - style: 'light', - center: [121.2680, 30.3628], - zoom: 3, -}); - 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, - }; -} - -async function addLayer() { - const tiffdata = await getTiffData(); - - const layer = new Raster2DLayer({}); - 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], - }, - }) - .style({ - heightRatio:10, - opacity: 0.8, - rampColors: { - colors: [ - '#002466', - '#0D408C', - '#105CB3', - '#1A76C7', - '#2894E0', - '#3CB4F0', - '#65CEF7', - '#98E3FA', - '#CFF6FF', - '#E8FCFF', - ], - positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0], - }, - }); - return layer; -} -scene.on('loaded', async () =>{ - const layer = await addLayer(); - scene.addLayer(layer); - scene.render(); -}) - diff --git a/examples/tutorial/data/demo/line.js b/examples/tutorial/data/demo/line.js deleted file mode 100644 index 288f28b1dd..0000000000 --- a/examples/tutorial/data/demo/line.js +++ /dev/null @@ -1,39 +0,0 @@ -import { Scene } from '@l7/scene'; -import { LineLayer } from '@l7/layers' -const scene = new Scene({ - id: 'map', - pitch: 0, - type: 'mapbox', - style: 'light', - center: [102.602992, 23.107329], - zoom: 13, -}); - -fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') - .then((res) => res.json()) - .then((data) => { - const layer = - new LineLayer({ - }) - .source(data) - .size(1) - .shape('line') - .color( - 'ELEV', - [ - '#E8FCFF', - '#CFF6FF', - '#A1E9ff', - '#65CEF7', - '#3CB1F0', - '#2894E0', - '#1772c2', - '#105CB3', - '#0D408C', - '#002466', - ].reverse(), - ) - scene.addLayer(layer); - console.log(layer); - - }); diff --git a/gatsby-config.js b/gatsby-config.js index 33f2af549a..ed59c5ecda 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -35,7 +35,7 @@ module.exports = { zh: '图表演示', en: 'Examples', }, - redirect: 'point/bubble', + redirect: 'gallery/basic', }, // target: '_blank', ], diff --git a/package.json b/package.json index cf60826e17..fd89c1029d 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "react-dom": "^16.12.0", "react-i18next": "^11.0.1", "rimraf": "^2.6.2", + "geotiff": "^1.0.0-beta.6", "rollup": "^1.27.0", "rollup-plugin-analyzer": "^3.2.2", "rollup-plugin-babel": "^4.3.3", @@ -150,8 +151,5 @@ "commitizen": { "path": "cz-conventional-changelog" } - }, - "dependencies": { - "geotiff": "^1.0.0-beta.6" } } diff --git a/site/css/demo.css b/site/css/demo.css index 266a6a02bf..7b6e46e0e3 100644 --- a/site/css/demo.css +++ b/site/css/demo.css @@ -1,16 +1,21 @@ .lableclass { - position: absolute; - display: inline; - cursor: pointer; - background: rgb(255, 228, 120); - border: none; padding: 4px; - white-space: nowrap; - font: bold 12px/18px arial, sans-serif; - color: rgb(51, 51, 51); - box-shadow: rgb(153, 153, 153) 1px 1px 2px; - border-radius: 4px; - width: 22px; - height: 24px; - text-align: center; - user-select: none; + position: absolute; + display: inline; + cursor: pointer; + background: rgb(255, 228, 120); + border: solid 2px #fff; + padding: 4px; + white-space: nowrap; + font: bold 12px/18px arial, sans-serif; + color: #fff; + border-radius: 50%; + width: 40px; + height: 40px; + line-height: 30px; + /* opacity: 0.7; */ + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } diff --git a/site/locale.json b/site/locale.json index b116e24870..24c3eabe59 100644 --- a/site/locale.json +++ b/site/locale.json @@ -1,5 +1,5 @@ { - "L7 地理空间可视化引擎": "Geospatial Visualization \n Analysis Framework", + "L7 地理空间可视化引擎": "Geospatial Visualization
Analysis Framework", "地理空间数据可视化": "Geospatial Data Visualization Analysis Framework", "L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于WebGL的开源大规模地理空间数据可视分析开发框架。": "Large-scale WebGL-powered Geospatial data visualization analysis framework", "架构上灵活可扩展":"Flexible and scalable", @@ -11,5 +11,8 @@ "蚂蚁数据可视化": "AntV", "继续了解": "More", "更新": "Update", - "下载使用":"Download" + "下载使用":"Download", + "浅色色板": "Light Theme", + "深色色板": "Dark Theme", + "一个个真实的数据可视化案例，复杂的地理数据,简单，易用的API接口,让用户达到开箱即用的效果." : "many real data visualization case" } diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx index 05fe877574..548e5b119a 100644 --- a/site/pages/index.zh.tsx +++ b/site/pages/index.zh.tsx @@ -55,22 +55,21 @@ const IndexPage = () => { const cases = [ { - logo: - 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ', - title: t('浅色朴素色板'), - description: t('可视化分析应用'), - link: '#', + logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ', + title: t('浅色色板'), + description: t('一个个真实的数据可视化案例，复杂的地理数据,简单，易用的API接口,让用户达到开箱即用的效果。'), + link: 'https://antvis.github.io/L7/zh/examples/gallery/basic', image: - 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ', + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8Pa8Toh3-OsAAAAAAAAAAABkARQnAQ', }, { - logo: - 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*ekkhR7ISzUsAAAAAAAAAAABkARQnAQ', - title: t('深色酷炫色板'), - description: t('酷炫地图应用'), + logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ', + title: t('深色色板'), + description: t('一个个真实的数据可视化案例，复杂的地理数据,简单，易用的API接口,让用户达到开箱即用的效果.'), + link: 'https://antvis.github.io/L7/zh/examples/gallery/basic', image: - 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ', - }, + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ryTVQ49K8SkAAAAAAAAAAABkARQnAQ', + } ]; return (