canvas layer Implement symbol.lineStrokeColor

packages/maptalks/src/core/Canvas.ts

@@ -592,6 +592,20 @@ const Canvas = {
         }
         const strokePattern = style['linePatternFile'];
         let strokeColor = style['lineColor'] || DEFAULT_STROKE_COLOR;
+        //prepare for line border
+        let lineStrokeColor = style['lineStrokeColor'];
+        const lineStrokeWidth = style['lineStrokeWidth'];
+        ctx.lineStrokeColor = null;
+        ctx.lineStrokeWidth = null;
+        if (lineStrokeColor) {
+            if (Array.isArray(lineStrokeColor)) {
+                lineStrokeColor = Canvas.normalizeColorToRGBA(lineStrokeColor);
+            }
+            ctx.lineStrokeColor = lineStrokeColor;
+        }
+        if (lineStrokeWidth && lineStrokeWidth > 0) {
+            ctx.lineStrokeWidth = lineStrokeWidth;
+        }
         if (testing) {
             ctx.strokeStyle = '#000';
         } else if (strokePattern && resources) {
@@ -1110,6 +1124,30 @@ const Canvas = {
         if (strokeOpacity === 0) {
             return;
         }
+
+        const drawLineBorder = () => {
+            if (ctx.lineStrokeColor && ctx.lineStrokeWidth && ctx.lineStrokeWidth > 0) {
+                const lineStrokeColor = ctx.lineStrokeColor;
+                const lineStrokeWidth = ctx.lineStrokeWidth;
+                //cache context state
+                const alpha = ctx.globalAlpha;
+                const strokeStyle = ctx.strokeStyle;
+                const lineWidth = ctx.lineWidth;
+
+                if (isNumber(strokeOpacity) && strokeOpacity < 1) {
+                    ctx.globalAlpha = 1;
+                    ctx.globalAlpha *= strokeOpacity;
+                }
+                ctx.lineWidth = lineWidth + lineStrokeWidth * 2;
+                ctx.strokeStyle = lineStrokeColor;
+                ctx.stroke();
+                //restore context state
+                ctx.lineWidth = lineWidth;
+                ctx.strokeStyle = strokeStyle;
+                ctx.globalAlpha = alpha;
+            }
+        }
+        drawLineBorder();
         const offset = ctx.strokeStyle && ctx.strokeStyle['linePatternOffset'];
         const dx = offset ? offset[0] : 0,
             dy = offset ? offset[1] : 0;
@@ -1989,6 +2027,8 @@ function copyProperties(ctx: CanvasRenderingContext2D, savedCtx) {
     ctx.shadowOffsetY = savedCtx.shadowOffsetY;
     ctx.strokeStyle = savedCtx.strokeStyle;
     ctx.lineColorIn = savedCtx.lineColorIn;
+    ctx.lineStrokeColor = savedCtx.lineStrokeColor;
+    ctx.lineStrokeWidth = savedCtx.lineStrokeWidth;
 }
 
 function setLineDash(ctx: CanvasRenderingContext2D, lineDashArray: number[]) {

packages/maptalks/src/geometry/Geometry.ts

@@ -664,7 +664,9 @@ export class Geometry extends JSONAble(Eventable(Handlerable(Class))) {
             this._fixedExtent = new PointExtent();
         }
         const symbol = this._sizeSymbol;
-        const t = (symbol && symbol['lineWidth'] || 1) / 2;
+        let t = (symbol && symbol['lineWidth'] || 1) / 2;
+        const border = (symbol && symbol['lineStrokeWidth'] || 0);
+        t += border;
         this._fixedExtent.set(-t, -t, t, t);
         const dx = (symbol && symbol['lineDx']) || 0;
         this._fixedExtent._add([dx, 0]);

packages/maptalks/src/geometry/Path.ts

@@ -451,19 +451,25 @@ export class Path extends Geometry {
     //@internal
     _hitTestTolerance(): number {
         const symbol = this._getInternalSymbol();
-        let w;
+        let w, border = 0;
         if (Array.isArray(symbol)) {
             w = 0;
+
             for (let i = 0; i < symbol.length; i++) {
                 if (isNumber(symbol[i]['lineWidth'])) {
                     if (symbol[i]['lineWidth'] > w) {
                         w = symbol[i]['lineWidth'];
                     }
                 }
+                if (isNumber(symbol[i]['lineStrokeWidth'])) {
+                    border = Math.max(border, symbol[i]['lineStrokeWidth']);
+                }
             }
         } else {
             w = symbol['lineWidth'];
+            border = symbol['lineStrokeWidth'] || 0;
         }
+        w += border * 2;
         return super._hitTestTolerance() + (isNumber(w) ? w / 2 : 1.5);
     }
 

packages/maptalks/src/renderer/geometry/symbolizers/StrokeAndFillSymbolizer.ts

@@ -189,6 +189,8 @@ export default class StrokeAndFillSymbolizer extends CanvasSymbolizer {
             linePatternDx: getValueOrDefault(s['linePatternDx'], 0),
             linePatternDy: getValueOrDefault(s['linePatternDy'], 0),
             lineGradientProperty: getValueOrDefault(s['lineGradientProperty'], null),
+            lineStrokeColor: getValueOrDefault(s['lineStrokeColor'], null),
+            lineStrokeWidth: getValueOrDefault(s['lineStrokeWidth'], null),
         };
         if (result['lineWidth'] === 0) {
             result['lineOpacity'] = 0;

packages/maptalks/src/symbol/index.ts

@@ -129,6 +129,8 @@ export type LineSymbol = {
     lineDx?: SymbolNumberType;
     lineDy?: SymbolNumberType;
     lineGradientProperty?: string;
+    lineStrokeColor?: SymbolColorType;
+    lineStrokeWidth?: SymbolNumberType;
 }
 
 export type FillSymbol = {

packages/maptalks/src/types/typings.ts

@@ -18,5 +18,7 @@ declare global {
         isMultiClip: boolean;
         dpr: number;
         lineColorIn: any;
+        lineStrokeColor: any;
+        lineStrokeWidth:any;
     }
 }

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

@@ -496,4 +496,68 @@ describe('SymbolSpec', function () {
         }, 200);
 
     });
+
+    describe('#2599 symbol with lineStrokeColor and lineStrokeWidth', function () {
+        it('line with lineStrokeColor', function (done) {
+
+            const symbol = {
+                lineColor: 'black',
+                lineWidth: 4,
+                lineStrokeWidth: 4,
+                lineStrokeColor: 'red'
+            };
+            layer = new maptalks.VectorLayer('layer').addTo(map);
+
+            const c1 = map.getCenter();
+            const c2 = c1.add(0.1, 0);
+            // eslint-disable-next-line no-unused-vars
+            var line = new maptalks.LineString([c1, c2], {
+                symbol
+
+            }).addTo(layer);
+
+            setTimeout(() => {
+                expect(layer).to.be.painted(0, 0);
+                expect(layer).to.be.painted(0, -3);
+                expect(layer).to.be.painted(0, 3);
+                layer.remove();
+                done();
+
+            }, 200);
+
+        });
+        it('polygon line with lineStrokeColor', function (done) {
+
+            const symbol = {
+                lineColor: 'black',
+                lineWidth: 4,
+                lineStrokeWidth: 4,
+                lineStrokeColor: 'red'
+            };
+            layer = new maptalks.VectorLayer('layer').addTo(map);
+
+            const c1 = map.getCenter();
+            const c2 = c1.add(0.1, 0);
+            const c3 = c1.add(0.1, -0.1);
+            const c4 = c1.add(0, -0.1);
+            // eslint-disable-next-line no-unused-vars
+            var line = new maptalks.Polygon([[c1, c2, c3, c4]], {
+                symbol
+
+            }).addTo(layer);
+
+            setTimeout(() => {
+                expect(layer).to.be.painted(0, 0);
+                expect(layer).to.be.painted(0, -3);
+                expect(layer).to.be.painted(0, 3);
+                layer.remove();
+                done();
+
+            }, 200);
+
+        });
+
+    });
+
+
 });