diff --git a/examples/heatmap/heatmap/demo/meta.json b/examples/heatmap/heatmap/demo/meta.json index a8bae10d48..631531d134 100644 --- a/examples/heatmap/heatmap/demo/meta.json +++ b/examples/heatmap/heatmap/demo/meta.json @@ -4,16 +4,16 @@ "en": "heatmap" }, "demos": [ - { - "filename": "world3d.js", - - "title": "经典热力图3D", - "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*NxFPSrd9oscAAAAAAAAAAABkARQnAQ" - }, + { "filename": "world.js", "title": "经典热力图2D", "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9zUcSK07PHgAAAAAAAAAAABkARQnAQ" - } + }, + { + "filename": "world3d.js", + "title": "经典热力图3D", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K_nOTa1C7PoAAAAAAAAAAABkARQnAQ" + }, ] } diff --git a/examples/heatmap/heatmap/demo/world3d.js b/examples/heatmap/heatmap/demo/world3d.js index ee4251be51..9f3fc42c36 100644 --- a/examples/heatmap/heatmap/demo/world3d.js +++ b/examples/heatmap/heatmap/demo/world3d.js @@ -3,7 +3,7 @@ import { HeatMapLayer } from '@l7/layers'; const scene = new Scene({ id: 'map', style: 'dark', - pitch: 0, + pitch: 57.4999999, center: [116.49434030056, 39.868073421167621], type: 'mapbox', zoom: 3, diff --git a/examples/line/arc/demo/arcCircle.js b/examples/line/arc/demo/arcCircle.js index c141782c89..f6e728f28f 100644 --- a/examples/line/arc/demo/arcCircle.js +++ b/examples/line/arc/demo/arcCircle.js @@ -25,7 +25,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') }) .size(1) .shape('arc') - .color('#113681') + .color('#8C1EB2') .style({ opacity: 0.8, blur: 0.99 diff --git a/examples/line/arc/demo/meta.json b/examples/line/arc/demo/meta.json index d8c1f0bf08..2e9310b583 100644 --- a/examples/line/arc/demo/meta.json +++ b/examples/line/arc/demo/meta.json @@ -4,22 +4,21 @@ "en": "line" }, "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*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ" - } ] } diff --git a/examples/line/line/demo/ele.js b/examples/line/line/demo/ele.js index b57b6c4f58..93ee31caae 100644 --- a/examples/line/line/demo/ele.js +++ b/examples/line/line/demo/ele.js @@ -2,11 +2,11 @@ import { Scene } from '@l7/scene'; import { LineLayer } from '@l7/layers' const scene = new Scene({ id: 'map', - pitch: 0, + pitch: 40.89473684210526, type: 'amap', style: 'light', - center: [102.602992, 23.107329], - zoom: 14, + center: [102.60244, 23.10556], + zoom: 14.28, }); fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') diff --git a/examples/line/line/demo/ele_dark.js b/examples/line/line/demo/ele_dark.js index a2bf5216b1..a7060ec6f6 100644 --- a/examples/line/line/demo/ele_dark.js +++ b/examples/line/line/demo/ele_dark.js @@ -2,11 +2,11 @@ import { Scene } from '@l7/scene'; import { LineLayer } from '@l7/layers' const scene = new Scene({ id: 'map', - pitch: 0, + pitch: 26.842105263157915, type: 'amap', style: 'dark', - center: [102.602992, 23.107329], - zoom: 14, + center: [102.601919, 23.108997], + zoom: 14.22, }); fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') @@ -24,19 +24,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') type: 'quantize' }) .color( - 'ELEV', - [ '#E4682F', - '#FF8752', - '#FFA783', - '#FFBEA8', - '#FFDCD6', - '#EEF3FF', - '#C8D7F5', - '#A5C1FC', - '#7FA7F9', - '#5F8AE5' ].reverse() + 'ELEV',[ + '#094D4A', '#146968', + '#1D7F7E', '#289899', + '#34B6B7', '#4AC5AF', + '#5FD3A6', '#7BE39E', + '#A1EDB8', '#CEF8D6' + ], ) scene.addLayer(layer); console.log(layer); - }); + }); \ No newline at end of file diff --git a/examples/line/line/demo/meta.json b/examples/line/line/demo/meta.json index 1c4c6244f4..8fdc67a572 100644 --- a/examples/line/line/demo/meta.json +++ b/examples/line/line/demo/meta.json @@ -12,7 +12,7 @@ { "filename": "ele_dark.js", "title": "等高线", - "screenshot":"" + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*X1LgSKQbrD0AAAAAAAAAAABkARQnAQ" }, { "filename": "linedash.js", diff --git a/examples/point/basic/demo/buble.js b/examples/point/basic/demo/buble.js deleted file mode 100644 index ce2a3a3139..0000000000 --- a/examples/point/basic/demo/buble.js +++ /dev/null @@ -1,36 +0,0 @@ -import { Scene } from '@l7/scene'; -import { PointLayer, PointImageLayer } from '@l7/layers' -const scene = new Scene({ - id: 'map', - pitch: 0, - type: 'amap', - style: 'light', - center: [140.067171, 36.26186], - zoom: 5.32, - maxZoom: 10 -}); -window.mapScene = scene; -fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json') - .then((res) => res.json()) - .then((data) => { - - const pointLayer = - new PointLayer({ - }) - .source(data) - .shape('circle') - .size('mag', [5, 16]) - .scale('mag',{ - type:'quantile' - }) - .color('mag',(mag)=>{ - return mag > 4.5? "#5B8FF9" : '#5CCEA1'; - }) - .style({ - opacity: 0.3, - strokeWidth: 1 - }) - - scene.addLayer(pointLayer); - - }); \ No newline at end of file diff --git a/examples/point/basic/demo/color.js b/examples/point/basic/demo/color.js index 6cba3fe1db..7547de143b 100644 --- a/examples/point/basic/demo/color.js +++ b/examples/point/basic/demo/color.js @@ -34,10 +34,10 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9 'vesica', ]) .size('unit_price', [10, 25]) - .color('name',['#E4504A',"#E99431", "#EBCC53","#43A5DA","#6CC175"]) + .color('name',['#5B8FF9',"#5CCEA1", "#5D7092","#F6BD16","#E86452"]) .style({ - opacity:1.0, - strokeWidth: 1, + opacity:0.3, + strokeWidth: 2, }) diff --git a/examples/point/basic/demo/meta.json b/examples/point/basic/demo/meta.json index 29791c67fe..ac14fcf566 100644 --- a/examples/point/basic/demo/meta.json +++ b/examples/point/basic/demo/meta.json @@ -5,14 +5,19 @@ }, "demos": [ { - "filename": "buble.js", + "filename": "point.js", "title": "气泡图", "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_9ETS5_1yCEAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "color.js", + "title": "形状映射", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K8ACRr5TY7UAAAAAAAAAAABkARQnAQ" }, { "filename": "world.js", - "title": "气泡图 - 电厂装机量", + "title": "气泡图", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DMREQYwsCF4AAAAAAAAAAABkARQnAQ" }, diff --git a/examples/point/basic/demo/point.js b/examples/point/basic/demo/point.js index e8cb87d3b8..ce2a3a3139 100644 --- a/examples/point/basic/demo/point.js +++ b/examples/point/basic/demo/point.js @@ -1,37 +1,36 @@ import { Scene } from '@l7/scene'; -import { PointLayer } from '@l7/layers' +import { PointLayer, PointImageLayer } from '@l7/layers' const scene = new Scene({ id: 'map', pitch: 0, type: 'amap', style: 'light', - center: [121.40, 31.258134], - zoom: 15, - + center: [140.067171, 36.26186], + zoom: 5.32, + maxZoom: 10 }); - -fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json') +window.mapScene = scene; +fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json') .then((res) => res.json()) .then((data) => { + const pointLayer = - new PointLayer({ - }) - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude' - } - }).shape('circle') - .size('unit_price', [5, 25]) - .color('name',['#49B5AD', "#5B8FF9"]) + new PointLayer({ + }) + .source(data) + .shape('circle') + .size('mag', [5, 16]) + .scale('mag',{ + type:'quantile' + }) + .color('mag',(mag)=>{ + return mag > 4.5? "#5B8FF9" : '#5CCEA1'; + }) .style({ opacity: 0.3, - strokeWidth: 1, + strokeWidth: 1 }) - scene.addLayer(pointLayer); - - }); - + scene.addLayer(pointLayer); + }); \ No newline at end of file diff --git a/examples/point/basic/demo/text.js b/examples/point/basic/demo/text.js deleted file mode 100644 index 1d10a9b144..0000000000 --- a/examples/point/basic/demo/text.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Scene } from '@l7/scene'; -import { PointLayer, PointImageLayer } from '@l7/layers' -const scene = new Scene({ - id: 'map', - pitch: 0, - type: 'amap', - style: 'light', - center: [121.40, 31.258134], - zoom: 15, - minZoom: 10 -}); - -fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json') - .then((res) => res.json()) - .then((data) => { - const pointLayer = - new PointLayer({ - }) - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude' - } - }).shape('circle') - .size('unit_price', [5, 25]) - .color('#5B8FF9') - .label('name') - .style({ - opacity: 0.3, - strokeWidth: 1, - strokeColor: "#5B8FF9", - - }) - - scene.addLayer(pointLayer); - console.log(pointLayer); - - }); - - diff --git a/examples/point/chartmap/demo/chart.js b/examples/point/chartmap/demo/chart.js index 19541a98b0..3e6dad5a88 100644 --- a/examples/point/chartmap/demo/chart.js +++ b/examples/point/chartmap/demo/chart.js @@ -1,139 +1,86 @@ import { Scene } from '@l7/scene'; -import { Marker } from '@l7/component' -import G2Plot from '@antv/g2plot' +import { Marker, Popup } from '@l7/component' +import * as G2Plot from '@antv/g2plot' const scene = new Scene({ id: 'map', + type: 'amap', style: 'light', - center: [-122.80009283836715, 37.05881309947238], + center: [122.80009283836715, 37.05881309947238], pitch: 0, - zoom: 5 + zoom: 3 }); -// fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json') -// .then((res) => res.text()) -// .then((data) => { -// data.nodes.forEach(function (item) { -// const el = document.createElement('div'); -// const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service; +scene.on('loaded',()=>{ + addChart(); +}) +function addChart() { + fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json') + .then((res) => res.json()) + .then((data) => { + data.nodes.forEach(function (item) { + const el = document.createElement('div'); + const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service; -// const size = Math.max(Math.min(parseInt(total / 20000), 150), 30); -// const itemData = [{ -// item: 'Agriculture', -// count: item.gdp.Agriculture, -// percent: item.gdp.Agriculture / total -// }, { -// item: 'Industry', -// count: item.gdp.Industry, -// percent: item.gdp.Industry / total -// }, { -// item: 'Service', -// count: item.gdp.Service, -// percent: item.gdp.Service / total -// }]; + const size = Math.max(Math.min(parseInt(total / 20000), 100), 30); + const itemData = [{ + item: 'Agriculture', + count: item.gdp.Agriculture, + percent: item.gdp.Agriculture / total + }, { + item: 'Industry', + count: item.gdp.Industry, + percent: item.gdp.Industry / total + }, { + item: 'Service', + count: item.gdp.Service, + percent: item.gdp.Service / total + }]; -// const config = { -// "title": { -// "visible": false, -// "text": "环图", -// "style": { -// "fill": "rgba(0, 0, 0, 0.85)" -// } -// }, -// "description": { -// "visible": false, -// "text": "一个简单的环图", -// "style": { -// "fill": "rgba(0, 0, 0, 0.85)", -// "bottom_margin": 10 -// } -// }, -// "padding": "auto", -// "legend": { -// "visible": false, -// "position": "top-left" -// }, -// "tooltip": { -// "visible": false, -// "shared": false, -// "crosshairs": null -// }, -// "xAxis": { -// "visible": true, -// "autoHideLabel": false, -// "autoRotateLabel": false, -// "autoRotateTitle": false, -// "grid": { -// "visible": false -// }, -// "line": { -// "visible": false -// }, -// "tickLine": { -// "visible": true -// }, -// "label": { -// "visible": true -// }, -// "title": { -// "visible": false, -// "offset": 12 -// } -// }, -// "yAxis": { -// "visible": true, -// "autoHideLabel": false, -// "autoRotateLabel": false, -// "autoRotateTitle": true, -// "grid": { -// "visible": true -// }, -// "line": { -// "visible": false -// }, -// "tickLine": { -// "visible": false -// }, -// "label": { -// "visible": true -// }, -// "title": { -// "visible": false, -// "offset": 12 -// } -// }, -// "label": { -// "visible": true, -// "type": "outer", -// "style": { -// "fill": "rgba(0, 0, 0, 0.65)" -// } -// }, -// "width": 317, -// "height": 249, -// "forceFit": false, -// "radius": 1, -// "pieStyle": { -// "stroke": "white", -// "lineWidth": 1 -// }, -// "innerRadius": 0.74, -// "animation": false, -// "colorField": "x", -// "angleField": "y", -// "color": null -// } -// const plot = new G2Plot.Ring(el, { -// data: itemData, -// ...config, -// }); -// plot.render(); -// var popup = new L7.Popup({ -// anchor: 'left' -// }).setText(item.name); -// new Marker({ -// element: el -// }).setLnglat(item.coordinates).setPopup(popup).addTo(scene); -// }); + const config = { + "tooltip": { + "visible": true, + "shared": false, + "crosshairs": null + }, + legend:{ + "visible": false, + }, + "label": { + "visible": false, + "type": "outer", + "style": { + "fill": "rgba(0, 0, 0, 0.65)" + } + }, + "width": size, + "height": size, + "forceFit": false, + "radius": 1, + "pieStyle": { + "stroke": "white", + "lineWidth": 1 + }, + "innerRadius": 0.64, + "animation": false, + "colorField": "item", + "angleField": "percent", + "color": ["#5CCEA1", "#5D7092", "#5B8FF9"] + } + const plot = new G2Plot.Ring(el, { + data: itemData, + ...config, + }); + plot.render(); + new Marker({ + element: el + }).setLnglat({ + lng:item.coordinates[0], + lat:item.coordinates[1] + }).addTo(scene); + }); + + }); + +} -// }); diff --git a/examples/point/cluster/index.zh.md b/examples/point/cluster/index.zh.md deleted file mode 100644 index ae4a4a2cc7..0000000000 --- a/examples/point/cluster/index.zh.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: "聚合地图" -order: 6 ---- diff --git a/examples/point/chartmap/demo/marker.js b/examples/point/marker/demo/marker.js similarity index 90% rename from examples/point/chartmap/demo/marker.js rename to examples/point/marker/demo/marker.js index 05015288de..5e0e47cc04 100644 --- a/examples/point/chartmap/demo/marker.js +++ b/examples/point/marker/demo/marker.js @@ -2,7 +2,7 @@ import { Scene } from '@l7/scene'; import { Marker } from '@l7/component' const scene = new Scene({ id: 'map', - type: 'amap', + type: 'mapbox', style: 'light', center: [122.80009283836715, 37.05881309947238], pitch: 0, @@ -25,7 +25,8 @@ function addMarkers() { el.style.background = getColor(nodes[i].v); const marker = new Marker({ element: el - }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }).addTo(scene);; + }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }) + .addTo(scene);; } }) diff --git a/examples/point/marker/demo/meta.json b/examples/point/marker/demo/meta.json new file mode 100644 index 0000000000..9aac720dac --- /dev/null +++ b/examples/point/marker/demo/meta.json @@ -0,0 +1,14 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "normal.js", + "title": "海量点", + "screenshot":"" + + } + ] +} diff --git a/examples/point/marker/index.zh.md b/examples/point/marker/index.zh.md new file mode 100644 index 0000000000..c391e1a28c --- /dev/null +++ b/examples/point/marker/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 自定义符号 +order: 7 +--- diff --git a/examples/point/scatter/index.zh.md b/examples/point/scatter/index.zh.md index a630dd582f..e71f0acf8f 100644 --- a/examples/point/scatter/index.zh.md +++ b/examples/point/scatter/index.zh.md @@ -1,4 +1,4 @@ --- -title: "等值线" +title: "散点图" order: 1 --- diff --git a/examples/polygon/basic/demo/fill.js b/examples/polygon/basic/demo/fill.js index 86f254160d..a962133463 100644 --- a/examples/polygon/basic/demo/fill.js +++ b/examples/polygon/basic/demo/fill.js @@ -1,5 +1,5 @@ import { Scene } from '@l7/scene'; -import { PolygonLayer } from '@l7/layers' +import { PolygonLayer, LineLayer } from '@l7/layers' const scene = new Scene({ id: 'map', pitch: 0, @@ -79,6 +79,18 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7 .style({ opacity: 1 }) + const layer2 = + new LineLayer({ + zIndex: 2 + }) + .source(data) + .color('#fff') + .size(0.5) + .style({ + opacity: 1 + }) + scene.addLayer(layer); + scene.addLayer(layer2); console.log(layer); }); diff --git a/examples/raster/basic/demo/raster.js b/examples/raster/basic/demo/raster.js index dbe5676ac8..dedf4a5f15 100644 --- a/examples/raster/basic/demo/raster.js +++ b/examples/raster/basic/demo/raster.js @@ -1,6 +1,6 @@ import { Scene } from '@l7/scene'; import { RasterLayer } from '@l7/layers' -// import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js'; +import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js'; const scene = new Scene({ id: 'map', pitch: 0, @@ -9,9 +9,29 @@ const scene = new Scene({ center: [121.2680, 30.3628], zoom: 13, }); + async function getTiffData() { + debugger + 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 this.getTiffData(); + const tiffdata = await getTiffData(); + const layer = new RasterLayer({}); layer .source(tiffdata.data, { @@ -44,27 +64,7 @@ async function addLayer() { }); return layer; } -addLayer() scene.on('loaded',()=>{ - const layer = addLayer(); - scene.addLayer(layer); + addLayer(); }) - 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, - }; -} diff --git a/gatsby-browser.js b/gatsby-browser.js index ca800229c1..a4418bfc85 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -2,8 +2,8 @@ import './packages/component/src/css/l7.css'; import './site/css/demo.css' require('./packages/component/src/css/l7.css'); -// window.GeoTIFF = require('geotiff/dist/geotiff.bundle.js') +window.GeoTIFF = require('geotiff/dist/geotiff.bundle.js') window.scene = require('./packages/scene/src'); window.layers= require('./packages/layers/src'); window.component= require('./packages/component/src'); -window.g2plot = require('@antv/g2plot'); +window.g2plot = require('@antv/g2plot'); \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index 1bcd99a8fc..9f9dfc7892 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -5,7 +5,7 @@ module.exports = { options: { pathPrefix: '/gatsby-theme-antv', GATrackingId: 'UA-148148901-7', - pathPrefix: '/l7', + pathPrefix: 'L7', theme: { 'primary-color': '#722ED1', }, @@ -15,7 +15,7 @@ module.exports = { siteMetadata: { title: 'L7', description: 'Large-scale WebGL-powered Geospatial data visualization analysis framework', - githubUrl: 'https://github.com/antvis/antvis.github.io', + githubUrl: 'https://github.com/antvis/L7', navs: [ { slug: 'docs/specification', diff --git a/package.json b/package.json index f42e50ab96..24809cf88e 100644 --- a/package.json +++ b/package.json @@ -105,10 +105,11 @@ }, "scripts": { "start": "NODE_ENV=site npm run site:develop", + "build_site": "NODE_ENV=site npm run site:build", "site:develop": "gatsby develop --open -H 0.0.0.0", - "site:build": "npm run site:clean && export NODE_ENV=site && gatsby build --prefix-paths", + "site:build": "npm run site:clean && gatsby build --prefix-paths", "site:clean": "gatsby clean", - "site:deploy": "npm run site:build && gh-pages -d public", + "site:deploy": "NODE_ENV=site npm run site:build && gh-pages -d public", "prebuild": "run-p tsc lint", "build": "lerna exec --parallel 'BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'", "todo:postbuild": "yarn build:declarations", diff --git a/packages/layers/src/core/triangulation.ts b/packages/layers/src/core/triangulation.ts index 6f490e888d..97495b5bb9 100644 --- a/packages/layers/src/core/triangulation.ts +++ b/packages/layers/src/core/triangulation.ts @@ -69,7 +69,11 @@ export function PointImageTriangulation(feature: IEncodeFeature) { */ export function LineTriangulation(feature: IEncodeFeature) { const { coordinates } = feature; - const line = getNormals(coordinates as number[][], false, 0); + let path = coordinates; + if (Array.isArray(path[0][0])) { + path = coordinates[0]; + } + const line = getNormals(path as number[][], false, 0); return { vertices: line.attrPos, // [ x,y,z, distance, miter,total ] indices: line.attrIndex, diff --git a/packages/layers/src/line/buffers/line.ts b/packages/layers/src/line/buffers/line.ts deleted file mode 100644 index 224542279c..0000000000 --- a/packages/layers/src/line/buffers/line.ts +++ /dev/null @@ -1,95 +0,0 @@ -// import { lngLatToMeters, Point } from '@l7/utils'; -// import BufferBase, { IEncodeFeature, Position } from '../../core/BaseBuffer'; -// import getNormals from '../../utils/polylineNormal'; -// interface IBufferInfo { -// normals: number[]; -// arrayIndex: number[]; -// positions: number[]; -// attrDistance: number[]; -// miters: number[]; -// verticesOffset: number; -// indexOffset: number; -// } -// export default class LineBuffer extends BufferBase { -// private hasPattern: boolean; -// protected buildFeatures() { -// const layerData = this.data as IEncodeFeature[]; -// layerData.forEach((feature: IEncodeFeature) => { -// this.calculateLine(feature); -// delete feature.bufferInfo; -// }); -// this.hasPattern = layerData.some((feature: IEncodeFeature) => { -// return feature.pattern; -// }); -// } -// protected initAttributes() { -// super.initAttributes(); -// this.attributes.dashArray = new Float32Array(this.verticesCount); -// this.attributes.attrDistance = new Float32Array(this.verticesCount); -// this.attributes.totalDistances = new Float32Array(this.verticesCount); -// this.attributes.patterns = new Float32Array(this.verticesCount * 2); -// this.attributes.miters = new Float32Array(this.verticesCount); -// this.attributes.normals = new Float32Array(this.verticesCount * 3); -// } -// protected calculateFeatures() { -// const layerData = this.data as IEncodeFeature[]; -// // 计算长 -// layerData.forEach((feature: IEncodeFeature, index: number) => { -// let coordinates = feature.coordinates as Position[] | Position[][]; -// if (Array.isArray(coordinates[0][0])) { -// coordinates = coordinates[0] as Position[]; -// } -// // @ts-ignore -// const projectCoord: number[][] = coordinates.map((item: Position[]) => { -// // @ts-ignore -// const p: Point = [...item]; -// return lngLatToMeters(p); -// }); -// const { normals, attrIndex, attrPos, attrDistance, miters } = getNormals( -// coordinates as number[][], -// false, -// this.verticesCount, -// ); -// const bufferInfo: IBufferInfo = { -// normals, -// arrayIndex: attrIndex, -// positions: attrPos, -// attrDistance, -// miters, -// verticesOffset: this.verticesCount, -// indexOffset: this.indexCount, -// }; -// this.verticesCount += attrPos.length / 3; -// this.indexCount += attrIndex.length; -// feature.bufferInfo = bufferInfo; -// }); -// } -// private calculateLine(feature: IEncodeFeature) { -// const bufferInfo = feature.bufferInfo as IBufferInfo; -// const { -// normals, -// arrayIndex, -// positions, -// attrDistance, -// miters, -// verticesOffset, -// indexOffset, -// } = bufferInfo; -// const { dashArray = 200 } = this.style; - -// this.encodeArray(feature, positions.length / 3); -// const totalLength = attrDistance[attrDistance.length - 1]; -// // 增加长度 -// const totalDistances = Array(positions.length / 3).fill(totalLength); -// // 虚线比例 -// const ratio = dashArray / totalLength; -// const dashArrays = Array(positions.length / 3).fill(ratio); -// this.attributes.positions.set(positions, verticesOffset * 3); -// this.indexArray.set(arrayIndex, indexOffset); -// this.attributes.miters.set(miters, verticesOffset); -// this.attributes.normals.set(normals, verticesOffset * 3); -// this.attributes.attrDistance.set(attrDistance, verticesOffset); -// this.attributes.totalDistances.set(totalDistances, verticesOffset); -// this.attributes.dashArray.set(dashArrays, verticesOffset); -// } -// } diff --git a/packages/layers/src/point/index.ts b/packages/layers/src/point/index.ts index 07ea0c83c6..5ff8f0ff9a 100644 --- a/packages/layers/src/point/index.ts +++ b/packages/layers/src/point/index.ts @@ -18,15 +18,6 @@ interface IPointLayerStyleOptions { strokeWidth: number; strokeColor: string; } -export function PointTriangulation(feature: IEncodeFeature) { - const coordinates = feature.coordinates as number[]; - return { - vertices: [...coordinates, ...coordinates, ...coordinates, ...coordinates], - extrude: [-1, -1, 1, -1, 1, 1, -1, 1], - indices: [0, 1, 2, 2, 3, 0], - size: coordinates.length, - }; -} export default class PointLayer extends BaseLayer { public name: string = 'PointLayer'; @@ -41,114 +32,4 @@ export default class PointLayer extends BaseLayer { }, }; } - - protected renderModels() { - const { - opacity = 1, - strokeColor = '#fff', - strokeWidth = 1, - } = this.getStyleOptions(); - this.models.forEach((model) => - model.draw({ - uniforms: { - u_opacity: opacity, - u_stroke_width: strokeWidth, - u_stroke_color: rgb2arr(strokeColor), - }, - }), - ); - return this; - } - - protected buildModels() { - this.registerBuiltinAttributes(this); - this.models = [ - this.buildLayerModel({ - moduleName: 'pointfill', - vertexShader: pointFillVert, - fragmentShader: pointFillFrag, - triangulation: PointTriangulation, - depth: { enable: false }, - }), - ]; - } - - private registerBuiltinAttributes(layer: ILayer) { - layer.styleAttributeService.registerStyleAttribute({ - name: 'extrude', - type: AttributeType.Attribute, - descriptor: { - name: 'a_Extrude', - buffer: { - // give the WebGL driver a hint that this buffer may change - usage: gl.DYNAMIC_DRAW, - data: [], - type: gl.FLOAT, - }, - size: 2, - update: ( - feature: IEncodeFeature, - featureIdx: number, - vertex: number[], - attributeIdx: number, - ) => { - const extrude = [-1, -1, 1, -1, 1, 1, -1, 1]; - const extrudeIndex = (attributeIdx % 4) * 2; - return [extrude[extrudeIndex], extrude[extrudeIndex + 1]]; - }, - }, - }); - - // point layer size; - layer.styleAttributeService.registerStyleAttribute({ - name: 'size', - type: AttributeType.Attribute, - descriptor: { - name: 'a_Size', - buffer: { - // give the WebGL driver a hint that this buffer may change - usage: gl.DYNAMIC_DRAW, - data: [], - type: gl.FLOAT, - }, - size: 1, - update: ( - feature: IEncodeFeature, - featureIdx: number, - vertex: number[], - attributeIdx: number, - ) => { - const { size } = feature; - return Array.isArray(size) ? [size[0]] : [size as number]; - }, - }, - }); - - // point layer size; - layer.styleAttributeService.registerStyleAttribute({ - name: 'shape', - type: AttributeType.Attribute, - descriptor: { - name: 'a_Shape', - buffer: { - // give the WebGL driver a hint that this buffer may change - usage: gl.DYNAMIC_DRAW, - data: [], - type: gl.FLOAT, - }, - size: 1, - update: ( - feature: IEncodeFeature, - featureIdx: number, - vertex: number[], - attributeIdx: number, - ) => { - const { shape = 2 } = feature; - const shape2d = layer.configService.getConfig().shape2d as string[]; - const shapeIndex = shape2d.indexOf(shape as string); - return [shapeIndex]; - }, - }, - }); - } } diff --git a/packages/layers/src/point/shaders/fill_frag.glsl b/packages/layers/src/point/shaders/fill_frag.glsl index b1eecf6211..01231d9527 100644 --- a/packages/layers/src/point/shaders/fill_frag.glsl +++ b/packages/layers/src/point/shaders/fill_frag.glsl @@ -51,7 +51,10 @@ void main() { } float opacity_t = smoothstep(0.0, antialiased_blur, outer_df); - + if(u_stroke_width <0.01 ) { + gl_FragColor = v_color * opacity_t; + return; + } float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep( antialiased_blur, 0.0, diff --git a/packages/maps/src/mapbox/index.ts b/packages/maps/src/mapbox/index.ts index e316a5ae17..346798125f 100644 --- a/packages/maps/src/mapbox/index.ts +++ b/packages/maps/src/mapbox/index.ts @@ -57,7 +57,7 @@ export default class MapboxService implements IMapService { // map event public on(type: string, handle: (...args: any[]) => void): void { - if (MapServiceEvent.indexOf('mapload') !== -1) { + if (MapServiceEvent.indexOf(type) !== -1) { this.eventEmitter.on(type, handle); } else { // 统一事件名称 diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx index a04a092e2d..8b6062eed5 100644 --- a/site/pages/index.zh.tsx +++ b/site/pages/index.zh.tsx @@ -79,9 +79,9 @@ const IndexPage = () => { { logo: 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ', - title: '灯塔专业版', + title: '浅色朴素色板', description: - '深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金', + '可视化分析应用', link: '#', image: 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ', @@ -89,9 +89,9 @@ const IndexPage = () => { { logo: 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*ekkhR7ISzUsAAAAAAAAAAABkARQnAQ', - title: '灯塔专业版2', + title: '深色酷炫色板', description: - '深2222222入金融的基金深入金融的基金深2222222入金融的基金深入金融的基金深2222222入金融的基金深入金融的基金', + '酷炫地图应用', image: 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ', }, @@ -104,10 +104,10 @@ const IndexPage = () => { return ( <> - + } - title={t('让数据栩栩如生')} + title={t('L7 地理空间可视化引擎')} description={t( 'L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于WebGL的开源大规模地理空间数据可视分析开发框架。', )} diff --git a/yarn.lock b/yarn.lock index d2a5018382..be80c45e52 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5741,13 +5741,6 @@ babel-plugin-react-docgen@^3.0.0: react-docgen "^4.1.1" recast "^0.14.7" -babel-plugin-remove-glsl-comments@^1.0.0: - version "1.0.0" - resolved "https://registry.npm.taobao.org/babel-plugin-remove-glsl-comments/download/babel-plugin-remove-glsl-comments-1.0.0.tgz#62c0910707798a60504b70d09f9e2733ae10fc93" - integrity sha1-YsCRBwd5imBQS3DQn54nM64Q/JM= - dependencies: - minimatch "^3.0.0" - babel-plugin-remove-graphql-queries@^2.7.15: version "2.7.15" resolved "https://registry.npm.taobao.org/babel-plugin-remove-graphql-queries/download/babel-plugin-remove-graphql-queries-2.7.15.tgz#d1f9dcf885dfc0141cf3ac203f94050bf0f94ea4" @@ -15640,7 +15633,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1: resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a" integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo= -"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2: +"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2: version "3.0.4" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== @@ -21204,15 +21197,9 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== -<<<<<<< HEAD -sourcemap-codec@^1.4.1: +sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4: version "1.4.6" resolved "https://registry.npm.taobao.org/sourcemap-codec/download/sourcemap-codec-1.4.6.tgz?cache=0&sync_timestamp=1562200915929&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsourcemap-codec%2Fdownload%2Fsourcemap-codec-1.4.6.tgz#e30a74f0402bad09807640d39e971090a08ce1e9" -======= -sourcemap-codec@^1.4.4: - version "1.4.6" - resolved "https://registry.npm.taobao.org/sourcemap-codec/download/sourcemap-codec-1.4.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsourcemap-codec%2Fdownload%2Fsourcemap-codec-1.4.6.tgz#e30a74f0402bad09807640d39e971090a08ce1e9" ->>>>>>> next integrity sha1-4wp08EArrQmAdkDTnpcQkKCM4ek= space-separated-tokens@^1.0.0: