diff --git a/docs/api/polygon_layer/fill.zh.md b/docs/api/polygon_layer/fill.zh.md
index 3536bd7571..ec46230d09 100644
--- a/docs/api/polygon_layer/fill.zh.md
+++ b/docs/api/polygon_layer/fill.zh.md
@@ -37,7 +37,12 @@ style({
 });
 ```
 
-[径向渐变 in](../../../examples/polygon/fill#china_linear_in)  
+[径向渐变 in](../../../examples/polygon/fill#china_linear_in)
+
+<img width="60%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*XjT5T4cT_CYAAAAAAAAAAAAAARQnAQ">
+
 [径向渐变 out](../../../examples/polygon/fill#china_linear_out)
 
+<img width="60%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Ob62Q7JDpZ4AAAAAAAAAAAAAARQnAQ">
+
 `markdown:docs/common/layer/base.md`
diff --git a/examples/line/path/demo/meta.json b/examples/line/path/demo/meta.json
index 65d79e3587..41b2021d99 100644
--- a/examples/line/path/demo/meta.json
+++ b/examples/line/path/demo/meta.json
@@ -33,6 +33,11 @@
       "filename": "road_dark_dash.js",
       "title": "路径虚线",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cGw3T4LPx7YAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "turin.js",
+      "title": "都灵道路图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CNzqRJDMh-oAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/line/path/demo/turin.js b/examples/line/path/demo/turin.js
new file mode 100644
index 0000000000..63e3ae0570
--- /dev/null
+++ b/examples/line/path/demo/turin.js
@@ -0,0 +1,75 @@
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    center: [ 7.65, 45.053 ],
+    pitch: 0,
+    zoom: 12,
+    style: 'dark'
+  })
+});
+scene.on('loaded', () => {
+  fetch(
+    'https://gw.alipayobjects.com/os/bmw-prod/98a5d9ec-be97-44bd-bff0-5742d929c003.json'
+  )
+    .then(res => res.json())
+    .then(data => {
+      const layer = new LineLayer({})
+        .source(data)
+        .shape('line')
+        .color('highway', v => {
+          switch (v) {
+          case 'motorway':
+            return '#F9D371';
+          case 'motorway_link':
+            return '#3DB2FF';
+          case 'trunk':
+            return 'green';
+          case 'trunk_link':
+            return '#6E85B2';
+          case 'primary':
+            return '#F47340';
+          case 'primary_link':
+            return '#F6A9A9';
+          case 'secondary':
+            return '#EF2F88';
+          case 'secondary_link':
+            return '#5F7A61';
+          case 'tertiary':
+            return '#1ee3cf';
+          case 'tertiary_link':
+            return '#C2F784';
+          case 'pedestrian':
+            return '#FFF89A';
+          case 'residential':
+            return '#348498';
+          case 'road':
+            return '#93FFD8';
+          case 'path':
+            return '#BAFFB4';
+          case 'unclassified':
+            return '#D3DEDC';
+          case 'service':
+            return '#AEFEFF';
+          case 'living_street':
+            return '#9B0000';
+          case 'track':
+            return '#F5F5F5';
+          case 'highway':
+            return 'red';
+          case 'rail':
+            return '#08ffc8';
+          default:
+            return '#FFE3E3';
+          }
+          // return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)';
+        })
+        .style({
+          opacity: 1
+        });
+      scene.addLayer(layer);
+    });
+});
+