【SDK】【MapboxGL】【修复专题图的ES6导出&去除无效日志】

Author: 潘卓然ParnDeedlit

src/cesiumjs/overlay/PopupLayer.js

@@ -92,18 +92,15 @@ export default class PopupLayer {
         let parents = document.getElementsByClassName('cesium-widget');
         parent = parents.length > 0 ? parents[0] : map.container;
         this.parent = parent;
-        console.log('popup parent', parent);
 
         // this.initDevicePixelRatio();
         this.showClose = options.showClose === undefined ? true : options.showClose;
         this.popup = this._createPopup();
-        console.log('popup 3');
 
         this.moveStart = this.eventMoveStart.bind(this);
         this.moveEnd = this.eventMoveEnd.bind(this);
         this.movement = this.movement.bind(this);
         this.update = this.update.bind(this);
-        console.log('popup 4');
 
         this.bindEvent();
 

src/mapboxgl/theme/RandomThemeLayer.js

@@ -1,9 +1,9 @@
-import mapboxgl from "@mapgis/mapbox-gl";
-import { Zondy } from "../../service/common/Base";
-import { copyAttributesWithClip } from "../../service/common/Util";
-import { GeoFeatureThemeLayer } from "./GeoFeatureThemeLayer";
-import { ThemeVector } from "../../common/overlay/ThemeVector";
-import { ShapeFactory } from "../../common/overlay/feature/ShapeFactory";
+import mapboxgl from '@mapgis/mapbox-gl';
+import { Zondy } from '../../service/common/Base';
+import { copyAttributesWithClip } from '../../service/common/Util';
+import { GeoFeatureThemeLayer } from './GeoFeatureThemeLayer';
+import { ThemeVector } from '../../common/overlay/ThemeVector';
+import { ShapeFactory } from '../../common/overlay/feature/ShapeFactory';
 
 /**
  * @class Zondy.Map.randomThemeLayer
@@ -22,74 +22,70 @@ import { ShapeFactory } from "../../common/overlay/feature/ShapeFactory";
  * @extends {Zondy.Map.GeoFeatureThemeLayer}
  */
 class RandomThemeLayer extends GeoFeatureThemeLayer {
-  constructor(name, options) {
-    super(name, options);
-    this.style = options.style;
-    this.isHoverAble = options.isHoverAble;
-    this.highlightStyle = options.highlightStyle;
-    this.themeField = options.themeField;
-    this.styleGroups = options.styleGroups;
-  }
+    constructor(name, options) {
+        super(name, options);
+        this.style = options.style;
+        this.isHoverAble = options.isHoverAble;
+        this.highlightStyle = options.highlightStyle;
+        this.themeField = options.themeField;
+        this.styleGroups = options.styleGroups;
+    }
 
-  /**
-   * @function Zondy.Map.randomThemeLayer.prototype.getColor
-   * @description 获取随机颜色。
-   */
-  getColor() {
-    var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
-    var colorArray = colorValue.split(",");
-    var color = "#"; //定义一个存放十六进制颜色值的字符串变量，先将#存放进去
-    for (var i = 0; i < 6; i++) {
-      color += colorArray[Math.floor(Math.random() * 16)];
+    /**
+     * @function Zondy.Map.randomThemeLayer.prototype.getColor
+     * @description 获取随机颜色。
+     */
+    getColor() {
+        var colorValue = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';
+        var colorArray = colorValue.split(',');
+        var color = '#'; //定义一个存放十六进制颜色值的字符串变量，先将#存放进去
+        for (var i = 0; i < 6; i++) {
+            color += colorArray[Math.floor(Math.random() * 16)];
+        }
+        return color;
     }
-    return color;
-  }
 
-  /**
-   * @function Zondy.Map.randomThemeLayer.prototype.createThematicFeature
-   * @description 创建专题图要素。
-   * @param {Object} feature - 要创建的专题图形要素。
-   */
-  createThematicFeature(feature) {
-    //赋 style
-    var style = this.getStyleByData(feature);
-    //创建专题要素时的可选参数
-    var options = {};
-    options.nodesClipPixel = this.nodesClipPixel;
-    options.isHoverAble = this.isHoverAble;
-    options.isMultiHover = this.isMultiHover;
-    options.isClickAble = this.isClickAble;
-    options.highlightStyle = ShapeFactory.transformStyle(this.highlightStyle);
+    /**
+     * @function Zondy.Map.randomThemeLayer.prototype.createThematicFeature
+     * @description 创建专题图要素。
+     * @param {Object} feature - 要创建的专题图形要素。
+     */
+    createThematicFeature(feature) {
+        //赋 style
+        var style = this.getStyleByData(feature);
+        //创建专题要素时的可选参数
+        var options = {};
+        options.nodesClipPixel = this.nodesClipPixel;
+        options.isHoverAble = this.isHoverAble;
+        options.isMultiHover = this.isMultiHover;
+        options.isClickAble = this.isClickAble;
+        options.highlightStyle = ShapeFactory.transformStyle(this.highlightStyle);
 
-    //将数据转为专题要素（Vector）
-    var thematicFeature = new ThemeVector(
-      feature,
-      this,
-      ShapeFactory.transformStyle(style),
-      options
-    );
+        //将数据转为专题要素（Vector）
+        var thematicFeature = new ThemeVector(feature, this, ShapeFactory.transformStyle(style), options);
 
-    //直接添加图形到渲染器
-    for (var m = 0; m < thematicFeature.shapes.length; m++) {
-      this.renderer.addShape(thematicFeature.shapes[m]);
+        //直接添加图形到渲染器
+        for (var m = 0; m < thematicFeature.shapes.length; m++) {
+            this.renderer.addShape(thematicFeature.shapes[m]);
+        }
+        return thematicFeature;
     }
-    return thematicFeature;
-  }
 
-  /**
-   * @private
-   * @function Zondy.Map.randomThemeLayer.prototype.getStyleByData
-   * @description 获取 style。
-   */
-  getStyleByData() {
-    var me = this;
-    var style = copyAttributesWithClip({}, me.style);
-    style.fillColor = me.getColor();
-    return style;
-  }
+    /**
+     * @private
+     * @function Zondy.Map.randomThemeLayer.prototype.getStyleByData
+     * @description 获取 style。
+     */
+    getStyleByData() {
+        var me = this;
+        var style = copyAttributesWithClip({}, me.style);
+        style.fillColor = me.getColor();
+        return style;
+    }
 }
 
-export var randomThemeLayer = function(name, options) {
-  return new RandomThemeLayer(name, options);
+export { RandomThemeLayer };
+export var randomThemeLayer = function (name, options) {
+    return new RandomThemeLayer(name, options);
 };
 Zondy.Map.randomThemeLayer = randomThemeLayer;

src/mapboxgl/theme/RangeTheme3DLayer.js

@@ -1,6 +1,6 @@
 import { Zondy } from '../../service/common/Base';
-import {Theme3DLayer} from './Theme3DLayer';
-import {extend} from '../../service/common/Util';
+import { Theme3DLayer } from './Theme3DLayer';
+import { extend } from '../../service/common/Util';
 
 /**
  * @class RangeTheme3DLayer
@@ -27,7 +27,6 @@ import {extend} from '../../service/common/Util';
  *       });
  */
 class RangeTheme3DLayer extends Theme3DLayer {
-
     constructor(id, layerOptions) {
         super(id, layerOptions);
         /**
@@ -67,33 +66,33 @@ class RangeTheme3DLayer extends Theme3DLayer {
         var reg = /^[0-9]+.?[0-9]*$/;
         var options = {
             'fill-extrusion-color': {
-                'stops': this.colorStops,
-                'property': this.themeField || this.heightField,
-                'type': 'interval',
-                'base': reg.test(this.base) ? this.base : 1
+                stops: this.colorStops,
+                property: this.themeField || this.heightField,
+                type: 'interval',
+                base: reg.test(this.base) ? this.base : 1
             },
             'fill-extrusion-opacity': opacity
         };
         if (this.heightStops) {
             options['fill-extrusion-height'] = {
-                'stops': this.heightStops,
-                'property': this.heightField || 'height',
-                'base': reg.test(this.base) ? this.base : 1
-            }
+                stops: this.heightStops,
+                property: this.heightField || 'height',
+                base: reg.test(this.base) ? this.base : 1
+            };
         } else if (this.height) {
             options['fill-extrusion-height'] = this.height;
         } else {
             options['fill-extrusion-height'] = {
-                'property': this.heightField || 'height',
-                'type': 'identity'
-            }
+                property: this.heightField || 'height',
+                type: 'identity'
+            };
         }
 
         if (this.baseHeightField) {
             options['fill-extrusion-base'] = {
-                'property': this.baseHeightField,
-                'type': 'identity'
-            }
+                property: this.baseHeightField,
+                type: 'identity'
+            };
         }
         return options;
     }
@@ -104,55 +103,54 @@ class RangeTheme3DLayer extends Theme3DLayer {
      * @returns {Object}  mapbox gl样式对象
      */
     getHighlightStyleOptions() {
-        var color = (this.highlight && this.highlight.color != null) ? this.highlight.color : '#ADA91E';
+        var color = this.highlight && this.highlight.color != null ? this.highlight.color : '#ADA91E';
         return {
             'fill-extrusion-color': color,
             'fill-extrusion-height': {
-                "stops": this.heightStops,
-                "property": this.heightField
+                stops: this.heightStops,
+                property: this.heightField
             },
-            'fill-extrusion-opacity': this.highlight && this.highlight.opacity || 0.6
-        }
+            'fill-extrusion-opacity': (this.highlight && this.highlight.opacity) || 0.6
+        };
     }
 
     _createLegendElement() {
-        var len = this.colorStops && this.colorStops.length || 0;
+        var len = (this.colorStops && this.colorStops.length) || 0;
         //颜色分段对应标识
-        var legendListElement = "<ul>";
+        var legendListElement = '<ul>';
         var i;
         for (i = 0; i < len; i++) {
             var value = this.colorStops[i][0];
             var text = this._getWrapperText(value);
             if (i === len - 1) {
-                text = "> " + text;
+                text = '> ' + text;
             } else {
                 var next = this._getWrapperText(this.colorStops[i + 1][0]);
-                text = text + "-" + next;
+                text = text + '-' + next;
             }
 
             var color = this.colorStops[i][1];
 
-            legendListElement += "<li><span style='background-color:" + color + ";'></span><span>" + text + "</span></li>";
+            legendListElement += "<li><span style='background-color:" + color + ";'></span><span>" + text + '</span></li>';
         }
-        legendListElement += "</ul>";
+        legendListElement += '</ul>';
         return legendListElement;
     }
 
     _getWrapperText(number) {
-        var value = number * ((this.legendRatio == null) ? 1 : parseFloat(this.legendRatio));
+        var value = number * (this.legendRatio == null ? 1 : parseFloat(this.legendRatio));
 
         //单个颜色值宽度为60px,最大只能完全显示1000000，否则就超出宽度，则显示以为k计数单位的值
         var num = parseFloat(value);
         if (num % 1000000 <= 1000000) {
             return num.toString();
         }
-        return parseInt(num / 1000) + 'k'
+        return parseInt(num / 1000) + 'k';
     }
-
-};
-export {RangeTheme3DLayer};
+}
+export { RangeTheme3DLayer };
 export var rangeTheme3DLayer = function (id, layerOptions) {
     return new RangeTheme3DLayer(id, layerOptions);
 };
 
-Zondy.Map.rangeTheme3DLayer = rangeTheme3DLayer;
+Zondy.Map.rangeTheme3DLayer = rangeTheme3DLayer;