fix gradientPath color alpha Not effective (#2505)

* fix gradientPath color alpha  Not effective

* spec

* update spec

* update spec

* update spec

* update spec

* update spec

* update spec

* fire tiledelete event

Author: deyihu

packages/maptalks/src/core/Canvas.ts

@@ -515,6 +515,10 @@ function getSegmentPercentPoint(p1: Point, p2: Point, percent: number) {
     return new Point(x1 + dx * percent, y1 + dy * percent);
 }
 
+function rgbaToCSSRGBA(r: number, g: number, b: number, a: number) {
+    return `rgba(${r}, ${g}, ${b}, ${a / 255})`;
+}
+
 const Canvas = {
     getCanvas2DContext(canvas: HTMLCanvasElement) {
         return canvas.getContext('2d', { willReadFrequently: true });
@@ -1150,7 +1154,7 @@ const Canvas = {
         let preX, preY, currentX, currentY, nextPoint;
 
         const [r, g, b, a] = colorIn.getColor(0);
-        preColor = `rgba(${r}, ${g}, ${b}, ${a})`;
+        preColor = rgbaToCSSRGBA(r, g, b, a);
 
         const firstPoint = points[0];
         preX = firstPoint.x;
@@ -1199,7 +1203,7 @@ const Canvas = {
             //segment的步数小于minStep
             if (percent <= minStep) {
                 const [r, g, b, a] = colorIn.getColor(step + percent);
-                color = `rgba(${r}, ${g}, ${b}, ${a})`;
+                color = rgbaToCSSRGBA(r, g, b, a);
                 currentX = x;
                 currentY = y;
                 drawSegment();
@@ -1210,7 +1214,7 @@ const Canvas = {
                 for (let n = 1; n <= segments; n++) {
                     const tempStep = Math.min((n * minStep), percent);
                     const [r, g, b, a] = colorIn.getColor(step + tempStep);
-                    color = `rgba(${r}, ${g}, ${b}, ${a})`;
+                    color = rgbaToCSSRGBA(r, g, b, a);
                     if (color === preColor) {
                         continue;
                     }
@@ -1277,7 +1281,7 @@ const Canvas = {
         }
 
         if (ctx.lineColorIn) {
-            this._gradientPath(ctx, points, lineDashArray, lineOpacity);
+            Canvas._gradientPath(ctx, points, lineDashArray, lineOpacity);
         } else {
             ctx.beginPath();
             ctx.moveTo(points[0].x, points[0].y);

packages/maptalks/src/renderer/layer/tilelayer/TileLayerRendererable.ts

@@ -1204,6 +1204,20 @@ const TileLayerRenderable = function <T extends MixinConstructor>(Base: T) {
                 tile.image.onload = null;
                 tile.image.onerror = null;
             }
+            const layer = this.layer;
+            if (layer) {
+                /**
+                 * tiledelete event, fired when tile is delete.
+                 *
+                 * @event TileLayer#tiledelete
+                 * @type {Object}
+                 * @property {String} type - tiledelete
+                 * @property {TileLayer} target - tile layer
+                 * @property {Object} tileInfo - tile info
+                 * @property {Image} tileImage - tile image
+                 */
+                layer.fire('tiledelete', { tile: tile.info, tileImage: tile.image });
+            }
         }
 
         //@internal
@@ -1313,12 +1327,12 @@ export type TilesInViewType = {
 }
 
 export interface TileGrid {
-    extent:  Extent;
-    count:   number;
-    tiles:   Tile[];
+    extent: Extent;
+    count: number;
+    tiles: Tile[];
     parents: any[];
-    offset:  number[];
-    zoom:    number;
+    offset: number[];
+    zoom: number;
 }
 
 export interface TileGrids {

packages/maptalks/test/geometry/symbol/StrokeAndFillSpec.js

@@ -620,6 +620,58 @@ describe('StrokeAndFillSpec', function () {
             }, 1000);
 
 
+        });
+
+
+        it('#2504 lineColor gradient color with alpha ', function (done) {
+
+            const c1 = map.getCenter(), c2 = c1.add(0.1, 0);
+            map.setBearing(0);
+            const lineDx = -5;
+            var line = new maptalks.LineString([c1, c2], {
+                symbol: {
+                    'lineColor': {
+                        'type': 'linear',
+                        'colorStops': [
+                            [0.00, 'rgba(255,0,0,0.1)'],
+                            [1.00, 'rgba(0,0,255,0.5)']
+                        ]
+                    },
+                    'lineWidth': 10,
+                    lineDx
+                }
+            })
+            var layer = new maptalks.VectorLayer('v').addTo(map);
+            line.addTo(layer);
+            map.fitExtent(layer.getExtent());
+            setTimeout(() => {
+                const p1 = map.coordinateToContainerPoint(c1);
+                const p2 = map.coordinateToContainerPoint(c2);
+                console.log(p1, p2);
+
+                var canvas = map.getRenderer().canvas;
+                var context = canvas.getContext('2d');
+
+                var imgData = context.getImageData(Math.round(p1.x), Math.round(p1.y), 1, 1).data;
+                var imgData1 = context.getImageData(Math.round(p2.x + lineDx * 2), Math.round(p2.y), 1, 1).data;
+
+                // eslint-disable-next-line no-undef
+                if (isWindows()) {
+                    expect([...imgData]).to.be.eql([255, 0, 5, 51]);
+                } else {
+                    expect([...imgData]).to.be.eql([245, 0, 5, 53]);
+                }
+                // eslint-disable-next-line no-undef
+                if (isWindows()) {
+                    expect([...imgData1]).to.be.eql([3, 0, 254, 190]);
+                } else {
+                    expect([...imgData1]).to.be.eql([4, 0, 254, 190]);
+                }
+
+                done();
+            }, 1000);
+
+
         });
     });