diff --git a/examples/gallery/basic/demo/meta.json b/examples/gallery/basic/demo/meta.json index 7c0f0e3968..2510cc7524 100644 --- a/examples/gallery/basic/demo/meta.json +++ b/examples/gallery/basic/demo/meta.json @@ -6,33 +6,33 @@ "demos": [ { "filename": "column_dark.js", - "title": "", + "title": "3D柱图深色", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7COqR4wCc6QAAAAAAAAAAABkARQnAQ" }, { "filename": "arcCircle.js", - "title": "", + "title": "弧线地图", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ" }, { "filename": "bus_dark.js", - "title": "", + "title": "公交线路深色", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j-P8RaJMEvAAAAAAAAAAAABkARQnAQ" }, { "filename": "light.js", - "title": "", + "title": "蜂窝图3D", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ" }, { "filename": "point.js", - "title": "", + "title": "海量点", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ" } , { "filename": "normal.js", - "title": "", + "title": "亮度图", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ" } ] diff --git a/examples/line/line/demo/isoline.js b/examples/line/line/demo/isoline.js deleted file mode 100644 index feebbd0066..0000000000 --- a/examples/line/line/demo/isoline.js +++ /dev/null @@ -1,42 +0,0 @@ -import { Scene, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; - -const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - pitch: 0, - style: 'light', - center: [ 104.117492, 36.492696 ], - zoom: 3.89 - }) -}); - -fetch( - 'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json' -) - .then(res => res.json()) - .then(data => { - const layer = new LineLayer({}) - .source(data) - .scale('value', { - type: 'quantile' - }) - .size('value', [ 0.5, 1, 1.5, 2 ]) - .shape('line') - .color( - 'value', - [ - '#0A3663', - '#1558AC', - '#3771D9', - '#4D89E5', - '#64A5D3', - '#72BED6', - '#83CED6', - '#A6E1E0', - '#B8EFE2', - '#D7F9F0' - ].reverse() - ); - scene.addLayer(layer); - }); diff --git a/examples/tutorial/data/demo/data_update.js b/examples/tutorial/data/demo/data_update.js index e7fc86881a..f813bdc4a7 100644 --- a/examples/tutorial/data/demo/data_update.js +++ b/examples/tutorial/data/demo/data_update.js @@ -25,6 +25,10 @@ function pointOnCircle(angle) { }] }; } + +scene.on('loaded', () => { + // animateMarker(0); +}); const layer = new PointLayer() .source(pointOnCircle(0)) .shape('circle') @@ -36,11 +40,7 @@ const layer = new PointLayer() opacity: 1 }); scene.addLayer(layer); -function animateMarker(timestamp) { - layer.setData(pointOnCircle(timestamp / 1000)); - requestAnimationFrame(animateMarker); -} -layer.on('inited', () => { - animateMarker(0); -}); - +// function animateMarker(timestamp) { +// layer.setData(pointOnCircle(timestamp / 1000)); +// requestAnimationFrame(animateMarker); +// } diff --git a/examples/tutorial/map/demo/amapInstance.js b/examples/tutorial/map/demo/amapInstance.js index 25ce7fd595..3d1df3299d 100644 --- a/examples/tutorial/map/demo/amapInstance.js +++ b/examples/tutorial/map/demo/amapInstance.js @@ -1,14 +1,56 @@ -import { Scene } from '@antv/l7'; +import { Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; -const map = new AMap.Map('container', { - resizeEnable: true, // 是否监控地图容器尺寸变化 - zoom: 11, // 初始化地图层级 - center: [ 116.397428, 39.90923 ] // 初始化地图中心点 -}); -new Scene({ - id: 'map', - map: new GaodeMap({ - mapInstance: map - }) -}); +window.onLoad = function() { + const map = new AMap.Map('map', { + viewMode: '3D', + pitch: 0, + mapStyle: 'amap://styles/darkblue', + center: [ 121.435159, 31.256971 ], + zoom: 14.89, + minZoom: 10 + }); + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + mapInstance: map + }) + }); + 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('name', [ + 'circle', + 'triangle', + 'square', + 'pentagon', + 'hexagon', + 'octogon', + 'hexagram', + 'rhombus', + 'vesica' + ]) + .size('unit_price', [ 10, 25 ]) + .color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ]) + .style({ + opacity: 0.3, + strokeWidth: 2 + }); + scene.addLayer(pointLayer); + }); +}; +const url = 'https://webapi.amap.com/maps?v=1.4.15&key=15cd8a57710d40c9b7c0e3cc120f1200&callback=onLoad'; +const jsapi = document.createElement('script'); +jsapi.charset = 'utf-8'; +jsapi.src = url; +document.head.appendChild(jsapi); diff --git a/examples/tutorial/map/demo/meta.json b/examples/tutorial/map/demo/meta.json index 17980c8053..329fc51eb9 100644 --- a/examples/tutorial/map/demo/meta.json +++ b/examples/tutorial/map/demo/meta.json @@ -13,6 +13,11 @@ "filename": "mapbox.js", "title": "MapBox底图", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "amapInstance.js", + "title": "通过高德地图实例化", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ" } ] } diff --git a/package.json b/package.json index 6278e6e42c..a1dba99268 100644 --- a/package.json +++ b/package.json @@ -166,8 +166,7 @@ } }, "resolutions": { - "../core-js": "3", - "**/**/fsevents": "^2.1.2" + "../core-js": "3" }, "tnpm": { "mode": "yarn"