Merge branch 'master' of https://github.com/antvis/L7

examples/line/path/API.en.md

@@ -1 +1 @@
-`markdown:docs/api/layer/line_layer/path.en.md`
+`markdown:docs/api/line_layer/linelayer.en.md`

examples/line/path/API.zh.md

@@ -1,2 +1 @@
-`markdown:docs/api/layer/line_layer/path.zh.md`
-
+`markdown:docs/api/line_layer/linelayer.zh.md`

examples/line/path/demo/bus_dark.js

@@ -7,9 +7,8 @@ const scene = new Scene({
   id: 'map',
   map: new Mapbox({
     center: [ 103.83735, 1.3602538 ],
-    pitch: 4.00000000000001,
-    zoom: 10.210275860702593,
-    rotation: 19.313180925794313,
+    zoom: 9.4678190476727,
+    pitch: 1.9999999999999982,
     style: 'dark'
   })
 });

examples/line/path/demo/bus_light.js

@@ -7,9 +7,8 @@ const scene = new Scene({
   id: 'map',
   map: new Mapbox({
     center: [ 103.83735604457024, 1.360253881403068 ],
-    pitch: 4.00000000000001,
-    zoom: 10.210275860702593,
-    rotation: 19.313180925794313,
+    zoom: 9.4678190476727,
+    pitch: 1.9999999999999982,
     style: 'light'
   })
 });

examples/line/path/demo/meta.json

@@ -4,14 +4,19 @@
     "en": "line"
   },
   "demos": [
+    {
+      "filename": "shanghai_bus.js",
+      "title": "上海公交",
+      "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*xFJ5Q5gztY0AAAAAAAAAAAAAARQnAQ"
+    },
     {
       "filename": "bus_light.js",
-      "title": "公交线路",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YtfjQr5vRS4AAAAAAAAAAABkARQnAQ"
+      "title": "3D 公交线路-亮",
+      "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*YAv-TJYX6j8AAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "bus_dark.js",
-      "title": "公交线路",
+      "title": "3D 公交线路-暗",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j-P8RaJMEvAAAAAAAAAAAABkARQnAQ"
     },
     {

examples/line/path/demo/shanghai_bus.js

@@ -0,0 +1,45 @@
+// Data Source https://busrouter.sg/visualization/
+
+import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [121.472644, 31.231706],
+    zoom: 8.15,
+    pitch: 0,
+    style: 'dark'
+  })
+});
+scene.on('loaded', () => {
+  fetch(
+    'https://gw.alipayobjects.com/os/bmw-prod/0290a972-eedd-42f6-b69e-50a35e8a0824.json'
+  )
+    .then(res => res.json())
+    .then(data => {
+      const layer = new LineLayer({})
+        .source(data, {
+          parser: {
+            type: 'json',
+            coordinates: 'coordinates'
+          }
+        })
+        .size(0.5)
+        .shape('line')
+        .active(true)
+        .color('length', [
+          '#0A3663',
+          '#1558AC',
+          '#3771D9',
+          '#4D89E5',
+          '#64A5D3',
+          '#72BED6',
+          '#83CED6',
+          '#A6E1E0',
+          '#B8EFE2',
+          '#D7F9F0'
+        ]);
+      scene.addLayer(layer);
+    });
+});

examples/line/wall/API.en.md

@@ -0,0 +1 @@
+`markdown:docs/api/line_layer/wall.en.md`

examples/line/wall/API.zh.md

@@ -0,0 +1 @@
+`markdown:docs/api/line_layer/wall.zh.md`

examples/line/wall/demo/bus_wall.js

@@ -0,0 +1,53 @@
+// Data Source https://busrouter.sg/visualization/
+
+import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [ 121.461531, 31.096775 ],
+    zoom: 8.64,
+    rotation: 358.78,
+    pitch: 45.42056074766357,
+    style: 'dark'
+  })
+});
+
+scene.addImage(
+  '02',
+  'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg'
+);
+
+scene.on('loaded', () => {
+  fetch(
+    'https://gw.alipayobjects.com/os/bmw-prod/0290a972-eedd-42f6-b69e-50a35e8a0824.json'
+  )
+    .then(res => res.json())
+    .then(data => {
+      const layer = new LineLayer({})
+        .source(data.slice(0, 50), {
+          parser: {
+            type: 'json',
+            coordinates: 'coordinates'
+          }
+        })
+        .animate({
+          interval: 1, // 间隔
+          duration: 1, // 持续时间，延时
+          trailLength: 2 // 流线长度
+        })
+        .size(20)
+        .shape('wall')
+        .texture('02')
+        .style({
+          opacity: 'testOpacity',
+          lineTexture: true, // 开启线的贴图功能
+          iconStep: 40, // 设置贴图纹理的间距
+          iconStepCount: 4,
+          sourceColor: '#00BCD2',
+          targetColor: '#0074d0'
+        });
+      scene.addLayer(layer);
+    });
+});

examples/line/wall/demo/hangzhou_wall.js

@@ -0,0 +1,34 @@
+// Data Source https://busrouter.sg/visualization/
+
+import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [ 119.297868, 29.732983 ],
+    zoom: 7.109999999999999,
+    rotation: 1.2200000000000273,
+    pitch: 45.42056074766357,
+    style: 'dark'
+  })
+});
+
+scene.on('loaded', () => {
+  fetch(
+    'https://gw.alipayobjects.com/os/bmw-prod/93a55259-328e-4e8b-8dc2-35e05844ed31.json'
+  )
+    .then(res => res.json())
+    .then(data => {
+      const layer = new LineLayer({})
+        .source(data)
+        .size(40)
+        .shape('wall')
+        .style({
+          opacity: 'testOpacity',
+          sourceColor: '#0DCCFF',
+          targetColor: 'rbga(255,255,255, 0)'
+        });
+      scene.addLayer(layer);
+    });
+});

examples/line/wall/demo/meta.json

@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "线路围墙",
+    "en": "LineWall"
+  },
+  "demos": [
+    {
+      "filename": "hangzhou_wall.js",
+      "title": "杭州区县围墙",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mLfxTb4mI6AAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "bus_wall.js",
+      "title": "公交线路围墙",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*biL5TpaZxd4AAAAAAAAAAAAAARQnAQ"
+    }
+  ]
+}

examples/line/wall/index.en.md

@@ -0,0 +1,5 @@
+---
+title: Line Wall
+order: 5
+---
+

examples/line/wall/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 线路围墙
+order: 5
+---