使用线的渐变填充的时候，如果线的长度比较长，缩小地图层级的时候，渐变填充变得只剩下colorStop一头一尾的两种颜色

[Noah-Gilga]

maptalks's version and what browser you use?

最新版本

Issue description

使用线的渐变填充的时候，如果线的长度比较长，缩小地图层级的时候，渐变填充变得只剩下colorStop一头一尾的两种颜色

Please provide a reproduction URL (on any jsfiddle like site)

代码如下

var map = new maptalks.Map('map', {
  center: [ 116.47009089, 39.9629937],
  zoom: 10,
  baseLayer: new maptalks.TileLayer('base', {
    urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    subdomains: ['a', 'b', 'c', 'd'],
    attribution: '© <a href="http://osm.org">OpenStreetMap</a>  contributors, © <a href="https://carto.com/">CARTO</a> '
  })
});

var layer = new maptalks.VectorLayer('vector').addTo(map);

var c = map.getCenter();

var line = new maptalks.LineString(
  [
    {
        "x": 116.28890991210938,
        "y": 39.98369699673039
    },
    {
        "x": 116.43619537353516,
        "y": 39.98737978325713
    },
    {
        "x": 116.48529052734374,
        "y": 39.95554342883535
    },
    {
        "x": 116.47979736328125,
        "y": 39.84887587825816
    },
    {
        "x": 116.46743774414061,
        "y": 39.83754093169162
    },
    {
        "x": 116.45267486572266,
        "y": 39.8314772852108
    },
    {
        "x": 116.28135681152342,
        "y": 39.829104408261685
    },
    {
        "x": 116.27071380615233,
        "y": 39.883396390093075
    },
    {
        "x": 116.26831054687501,
        "y": 39.89446035777916
    },
    {
        "x": 116.26899719238281,
        "y": 39.96791137735179
    },
    {
        "x": 116.28719329833983,
        "y": 39.98290780236021
    }
], {
    symbol: {
      // linear gradient
      'lineColor': {
        'type': 'linear',
        'colorStops': [
          [0.00, 'red'],
          [1 / 4, 'orange'],
          [2 / 4, 'green'],
          [3 / 4, 'aqua'],
          [1.00, 'white']
        ]
      },
      'lineWidth': 10
    }
  }).addTo(layer);

var line1 = new maptalks.LineString(
  [c.sub(0.015, 0.005), c.sub(0, 0.005)], {
    symbol: {
      // radial gradient
      'lineColor': {
        'type': 'radial',
        'colorStops': [
          [0.00, 'red'],
          [1 / 3, 'orange'],
          [2 / 3, 'green'],
          [1.00, 'white']
        ]
      },
      'lineWidth': 10
    }
  }).addTo(layer);

现象截图如下