添加曲线组件arc

docs/examples/components/arc.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import {Map, Arc} from '../../../src'
+import {simpleMapStyle} from './mapstyle'
+
+export default class App extends Component {
+    render() {
+        return <Map style={{height: '400px'}} mapStyle={simpleMapStyle} center={{lng: 105.403119, lat: 33.328658}} zoom='5'>
+            <Arc data={[
+                {
+                    from: {
+                        name: '北京'
+                    },
+                    to: {
+                        name: '南京'
+                    }
+                },
+                {
+                    from: {
+                        name: '北京',
+                    },
+                    to: {
+                        point: {
+                            lng: 101.45934,
+                            lat: 39.135305
+                        }
+                    }
+                },
+                {
+                    from: {
+                        name: '北京'
+                    },
+                    to: {
+                        name: '成都'
+                    }
+                },
+                {
+                    from: {
+                        name: '北京'
+                    },
+                    to: {
+                        name: '广州'
+                    }
+                }
+            ]} />
+        </Map>
+    }
+}
+

docs/examples/components/index.js

@@ -8,6 +8,7 @@ import MarkerList from './marker-list';
 import MapvLayer from './mapv-layer';
 import MapvMarkerList from './mapv-marker-list';
 import Road from './road';
+import Arc from './arc';
 import Boundary from './boundary';
 import Control from './control';
 import DrivingRoute from './driving-route';
@@ -41,6 +42,8 @@ const examples = (
     <DrivingRoute />
     <h2>PointLabel<a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/point-label.js">示例代码</a></h2>
     <PointLabel />
+    <h2>Arc<a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/arc.js">示例代码</a></h2>
+    <Arc />
   </div>
 )
 

docs/examples/components/mapstyle.js

@@ -4,7 +4,7 @@ export var simpleMapStyle = {
             "featureType": "all",
             "elementType": "all",
             "stylers": {
-                "lightness": 61,
+                "lightness": 41,
                 "saturation": -70
             }
         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bmap",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "description": "react-bmap",
   "main": "lib/index.js",
   "contributors": [

src/components/arc.js

@@ -0,0 +1,113 @@
+/**
+ * @file 迁徙组件
+ * @author kyle([email protected])
+ */
+
+import React from 'react';
+import Component from './component';
+import {DataSet, utilCityCenter, utilCurve, baiduMapLayer} from 'mapv';
+
+export default class App extends Component {
+
+    constructor(args) {
+        super(args);
+        this.state = {
+        };
+    }
+
+    /**
+     * 设置默认的props属性
+     */
+    static get defaultProps() {
+        return {
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        this.initialize();
+    }
+
+    componentDidMount() {
+        this.initialize();
+    }
+
+    componentWillUnmount() {
+        this.destroy();
+    }
+
+    destroy() {
+    }
+
+    createLayers() {
+
+        this._createLayer = true;
+        var map = this.map;
+
+        let self = this;
+        this.lineDataSet = new DataSet([]);
+        this.lineLayer = new baiduMapLayer(map, this.lineDataSet, {});
+
+        this.pointDataSet = new DataSet([]);
+        this.pointLayer = new baiduMapLayer(map, this.pointDataSet, {});
+
+    }
+
+    initialize() {
+
+        var map = this.map = this.props.map;
+        if (!map) {
+            return;
+        }
+
+        if (!this._createLayer) {
+            this.createLayers();
+        }
+
+        this.destroy();
+
+        var lineData = [];
+        var pointData = [];
+
+        if (this.props.data) {
+            this.props.data.forEach((item, index) => {
+                var fromCenter = item.from.point || utilCityCenter.getCenterByCityName(item.from.name);
+                var toCenter = item.to.point || utilCityCenter.getCenterByCityName(item.to.name);
+                var curve = utilCurve.getPoints([fromCenter, toCenter]);
+                lineData.push({
+                    geometry: {
+                        type: 'LineString',
+                        coordinates: curve
+                    }
+                });
+                pointData.push({
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [toCenter.lng, toCenter.lat]
+                    }
+                });
+            });
+        }
+
+        this.lineDataSet.set(lineData);
+        this.lineLayer.update({
+            options: {
+                draw: 'simple',
+                strokeStyle: '#5E87DB',
+                lineWidth: 3
+            }
+        });
+
+
+        this.pointDataSet.set(pointData);
+        this.pointLayer.update({
+            options: {
+                draw: 'simple',
+                fillStyle: '#5E87DB',
+                strokeStyle: 'rgba(94,135,219,0.3)',
+                lineWidth: 5,
+                size: 5
+            }
+        });
+    }
+
+}

src/index.js

@@ -53,3 +53,8 @@ export {default as DrivingRoute} from './components/driving-route';
  * PointLabel组件
  */
 export {default as PointLabel} from './components/point-label';
+
+/**
+ * Arc组件
+ */
+export {default as Arc} from './components/arc';