docs: 完善 fillImage 关于 rotate 方法的文档

docs/api/point_layer/symbol.zh.md

@@ -54,7 +54,7 @@ const scatter = new PointLayer()
 
 [在线案例](../../../examples/point/image#image)
 
-### layerType = "fillImage"
+### fillImage
 
 🌟 默认通过 PointLayer 实例化的 image 本质上是精灵贴图，因此有始终面向相机的特性，同时贴图的大小也收到设备的限制。  
 🌟 由于精灵始终面向相机，因此我们也无法自定义配置 image 的旋转角度
@@ -63,7 +63,7 @@ const scatter = new PointLayer()
 只需要在初始化图层的时候提前指定 layerType 为 fillImage，其他使用与普通的 image 完全相同。
 
 ```javascript
-const imageLayer = new PointLayer({ layerType: 'fillImage' })
+const imageLayer = new PointLayer()
   .source(data, {
     parser: {
       type: 'json',
@@ -74,6 +74,7 @@ const imageLayer = new PointLayer({ layerType: 'fillImage' })
   .shape('name', ['00', '01', '02'])
   .style({
     rotation: 0,
+    layerType: 'fillImage'
   })
   .active({
     color: '#0ff',
@@ -99,6 +100,30 @@ function rotate() {
 
 <img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1kBZTaains4AAAAAAAAAAAAAARQnAQ'>
 
-[在线案例](../../../examples/point/image#fillimage)
+[在线案例](/zh/examples/point/image#fillimage)
+
+- rotate 方法
+符号图的 fillimage 模式支持 rotate 方法根据数据映射旋转角度。
+🌟 记得要把 style 中的 rotation 设为 0
+
+```javascript
+  const imageLayer = new PointLayer()
+      .source(data)
+      .shape('wind', wind => {
+        if (wind === 'up') {
+          return 'arrBlue';
+        }
+        return 'arrRed';
+
+      })
+      .rotate('r', r => Math.PI * r)
+      .size(15)
+      .style({
+        rotation: 0,
+        layerType: 'fillImage'
+      });
+    scene.addLayer(imageLayer);
+```
+[在线案例](/zh/examples/point/image#monsoon)
 
 `markdown:docs/common/layer/base.md`

examples/point/image/demo/monsoon.js

@@ -23,60 +23,58 @@ scene.addImage(
 
 scene.on('loaded', () => {
 
-fetch('https://gw.alipayobjects.com/os/bmw-prod/4c02515b-cb7a-47be-93cf-5596731ef982.json')
+  fetch('https://gw.alipayobjects.com/os/bmw-prod/4c02515b-cb7a-47be-93cf-5596731ef982.json')
-.then(res => res.json()) 
+    .then(res => res.json())
-.then(monsoon => {
+    .then(monsoon => {
-    const { data, borderData } = monsoon
+      const { data, borderData } = monsoon;
-    const imageLayer = new PointLayer()
+      const imageLayer = new PointLayer()
-    .source(data)
+        .source(data)
-    .shape('wind', wind => {
+        .shape('wind', wind => {
-      if (wind === 'up') {
+          if (wind === 'up') {
-        return 'arrBlue';
+            return 'arrBlue';
-      }
+          }
-      return 'arrRed';
+          return 'arrRed';
 
-    })
+        })
-    .rotate('r', r => Math.PI * r)
+        .rotate('r', r => Math.PI * r)
-    .size(15)
+        .size(15)
-    .style({
+        .style({
-      rotation: 0,
+          rotation: 0,
-      layerType: 'fillImage'
+          layerType: 'fillImage'
+        });
+      scene.addLayer(imageLayer);
+
+
+      const border = new LineLayer()
+        .source(borderData)
+        .size(1.5)
+        .color('#575757')
+        .style({
+          lineType: 'dash',
+          dashArray: [ 5, 5 ]
+        });
+      scene.addLayer(border);
+
+      const text = new PointLayer({ zIndex: 2 })
+        .source([
+          { lng: 90, lat: 35, n: '非季风区' },
+          { lng: 125, lat: 30, n: '季风区' }
+        ], {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat'
+          }
+        })
+        .shape('n', 'text')
+        .size(25)
+        .color('#575757')
+        .style({
+          spacing: 20
+        });
+
+      scene.addLayer(text);
     });
-  scene.addLayer(imageLayer);
 
 
-  const border = new LineLayer()
-    .source(borderData)
-    .size(1.5)
-    .color('#575757')
-    .style({
-      lineType: 'dash',
-      dashArray: [ 5, 5 ]
-    });
-  scene.addLayer(border);
-
-  const text = new PointLayer({ zIndex: 2 })
-  .source([
-    { lng: 90, lat: 35, n: '非季风区' },
-    { lng: 125, lat: 30, n: '季风区' }
-  ], {
-    parser: {
-      type: 'json',
-      x: 'lng',
-      y: 'lat'
-    }
-  })
-  .shape('n', 'text')
-  .size(25)
-  .color('#575757')
-  .style({
-    spacing: 20
-  });
-
-  scene.addLayer(text);
-})
-
-  
-
- 
 });