xy-map 1.1.31 → 1.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xy-map",
-  "version": "1.1.31",
+  "version": "1.1.33",
   "description": "雄越地图",
   "main": "xy-map.umd.min.js",
   "scripts": {

package/xy-map.common.js

@@ -224,7 +224,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".mapLoad[data-v-fa3ebcb8]{position:abs
 
 /***/ }),
 
-/***/ 7237:
+/***/ 2071:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -238,7 +238,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".snow[data-v-59d7e867]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-color:rgba(145,147,184,.103)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".snow[data-v-20664206]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-color:rgba(145,147,184,.103)}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -42912,19 +42912,19 @@ var update = add("7474eb16", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 1901:
+/***/ 6916:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(7237);
+var content = __webpack_require__(2071);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(7037)/* ["default"] */ .Z)
-var update = add("933c13ea", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("4a7b31d4", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -43868,7 +43868,9 @@ var defaultOptions = {
     'sources': {
       'nav': {
         'type': 'raster',
-        'tiles': ['https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg' // mapbox
+        'tiles': [
+        // 'https://tiles2.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=74b34fe951b7f641aacb67fbfb0dfb14a445c7ae4481de804740e8b297d6fdec', // 星球影像
+        'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg' // mapbox
         // 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', // ArcGIS
         // 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', // 高德
         // 'https://map.ynmdgq.com/{z}/{x}/{y}.png' // 本地
@@ -43884,6 +43886,12 @@ var defaultOptions = {
       'source': 'nav'
     }]
   },
+  light: {
+    anchor: 'map',
+    // “viewport”：光照位置不变，所以building旋转的时候，其表面明暗程度会变化； “map”：光照随地图位置变化，所以buliding旋转的时候，其表面明显程度不会变化了
+    color: 'white',
+    intensity: 0.4
+  },
   is3d: true,
   // 3d视图
   antialias: false,
@@ -70906,15 +70914,20 @@ const addLayerPoint = (option, layerId) => {
 /**
  * 添加闪烁点图层
  */
-const addFlashPoint = (option = {
-  id: 'flash',
-  data: [],
-  time: 0,
-  // 闪烁时间
-  size: 140 // 大小
-}, layerId) => {
+const addFlashPoint = (option = {}, layerId) => {
   // 点
 
+  option = Object.assign({}, {
+    id: 'flash',
+    data: [],
+    time: 0,
+    // 闪烁时间
+    size: 140,
+    // 大小
+    outerRgb: [255, 255, 255],
+    centerColor: 'rgba(255, 100, 100, 1)',
+    strokeColor: '#fff'
+  }, option);
   let {
     map
   } = package_map;
@@ -70940,14 +70953,14 @@ const addFlashPoint = (option = {
       context.clearRect(0, 0, this.width, this.height);
       context.beginPath();
       context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
-      context.fillStyle = `rgba(255, 255, 255, ${1 - t})`;
+      context.fillStyle = `rgba(${option.outerRgb[0]}, ${option.outerRgb[1]}, ${option.outerRgb[2]}, ${1 - t})`;
       context.fill();
 
       // Draw the inner circle.
       context.beginPath();
       context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
-      context.fillStyle = 'rgba(255, 100, 100, 1)';
-      context.strokeStyle = 'white';
+      context.fillStyle = option.centerColor;
+      context.strokeStyle = option.strokeColor;
       context.lineWidth = 2 + 4 * (1 - t);
       context.fill();
       context.stroke();
@@ -118320,8 +118333,8 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var mapMarker = (component.exports);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=template&id=59d7e867&scoped=true&
-var mapRainvue_type_template_id_59d7e867_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=template&id=20664206&scoped=true&
+var mapRainvue_type_template_id_20664206_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('canvas', {
@@ -118331,14 +118344,14 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_render = function render()
     }
   }, [_vm._v("不支持canvas")]);
 };
-var mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns = [];
+var mapRainvue_type_template_id_20664206_scoped_true_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=script&lang=js&
 /* harmony default export */ var mapRainvue_type_script_lang_js_ = ({
   props: {
     id: {
       type: String,
-      default: 'snow'
+      default: 'rain'
     },
     angle: {
       // 角度
@@ -118353,17 +118366,24 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns = [];
     len: {
       // 雨滴长度
       type: Number,
-      default: 80
+      default: 70
     },
-    count: {
-      // 雨滴数量
+    lineWidth: {
+      // 雨滴宽度
       type: Number,
-      default: 500
+      default: 1.5
+    },
+    isRain: {
+      // 是否下雨
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
-      timer: ''
+      timer: '',
+      ctx: null,
+      count: 500
     };
   },
   destroyed() {
@@ -118372,61 +118392,77 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns = [];
   mounted() {
     this.start();
   },
+  watch: {
+    status() {
+      window.clearInterval(this.timer);
+      this.start();
+    }
+  },
   methods: {
     start() {
+      this.$nextTick(() => {
+        const canvas = document.getElementById(this.id);
+        const width = canvas.clientWidth;
+        const height = canvas.clientHeight;
+        if (this.status === 'small') {
+          this.count = 100;
+        }
+        if (this.status === 'default') {
+          this.count = 300;
+        }
+        if (this.status === 'large') {
+          this.count = 1000;
+        }
+        canvas.width = width;
+        canvas.height = height;
+        this.ctx = canvas.getContext('2d');
+        this.timer = setInterval(() => {
+          if (this.isRain) {
+            this.clearCanvas();
+            this.draws();
+          } else {
+            this.clearCanvas();
+          }
+        }, 50);
+      });
+    },
+    draws() {
       const self = this;
-      let canvas = document.getElementById(this.id);
-      let width = canvas.clientWidth;
-      let height = canvas.clientHeight;
-      let x2 = this.angle;
-      let len = this.len;
-      let count = this.count;
-      let lineWidth = 1;
-      if (this.status === 'small') {
-        x2 = 0;
-        len = 50;
-        count = 100;
-      }
-      if (this.status === 'large') {
-        x2 = -35;
-        count = 1000;
-        lineWidth = 1.5;
-      }
-      canvas.width = width;
-      canvas.height = height;
-      let ctx = canvas.getContext('2d');
-      self.timer = setInterval(clearCanvas, 50);
-      function clearCanvas() {
-        ctx.clearRect(0, 0, width, height);
-        draws();
+      const canvas = document.getElementById(this.id);
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+      for (let i = 1; i <= this.count; i++) {
+        draw(Math.random() * width, Math.random() * height);
       }
       function draw(x, y) {
+        let ctx = self.ctx;
         //canvas写渐变：createLinearGradient（startX,startY,endX,endY）
-        let grd = ctx.createLinearGradient(x, y, x + x2, (y + len) * 5);
+        let grd = ctx.createLinearGradient(x, y, x + self.angle, (y + self.len) * 5);
         grd.addColorStop(0, 'rgba(255,255,255,0.1)');
         grd.addColorStop(0.5, 'rgba(105,105,105,0.3)');
         grd.addColorStop(1, 'rgba(255,255,255,0.5)');
         ctx.strokeStyle = grd;
         ctx.beginPath();
         ctx.moveTo(x, y);
-        ctx.lineTo(x + x2, y + len);
-        ctx.lineWidth = lineWidth;
+        ctx.lineTo(x + self.angle, y + self.len);
+        ctx.lineWidth = self.lineWidth;
         ctx.stroke();
         ctx.closePath();
       }
-      function draws() {
-        for (let i = 1; i <= count; i++) {
-          draw(Math.random() * width, Math.random() * height);
-        }
-      }
+    },
+    clearCanvas() {
+      const canvas = document.getElementById(this.id);
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+      this.ctx.clearRect(0, 0, width, height);
     }
   }
 });
 ;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_mapRainvue_type_script_lang_js_ = (mapRainvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=style&index=0&id=59d7e867&prod&lang=scss&scoped=true&
-var mapRainvue_type_style_index_0_id_59d7e867_prod_lang_scss_scoped_true_ = __webpack_require__(1901);
-;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=style&index=0&id=59d7e867&prod&lang=scss&scoped=true&
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=style&index=0&id=20664206&prod&lang=scss&scoped=true&
+var mapRainvue_type_style_index_0_id_20664206_prod_lang_scss_scoped_true_ = __webpack_require__(6916);
+;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=style&index=0&id=20664206&prod&lang=scss&scoped=true&
 
 ;// CONCATENATED MODULE: ./src/package/components/mapRain.vue
 
@@ -118439,11 +118475,11 @@ var mapRainvue_type_style_index_0_id_59d7e867_prod_lang_scss_scoped_true_ = __we
 
 var mapRain_component = normalizeComponent(
   components_mapRainvue_type_script_lang_js_,
-  mapRainvue_type_template_id_59d7e867_scoped_true_render,
-  mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns,
+  mapRainvue_type_template_id_20664206_scoped_true_render,
+  mapRainvue_type_template_id_20664206_scoped_true_staticRenderFns,
   false,
   null,
-  "59d7e867",
+  "20664206",
   null
   
 )

package/xy-map.umd.js

@@ -234,7 +234,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".mapLoad[data-v-fa3ebcb8]{position:abs
 
 /***/ }),
 
-/***/ 335:
+/***/ 871:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -248,7 +248,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".snow[data-v-59d7e867]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-color:rgba(145,147,184,.103)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".snow[data-v-20664206]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-color:rgba(145,147,184,.103)}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -42922,19 +42922,19 @@ var update = add("5d9c6596", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 3207:
+/***/ 354:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(335);
+var content = __webpack_require__(871);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(208)/* ["default"] */ .Z)
-var update = add("c0ed1eea", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("33a2ac54", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -43886,7 +43886,9 @@ var defaultOptions = {
     'sources': {
       'nav': {
         'type': 'raster',
-        'tiles': ['https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg' // mapbox
+        'tiles': [
+        // 'https://tiles2.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=74b34fe951b7f641aacb67fbfb0dfb14a445c7ae4481de804740e8b297d6fdec', // 星球影像
+        'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg' // mapbox
         // 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', // ArcGIS
         // 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', // 高德
         // 'https://map.ynmdgq.com/{z}/{x}/{y}.png' // 本地
@@ -43902,6 +43904,12 @@ var defaultOptions = {
       'source': 'nav'
     }]
   },
+  light: {
+    anchor: 'map',
+    // “viewport”：光照位置不变，所以building旋转的时候，其表面明暗程度会变化； “map”：光照随地图位置变化，所以buliding旋转的时候，其表面明显程度不会变化了
+    color: 'white',
+    intensity: 0.4
+  },
   is3d: true,
   // 3d视图
   antialias: false,
@@ -70924,15 +70932,20 @@ const addLayerPoint = (option, layerId) => {
 /**
  * 添加闪烁点图层
  */
-const addFlashPoint = (option = {
-  id: 'flash',
-  data: [],
-  time: 0,
-  // 闪烁时间
-  size: 140 // 大小
-}, layerId) => {
+const addFlashPoint = (option = {}, layerId) => {
   // 点
 
+  option = Object.assign({}, {
+    id: 'flash',
+    data: [],
+    time: 0,
+    // 闪烁时间
+    size: 140,
+    // 大小
+    outerRgb: [255, 255, 255],
+    centerColor: 'rgba(255, 100, 100, 1)',
+    strokeColor: '#fff'
+  }, option);
   let {
     map
   } = package_map;
@@ -70958,14 +70971,14 @@ const addFlashPoint = (option = {
       context.clearRect(0, 0, this.width, this.height);
       context.beginPath();
       context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
-      context.fillStyle = `rgba(255, 255, 255, ${1 - t})`;
+      context.fillStyle = `rgba(${option.outerRgb[0]}, ${option.outerRgb[1]}, ${option.outerRgb[2]}, ${1 - t})`;
       context.fill();
 
       // Draw the inner circle.
       context.beginPath();
       context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
-      context.fillStyle = 'rgba(255, 100, 100, 1)';
-      context.strokeStyle = 'white';
+      context.fillStyle = option.centerColor;
+      context.strokeStyle = option.strokeColor;
       context.lineWidth = 2 + 4 * (1 - t);
       context.fill();
       context.stroke();
@@ -118338,8 +118351,8 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var mapMarker = (component.exports);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=template&id=59d7e867&scoped=true&
-var mapRainvue_type_template_id_59d7e867_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=template&id=20664206&scoped=true&
+var mapRainvue_type_template_id_20664206_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('canvas', {
@@ -118349,14 +118362,14 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_render = function render()
     }
   }, [_vm._v("不支持canvas")]);
 };
-var mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns = [];
+var mapRainvue_type_template_id_20664206_scoped_true_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=script&lang=js&
 /* harmony default export */ var mapRainvue_type_script_lang_js_ = ({
   props: {
     id: {
       type: String,
-      default: 'snow'
+      default: 'rain'
     },
     angle: {
       // 角度
@@ -118371,17 +118384,24 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns = [];
     len: {
       // 雨滴长度
       type: Number,
-      default: 80
+      default: 70
     },
-    count: {
-      // 雨滴数量
+    lineWidth: {
+      // 雨滴宽度
       type: Number,
-      default: 500
+      default: 1.5
+    },
+    isRain: {
+      // 是否下雨
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
-      timer: ''
+      timer: '',
+      ctx: null,
+      count: 500
     };
   },
   destroyed() {
@@ -118390,61 +118410,77 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns = [];
   mounted() {
     this.start();
   },
+  watch: {
+    status() {
+      window.clearInterval(this.timer);
+      this.start();
+    }
+  },
   methods: {
     start() {
+      this.$nextTick(() => {
+        const canvas = document.getElementById(this.id);
+        const width = canvas.clientWidth;
+        const height = canvas.clientHeight;
+        if (this.status === 'small') {
+          this.count = 100;
+        }
+        if (this.status === 'default') {
+          this.count = 300;
+        }
+        if (this.status === 'large') {
+          this.count = 1000;
+        }
+        canvas.width = width;
+        canvas.height = height;
+        this.ctx = canvas.getContext('2d');
+        this.timer = setInterval(() => {
+          if (this.isRain) {
+            this.clearCanvas();
+            this.draws();
+          } else {
+            this.clearCanvas();
+          }
+        }, 50);
+      });
+    },
+    draws() {
       const self = this;
-      let canvas = document.getElementById(this.id);
-      let width = canvas.clientWidth;
-      let height = canvas.clientHeight;
-      let x2 = this.angle;
-      let len = this.len;
-      let count = this.count;
-      let lineWidth = 1;
-      if (this.status === 'small') {
-        x2 = 0;
-        len = 50;
-        count = 100;
-      }
-      if (this.status === 'large') {
-        x2 = -35;
-        count = 1000;
-        lineWidth = 1.5;
-      }
-      canvas.width = width;
-      canvas.height = height;
-      let ctx = canvas.getContext('2d');
-      self.timer = setInterval(clearCanvas, 50);
-      function clearCanvas() {
-        ctx.clearRect(0, 0, width, height);
-        draws();
+      const canvas = document.getElementById(this.id);
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+      for (let i = 1; i <= this.count; i++) {
+        draw(Math.random() * width, Math.random() * height);
       }
       function draw(x, y) {
+        let ctx = self.ctx;
         //canvas写渐变：createLinearGradient（startX,startY,endX,endY）
-        let grd = ctx.createLinearGradient(x, y, x + x2, (y + len) * 5);
+        let grd = ctx.createLinearGradient(x, y, x + self.angle, (y + self.len) * 5);
         grd.addColorStop(0, 'rgba(255,255,255,0.1)');
         grd.addColorStop(0.5, 'rgba(105,105,105,0.3)');
         grd.addColorStop(1, 'rgba(255,255,255,0.5)');
         ctx.strokeStyle = grd;
         ctx.beginPath();
         ctx.moveTo(x, y);
-        ctx.lineTo(x + x2, y + len);
-        ctx.lineWidth = lineWidth;
+        ctx.lineTo(x + self.angle, y + self.len);
+        ctx.lineWidth = self.lineWidth;
         ctx.stroke();
         ctx.closePath();
       }
-      function draws() {
-        for (let i = 1; i <= count; i++) {
-          draw(Math.random() * width, Math.random() * height);
-        }
-      }
+    },
+    clearCanvas() {
+      const canvas = document.getElementById(this.id);
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+      this.ctx.clearRect(0, 0, width, height);
     }
   }
 });
 ;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_mapRainvue_type_script_lang_js_ = (mapRainvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=style&index=0&id=59d7e867&prod&lang=scss&scoped=true&
-var mapRainvue_type_style_index_0_id_59d7e867_prod_lang_scss_scoped_true_ = __webpack_require__(3207);
-;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=style&index=0&id=59d7e867&prod&lang=scss&scoped=true&
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=style&index=0&id=20664206&prod&lang=scss&scoped=true&
+var mapRainvue_type_style_index_0_id_20664206_prod_lang_scss_scoped_true_ = __webpack_require__(354);
+;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=style&index=0&id=20664206&prod&lang=scss&scoped=true&
 
 ;// CONCATENATED MODULE: ./src/package/components/mapRain.vue
 
@@ -118457,11 +118493,11 @@ var mapRainvue_type_style_index_0_id_59d7e867_prod_lang_scss_scoped_true_ = __we
 
 var mapRain_component = normalizeComponent(
   components_mapRainvue_type_script_lang_js_,
-  mapRainvue_type_template_id_59d7e867_scoped_true_render,
-  mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns,
+  mapRainvue_type_template_id_20664206_scoped_true_render,
+  mapRainvue_type_template_id_20664206_scoped_true_staticRenderFns,
   false,
   null,
-  "59d7e867",
+  "20664206",
   null
   
 )