From df05e07f2b8b43bb0d13dc49e70e6d37f49875c7 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Thu, 21 Apr 2022 11:22:25 +0800 Subject: [PATCH] docs: remove unnecessary data --- docs/api/heatmap_layer/heatmap.zh.md | 2 +- .../administrative/demo/china-map.ts | 281 ++++------------ examples/earth/arc3d/demo/flyline.js | 51 +-- examples/earth/point/demo/cylinder.js | 292 ++--------------- examples/earth/point/demo/point.js | 291 ++--------------- examples/heatmap/grid/demo/grid1.js | 53 --- examples/heatmap/grid/demo/meta.json | 6 - examples/line/animate/demo/meta.json | 19 +- .../line/animate/demo/trip_animate_dark.js | 55 ---- examples/line/animate/demo/world.js | 96 ------ examples/line/animate/demo/world2.js | 99 ------ examples/line/path/demo/meta.json | 5 - examples/line/path/demo/road_light.js | 32 -- examples/point/chart/demo/meta.json | 5 - examples/point/chart/demo/ring.js | 116 ------- .../point/column/demo/clumn_shape_light.js | 46 --- examples/point/column/demo/meta.json | 5 - examples/point/image/demo/meta.json | 5 - examples/point/image/demo/road.js | 106 ------ examples/point/text/demo/iconfonts.js | 306 +++++------------- examples/point/text/demo/meta.json | 5 - examples/point/text/demo/simpleCoordinate.js | 228 ++----------- examples/point/text/demo/styleMap.js | 111 +------ examples/point/text/demo/updown.js | 87 ----- .../polygon/fill/demo/china_linear_out.js | 59 ---- examples/polygon/fill/demo/meta.json | 5 - 26 files changed, 246 insertions(+), 2120 deletions(-) delete mode 100644 examples/heatmap/grid/demo/grid1.js delete mode 100644 examples/line/animate/demo/trip_animate_dark.js delete mode 100644 examples/line/animate/demo/world.js delete mode 100644 examples/line/animate/demo/world2.js delete mode 100644 examples/line/path/demo/road_light.js delete mode 100644 examples/point/chart/demo/ring.js delete mode 100644 examples/point/column/demo/clumn_shape_light.js delete mode 100644 examples/point/image/demo/road.js delete mode 100644 examples/point/text/demo/updown.js delete mode 100644 examples/polygon/fill/demo/china_linear_out.js diff --git a/docs/api/heatmap_layer/heatmap.zh.md b/docs/api/heatmap_layer/heatmap.zh.md index b3c24d54dc..09412e6e92 100644 --- a/docs/api/heatmap_layer/heatmap.zh.md +++ b/docs/api/heatmap_layer/heatmap.zh.md @@ -47,6 +47,6 @@ const layer = new HeatmapLayer({}) [在线案例 经典热力 classical](../../../examples/heatmap/heatmap#heatmap) [在线案例 蜂窝热力 hexagon](../../../examples/heatmap/hexagon#light) -[在线案例 网格热力 grid](../../../examples/heatmap/grid#grid1) +[在线案例 网格热力 grid](/zh/examples/heatmap/grid#china) `markdown:docs/common/layer/base.md` diff --git a/examples/choropleth/administrative/demo/china-map.ts b/examples/choropleth/administrative/demo/china-map.ts index c3aff93508..146e4f23d4 100644 --- a/examples/choropleth/administrative/demo/china-map.ts +++ b/examples/choropleth/administrative/demo/china-map.ts @@ -1,179 +1,6 @@ import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; -const ProvinceData = [ - { - name: '云南省', - code: 530000, - value: 17881.12, - }, - { - name: '黑龙江省', - code: 230000, - value: 16361.62, - }, - { - name: '贵州省', - code: 520000, - value: 14806.45, - }, - { - name: '北京市', - code: 110000, - value: 30319.98, - }, - { - name: '河北省', - code: 130000, - value: 36010.27, - }, - { - name: '山西省', - code: 140000, - value: 16818.11, - }, - { - name: '吉林省', - code: 220000, - value: 15074, - }, - { - name: '宁夏回族自治区', - code: 640000, - value: 3705.18, - }, - { - name: '辽宁省', - code: 210000, - value: 25315.35, - }, - { - name: '海南省', - code: 460000, - value: 4832.05, - }, - { - name: '内蒙古自治区', - code: 150000, - value: 17289.22, - }, - { - name: '天津市', - code: 120000, - value: 18809.64, - }, - { - name: '新疆维吾尔自治区', - code: 650000, - value: 12199.08, - }, - { - name: '上海市', - code: 310000, - value: 32679.87, - }, - { - name: '陕西省', - code: 610000, - value: 24438.32, - }, - { - name: '甘肃省', - code: 620000, - value: 8246.07, - }, - { - name: '安徽省', - code: 340000, - value: 30006.82, - }, - { - name: '香港特别行政区', - code: 810000, - value: 0, - }, - { - name: '广东省', - code: 440000, - value: 97277.77, - }, - { - name: '河南省', - code: 410000, - value: 48055.86, - }, - { - name: '湖南省', - code: 430000, - value: 36425.78, - }, - { - name: '江西省', - code: 360000, - value: 21984.78, - }, - { - name: '四川省', - code: 510000, - value: 40678.13, - }, - { - name: '广西壮族自治区', - code: 450000, - value: 20353.51, - }, - { - name: '江苏省', - code: 320000, - value: 92595.4, - }, - { - name: '澳门特别行政区', - code: 820000, - value: null, - }, - { - name: '浙江省', - code: 330000, - value: 56197.15, - }, - { - name: '山东省', - code: 370000, - value: 76469.67, - }, - { - name: '青海省', - code: 630000, - value: 2865.23, - }, - { - name: '重庆市', - code: 500000, - value: 20363.19, - }, - { - name: '福建省', - code: 350000, - value: 35804.04, - }, - { - name: '湖北省', - code: 420000, - value: 39366.55, - }, - { - name: '西藏自治区', - code: 540000, - value: 1477.63, - }, - { - name: '台湾省', - code: 710000, - value: null, - }, -]; - const scene = new Scene({ id: 'map', map: new Mapbox({ @@ -184,57 +11,61 @@ const scene = new Scene({ }), }); -const choropleth = new Choropleth({ - source: { - data: ProvinceData, - joinBy: { - sourceField: 'code', - geoField: 'adcode', - }, - }, - viewLevel: { - level: 'country', - adcode: 100000, - }, - autoFit: true, - color: { - field: 'value', - value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], - scale: { type: 'quantile' }, - }, - style: { - opacity: 1, - stroke: '#ccc', - lineWidth: 0.6, - lineOpacity: 1, - }, - label: { - visible: true, - field: 'name', - style: { - fill: '#000', - opacity: 0.8, - fontSize: 10, - stroke: '#fff', - strokeWidth: 1.5, - textAllowOverlap: false, - padding: [5, 5], - }, - }, - state: { - active: { stroke: 'black', lineWidth: 1 }, - }, - tooltip: { - items: ['name', 'adcode', 'value'], - }, - zoom: { - position: 'bottomright', - }, - legend: { - position: 'bottomleft', - }, -}); - scene.on('loaded', () => { - choropleth.addToScene(scene); + fetch('https://gw.alipayobjects.com/os/bmw-prod/6a5ee962-76df-479c-b49a-9c76662e727d.json') + .then(res => res.json()) + .then(ProvinceData => { + const choropleth = new Choropleth({ + source: { + data: ProvinceData, + joinBy: { + sourceField: 'code', + geoField: 'adcode', + }, + }, + viewLevel: { + level: 'country', + adcode: 100000, + }, + autoFit: true, + color: { + field: 'value', + value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], + scale: { type: 'quantile' }, + }, + style: { + opacity: 1, + stroke: '#ccc', + lineWidth: 0.6, + lineOpacity: 1, + }, + label: { + visible: true, + field: 'name', + style: { + fill: '#000', + opacity: 0.8, + fontSize: 10, + stroke: '#fff', + strokeWidth: 1.5, + textAllowOverlap: false, + padding: [5, 5], + }, + }, + state: { + active: { stroke: 'black', lineWidth: 1 }, + }, + tooltip: { + items: ['name', 'adcode', 'value'], + }, + zoom: { + position: 'bottomright', + }, + legend: { + position: 'bottomleft', + }, + }); + choropleth.addToScene(scene); + }) + }); diff --git a/examples/earth/arc3d/demo/flyline.js b/examples/earth/arc3d/demo/flyline.js index adb73acf50..592248431b 100644 --- a/examples/earth/arc3d/demo/flyline.js +++ b/examples/earth/arc3d/demo/flyline.js @@ -8,30 +8,6 @@ const scene = new Scene({ // TODO: 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色 scene.setBgColor('#333'); -const flydata = [{ coord: [[ 104.195397, 35.86166 ], [ 100.992541, 15.870032 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 114.727669, 4.535277 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 9.501785, 56.26392 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -66.590149, 18.220833 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 174.885971, -40.900557 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 104.990963, 12.565679 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 6.129582999999999, 49.815273 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 8.468945999999999, 60.47202399999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 108.277199, 14.058324 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -95.712891, 37.09024 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 121.49917, 25.12653 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -9.429499000000002, 6.428055 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 127.766922, 35.907757 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 10.451526, 51.165691 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 23.881275, 55.169438 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 34.851612, 31.046051 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 53.847818, 23.424076 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 102.495496, 19.85627 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 21.824312, 39.074208 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 25.48583, 42.733883 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 15.472962, 49.81749199999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 78.96288, 20.593684 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -3.435973, 55.378051 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 33.429859, 35.126413 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 8.227511999999999, 46.818188 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 114.066662, 22.588638 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 14.550072, 47.516231 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 2.213749, 46.227638 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 12.56738, 41.87194 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 105.318756, 61.52401 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 80.77179699999999, 7.873053999999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 5.291265999999999, 52.132633 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 35.243322, 38.963745 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 18.643501, 60.12816100000001 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 25.748151, 61.92410999999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -3.74922, 40.46366700000001 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 113.551538, 22.109432 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 4.469936, 50.503887 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -106.346771, 56.130366 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 138.252924, 36.204824 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 17.679076, 43.915886 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -88.49765, 17.189877 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 25.013607, 58.595272 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 101.975766, 4.210484 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -8.24389, 53.41291 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -8.224454, 39.39987199999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 133.775136, -25.274398 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 121.774017, 12.879721 ]] }]; -const flyLine = new LineLayer({ blend: 'normal' }) - .source(flydata, { - parser: { - type: 'json', - coordinates: 'coord' - } - }) - .color('#b97feb') - .shape('arc3d') - .size(0.5) - .active(true) - .animate({ - interval: 2, - trailLength: 2, - duration: 1 - }) - .style({ - opacity: 1, - segmentNumber: 60, - globalArcHeight: 20 - }); - - const earthlayer = new EarthLayer() .source( 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', @@ -70,7 +46,32 @@ scene.on('loaded', () => { scene.addLayer(atomLayer); scene.addLayer(bloomLayer); - scene.addLayer(flyLine); + fetch('https://gw.alipayobjects.com/os/bmw-prod/20a69b46-3d6d-4ab5-b8b5-150b6aa52c88.json') + .then(res => res.json()) + .then(flydata => { + const flyLine = new LineLayer({ blend: 'normal' }) + .source(flydata, { + parser: { + type: 'json', + coordinates: 'coord' + } + }) + .color('#b97feb') + .shape('arc3d') + .size(0.5) + .active(true) + .animate({ + interval: 2, + trailLength: 2, + duration: 1 + }) + .style({ + opacity: 1, + segmentNumber: 60, + globalArcHeight: 20 + }); + scene.addLayer(flyLine); + }) earthlayer.setEarthTime(4.0); }); diff --git a/examples/earth/point/demo/cylinder.js b/examples/earth/point/demo/cylinder.js index 1d5a9d0ef0..18c893da9d 100644 --- a/examples/earth/point/demo/cylinder.js +++ b/examples/earth/point/demo/cylinder.js @@ -5,277 +5,6 @@ const scene = new Scene({ map: new Earth({}) }); -const d = [ - { lng: 121.61865234375, lat: 25.29437116258816 }, - { lng: 121.058349609375, lat: 25.015928763367857 }, - { lng: 120.7177734375, lat: 24.587090339209634 }, - { lng: 120.28930664062499, lat: 23.936054914599815 }, - { lng: 120.12451171875, lat: 23.553916518321625 }, - { lng: 120.08056640625, lat: 23.120153621695614 }, - { lng: 120.234375, lat: 22.867317960075614 }, - { lng: 120.43212890625, lat: 22.52270570348246 }, - { lng: 120.65185546875, lat: 22.370396344320053 }, - { lng: 120.750732421875, lat: 21.922663209325922 }, - { lng: 120.948486328125, lat: 22.268764039073968 }, - { lng: 121.124267578125, lat: 22.806567100271522 }, - { lng: 121.56372070312499, lat: 23.915970370510227 }, - { lng: 121.88232421875, lat: 24.557116164309626 }, - { lng: 121.95922851562501, lat: 25.075648445630527 }, - { lng: 109.97314453125, lat: 20.076570104545173 }, - { lng: 108.896484375, lat: 19.663280219987662 }, - { lng: 108.61083984375, lat: 18.979025953255267 }, - { lng: 108.80859375, lat: 18.47960905583197 }, - { lng: 109.599609375, lat: 18.35452552912664 }, - { lng: 110.32470703125, lat: 18.771115062337024 }, - { lng: 111.005859375, lat: 19.78738018198621 }, - { lng: 127.657407, lat: 49.76027 }, - { lng: 129.397818, lat: 49.4406 }, - { lng: 130.582293, lat: 48.729687 }, - { lng: 130.987282, lat: 47.790132 }, - { lng: 132.506672, lat: 47.78897 }, - { lng: 133.373596, lat: 48.183442 }, - { lng: 135.026311, lat: 48.47823 }, - { lng: 134.500814, lat: 47.57844 }, - { lng: 134.112362, lat: 47.212467 }, - { lng: 133.769644, lat: 46.116927 }, - { lng: 133.097127, lat: 45.144066 }, - { lng: 131.883454, lat: 45.321162 }, - { lng: 131.025212, lat: 44.967953 }, - { lng: 131.288555, lat: 44.11152 }, - { lng: 131.144688, lat: 42.92999 }, - { lng: 130.633866, lat: 42.903015 }, - { lng: 130.640016, lat: 42.395009 }, - { lng: 129.994267, lat: 42.985387 }, - { lng: 129.596669, lat: 42.424982 }, - { lng: 128.052215, lat: 41.994285 }, - { lng: 128.208433, lat: 41.466772 }, - { lng: 127.343783, lat: 41.503152 }, - { lng: 126.869083, lat: 41.816569 }, - { lng: 126.182045, lat: 41.107336 }, - { lng: 125.079942, lat: 40.569824 }, - { lng: 124.265625, lat: 39.928493 }, - { lng: 122.86757, lat: 39.637788 }, - { lng: 122.131388, lat: 39.170452 }, - { lng: 121.054554, lat: 38.897471 }, - { lng: 121.585995, lat: 39.360854 }, - { lng: 121.376757, lat: 39.750261 }, - { lng: 122.168595, lat: 40.422443 }, - { lng: 121.640359, lat: 40.94639 }, - { lng: 120.768629, lat: 40.593388 }, - { lng: 119.639602, lat: 39.898056 }, - { lng: 119.023464, lat: 39.252333 }, - { lng: 118.042749, lat: 39.204274 }, - { lng: 117.532702, lat: 38.737636 }, - { lng: 118.059699, lat: 38.061476 }, - { lng: 118.87815, lat: 37.897325 }, - { lng: 118.911636, lat: 37.448464 }, - { lng: 119.702802, lat: 37.156389 }, - { lng: 120.823457, lat: 37.870428 }, - { lng: 121.711259, lat: 37.481123 }, - { lng: 122.357937, lat: 37.454484 }, - { lng: 122.519995, lat: 36.930614 }, - { lng: 121.104164, lat: 36.651329 }, - { lng: 120.637009, lat: 36.11144 }, - { lng: 119.664562, lat: 35.609791 }, - { lng: 119.151208, lat: 34.909859 }, - { lng: 120.227525, lat: 34.360332 }, - { lng: 120.620369, lat: 33.376723 }, - { lng: 121.229014, lat: 32.460319 }, - { lng: 121.908146, lat: 31.692174 }, - { lng: 121.891919, lat: 30.949352 }, - { lng: 121.264257, lat: 30.676267 }, - { lng: 121.503519, lat: 30.142915 }, - { lng: 122.092114, lat: 29.83252 }, - { lng: 121.938428, lat: 29.018022 }, - { lng: 121.684439, lat: 28.225513 }, - { lng: 121.125661, lat: 28.135673 }, - { lng: 120.395473, lat: 27.053207 }, - { lng: 119.585497, lat: 25.740781 }, - { lng: 118.656871, lat: 24.547391 }, - { lng: 117.281606, lat: 23.624501 }, - { lng: 115.890735, lat: 22.782873 }, - { lng: 114.763827, lat: 22.668074 }, - { lng: 114.152547, lat: 22.22376 }, - { lng: 113.80678, lat: 22.54834 }, - { lng: 113.241078, lat: 22.051367 }, - { lng: 111.843592, lat: 21.550494 }, - { lng: 110.785466, lat: 21.397144 }, - { lng: 110.444039, lat: 20.341033 }, - { lng: 109.889861, lat: 20.282457 }, - { lng: 109.627655, lat: 21.008227 }, - { lng: 109.864488, lat: 21.395051 }, - { lng: 108.522813, lat: 21.715212 }, - { lng: 108.05018, lat: 21.55238 }, - { lng: 107.04342, lat: 21.811899 }, - { lng: 106.567273, lat: 22.218205 }, - { lng: 106.725403, lat: 22.794268 }, - { lng: 105.811247, lat: 22.976892 }, - { lng: 105.329209, lat: 23.352063 }, - { lng: 104.476858, lat: 22.81915 }, - { lng: 103.504515, lat: 22.703757 }, - { lng: 102.706992, lat: 22.708795 }, - { lng: 102.170436, lat: 22.464753 }, - { lng: 101.652018, lat: 22.318199 }, - { lng: 101.80312, lat: 21.174367 }, - { lng: 101.270026, lat: 21.201652 }, - { lng: 101.180005, lat: 21.436573 }, - { lng: 101.150033, lat: 21.849984 }, - { lng: 100.416538, lat: 21.558839 }, - { lng: 99.983489, lat: 21.742937 }, - { lng: 99.240899, lat: 22.118314 }, - { lng: 99.531992, lat: 22.949039 }, - { lng: 98.898749, lat: 23.142722 }, - { lng: 98.660262, lat: 24.063286 }, - { lng: 97.60472, lat: 23.897405 }, - { lng: 97.724609, lat: 25.083637 }, - { lng: 98.671838, lat: 25.918703 }, - { lng: 98.712094, lat: 26.743536 }, - { lng: 98.68269, lat: 27.508812 }, - { lng: 98.246231, lat: 27.747221 }, - { lng: 97.911988, lat: 28.335945 }, - { lng: 97.327114, lat: 28.261583 }, - { lng: 96.248833, lat: 28.411031 }, - { lng: 96.586591, lat: 28.83098 }, - { lng: 96.117679, lat: 29.452802 }, - { lng: 95.404802, lat: 29.031717 }, - { lng: 94.56599, lat: 29.277438 }, - { lng: 93.413348, lat: 28.640629 }, - { lng: 92.503119, lat: 27.896876 }, - { lng: 91.696657, lat: 27.771742 }, - { lng: 91.258854, lat: 28.040614 }, - { lng: 90.730514, lat: 28.064954 }, - { lng: 90.015829, lat: 28.296439 }, - { lng: 89.47581, lat: 28.042759 }, - { lng: 88.814248, lat: 27.299316 }, - { lng: 88.730326, lat: 28.086865 }, - { lng: 88.120441, lat: 27.876542 }, - { lng: 86.954517, lat: 27.974262 }, - { lng: 85.82332, lat: 28.203576 }, - { lng: 85.011638, lat: 28.642774 }, - { lng: 84.23458, lat: 28.839894 }, - { lng: 83.898993, lat: 29.320226 }, - { lng: 83.337115, lat: 29.463732 }, - { lng: 82.327513, lat: 30.115268 }, - { lng: 81.525804, lat: 30.422717 }, - { lng: 81.111256, lat: 30.183481 }, - { lng: 79.721367, lat: 30.882715 }, - { lng: 78.738894, lat: 31.515906 }, - { lng: 78.458446, lat: 32.618164 }, - { lng: 79.176129, lat: 32.48378 }, - { lng: 79.208892, lat: 32.994395 }, - { lng: 78.811086, lat: 33.506198 }, - { lng: 78.912269, lat: 34.321936 }, - { lng: 77.837451, lat: 35.49401 }, - { lng: 76.192848, lat: 35.898403 }, - { lng: 75.896897, lat: 36.666806 }, - { lng: 75.158028, lat: 37.133031 }, - { lng: 74.980002, lat: 37.41999 }, - { lng: 74.829986, lat: 37.990007 }, - { lng: 74.864816, lat: 38.378846 }, - { lng: 74.257514, lat: 38.606507 }, - { lng: 73.928852, lat: 38.505815 }, - { lng: 73.675379, lat: 39.431237 }, - { lng: 73.960013, lat: 39.660008 }, - { lng: 73.822244, lat: 39.893973 }, - { lng: 74.776862, lat: 40.366425 }, - { lng: 75.467828, lat: 40.562072 }, - { lng: 76.526368, lat: 40.427946 }, - { lng: 76.904484, lat: 41.066486 }, - { lng: 78.187197, lat: 41.185316 }, - { lng: 78.543661, lat: 41.582243 }, - { lng: 80.11943, lat: 42.123941 }, - { lng: 80.25999, lat: 42.349999 }, - { lng: 80.18015, lat: 42.920068 }, - { lng: 80.866206, lat: 43.180362 }, - { lng: 79.966106, lat: 44.917517 }, - { lng: 81.947071, lat: 45.317027 }, - { lng: 82.458926, lat: 45.53965 }, - { lng: 83.180484, lat: 47.330031 }, - { lng: 85.16429, lat: 47.000956 }, - { lng: 85.720484, lat: 47.452969 }, - { lng: 85.768233, lat: 48.455751 }, - { lng: 86.598776, lat: 48.549182 }, - { lng: 87.35997, lat: 49.214981 }, - { lng: 87.751264, lat: 49.297198 }, - { lng: 88.013832, lat: 48.599463 }, - { lng: 88.854298, lat: 48.069082 }, - { lng: 90.280826, lat: 47.693549 }, - { lng: 90.970809, lat: 46.888146 }, - { lng: 90.585768, lat: 45.719716 }, - { lng: 90.94554, lat: 45.286073 }, - { lng: 92.133891, lat: 45.115076 }, - { lng: 93.480734, lat: 44.975472 }, - { lng: 94.688929, lat: 44.352332 }, - { lng: 95.306875, lat: 44.241331 }, - { lng: 95.762455, lat: 43.319449 }, - { lng: 96.349396, lat: 42.725635 }, - { lng: 97.451757, lat: 42.74889 }, - { lng: 99.515817, lat: 42.524691 }, - { lng: 100.845866, lat: 42.663804 }, - { lng: 101.83304, lat: 42.514873 }, - { lng: 103.312278, lat: 41.907468 }, - { lng: 104.522282, lat: 41.908347 }, - { lng: 104.964994, lat: 41.59741 }, - { lng: 106.129316, lat: 42.134328 }, - { lng: 107.744773, lat: 42.481516 }, - { lng: 109.243596, lat: 42.519446 }, - { lng: 110.412103, lat: 42.871234 }, - { lng: 111.129682, lat: 43.406834 }, - { lng: 111.829588, lat: 43.743118 }, - { lng: 111.667737, lat: 44.073176 }, - { lng: 111.348377, lat: 44.457442 }, - { lng: 111.873306, lat: 45.102079 }, - { lng: 112.436062, lat: 45.011646 }, - { lng: 113.463907, lat: 44.808893 }, - { lng: 114.460332, lat: 45.339817 }, - { lng: 115.985096, lat: 45.727235 }, - { lng: 116.717868, lat: 46.388202 }, - { lng: 117.421701, lat: 46.672733 }, - { lng: 118.874326, lat: 46.805412 }, - { lng: 119.66327, lat: 46.69268 }, - { lng: 119.772824, lat: 47.048059 }, - { lng: 118.866574, lat: 47.74706 }, - { lng: 118.064143, lat: 48.06673 }, - { lng: 117.295507, lat: 47.697709 }, - { lng: 116.308953, lat: 47.85341 }, - { lng: 115.742837, lat: 47.726545 }, - { lng: 115.485282, lat: 48.135383 }, - { lng: 116.191802, lat: 49.134598 }, - { lng: 116.678801, lat: 49.888531 }, - { lng: 117.879244, lat: 49.510983 }, - { lng: 119.288461, lat: 50.142883 }, - { lng: 119.279366, lat: 50.582908 }, - { lng: 120.18205, lat: 51.643566 }, - { lng: 120.738191, lat: 51.964115 }, - { lng: 120.725789, lat: 52.516226 }, - { lng: 120.177089, lat: 52.753886 }, - { lng: 121.003085, lat: 53.251401 }, - { lng: 122.245748, lat: 53.431726 }, - { lng: 123.571507, lat: 53.458804 }, - { lng: 125.068211, lat: 53.161045 }, - { lng: 125.946349, lat: 52.792799 }, - { lng: 126.564399, lat: 51.784255 }, - { lng: 126.939157, lat: 51.353894 }, - { lng: 127.287456, lat: 50.739797 }, - { lng: 127.657407, lat: 49.76027 } -]; - -const pointlayer = new PointLayer() - .source( - d, - { - parser: { - type: 'json', - x: 'lng', - y: 'lat' - } - } - ) - .shape('cylinder') - .color('#f00') - .size('', () => [ 1, 1, 10 ]) - .active(true); - const earthlayer = new EarthLayer() .source( 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', @@ -311,7 +40,26 @@ const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere') scene.on('loaded', () => { scene.addLayer(earthlayer); - scene.addLayer(pointlayer); + + fetch('https://gw.alipayobjects.com/os/bmw-prod/efef6c2b-2922-4c03-b9e0-d3743f68eaf2.json') + .then(res => res.json()) + .then(data => { + const pointlayer = new PointLayer() + .source(data, + { + parser: { + type: 'json', + x: 'lng', + y: 'lat' + } + } + ) + .shape('cylinder') + .color('#f00') + .size('', () => [ 1, 1, 10 ]) + .active(true); + scene.addLayer(pointlayer); + }) scene.addLayer(atomLayer); scene.addLayer(bloomLayer); diff --git a/examples/earth/point/demo/point.js b/examples/earth/point/demo/point.js index 34eb5c79e7..0f992d2442 100644 --- a/examples/earth/point/demo/point.js +++ b/examples/earth/point/demo/point.js @@ -5,277 +5,6 @@ const scene = new Scene({ map: new Earth({}) }); -const d = [ - { lng: 121.61865234375, lat: 25.29437116258816 }, - { lng: 121.058349609375, lat: 25.015928763367857 }, - { lng: 120.7177734375, lat: 24.587090339209634 }, - { lng: 120.28930664062499, lat: 23.936054914599815 }, - { lng: 120.12451171875, lat: 23.553916518321625 }, - { lng: 120.08056640625, lat: 23.120153621695614 }, - { lng: 120.234375, lat: 22.867317960075614 }, - { lng: 120.43212890625, lat: 22.52270570348246 }, - { lng: 120.65185546875, lat: 22.370396344320053 }, - { lng: 120.750732421875, lat: 21.922663209325922 }, - { lng: 120.948486328125, lat: 22.268764039073968 }, - { lng: 121.124267578125, lat: 22.806567100271522 }, - { lng: 121.56372070312499, lat: 23.915970370510227 }, - { lng: 121.88232421875, lat: 24.557116164309626 }, - { lng: 121.95922851562501, lat: 25.075648445630527 }, - { lng: 109.97314453125, lat: 20.076570104545173 }, - { lng: 108.896484375, lat: 19.663280219987662 }, - { lng: 108.61083984375, lat: 18.979025953255267 }, - { lng: 108.80859375, lat: 18.47960905583197 }, - { lng: 109.599609375, lat: 18.35452552912664 }, - { lng: 110.32470703125, lat: 18.771115062337024 }, - { lng: 111.005859375, lat: 19.78738018198621 }, - { lng: 127.657407, lat: 49.76027 }, - { lng: 129.397818, lat: 49.4406 }, - { lng: 130.582293, lat: 48.729687 }, - { lng: 130.987282, lat: 47.790132 }, - { lng: 132.506672, lat: 47.78897 }, - { lng: 133.373596, lat: 48.183442 }, - { lng: 135.026311, lat: 48.47823 }, - { lng: 134.500814, lat: 47.57844 }, - { lng: 134.112362, lat: 47.212467 }, - { lng: 133.769644, lat: 46.116927 }, - { lng: 133.097127, lat: 45.144066 }, - { lng: 131.883454, lat: 45.321162 }, - { lng: 131.025212, lat: 44.967953 }, - { lng: 131.288555, lat: 44.11152 }, - { lng: 131.144688, lat: 42.92999 }, - { lng: 130.633866, lat: 42.903015 }, - { lng: 130.640016, lat: 42.395009 }, - { lng: 129.994267, lat: 42.985387 }, - { lng: 129.596669, lat: 42.424982 }, - { lng: 128.052215, lat: 41.994285 }, - { lng: 128.208433, lat: 41.466772 }, - { lng: 127.343783, lat: 41.503152 }, - { lng: 126.869083, lat: 41.816569 }, - { lng: 126.182045, lat: 41.107336 }, - { lng: 125.079942, lat: 40.569824 }, - { lng: 124.265625, lat: 39.928493 }, - { lng: 122.86757, lat: 39.637788 }, - { lng: 122.131388, lat: 39.170452 }, - { lng: 121.054554, lat: 38.897471 }, - { lng: 121.585995, lat: 39.360854 }, - { lng: 121.376757, lat: 39.750261 }, - { lng: 122.168595, lat: 40.422443 }, - { lng: 121.640359, lat: 40.94639 }, - { lng: 120.768629, lat: 40.593388 }, - { lng: 119.639602, lat: 39.898056 }, - { lng: 119.023464, lat: 39.252333 }, - { lng: 118.042749, lat: 39.204274 }, - { lng: 117.532702, lat: 38.737636 }, - { lng: 118.059699, lat: 38.061476 }, - { lng: 118.87815, lat: 37.897325 }, - { lng: 118.911636, lat: 37.448464 }, - { lng: 119.702802, lat: 37.156389 }, - { lng: 120.823457, lat: 37.870428 }, - { lng: 121.711259, lat: 37.481123 }, - { lng: 122.357937, lat: 37.454484 }, - { lng: 122.519995, lat: 36.930614 }, - { lng: 121.104164, lat: 36.651329 }, - { lng: 120.637009, lat: 36.11144 }, - { lng: 119.664562, lat: 35.609791 }, - { lng: 119.151208, lat: 34.909859 }, - { lng: 120.227525, lat: 34.360332 }, - { lng: 120.620369, lat: 33.376723 }, - { lng: 121.229014, lat: 32.460319 }, - { lng: 121.908146, lat: 31.692174 }, - { lng: 121.891919, lat: 30.949352 }, - { lng: 121.264257, lat: 30.676267 }, - { lng: 121.503519, lat: 30.142915 }, - { lng: 122.092114, lat: 29.83252 }, - { lng: 121.938428, lat: 29.018022 }, - { lng: 121.684439, lat: 28.225513 }, - { lng: 121.125661, lat: 28.135673 }, - { lng: 120.395473, lat: 27.053207 }, - { lng: 119.585497, lat: 25.740781 }, - { lng: 118.656871, lat: 24.547391 }, - { lng: 117.281606, lat: 23.624501 }, - { lng: 115.890735, lat: 22.782873 }, - { lng: 114.763827, lat: 22.668074 }, - { lng: 114.152547, lat: 22.22376 }, - { lng: 113.80678, lat: 22.54834 }, - { lng: 113.241078, lat: 22.051367 }, - { lng: 111.843592, lat: 21.550494 }, - { lng: 110.785466, lat: 21.397144 }, - { lng: 110.444039, lat: 20.341033 }, - { lng: 109.889861, lat: 20.282457 }, - { lng: 109.627655, lat: 21.008227 }, - { lng: 109.864488, lat: 21.395051 }, - { lng: 108.522813, lat: 21.715212 }, - { lng: 108.05018, lat: 21.55238 }, - { lng: 107.04342, lat: 21.811899 }, - { lng: 106.567273, lat: 22.218205 }, - { lng: 106.725403, lat: 22.794268 }, - { lng: 105.811247, lat: 22.976892 }, - { lng: 105.329209, lat: 23.352063 }, - { lng: 104.476858, lat: 22.81915 }, - { lng: 103.504515, lat: 22.703757 }, - { lng: 102.706992, lat: 22.708795 }, - { lng: 102.170436, lat: 22.464753 }, - { lng: 101.652018, lat: 22.318199 }, - { lng: 101.80312, lat: 21.174367 }, - { lng: 101.270026, lat: 21.201652 }, - { lng: 101.180005, lat: 21.436573 }, - { lng: 101.150033, lat: 21.849984 }, - { lng: 100.416538, lat: 21.558839 }, - { lng: 99.983489, lat: 21.742937 }, - { lng: 99.240899, lat: 22.118314 }, - { lng: 99.531992, lat: 22.949039 }, - { lng: 98.898749, lat: 23.142722 }, - { lng: 98.660262, lat: 24.063286 }, - { lng: 97.60472, lat: 23.897405 }, - { lng: 97.724609, lat: 25.083637 }, - { lng: 98.671838, lat: 25.918703 }, - { lng: 98.712094, lat: 26.743536 }, - { lng: 98.68269, lat: 27.508812 }, - { lng: 98.246231, lat: 27.747221 }, - { lng: 97.911988, lat: 28.335945 }, - { lng: 97.327114, lat: 28.261583 }, - { lng: 96.248833, lat: 28.411031 }, - { lng: 96.586591, lat: 28.83098 }, - { lng: 96.117679, lat: 29.452802 }, - { lng: 95.404802, lat: 29.031717 }, - { lng: 94.56599, lat: 29.277438 }, - { lng: 93.413348, lat: 28.640629 }, - { lng: 92.503119, lat: 27.896876 }, - { lng: 91.696657, lat: 27.771742 }, - { lng: 91.258854, lat: 28.040614 }, - { lng: 90.730514, lat: 28.064954 }, - { lng: 90.015829, lat: 28.296439 }, - { lng: 89.47581, lat: 28.042759 }, - { lng: 88.814248, lat: 27.299316 }, - { lng: 88.730326, lat: 28.086865 }, - { lng: 88.120441, lat: 27.876542 }, - { lng: 86.954517, lat: 27.974262 }, - { lng: 85.82332, lat: 28.203576 }, - { lng: 85.011638, lat: 28.642774 }, - { lng: 84.23458, lat: 28.839894 }, - { lng: 83.898993, lat: 29.320226 }, - { lng: 83.337115, lat: 29.463732 }, - { lng: 82.327513, lat: 30.115268 }, - { lng: 81.525804, lat: 30.422717 }, - { lng: 81.111256, lat: 30.183481 }, - { lng: 79.721367, lat: 30.882715 }, - { lng: 78.738894, lat: 31.515906 }, - { lng: 78.458446, lat: 32.618164 }, - { lng: 79.176129, lat: 32.48378 }, - { lng: 79.208892, lat: 32.994395 }, - { lng: 78.811086, lat: 33.506198 }, - { lng: 78.912269, lat: 34.321936 }, - { lng: 77.837451, lat: 35.49401 }, - { lng: 76.192848, lat: 35.898403 }, - { lng: 75.896897, lat: 36.666806 }, - { lng: 75.158028, lat: 37.133031 }, - { lng: 74.980002, lat: 37.41999 }, - { lng: 74.829986, lat: 37.990007 }, - { lng: 74.864816, lat: 38.378846 }, - { lng: 74.257514, lat: 38.606507 }, - { lng: 73.928852, lat: 38.505815 }, - { lng: 73.675379, lat: 39.431237 }, - { lng: 73.960013, lat: 39.660008 }, - { lng: 73.822244, lat: 39.893973 }, - { lng: 74.776862, lat: 40.366425 }, - { lng: 75.467828, lat: 40.562072 }, - { lng: 76.526368, lat: 40.427946 }, - { lng: 76.904484, lat: 41.066486 }, - { lng: 78.187197, lat: 41.185316 }, - { lng: 78.543661, lat: 41.582243 }, - { lng: 80.11943, lat: 42.123941 }, - { lng: 80.25999, lat: 42.349999 }, - { lng: 80.18015, lat: 42.920068 }, - { lng: 80.866206, lat: 43.180362 }, - { lng: 79.966106, lat: 44.917517 }, - { lng: 81.947071, lat: 45.317027 }, - { lng: 82.458926, lat: 45.53965 }, - { lng: 83.180484, lat: 47.330031 }, - { lng: 85.16429, lat: 47.000956 }, - { lng: 85.720484, lat: 47.452969 }, - { lng: 85.768233, lat: 48.455751 }, - { lng: 86.598776, lat: 48.549182 }, - { lng: 87.35997, lat: 49.214981 }, - { lng: 87.751264, lat: 49.297198 }, - { lng: 88.013832, lat: 48.599463 }, - { lng: 88.854298, lat: 48.069082 }, - { lng: 90.280826, lat: 47.693549 }, - { lng: 90.970809, lat: 46.888146 }, - { lng: 90.585768, lat: 45.719716 }, - { lng: 90.94554, lat: 45.286073 }, - { lng: 92.133891, lat: 45.115076 }, - { lng: 93.480734, lat: 44.975472 }, - { lng: 94.688929, lat: 44.352332 }, - { lng: 95.306875, lat: 44.241331 }, - { lng: 95.762455, lat: 43.319449 }, - { lng: 96.349396, lat: 42.725635 }, - { lng: 97.451757, lat: 42.74889 }, - { lng: 99.515817, lat: 42.524691 }, - { lng: 100.845866, lat: 42.663804 }, - { lng: 101.83304, lat: 42.514873 }, - { lng: 103.312278, lat: 41.907468 }, - { lng: 104.522282, lat: 41.908347 }, - { lng: 104.964994, lat: 41.59741 }, - { lng: 106.129316, lat: 42.134328 }, - { lng: 107.744773, lat: 42.481516 }, - { lng: 109.243596, lat: 42.519446 }, - { lng: 110.412103, lat: 42.871234 }, - { lng: 111.129682, lat: 43.406834 }, - { lng: 111.829588, lat: 43.743118 }, - { lng: 111.667737, lat: 44.073176 }, - { lng: 111.348377, lat: 44.457442 }, - { lng: 111.873306, lat: 45.102079 }, - { lng: 112.436062, lat: 45.011646 }, - { lng: 113.463907, lat: 44.808893 }, - { lng: 114.460332, lat: 45.339817 }, - { lng: 115.985096, lat: 45.727235 }, - { lng: 116.717868, lat: 46.388202 }, - { lng: 117.421701, lat: 46.672733 }, - { lng: 118.874326, lat: 46.805412 }, - { lng: 119.66327, lat: 46.69268 }, - { lng: 119.772824, lat: 47.048059 }, - { lng: 118.866574, lat: 47.74706 }, - { lng: 118.064143, lat: 48.06673 }, - { lng: 117.295507, lat: 47.697709 }, - { lng: 116.308953, lat: 47.85341 }, - { lng: 115.742837, lat: 47.726545 }, - { lng: 115.485282, lat: 48.135383 }, - { lng: 116.191802, lat: 49.134598 }, - { lng: 116.678801, lat: 49.888531 }, - { lng: 117.879244, lat: 49.510983 }, - { lng: 119.288461, lat: 50.142883 }, - { lng: 119.279366, lat: 50.582908 }, - { lng: 120.18205, lat: 51.643566 }, - { lng: 120.738191, lat: 51.964115 }, - { lng: 120.725789, lat: 52.516226 }, - { lng: 120.177089, lat: 52.753886 }, - { lng: 121.003085, lat: 53.251401 }, - { lng: 122.245748, lat: 53.431726 }, - { lng: 123.571507, lat: 53.458804 }, - { lng: 125.068211, lat: 53.161045 }, - { lng: 125.946349, lat: 52.792799 }, - { lng: 126.564399, lat: 51.784255 }, - { lng: 126.939157, lat: 51.353894 }, - { lng: 127.287456, lat: 50.739797 }, - { lng: 127.657407, lat: 49.76027 } -]; - -const pointlayer = new PointLayer() - .source( - d, - { - parser: { - type: 'json', - x: 'lng', - y: 'lat' - } - } - ) - .shape('circle') - .color('#f00') - .size(10) - .active(true); - const earthlayer = new EarthLayer() .source( 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', @@ -311,7 +40,25 @@ const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere') scene.on('loaded', () => { scene.addLayer(earthlayer); - scene.addLayer(pointlayer); + fetch('https://gw.alipayobjects.com/os/bmw-prod/efef6c2b-2922-4c03-b9e0-d3743f68eaf2.json') + .then(res => res.json()) + .then(data => { + const pointlayer = new PointLayer() + .source(data, + { + parser: { + type: 'json', + x: 'lng', + y: 'lat' + } + } + ) + .shape('circle') + .color('#f00') + .size(10) + .active(true); + scene.addLayer(pointlayer); + }) scene.addLayer(atomLayer); scene.addLayer(bloomLayer); diff --git a/examples/heatmap/grid/demo/grid1.js b/examples/heatmap/grid/demo/grid1.js deleted file mode 100644 index 8486c92a90..0000000000 --- a/examples/heatmap/grid/demo/grid1.js +++ /dev/null @@ -1,53 +0,0 @@ -import { Scene, HeatmapLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; - -const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - pitch: 0, - center: [ 110.097892, 33.853662 ], - zoom: 4.056 - }) -}); -scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' - ) - .then(res => res.text()) - .then(data => { - const layer = new HeatmapLayer({}) - .source(data, { - parser: { - type: 'csv', - x: 'lng', - y: 'lat' - }, - transforms: [ - { - type: 'grid', - size: 10000, - field: 'v', - method: 'sum' - } - ] - }) - .shape('square') - .style({ - coverage: 1, - angle: 0 - }) - .color( - 'count', - [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#FF40F3', - '#9415FF', - '#421EB2' - ].reverse() - ); - scene.addLayer(layer); - }); -}); diff --git a/examples/heatmap/grid/demo/meta.json b/examples/heatmap/grid/demo/meta.json index d2cd9a6ff6..421169a882 100644 --- a/examples/heatmap/grid/demo/meta.json +++ b/examples/heatmap/grid/demo/meta.json @@ -14,12 +14,6 @@ "title": "网格热力图", "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*XPBuSIPPgsgAAAAAAAAAAABkARQnAQ" }, - { - "filename": "grid1.js", - "title": "", - "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Uo9oQolgoxYAAAAAAAAAAABkARQnAQ" - - }, { "filename": "heatmap3.js", "title": "网格布局 圆形", diff --git a/examples/line/animate/demo/meta.json b/examples/line/animate/demo/meta.json index 96d86c7e81..19d485a2c0 100644 --- a/examples/line/animate/demo/meta.json +++ b/examples/line/animate/demo/meta.json @@ -16,33 +16,18 @@ }, { "filename": "plane_animate2.js", - "title": "航向图（平面）", + "title": "航向图", "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*2wDIS5hXKYwAAAAAAAAAAAAAARQnAQ" }, { "filename": "trip_animate.js", - "title": "3D 弧线动画-亮", + "title": "3D 弧线动画", "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*cmB1SLuyB1cAAAAAAAAAAAAAARQnAQ" }, - { - "filename": "trip_animate_dark.js", - "title": "3D 弧线动画-暗", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*r0bPQKrJfJkAAAAAAAAAAAAAARQnAQ" - }, { "filename": "animate_line.js", "title": "轨迹动画", "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*d7PjSo0izNAAAAAAAAAAAAAAARQnAQ" - }, - { - "filename": "world.js", - "title": "流向图", - "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*LKKcRY1G-bcAAAAAAAAAAAAAARQnAQ" - }, - { - "filename": "world2.js", - "title": "流向图", - "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*MD7nRYqG5joAAAAAAAAAAAAAARQnAQ" } ] } diff --git a/examples/line/animate/demo/trip_animate_dark.js b/examples/line/animate/demo/trip_animate_dark.js deleted file mode 100644 index f1d329d594..0000000000 --- a/examples/line/animate/demo/trip_animate_dark.js +++ /dev/null @@ -1,55 +0,0 @@ -import { Scene, LineLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; - -const scene = new Scene({ - id: 'map', - map: new Mapbox({ - pitch: 60, - style: 'dark', - center: [ 104.34278, 41.12554 ], - zoom: 2.94888, - rotation: 42.3999 - }) -}); -scene.on('loaded', () => { - fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') - .then(res => res.text()) - .then(data => { - const layer = new LineLayer({ - blend: 'normal', - enableMultiPassRenderer: true, - passes: [ - [ - 'bloom', - { - bloomBaseRadio: 0.8, - bloomRadius: 2, - bloomIntensity: 1 - } - ] - ] - }) - .source(data, { - parser: { - type: 'csv', - x: 'lng1', - y: 'lat1', - x1: 'lng2', - y1: 'lat2' - } - }) - .size(1) - .shape('arc3d') - .color('#FF7C6A') - .animate({ - enable: true, - interval: 0.1, - trailLength: 0.5, - duration: 2 - }) - .style({ - opacity: 0.8 - }); - scene.addLayer(layer); - }); -}); diff --git a/examples/line/animate/demo/world.js b/examples/line/animate/demo/world.js deleted file mode 100644 index 09734a558b..0000000000 --- a/examples/line/animate/demo/world.js +++ /dev/null @@ -1,96 +0,0 @@ -/* 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 - }) -}); -scene.on('loaded', () => { - Promise.all([ - fetch('https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.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('#41fc9d') - .size(0.5) - .style({ - opacity: 0.4 - }); - const dotPoint = new PointLayer() - .source(dotData, { - parser: { - type: 'json', - x: 'lng', - y: 'lat' - } - }) - .shape('circle') - .color('#ffed11') - .animate(true) - .size(40) - .style({ - opacity: 1.0 - }); - const flyLine = new LineLayer() - .source(flydata, { - parser: { - type: 'json', - coordinates: 'coord' - } - }) - .color('#ff6b34') - .shape('arc3d') - .size(2) - .active(true) - .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/line/animate/demo/world2.js b/examples/line/animate/demo/world2.js deleted file mode 100644 index 9d98c176ca..0000000000 --- a/examples/line/animate/demo/world2.js +++ /dev/null @@ -1,99 +0,0 @@ -/* 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 - }) -}); -scene.on('loaded', () => { - Promise.all([ - fetch('https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.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) - .active(true) - .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/line/path/demo/meta.json b/examples/line/path/demo/meta.json index f626c3e9b6..53bae02401 100644 --- a/examples/line/path/demo/meta.json +++ b/examples/line/path/demo/meta.json @@ -19,11 +19,6 @@ "title": "3D 公交线路-暗", "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*92cnRJiUIf4AAAAAAAAAAAAAARQnAQ" }, - { - "filename": "road_light.js", - "title": "路径light", - "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*oJdZR5mnocwAAAAAAAAAAAAAARQnAQ" - }, { "filename": "road_dark.js", "title": "路径边框", diff --git a/examples/line/path/demo/road_light.js b/examples/line/path/demo/road_light.js deleted file mode 100644 index 02986b29b9..0000000000 --- a/examples/line/path/demo/road_light.js +++ /dev/null @@ -1,32 +0,0 @@ -import { - Scene, - LineLayer -} from '@antv/l7'; -import { - Mapbox -} from '@antv/l7-maps'; - -const scene = new Scene({ - id: 'map', - map: new Mapbox({ - center: [ 116.3956, 39.9392 ], - pitch: 20, - zoom: 10, - rotation: 0, - style: 'light' - }) -}); -scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json' - ) - .then(res => res.json()) - .then(data => { - const layer = new LineLayer({}) - .source(data) - .size(1.5) - .shape('line') - .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]); - scene.addLayer(layer); - }); -}); diff --git a/examples/point/chart/demo/meta.json b/examples/point/chart/demo/meta.json index f3df47d17e..1bcd12f988 100644 --- a/examples/point/chart/demo/meta.json +++ b/examples/point/chart/demo/meta.json @@ -23,11 +23,6 @@ "filename": "chart.js", "title": "环图", "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EqfuRqkVZG4AAAAAAAAAAAAAARQnAQ" - }, - { - "filename": "ring.js", - "title": "环图", - "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*_pt_RoTbm0MAAAAAAAAAAAAAARQnAQ" } ] } diff --git a/examples/point/chart/demo/ring.js b/examples/point/chart/demo/ring.js deleted file mode 100644 index f7109ed47c..0000000000 --- a/examples/point/chart/demo/ring.js +++ /dev/null @@ -1,116 +0,0 @@ -import { Scene, Marker } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; -import * as G2 from '@antv/g2'; - -const CSS = `.l7-marker .g2-guide-html { - width: 50px; - height: 50px; - vertical-align: middle; - text-align: center; - line-height: 0.1 -} - -l7-marker .g2-guide-html .title { - font-size: 12px; - color: #8c8c8c; - font-weight: 300; -} - -l7-marker .g2-guide-html .value { - font-size: 18px; - color: #000; - font-weight: bold; -} -`; -function loadCssCode(code) { - const style = document.createElement('style'); - style.type = 'text/css'; - style.rel = 'stylesheet'; - // for Chrome Firefox Opera Safari - style.appendChild(document.createTextNode(code)); - // for IE - // style.styleSheet.cssText = code; - const head = document.getElementsByTagName('head')[0]; - head.appendChild(style); -} -loadCssCode(CSS); - -const scene = new Scene({ - id: 'map', - map: new Mapbox({ - pitch: 0, - style: 'dark', - center: [ 52.21496184144132, 24.121126851768906 ], - zoom: 3.802 - }) -}); -scene.on('loaded', () => { - addChart(); -}); -scene.render(); -function addChart() { - Promise.all([ - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json' - ).then(d => d.json()), - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json' - ).then(d => d.json()) - ]).then(function onLoad([ center, population ]) { - const popobj = {}; - population.forEach(element => { - popobj[element.Code] = - element['Population, female (% of total) (% of total)']; - }); - // 数据绑定 - - center.features = center.features.map(fe => { - fe.properties.female = popobj[fe.properties.id] * 1 || 0; - return fe; - }); - center.features.forEach(point => { - const el = document.createElement('div'); - const coord = point.geometry.coordinates; - const v = point.properties.female * 1; - if (v < 1 || (v > 46 && v < 54)) { - return; - } - const size = 60; - const data = [ - { - type: '男性', - value: 100.0 - v.toFixed(2) - }, - { - type: '女性', - value: v.toFixed(2) * 1 - } - ]; - const chart = new G2.Chart({ - container: el, - width: size, - height: size, - render: 'svg', - padding: 0 - }); - chart.source(data); - chart.legend(false); - chart.tooltip(false); - chart.coord('theta', { - radius: 0.9, - innerRadius: 0.6 - }); - chart - .intervalStack() - .position('value') - .color('type', [ '#5CCEA1', '#5B8FF9' ]) - .opacity(1); - chart.render(); - const marker = new Marker({ element: el }).setLnglat({ - lng: coord[0], - lat: coord[1] - }); - scene.addMarker(marker); - }); - }); -} diff --git a/examples/point/column/demo/clumn_shape_light.js b/examples/point/column/demo/clumn_shape_light.js deleted file mode 100644 index 37feef6450..0000000000 --- a/examples/point/column/demo/clumn_shape_light.js +++ /dev/null @@ -1,46 +0,0 @@ -import { Scene, PointLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; - -const scene = new Scene({ - id: 'map', - map: new Mapbox({ - pitch: 60, - style: 'light', - center: [ 121.412224, 31.26192438 ], - zoom: 13.13438, - rotation: 35.97133 - }) -}); -scene.on('loaded', () => { - 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', [ - 'cylinder', - 'triangleColumn', - 'hexagonColumn', - 'squareColumn' - ]) - .animate(true) - .active(true) - .size('unit_price', h => { - return [ 6, 6, h / 500 ]; - }) - .color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ]) - .style({ - opacity: 1.0 - }); - - scene.addLayer(pointLayer); - }); -}); diff --git a/examples/point/column/demo/meta.json b/examples/point/column/demo/meta.json index 4a7152493e..dc9748604a 100644 --- a/examples/point/column/demo/meta.json +++ b/examples/point/column/demo/meta.json @@ -14,11 +14,6 @@ "title": "3D 渐变柱图", "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GJhASbfQTK8AAAAAAAAAAAAAARQnAQ" }, - { - "filename": "clumn_shape_light.js", - "title": "3D 浅色柱图", - "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*msKiTojYyhwAAAAAAAAAAAAAARQnAQ" - }, { "filename": "column_dark.js", "title": "3D柱图 深色底图", diff --git a/examples/point/image/demo/meta.json b/examples/point/image/demo/meta.json index 442a3cc29c..982a7ebdd1 100644 --- a/examples/point/image/demo/meta.json +++ b/examples/point/image/demo/meta.json @@ -24,11 +24,6 @@ "title": "天气", "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CC5YRp2OY3gAAAAAAAAAAAAAARQnAQ" }, - { - "filename": "road.js", - "title": "路线图", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*N-9MRZLlPXgAAAAAAAAAAAAAARQnAQ" - }, { "filename": "monsoon.js", "title": "季风分布", diff --git a/examples/point/image/demo/road.js b/examples/point/image/demo/road.js deleted file mode 100644 index 7e11d5f59c..0000000000 --- a/examples/point/image/demo/road.js +++ /dev/null @@ -1,106 +0,0 @@ -import { Scene, LineLayer, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; - -const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [ 120.115, 30.221 ], - pitch: 40, - zoom: 16, - viewMode: '3D' - }) -}); -scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/91d27a97-869a-459b-a617-498dcc9c3e7f.json' - ) - .then(res => res.json()) - .then(data => { - - scene.addImage( - 'road', - 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*haGlTpW2BQgAAAAAAAAAAAAAARQnAQ' - ); - - const layer = new LineLayer() - .source(data) - .size(8) - .shape('line') - .texture('road') - .color('rgb(20, 180, 90)') - .animate({ - interval: 1, // 间隔 - duration: 1, // 持续时间，延时 - trailLength: 2 // 流线长度 - }) - .style({ - lineTexture: true, // 开启线的贴图功能 - iconStep: 50 // 设置贴图纹理的间距 - }); - scene.addLayer(layer); - - scene.addImage( - 'start', - 'https://gw.alipayobjects.com/zos/bmw-prod/ebb0af57-4a8a-46e0-a296-2d51f9fa8007.svg' - ); - scene.addImage( - 'visitor', - 'https://gw.alipayobjects.com/zos/bmw-prod/64db255d-b636-4929-b072-068e75178b23.svg' - ); - scene.addImage( - 'museum', - 'https://gw.alipayobjects.com/zos/bmw-prod/0630591d-64db-4057-a04d-d65f43aebf0f.svg' - ); - scene.addImage( - 'supermarket', - 'https://gw.alipayobjects.com/zos/bmw-prod/ab42799d-dea6-4d37-bd62-3ee3e06bf6c0.svg' - ); - scene.addImage( - 'tower', - 'https://gw.alipayobjects.com/zos/bmw-prod/6d27cf89-638c-432b-a8c4-cac289ee98a8.svg' - ); - scene.addImage( - 'end', - 'https://gw.alipayobjects.com/zos/bmw-prod/59717737-5652-479f-9e6b-e7d2c5441446.svg' - ); - const imageLayer = new PointLayer() - .source([{ - lng: 120.11025885601617, - lat: 30.22006389085372, - icon: 'start' - }, { - lng: 120.11123578376913, - lat: 30.220443561196277, - icon: 'visitor' - }, { - lng: 120.11408457779198, - lat: 30.22019805564678, - icon: 'museum' - }, { - lng: 120.11683172384723, - lat: 30.21875509667716, - icon: 'supermarket' - }, { - lng: 120.11945546294194, - lat: 30.218724022876376, - icon: 'tower' - }, { - lng: 120.1184189041221, - lat: 30.21783201718256, - icon: 'end' - } - ], { - parser: { - type: 'json', - x: 'lng', - y: 'lat' - } - }) - .shape('icon', [ 'start', 'visitor', 'museum', 'supermarket', 'tower', 'end' ]) - .size(35) - .style({ - offsets: [ 0, 20 ] - }); - scene.addLayer(imageLayer); - }); -}); diff --git a/examples/point/text/demo/iconfonts.js b/examples/point/text/demo/iconfonts.js index 431dd4ca28..be1e2eb6f1 100644 --- a/examples/point/text/demo/iconfonts.js +++ b/examples/point/text/demo/iconfonts.js @@ -11,159 +11,6 @@ const scene = new Scene({ zooms: [ 8, 10 ] }) }); -const dataColor = { - bigRainBC: '#285A8C', - middleRainBC: '#326EA0', - smallRainBC: '#4678AA', - sunBC: '#00BFFF', - cloudBC: '#1E90FF' -}; -const originData = [ - { - lng: 121.7, - lat: 30.6, - iconType: 'hugeRain', - iconColor: '#4678D2', - backgoundColor: dataColor.bigRainBC, - temperature: '20℃', - weather: '大雨' - }, - { - lng: 119.2, - lat: 30.0, - iconType: 'smallRain', - iconColor: '#6EA0FF', - backgoundColor: dataColor.smallRainBC, - temperature: '22℃', - weather: '小雨' - }, - { - lng: 119.67, - lat: 30.2, - iconType: 'sun', - iconColor: '#FFA500', - backgoundColor: dataColor.sunBC, - temperature: '28℃', - weather: '晴朗' - }, - { - lng: 119.63, - lat: 30.6, - iconType: 'sun', - iconColor: '#FFA500', - backgoundColor: dataColor.sunBC, - temperature: '28℃', - weather: '晴朗' - }, - { - lng: 120, - lat: 30, - iconType: 'sun', - iconColor: '#FFA500', - backgoundColor: dataColor.sunBC, - temperature: '28℃', - weather: '晴朗' - }, - { - lng: 120.2, - lat: 30.5, - iconType: 'sun', - iconColor: '#FFA500', - backgoundColor: dataColor.sunBC, - temperature: '28℃', - weather: '晴朗' - }, - { - lng: 121.5, - lat: 31.4, - iconType: 'cloud', - iconColor: '#F0F8FF', - backgoundColor: dataColor.cloudBC, - temperature: '22℃', - weather: '多云' - }, - { - lng: 120, - lat: 31, - iconType: 'cloud', - iconColor: '#F0F8FF', - backgoundColor: dataColor.cloudBC, - temperature: '22℃', - weather: '多云' - }, - { - lng: 120.6, - lat: 30.8, - iconType: 'cloud', - iconColor: '#F0F8FF', - backgoundColor: dataColor.cloudBC, - temperature: '22℃', - weather: '多云' - }, - { - lng: 120.5, - lat: 31.3, - iconType: 'cloud', - iconColor: '#F0F8FF', - backgoundColor: dataColor.cloudBC, - temperature: '22℃', - weather: '多云' - }, - { - lng: 121.3, - lat: 30.2, - iconType: 'smallRain', - iconColor: '#6EA0FF', - backgoundColor: dataColor.smallRainBC, - temperature: '22℃', - weather: '小雨' - }, - { - lng: 121, - lat: 30.5, - iconType: 'smallRain', - iconColor: '#6EA0FF', - backgoundColor: dataColor.smallRainBC, - temperature: '22℃', - weather: '小雨' - }, - { - lng: 120.6, - lat: 30, - iconType: 'middleRain', - iconColor: '#6495ED', - backgoundColor: dataColor.middleRainBC, - temperature: '24℃', - weather: '中雨' - }, - { - lng: 120.2, - lat: 29.7, - iconType: 'smallRain', - iconColor: '#6EA0FF', - backgoundColor: dataColor.smallRainBC, - temperature: '22℃', - weather: '小雨' - }, - { - lng: 121.7, - lat: 29.8, - iconType: 'middleRain', - iconColor: '#6495ED', - backgoundColor: dataColor.middleRainBC, - temperature: '24℃', - weather: '中雨' - }, - { - lng: 121.5, - lat: 30, - iconType: 'hugeRain', - iconColor: '#4678D2', - backgoundColor: dataColor.bigRainBC, - temperature: '20℃', - weather: '大雨' - } -]; const fontFamily = 'iconfont'; const fontPath = '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076'; scene.addFontFace(fontFamily, fontPath); @@ -176,92 +23,95 @@ scene.addIconFonts([ ]); scene.on('loaded', () => { - - const layer = new PointLayer() - .source(originData, { - parser: { - type: 'json', - x: 'lng', - y: 'lat' - } - }) - .shape('circle') - .color('backgoundColor') - .size(42); - scene.addLayer(layer); - - - const pointIconFontLayer = new PointLayer({}) - .source(originData, { - parser: { - type: 'json', - x: 'lng', - y: 'lat' - } - } - ) - .shape('iconType', 'text') - .size(30) - .color('iconColor') - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [ -10, 10 ], // 文本相对锚点的偏移量 [水平, 垂直] - fontFamily, - iconfont: true, - textAllowOverlap: true - }); - scene.addLayer(pointIconFontLayer); - - const textLayer = new PointLayer({}) - .source(originData, - { + fetch('https://gw.alipayobjects.com/os/bmw-prod/9eb3f1b5-0c3b-49b2-8221-191d4ba8aa5e.json') + .then(res => res.json()) + .then(originData => { + const layer = new PointLayer() + .source(originData, { parser: { type: 'json', x: 'lng', y: 'lat' } - } - ) - .shape('temperature', 'text') - .size(10) - .color('#ffffff') - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [ 5, -55 ], // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0, - fontFamily: 'Times New Roman', - textAllowOverlap: true - }); - scene.addLayer(textLayer); + }) + .shape('circle') + .color('backgoundColor') + .size(42); + scene.addLayer(layer); - const textLayer2 = new PointLayer({}) - .source(originData, - { + const pointIconFontLayer = new PointLayer({}) + .source(originData, { parser: { type: 'json', x: 'lng', y: 'lat' } } - ) - .shape('weather', 'text') - .size(14) - .color('#ffffff') - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [ 5, -15 ], // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0, - fontFamily: 'Times New Roman', - textAllowOverlap: true - }); - scene.addLayer(textLayer2); + ) + .shape('iconType', 'text') + .size(30) + .color('iconColor') + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [ -10, 10 ], // 文本相对锚点的偏移量 [水平, 垂直] + fontFamily, + iconfont: true, + textAllowOverlap: true + }); + scene.addLayer(pointIconFontLayer); + + const textLayer = new PointLayer({}) + .source(originData, + { + parser: { + type: 'json', + x: 'lng', + y: 'lat' + } + } + ) + .shape('temperature', 'text') + .size(10) + .color('#ffffff') + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [ 5, -55 ], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 0.3, // 描边宽度 + strokeOpacity: 1.0, + fontFamily: 'Times New Roman', + textAllowOverlap: true + }); + scene.addLayer(textLayer); + + const textLayer2 = new PointLayer({}) + .source(originData, + { + parser: { + type: 'json', + x: 'lng', + y: 'lat' + } + } + ) + .shape('weather', 'text') + .size(14) + .color('#ffffff') + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [ 5, -15 ], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 0.3, // 描边宽度 + strokeOpacity: 1.0, + fontFamily: 'Times New Roman', + textAllowOverlap: true + }); + scene.addLayer(textLayer2); + }) + }); diff --git a/examples/point/text/demo/meta.json b/examples/point/text/demo/meta.json index f7f87f79d6..9ee39b7300 100644 --- a/examples/point/text/demo/meta.json +++ b/examples/point/text/demo/meta.json @@ -34,11 +34,6 @@ "title": "气温图标标注", "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*nvwuQIi8_9oAAAAAAAAAAAAAARQnAQ" }, - { - "filename": "updown.js", - "title": "走势图标标注", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*LJXlRraIokAAAAAAAAAAAAAAARQnAQ" - }, { "filename": "simpleCoordinate.js", "title": "平面区域标注", diff --git a/examples/point/text/demo/simpleCoordinate.js b/examples/point/text/demo/simpleCoordinate.js index 6f100f1834..c236f030ea 100644 --- a/examples/point/text/demo/simpleCoordinate.js +++ b/examples/point/text/demo/simpleCoordinate.js @@ -16,199 +16,6 @@ const scene = new Scene({ }) }); scene.setBgColor('rgb(94, 182, 140)'); -const textlayer = new PointLayer({ zIndex: 2 }) - .source( - [ - { - x: 515, - y: 575, - t: '小屋' - }, - { - x: 507, - y: 560, - t: '小屋' - }, - { - x: 495, - y: 553, - t: '别墅' - }, - { - x: 499, - y: 547, - t: '住宅' - }, - { - x: 480, - y: 544, - t: '住宅' - }, - { - x: 471, - y: 539, - t: '住宅' - }, - { - x: 485, - y: 527, - t: '住宅' - }, - { - x: 463, - y: 533, - t: '住宅' - }, - { - x: 477, - y: 523, - t: '住宅' - }, - { - x: 473, - y: 517, - t: '住宅' - }, - { - x: 535, - y: 535, - t: '住宅小区' - }, - { - x: 550, - y: 545, - t: '住宅小区' - }, - { - x: 578, - y: 559, - t: '别墅' - }, - { - x: 583, - y: 554, - t: '别墅' - }, - { - x: 590, - y: 538, - t: '别墅' - }, - { - x: 599, - y: 537, - t: '住宅' - }, - { - x: 567, - y: 526, - t: '住宅' - }, - { - x: 564, - y: 519, - t: '住宅' - }, - { - x: 553.5, - y: 483, - t: '住宅' - }, - { - x: 554, - y: 479, - t: '住宅' - }, - { - x: 547, - y: 478.5, - t: '住宅' - }, - { - x: 533.5, - y: 475, - t: '住宅' - }, - { - x: 516, - y: 463, - t: '住宅' - }, - { - x: 538, - y: 453, - t: '住宅' - }, - { - x: 510.5, - y: 444, - t: '别墅' - }, - { - x: 488, - y: 440.5, - t: '住宅' - }, - { - x: 476.5, - y: 438.5, - t: '别墅' - }, - { - x: 474.5, - y: 431, - t: '别墅' - }, - { - x: 462, - y: 434.5, - t: '别墅' - }, - { - x: 431, - y: 436, - t: '住宅' - }, - { - x: 428, - y: 430, - t: '住宅' - }, - { - x: 402.5, - y: 448.5, - t: '别墅' - }, - { - x: 393.5, - y: 456, - t: '别墅' - } - ], - { - parser: { - type: 'json', - x: 'x', - y: 'y' - } - } - ) - .shape('t', 'text') - .size(12) - .active({ - color: '#00f', - mix: 0.9 - }) - .color('rgb(86, 156, 214)') - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - spacing: 2, // 字符间距 - fontWeight: '800', - padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - strokeWidth: 2, // 描边宽度 - textAllowOverlap: true - }); const imagelayer = new ImageLayer({}).source( 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I0X5R4jAUQ4AAAAAAAAAAAAAARQnAQ', @@ -221,6 +28,39 @@ const imagelayer = new ImageLayer({}).source( ); scene.on('loaded', () => { + fetch('https://gw.alipayobjects.com/os/bmw-prod/7dc0d454-fabc-4461-a5d5-d404dadb49a9.json') + .then(res => res.json()) + .then(data => { + const textlayer = new PointLayer({ zIndex: 2 }) + .source( + data, + { + parser: { + type: 'json', + x: 'x', + y: 'y' + } + } + ) + .shape('t', 'text') + .size(12) + .active({ + color: '#00f', + mix: 0.9 + }) + .color('rgb(86, 156, 214)') + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + spacing: 2, // 字符间距 + fontWeight: '800', + padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 2, // 描边宽度 + textAllowOverlap: true + }); + scene.addLayer(textlayer); + }) + scene.addLayer(imagelayer); - scene.addLayer(textlayer); + }); diff --git a/examples/point/text/demo/styleMap.js b/examples/point/text/demo/styleMap.js index ab480ea453..0a3df5f677 100644 --- a/examples/point/text/demo/styleMap.js +++ b/examples/point/text/demo/styleMap.js @@ -11,104 +11,7 @@ const scene = new Scene({ zooms: [ 8, 10 ] }) }); -const originData = [ - { - lng: 120, - lat: 30, - iconType: 'sun', - iconColor: '#FFA500', - weather: '晴朗', - textOffset: [ 10, 0 ] - }, - { - lng: 120.2, - lat: 30.5, - iconType: 'sun', - iconColor: '#FFA500', - weather: '晴朗 - 高温预警', - textOffset: [ -25, 0 ] - }, - { - lng: 121.5, - lat: 31.4, - iconType: 'cloud', - iconColor: '#F0F8FF', - weather: '多云', - textOffset: [ 10, 0 ] - }, - { - lng: 120, - lat: 31, - iconType: 'cloud', - iconColor: '#F0F8FF', - weather: '多云 - 温度适宜', - textOffset: [ -25, 0 ] - }, - { - lng: 120.6, - lat: 30.8, - iconType: 'cloud', - iconColor: '#F0F8FF', - weather: '多云', - textOffset: [ 10, 0 ] - }, - { - lng: 120.5, - lat: 31.3, - iconType: 'cloud', - iconColor: '#F0F8FF', - weather: '多云 - 今日适宜出门', - textOffset: [ -40, 0 ] - }, - { - lng: 121.3, - lat: 30.2, - iconType: 'smallRain', - iconColor: '#6EA0FF', - weather: '中雨转小雨', - textOffset: [ -10, 0 ] - }, - { - lng: 121, - lat: 30.5, - iconType: 'smallRain', - iconColor: '#6EA0FF', - weather: '小雨', - textOffset: [ 10, 0 ] - }, - { - lng: 120.6, - lat: 30, - iconType: 'middleRain', - iconColor: '#6495ED', - weather: '中雨', - textOffset: [ 10, 0 ] - }, - { - lng: 120.2, - lat: 29.7, - iconType: 'smallRain', - iconColor: '#6EA0FF', - weather: '小雨', - textOffset: [ 10, 0 ] - }, - { - lng: 121.7, - lat: 29.8, - iconType: 'middleRain', - iconColor: '#6495ED', - weather: '大雨转中雨', - textOffset: [ -15, 0 ] - }, - { - lng: 121.5, - lat: 30, - iconType: 'hugeRain', - iconColor: '#4678D2', - weather: '大雨', - textOffset: [ 10, 0 ] - } -]; + const fontFamily = 'iconfont'; const fontPath = '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076'; @@ -121,8 +24,12 @@ scene.addIconFonts([ ]); scene.addFontFace(fontFamily, fontPath); scene.on('loaded', () => { - const pointIconFontLayer = new PointLayer({}) - .source(originData, { + + fetch('https://gw.alipayobjects.com/os/bmw-prod/f7d083e2-ad55-44fd-b324-15e1b549948a.json') + .then(res => res.json()) + .then(data => { + const pointIconFontLayer = new PointLayer({}) + .source(data, { parser: { type: 'json', x: 'lng', @@ -142,7 +49,7 @@ scene.on('loaded', () => { scene.addLayer(pointIconFontLayer); const textLayer = new PointLayer({}) - .source(originData, { + .source(data, { parser: { type: 'json', x: 'lng', @@ -161,4 +68,6 @@ scene.on('loaded', () => { textAllowOverlap: true }); scene.addLayer(textLayer); + }) + }); diff --git a/examples/point/text/demo/updown.js b/examples/point/text/demo/updown.js deleted file mode 100644 index 7dd5c26e42..0000000000 --- a/examples/point/text/demo/updown.js +++ /dev/null @@ -1,87 +0,0 @@ -import { Scene, PointLayer, PolygonLayer, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; - -const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - pitch: 40, - center: [ 118.8, 32.056 ], - zoom: 12.5 - }) -}); -const fontFamily = 'iconfont'; -const fontPath = - '//at.alicdn.com/t/font_2534097_bl34aphh10n.woff2?t=1622180820063'; -scene.addIconFont('up', ''); -scene.addIconFont('down', ''); -scene.addFontFace(fontFamily, fontPath); - - -scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/41802695-0f7e-4a81-ab16-539c4e39df0d.json' - ) - .then(res => res.json()) - .then(data => { - const filllayer = new PolygonLayer({ - name: 'fill', - zIndex: 3 - }) - .source(data) - .shape('fill') - .color('count', [ '#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f' ]) - .style({ - opacity: 0.6, - opacityLinear: { - enable: true, - dir: 'out' // in - out - } - }); - scene.addLayer(filllayer); - - const linelayer = new LineLayer({ - zIndex: 5, - name: 'line2' - }) - .source(data) - .shape('line') - .size(1) - .color('#fff') - .style({ - opacity: 0.3 - }); - scene.addLayer(linelayer); - - const pointLayer = new PointLayer({ - zIndex: 10 - }) - .source(data) - .shape('icon', 'text') - .size(15) - .color('count', n => (n > 0 ? '#0f0' : '#f00')) - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [ -10, 5 ], - padding: [ 2, 2 ], - fontFamily, - iconfont: true - // textAllowOverlap: true - }); - scene.addLayer(pointLayer); - - const textLayer = new PointLayer({ - zIndex: 10 - }) - .source(data) - .shape('count', 'text') - .size(12) - .color('count', n => (n > 0 ? '#0f0' : '#f00')) - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [ 40, 10 ], - padding: [ 1, 1 ] - }); - scene.addLayer(textLayer); - }); -}); diff --git a/examples/polygon/fill/demo/china_linear_out.js b/examples/polygon/fill/demo/china_linear_out.js deleted file mode 100644 index d91f72a832..0000000000 --- a/examples/polygon/fill/demo/china_linear_out.js +++ /dev/null @@ -1,59 +0,0 @@ -import { Scene, PolygonLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; - -const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [ 105, 35 ], - pitch: 0, - style: 'dark', - zoom: 2.5 - }) -}); -scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json' - ) - .then(res => res.json()) - .then(data => { - const layer = new PolygonLayer({ blend: 'normal' }) - .source(data) - .size('name', [ 0, 10000, 50000, 30000, 100000 ]) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49' - ]) - .shape('fill') - .active(true) - .style({ - opacity: 0.8, - opacityLinear: { - enable: true, - dir: 'out' // in - out - } - }); - scene.addLayer(layer); - - const layer2 = new PolygonLayer({ blend: 'normal' }) - .source(data) - .size(0.5) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49' - ]) - .shape('line') - .select(true) - .style({ - opacity: 1.0 - }); - scene.addLayer(layer2); - }); -}); diff --git a/examples/polygon/fill/demo/meta.json b/examples/polygon/fill/demo/meta.json index d58f3616f7..61326789bb 100644 --- a/examples/polygon/fill/demo/meta.json +++ b/examples/polygon/fill/demo/meta.json @@ -29,11 +29,6 @@ "title": "中国地图-径向渐变", "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SgKRRKJ1w-EAAAAAAAAAAAAAARQnAQ" }, - { - "filename": "china_linear_out.js", - "title": "中国地图-径向渐变", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mVAyQ4mUG9sAAAAAAAAAAAAAARQnAQ" - }, { "filename": "water.js", "title": "简单水面",