symbol VectorMarker support roundrectangle type (#2587)

* symbol VectorMarker support roundrectangle type

* fix lint

Author: deyihu

packages/maptalks/src/core/Browser.ts

@@ -36,6 +36,7 @@ type BrowserType = {
     ie10: boolean;
     webgl: boolean;
     imageBitMap: boolean;
+    roundRect: boolean;
     resizeObserver: boolean;
     btoa: boolean;
     decodeImageInWorker: boolean;
@@ -83,7 +84,8 @@ if (!IS_NODE) {
         resizeObserver = typeof window !== 'undefined' && isFunction(window.ResizeObserver),
         btoa = typeof window !== 'undefined' && isFunction(window.btoa),
         proxy = typeof window !== 'undefined' && isFunction(window.Proxy),
-        requestIdleCallback = typeof window !== 'undefined' && isFunction(window.requestIdleCallback);
+        requestIdleCallback = typeof window !== 'undefined' && isFunction(window.requestIdleCallback),
+        roundRect = typeof CanvasRenderingContext2D !== 'undefined' && isFunction(CanvasRenderingContext2D.prototype.roundRect);
 
 
     let chromeVersion: any = 0;
@@ -122,7 +124,7 @@ if (!IS_NODE) {
     try {
 
         const opts = Object.defineProperty({}, 'passive', {
-            get: function() {
+            get: function () {
                 supportsPassive = true;
             }
         });
@@ -175,6 +177,7 @@ if (!IS_NODE) {
 
         webgl: webgl,
         imageBitMap,
+        roundRect,
         resizeObserver,
         btoa,
         decodeImageInWorker,
@@ -204,5 +207,8 @@ if (!IS_NODE) {
         //     // }
         // }
     };
+    if (!Browser.roundRect) {
+        console.warn('current env the canvas not support roundRect');
+    }
 }
 export default Browser;

packages/maptalks/src/core/Canvas.ts

@@ -1307,6 +1307,43 @@ const Canvas = {
         Canvas._stroke(ctx, lineOpacity);
     },
 
+    roundRect(ctx: CanvasRenderingContext2D, points: Array<Point>, lineOpacity?: number, fillOpacity?: number) {
+        //canvas not support roundRect https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/roundRect
+        if (!Browser.roundRect) {
+            return;
+        }
+        let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
+        for (let i = 0, len = points.length; i < len; i++) {
+            const p = points[i];
+            const { x, y } = p;
+            minx = Math.min(minx, x);
+            miny = Math.min(miny, y);
+            maxx = Math.max(maxx, x);
+            maxy = Math.max(maxy, y);
+
+        }
+        const width = Math.max(maxx - minx), height = Math.abs(maxy - miny);
+        if (width * height <= 0) {
+            return;
+        }
+        const min = Math.min(width, height);
+        ctx.roundRect(minx, miny, width, height, min / 4);
+
+        const globalAlpha = ctx.globalAlpha;
+        if (isNumber(fillOpacity) && fillOpacity < 1) {
+            ctx.globalAlpha = 1;
+            ctx.globalAlpha *= fillOpacity;
+        }
+        ctx.fill();
+        ctx.globalAlpha = globalAlpha;
+        if (isNumber(lineOpacity) && lineOpacity < 1) {
+            ctx.globalAlpha = 1;
+            ctx.globalAlpha *= lineOpacity;
+        }
+        ctx.stroke();
+        ctx.globalAlpha = globalAlpha;
+    },
+
     //@internal
     _multiClip(ctx, points) {
         if (!points || points.length === 0) return;

packages/maptalks/src/core/util/draw.ts

@@ -57,17 +57,23 @@ export function drawVectorMarker(ctx: CanvasRenderingContext2D, point, symbol, r
         //线类型
         Canvas.path(ctx, vectorArray.slice(0, 2), lineOpacity);
         Canvas.path(ctx, vectorArray.slice(2, 4), lineOpacity);
-    } else if (markerType === 'diamond' || markerType === 'bar' || markerType === 'square' || markerType === 'rectangle' || markerType === 'triangle') {
+    } else if (markerType === 'diamond' || markerType === 'bar' || markerType === 'square' || markerType === 'rectangle' || markerType === 'triangle' || markerType === 'roundrectangle') {
         if (markerType === 'bar') {
             point = point.add(0, -hLineWidth);
-        } else if (markerType === 'rectangle') {
+        } else if (markerType === 'rectangle' || markerType === 'roundrectangle') {
             point = point.add(hLineWidth, hLineWidth);
         }
         for (let j = vectorArray.length - 1; j >= 0; j--) {
             vectorArray[j]._add(point);
         }
-        //面类型
-        Canvas.polygon(ctx, vectorArray, lineOpacity, fillOpacity);
+
+        if (markerType === 'roundrectangle') {
+            //round rectangle, draw the corners
+            Canvas.roundRect(ctx, vectorArray, lineOpacity, fillOpacity);
+        } else {
+            //面类型
+            Canvas.polygon(ctx, vectorArray, lineOpacity, fillOpacity);
+        }
     } else if (markerType === 'pin') {
         point = point.add(0, -hLineWidth);
         for (let j = vectorArray.length - 1; j >= 0; j--) {
@@ -140,7 +146,7 @@ export function translateMarkerLineAndFill<T extends Partial<TemplateSymbol>>(s:
     return result;
 }
 
-export type MarkerType = 'triangle' | 'cross' | 'diamond' | 'square' | 'rectangle' | 'x' | 'bar' | 'pin' | 'pie'
+export type MarkerType = 'triangle' | 'cross' | 'diamond' | 'square' | 'rectangle' | 'roundrectangle' | 'x' | 'bar' | 'pin' | 'pie'
 
 export function getVectorMarkerPoints(markerType: MarkerType, width: number, height: number) {
     //half height and half width
@@ -172,7 +178,7 @@ export function getVectorMarkerPoints(markerType: MarkerType, width: number, hei
         v2 = new Point((left + hw), (top - hh));
         v3 = new Point((left - hw), (top - hh));
         return [v0, v1, v2, v3];
-    } else if (markerType === 'rectangle') {
+    } else if (markerType === 'rectangle' || markerType === 'roundrectangle') {
         v0 = new Point(left, top);
         v1 = v0.add(width, 0);
         v2 = v0.add(width, height);

packages/maptalks/src/core/util/marker.ts

@@ -152,7 +152,7 @@ export function getVectorMarkerFixedExtent(out: PointExtent, symbol: any, size?:
 }
 
 export function getDefaultHAlign(markerType?: MarkerType) {
-    if (markerType === 'rectangle') {
+    if (markerType === 'rectangle' || markerType === 'roundrectangle') {
         return 'right';
     } else {
         return 'middle';
@@ -162,7 +162,7 @@ export function getDefaultHAlign(markerType?: MarkerType) {
 export function getDefaultVAlign(markerType?: MarkerType) {
     if (markerType === 'bar' || markerType === 'pie' || markerType === 'pin') {
         return 'top';
-    } else if (markerType === 'rectangle') {
+    } else if (markerType === 'rectangle' || markerType === 'roundrectangle') {
         return 'bottom';
     } else {
         return 'middle';
@@ -213,7 +213,7 @@ function rotateExtent(fixedExtent: PointExtent, angle: number) {
     return ROTATE_EXTENT.convertTo(p => p._rotate(angle), fixedExtent);
 }
 
-export function getMarkerRotation(symbol:any, prop = 'markerRotation') {
+export function getMarkerRotation(symbol: any, prop = 'markerRotation') {
     const r = symbol[prop];
     if (!isNumber(r)) {
         return 0;

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

@@ -183,7 +183,7 @@ export default class VectorMarkerSymbolizer extends PointSymbolizer {
         const markerType = this.style['markerType'];
         if (markerType === 'bar' || markerType === 'pie' || markerType === 'pin') {
             return new Point(w / 2, h - margin);
-        } else if (markerType === 'rectangle') {
+        } else if (markerType === 'rectangle' || markerType === 'roundrectangle') {
             return new Point(margin, margin);
         } else {
             return new Point(w / 2, h / 2);

packages/maptalks/src/symbol/index.ts

@@ -70,7 +70,7 @@ export type FileMarkerSymbol = {
 } & MarkerCommonSymbol & SymbolCommon;
 
 export type VectorMarkerSymbol = {
-    markerType: 'ellipse' | 'cross' | 'x' | 'diamond' | 'bar' | 'square' | 'rectangle' | 'triangle' | 'pin' | 'pie';
+    markerType: 'ellipse' | 'cross' | 'x' | 'diamond' | 'bar' | 'square' | 'rectangle' | 'roundrectangle' | 'triangle' | 'pin' | 'pie';
     markerFill?: SymbolColorType;
     markerFillPatternFile?: string;
     markerFillOpacity?: number;