feat(arc组件添加动画):

Lpbzzz · Jan 17, 2018 · ae37229 · ae37229
1 parent a5f2a75
commit ae37229
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 21 deletions.
diff --git a/docs/dist/react-bmap.min.js b/docs/dist/react-bmap.min.js
diff --git a/docs/examples/build/app.js b/docs/examples/build/app.js
@@ -2782,7 +2782,7 @@ module.exports = PooledClass;
 	(factory((global.mapv = global.mapv || {})));
 }(this, (function (exports) { 'use strict';
 
-var version = "2.0.19";
+var version = "2.0.20";
 
 /**
  * @author kyle / http://nikai.us/
@@ -7098,6 +7098,11 @@ var AnimationLayer = function (_BaseLayer) {
     }
 
     createClass(AnimationLayer, [{
+        key: "draw",
+        value: function draw() {
+            this.canvasLayer.draw();
+        }
+    }, {
         key: "init",
         value: function init(options) {
 
@@ -7249,12 +7254,12 @@ var AnimationLayer = function (_BaseLayer) {
                         data[i]._index = 0;
                     }
 
-                    ctx.lineWidth = options.lineWidth || 1;
                     var strokeStyle = data[i].strokeStyle || options.strokeStyle;
                     var fillStyle = data[i].fillStyle || options.fillStyle || 'yellow';
                     ctx.fillStyle = fillStyle;
                     ctx.fill();
-                    if (strokeStyle) {
+                    if (strokeStyle && options.lineWidth) {
+                        ctx.lineWidth = options.lineWidth || 1;
                         ctx.strokeStyle = strokeStyle;
                         ctx.stroke();
                     }
@@ -31982,6 +31987,10 @@ var App = function (_Component) {
             this.pointLayer = new _mapv.baiduMapLayer(map, this.pointDataSet, {});
 
             this.textLayer = new _mapv.baiduMapLayer(map, this.pointDataSet, {});
+
+            if (this.props.enableAnimation) {
+                this.animationLayer = new _mapv.baiduMapAnimationLayer(map, this.lineDataSet, {});
+            }
         }
     }, {
         key: 'initialize',
@@ -31999,7 +32008,6 @@ var App = function (_Component) {
 
             var lineData = [];
             var pointData = [];
-            var options = this.props.options || {};
 
             if (this.props.data) {
                 var points = [];
@@ -32026,7 +32034,7 @@ var App = function (_Component) {
                         }
                     });
 
-                    if (options.showToPoint !== false) {
+                    if (_this2.props.showToPoint !== false) {
                         pointData.push({
                             fillStyle: item.color,
                             text: item.to.name || item.to.city,
@@ -32037,7 +32045,7 @@ var App = function (_Component) {
                         });
                     }
 
-                    if (options.showFromPoint !== false) {
+                    if (_this2.props.showFromPoint !== false) {
                         pointData.push({
                             fillStyle: item.color,
                             text: item.from.name || item.from.city,
@@ -32086,6 +32094,20 @@ var App = function (_Component) {
                     size: 12
                 }
             });
+
+            if (this.props.enableAnimation) {
+                this.animationLayer.update({
+                    options: this.props.animationOptions || {
+                        fillStyle: 'rgba(255, 250, 250, 0.9)',
+                        lineWidth: 0,
+                        size: 4,
+                        animateTime: 50,
+                        draw: 'simple'
+                    }
+                });
+            } else {
+                this.animationLayer && this.animationLayer.hide();
+            }
         }
     }], [{
         key: 'defaultProps',
@@ -33031,10 +33053,10 @@ var App = function (_Component) {
             return _react2.default.createElement(
                 _src.Map,
                 { style: { height: '400px' }, mapStyle: _mapstyle.simpleMapStyle, center: { lng: 105.403119, lat: 38.328658 }, zoom: '13' },
-                _react2.default.createElement(_src.Arc, { options: {
-                        showFromPoint: false,
-                        showToPoint: true
-                    }, data: [{
+                _react2.default.createElement(_src.Arc, { enableAnimation: true,
+                    showFromPoint: false,
+                    showToPoint: true,
+                    data: [{
                         color: 'red',
                         from: {
                             city: '北京'

diff --git a/docs/examples/components/arc.js b/docs/examples/components/arc.js
@@ -11,10 +11,10 @@ export default class App extends Component {
             anchor: new BMap.Size(66 / 2 / 2, 82 / 2 - 10)
         });
         return <Map style={{height: '400px'}} mapStyle={simpleMapStyle} center={{lng: 105.403119, lat: 38.328658}} zoom='13'>
-            <Arc options={{
-                showFromPoint: false,
-                showToPoint: true
-            }} data={[
+            <Arc enableAnimation={true}
+                showFromPoint={false}
+                showToPoint={true}
+                data={[
                 {
                     color: 'red',
                     from: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bmap",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "description": "react-bmap",
   "main": "lib/index.js",
   "contributors": [
@@ -39,7 +39,7 @@
     "webpack-dev-server": "^2.5.0"
   },
   "dependencies": {
-    "mapv": "^2.0.17"
+    "mapv": "^2.0.20"
   },
   "config": {
     "commitizen": {

diff --git a/src/components/arc.js b/src/components/arc.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import Component from './component';
-import {DataSet, utilCityCenter, utilCurve, baiduMapLayer} from 'mapv';
+import {DataSet, utilCityCenter, utilCurve, baiduMapLayer, baiduMapAnimationLayer} from 'mapv';
 
 export default class App extends Component {
 
@@ -58,6 +58,10 @@ export default class App extends Component {
 
         this.textLayer = new baiduMapLayer(map, this.pointDataSet, {});
 
+        if (this.props.enableAnimation) {
+            this.animationLayer = new baiduMapAnimationLayer(map, this.lineDataSet, {});
+        }
+
     }
 
     initialize() {
@@ -73,7 +77,6 @@ export default class App extends Component {
 
         var lineData = [];
         var pointData = [];
-        var options = this.props.options || {};
 
 
         if (this.props.data) {
@@ -101,7 +104,7 @@ export default class App extends Component {
                     }
                 });
 
-                if (options.showToPoint !== false) {
+                if (this.props.showToPoint !== false) {
                     pointData.push({
                         fillStyle: item.color,
                         text: item.to.name || item.to.city,
@@ -112,7 +115,7 @@ export default class App extends Component {
                     });
                 }
 
-                if (options.showFromPoint !== false) {
+                if (this.props.showFromPoint !== false) {
                     pointData.push({
                         fillStyle: item.color,
                         text: item.from.name || item.from.city,
@@ -162,6 +165,20 @@ export default class App extends Component {
                 size: 12
             }
         });
+
+        if (this.props.enableAnimation) {
+            this.animationLayer.update({
+                options: this.props.animationOptions || {
+                    fillStyle: 'rgba(255, 250, 250, 0.9)',
+                    lineWidth: 0,
+                    size: 4,
+                    animateTime: 50,
+                    draw: 'simple'
+                }
+            });
+        } else {
+            this.animationLayer && this.animationLayer.hide();
+        }
     }
 
 }