【SDK】【服务】【新增注记样式的Marker的MapboxGL实现】

潘卓然ParnDeedlit · 潘卓然ParnDeedlit · commit 8c2dc6be1ee0 · 2022-02-21T17:43:21.000+08:00
diff --git a/src/service/base/style/ExtrudeStyle.js b/src/service/base/style/ExtrudeStyle.js
@@ -7,8 +7,7 @@ import { Symbol } from './Symbol';
  * 拉伸体样式
  * @class mapgis.style.ExtrudeStyle
  * @classdesc 拉伸体样式
- * @param {Number} [outlineWidth = 0] 拉伸体外边线宽度，默认为1
- * @param {String} [outlineColor = #FFFFFF] 拉伸体外边线颜色，16进制颜色或rgb值或rgba值，默认#FFFFFF，白色
+ * @param {String} [color = #FFFFFF] 拉伸体外边线颜色，16进制颜色或rgb值或rgba值，默认#FFFFFF，白色
  * @param {Object} [shadowStyle = undefined] 阴影样式，默认undefined
  * @param {Object} [symbolStyle = undefined] 填充图案样式，默认undefined
  * @param {Object} [outlineSymbolStyle = undefined] 拉伸体外边线填充图案样式，默认undefined
@@ -17,14 +16,54 @@ export default class ExtrudeStyle extends VectorStyle {
     constructor(option) {
         super();
         var options = option ? option : {};
-        const { symbol } = options;
+        const { color = '#FFFFFF', opacity = 1.0, symbol } = options;
+        const { castShadows = true, edges, size = 1, material } = options;
+
         this.type = 'extrude';
-        this.outlineWidth = 1;
-        this.outlineColor = '#FFFFFF';
-        this.shadowStyle = undefined;
+
+        this.color = color;
+        this.opacity = opacity;
         this.symbolStyle = symbol || new Symbol();
+
+        this.castShadows = castShadows;
+        this.edges = edges;
+        this.material = material || color;
+        this.size = size;
+
         extend(this, options);
     }
+
+    /**
+     * @param  {Boolean} [highlight = false] 是否激活高亮样式
+     * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion
+     * @returns MapboxGL线格式的样式
+     */
+    toMapboxStyle(options) {
+        options = options || {};
+        const { highlight = false } = options;
+        let { material, size, opacity, symbolStyle } = this;
+        const { pattern, xoffset, yoffset } = symbolStyle;
+        let style = {
+            filter: ['==', '$type', 'Polygon'],
+            paint: {
+                'fill-extrusion-base': 0,
+                'fill-extrusion-color': material,
+                'fill-extrusion-height': size,
+                'fill-extrusion-opacity': opacity,
+                'fill-extrusion-translate': [xoffset, yoffset],
+                'fill-extrusion-translate-anchor': 'map',
+                'fill-extrusion-vertical-gradient': true
+            }
+        };
+        if (symbolStyle && pattern) {
+            style.paint['fill-extrusion-pattern'] = pattern;
+        }
+        if (highlight) {
+            style.paint['fill-extrusion-color'] = ['case', ['boolean', ['feature-state', 'hover'], false], material, 'rgba(0,0,0,0)'];
+            style.paint['fill-extrusion-base'] = ['case', ['boolean', ['feature-state', 'hover'], false], 100, 0];
+        }
+        return style;
+    }
 }
 
 export { ExtrudeStyle };
diff --git a/src/service/base/style/MarkerStyle.js b/src/service/base/style/MarkerStyle.js
@@ -25,35 +25,76 @@ export default class MarkerStyle extends VectorStyle {
         extend(this, options);
     }
 
+    /**
+     * @param  {Boolean} [highlight = false] 是否激活高亮样式
+     * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol
+     * @returns MapboxGL点格式的样式
+     */
+    toMapboxStyle(options) {
+        options = options || {};
+        const { highlight = false } = options;
+        const { symbol } = this;
+        const { allowOverlap, color, pattern, opacity } = symbol;
+        const { size, rotate, xoffset, yoffset } = symbol;
+
+        let mapstyle = {
+            paint: {
+                'icon-color': color,
+                'icon-opacity': opacity
+            },
+            layout: {
+                'icon-allow-overlap': allowOverlap,
+                'icon-offset': [xoffset, yoffset],
+                'icon-size': size,
+                'icon-rotate': rotate
+            }
+        };
+        if (pattern) {
+            mapstyle.layout['icon-image'] = pattern;
+        }
+        if (highlight) {
+        }
+        return mapstyle;
+    }
+
     /**
      * @link https://sandcastle.cesium.com/index.html?src=Circles%20and%20Ellipses.html&label=Geometries
      * @returns Cesium点格式的样式
      */
     toCesiumStyle(options, feature, Cesium) {
         const {
-            field = "", scale = 1, backgroundColor = "#FFFFFF", backgroundOpacity = 0, color = "#FFFFFF", opacity = 1,
-            outlineColor = "#FFFFFF", outlineOpacity = 1, outlineWidth = 0,xOffset = 0 , yOffset = 0, text, show = true
-        } = options;
-        const {
-            url = "", rotation = 0, imageScale = 1, width, height
+            field = '',
+            scale = 1,
+            backgroundColor = '#FFFFFF',
+            backgroundOpacity = 0,
+            color = '#FFFFFF',
+            opacity = 1,
+            outlineColor = '#FFFFFF',
+            outlineOpacity = 1,
+            outlineWidth = 0,
+            xOffset = 0,
+            yOffset = 0,
+            text,
+            show = true
         } = options;
+        const { url = '', rotation = 0, imageScale = 1, width, height } = options;
         let labelText;
-        if(field && feature.properties && feature.properties[field]){
+        if (field && feature.properties && feature.properties[field]) {
             labelText = feature.properties[field];
         }
-        if(text){
+        if (text) {
             labelText = text;
         }
         let billboard = {
             show: show,
             image: url,
             rotation: rotation,
             scale: imageScale
-        }
-        if(width){
+        };
+        if (width) {
             billboard.width = width;
         }
-        if(height){
+        if (height) {
             billboard.height = height;
         }
         return {
@@ -66,7 +107,7 @@ export default class MarkerStyle extends VectorStyle {
                 outlineColor: Cesium.Color.fromCssColorString(outlineColor).withAlpha(outlineOpacity),
                 outlineWidth: outlineWidth,
                 backgroundColor: Cesium.Color.fromCssColorString(backgroundColor).withAlpha(backgroundOpacity),
-                pixelOffset: new Cesium.Cartesian2(xOffset, yOffset * -1),
+                pixelOffset: new Cesium.Cartesian2(xOffset, yOffset * -1)
             },
             billboard: billboard
         };
diff --git a/src/service/base/style/Symbol.js b/src/service/base/style/Symbol.js
@@ -6,7 +6,7 @@ import { Anchor } from './Enum';
  * 符号样式
  * @class mapgis.style.SymbolStyle
  * @classdesc 符号样式
- * @param {String} [symbol = ""] 符号名称或url
+ * @param {String} [pattern = ""] 符号名称或url
  * @param {Number} [opacity = 1] 透明度，0~1之间的值，默认为1，不透明
  * @param {String} [color = #FFFFFF] 颜色，十六进制或RGB，默认为#FFFFFF，白色
  * @param {Number} [size = 1] 符号大小
@@ -18,15 +18,20 @@ import { Anchor } from './Enum';
 export default class Symbol {
     constructor(option) {
         var options = option ? option : {};
-        const { symbol } = options;
-        this.symbol = symbol || '';
-        this.opacity = 1;
-        this.color = '#FFFFFF';
-        this.size = 1;
-        this.rotate = 0;
-        this.offsetX = 0;
-        this.offsetY = 0;
+        const { pattern = undefined, opacity = 1.0, allowOverlap = false } = options;
+        const { color = '#FFFFFF', size = 1, rotate = 0 } = options;
+        const { xoffset = 0, yoffset = 0 } = options;
+
+        this.allowOverlap = allowOverlap;
+        this.pattern = pattern;
+        this.opacity = opacity;
+        this.color = color;
+        this.size = size;
+        this.rotate = rotate;
+        this.xoffset = xoffset;
+        this.yoffset = yoffset;
         this.anchor = Anchor.center;
+
         extend(this, options);
     }
 }
diff --git a/src/service/base/style/TextStyle.js b/src/service/base/style/TextStyle.js
@@ -28,13 +28,15 @@ export default class TextStyle extends VectorStyle {
     constructor(option) {
         super();
         var options = option ? option : {};
-        const { angle = 0, color = '#000000', font } = options;
+        const { angle = 0, allowOverlap = false } = options;
         const { backgroundColor, borderLineColor, borderLineSize } = options;
+        const { color = '#000000', font } = options;
         const { haloColor = '#000000', haloSize = 0, horizontalAlignment = HorizontalAlignment.center } = options;
         const { kerning = true, lineHeight = 1.0, lineWidth = 192 } = options;
         const { rotated = false, text = '', type = 'text', verticalAlignment = VerticalAlignment.baseline } = options;
         const { xoffset = 0, yoffset = 0 } = options;
 
+        this.allowOverlap = allowOverlap;
         this.angle = angle;
         this.backgroundColor = backgroundColor;
         this.borderLineColor = borderLineColor;
@@ -59,13 +61,13 @@ export default class TextStyle extends VectorStyle {
 
     /**
      * @param  {Boolean} [highlight = false] 是否激活高亮样式
-     * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle
+     * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol
      * @returns MapboxGL点格式的样式
      */
     toMapboxStyle(options) {
         options = options || {};
         const { highlight = false } = options;
-        const { angle, color, font } = this;
+        const { angle, allowOverlap, color, font } = this;
         const { family, size, style, weight } = font;
         const { backgroundColor, borderLineColor, borderLineSize } = this;
         const { haloColor, haloSize, horizontalAlignment } = this;
@@ -86,7 +88,8 @@ export default class TextStyle extends VectorStyle {
                 'text-max-width': lineWidth,
                 'text-field': text,
                 'text-offset': [xoffset, yoffset],
-                'text-size': size
+                'text-size': size,
+                'text-allow-overlap': allowOverlap
             }
         };
         if (highlight) {
