add Polygon & Polyline.

src/App.js

@@ -7,12 +7,16 @@ import { loadMap } from './api';
 import Map from './Map';
 import Marker from './Marker';
 import MassMarks from './MassMarks';
+import Polygon from './Polygon';
+import Polyline from './Polyline';
 
 class MarkerTest extends Component {
   constructor() {
     super();
     this.state = {};
     this._mapDblclick = this._mapDblclick.bind(this);
+    this._carMoving = this._carMoving.bind(this);
+    this._logging = this._logging.bind(this);
   }
 
   componentDidMount() {
@@ -23,13 +27,34 @@ class MarkerTest extends Component {
         autoRefresh: true, //是否自动刷新，默认为false
         interval: 5 //刷新间隔，默认180s
       });
-      this.setState({ AMap, layers: [roadNet, traffic] });
+
+      let lineArr = [];
+      let lngX = 116.397428, latY = 39.90923;        
+      lineArr.push(new AMap.LngLat(lngX, latY));
+      for (let i = 1; i < 4; i++) {
+        lngX = lngX + Math.random() * 0.05;
+        if (i % 2) {
+            latY = latY + Math.random() * 0.0001;
+        } else {
+            latY = latY + Math.random() * 0.06;
+        }
+        lineArr.push(new AMap.LngLat(lngX, latY));
+      }
+  
+      let carOffset = new AMap.Pixel(-26, -13);
+      this.setState({ AMap, layers: [roadNet, traffic], lineArr, carOffset });
     });
   }
 
   _mapDblclick() {
     this.setState({msg:'双击了Map!'});
   }
+  _carMoving(e) {
+    this.setState({msg: '车在开', passedPath: e.passedPath});
+  }
+  _logging(e) {
+    this.setState({msg: 'log:'+JSON.stringify(e.data)});
+  }
 
   render() {
     return (
@@ -62,14 +87,28 @@ class MarkerTest extends Component {
           </span>
         </div>
         <div style={{margin:2}}>
+          <input style={{margin:2, padding:2}} type='button' onClick={() => {
+            if (this.state.carEntity) this.state.carEntity.moveAlong(this.state.lineArr, 500);
+          }} value='开始' />
+          <input style={{margin:2, padding:2}} type='button' onClick={() => {
+            if (this.state.carEntity) this.state.carEntity.pauseMove();
+          }} value='暂停' />
+          <input style={{margin:2, padding:2}} type='button' onClick={() => {
+            if (this.state.carEntity) this.state.carEntity.resumeMove();
+          }} value='继续' />
+          <input style={{margin:2, padding:2}} type='button' onClick={() => {
+            if (this.state.carEntity) this.state.carEntity.stopMove();
+          }} value='停止' />
+        </div>
+        <div style={{margin:2}}>
           {'消息:'+this.state.msg}
         </div>
         <Map
           AMap={this.state.AMap}
-          style={{ width: 700, height: 800 }}
-          options={{ center: this.state.center, layers: this.state.layers }}
+          style={{ width: 1200, height: 800 }}
+          options={{ center: this.state.center, layers: this.state.layers, zoom:13 }}
           events={{
-            click:e=>this.setState({msg: '点击了Map'}),
+            click:this._logging,
             dblclick: this._mapDblclick,
           }}
       >
@@ -81,7 +120,7 @@ class MarkerTest extends Component {
               position: this.state.position || [116.405467, 39.907761]
             }}
             events={{
-              click:e=>this.setState({msg: '点击了Marker1'}),
+              click:this._logging
             }}
           >
           </Marker>
@@ -94,10 +133,49 @@ class MarkerTest extends Component {
               content:'<div class="marker-route marker-marker-bus-from"></div>'
             }}
             events={{
-              click:e=>this.setState({msg: '点击了Marker2'})
+              click:this._logging
             }}
-          >
-          </Marker>
+          />
+          <Marker
+            AMap={this.state.AMap}
+            refer={(entity) => this.setState({carEntity: entity})}
+            options={{
+              position: [116.397428, 39.90923],
+              icon: "https://webapi.amap.com/images/car.png",
+              offset: this.state.carOffset,
+              autoRotation: true
+            }}
+            events={{
+              moving:this._carMoving
+            }}
+          />
+          <Polyline
+            AMap={this.state.AMap}
+            options={{
+              path: this.state.lineArr,
+              strokeColor: "#00A",  //线颜色
+              // strokeOpacity: 1,     //线透明度
+              strokeWeight: 3,      //线宽
+              // strokeStyle: "solid"  //线样式
+            }}
+            events={{
+              click:this._logging
+            }}
+          />
+          <Polyline
+            AMap={this.state.AMap}
+            options={{
+              // path: lineArr,
+              path:this.state.passedPath,
+              strokeColor: "#F00",  //线颜色
+              // strokeOpacity: 1,     //线透明度
+              strokeWeight: 3,      //线宽
+              // strokeStyle: "solid"  //线样式
+            }}
+            events={{
+              click:this._logging
+            }}
+          />
         </Map>
       </div>
       </div>
@@ -212,6 +290,94 @@ class MassMarkTest extends Component {
 
 }
 
+class PolygonTest extends Component {
+  constructor() {
+    super();
+    this.state = {};
+    this._mapDblclick = this._mapDblclick.bind(this);
+    this._changeStyle = this._changeStyle.bind(this);
+  }
+
+  componentDidMount() {
+    loadMap('0325e3d6d69cd56de4980b4f28906fd8').then(AMap => {
+      let roadNet = new AMap.TileLayer.RoadNet();
+      let traffic = new AMap.TileLayer.Traffic({
+        autoRefresh: true, //是否自动刷新，默认为false
+        interval: 15 //刷新间隔，默认180s
+      });
+  
+      this.setState({ AMap, layers: [roadNet, traffic], poly: 0 });
+    });
+  }
+
+  _mapDblclick() {
+    this.setState({msg:'双击了Map!'});
+  }
+  _changeStyle() {
+    this.setState({poly:1})
+  }
+
+  render() {
+    let poly0 = [//多边形覆盖物节点坐标数组
+      [116.403322, 39.920255],
+      [116.410703, 39.897555],
+      [116.402292, 39.892353],
+      [116.389846, 39.891365]
+    ];
+    let poly1 = [//多边形覆盖物节点坐标数组
+      [116.404322, 39.920355],
+      [116.411703, 39.897355],
+      [116.402392, 39.892453],
+      [116.381946, 39.881465]
+    ];
+    let poly = (this.state.poly == 0) ? poly0: poly1;
+
+    return (
+      <div>
+      <div>
+        <div style={{margin:2}}>
+          <span style={{marginRight:2}}>改Map位置:</span>
+          <input type='button' onClick={() => this.setState({ poly:0 })} value='poly0' />
+          <input type='button' onClick={() => this.setState({ poly:1 })} value='poly1' />
+        </div>
+        <div style={{margin:2}}>
+          {'消息:'+this.state.msg}
+        </div>
+        <Map
+          AMap={this.state.AMap}
+          style={{ width: 1100, height: 800 }}
+          options={{ center: this.state.center, layers: this.state.layers }}
+          events={{
+            // click:e=>this.setState({msg: '点击了Map'}),
+            dblclick: this._mapDblclick,
+          }}
+      >
+          <Polygon
+            AMap={this.state.AMap}
+            options={{
+              path: poly,
+              strokeColor: "#FF33FF", //线颜色
+              strokeOpacity: 0.2, //线透明度
+              strokeWeight: 3,    //线宽
+              fillColor: "#1791fc", //填充色
+              fillOpacity: 0.35,//填充透明度
+              extData: {poly:this.state.poly}
+              }}
+            events={{
+              click:e=> {
+                console.log('e:', e);
+                this._changeStyle(e.data);
+                this.setState({msg: '点击了Poly:'+JSON.stringify(e.data)})
+              }
+            }}
+          />
+        </Map>
+      </div>
+      </div>
+    );
+  }
+}
+
 class App extends Component {
   constructor() {
     super();
@@ -224,7 +390,7 @@ class App extends Component {
         <div>
           <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'marker')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'marker'})}> MarkerTest </span>
           <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'massmarks')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'massmarks'})}> MassMarksTest </span>
-          <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'mess')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'mess'})}> MessMarkerTest </span>
+          <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'polygon')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'polygon'})}> PolygonTest </span>
         </div>
         <div>
           {this.state.test === 'marker' &&
@@ -233,6 +399,9 @@ class App extends Component {
           {this.state.test === 'massmarks' &&
           <MassMarkTest />
           }
+          {this.state.test === 'polygon' &&
+          <PolygonTest />
+          }
           
         </div>
       </div>

src/Marker.js

@@ -35,6 +35,9 @@ export class Marker extends Component {
     //let opts = { ...(options || {}), map: __map__, content: children };
     let opts = { ...(options || {}), map: __map__ };
     this._entity = createMarker(AMap, opts, events);
+    if (this._entity) {
+      if (this.props.refer) this.props.refer(this._entity);
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -52,6 +55,9 @@ export class Marker extends Component {
     let opts = { ...(options || {}), map: __map__ };
     if (!this._entity) {
       this._entity = createMarker(AMap, opts, events);
+      if (this._entity) {
+        if (this.props.refer) this.props.refer(this._entity);
+      }
       return;
     }
 
@@ -80,6 +86,7 @@ export class Marker extends Component {
     let {
       AMap,
       options,
+      events,
       match,
       location,
       history,

src/MassMarks.js

@@ -51,8 +51,7 @@ export class MassMarks extends Component {
     // need check props changes, then update.
     let oldOpts = {
       ...(prevProps.options || {}),
-      map: prevProps.__map__,
-      content: prevProps.children
+      map: prevProps.__map__
     };
     updateMassMarks(this._entity, opts, events, oldOpts, prevProps.events);
   }
@@ -73,6 +72,7 @@ export class MassMarks extends Component {
     let {
       AMap,
       options,
+      events,
       match,
       location,
       history,

src/Polygon.js

@@ -0,0 +1,92 @@
+import React, { Component, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { createPolygon, updatePolygon } from './api';
+const __com__ = 'Polygon';
+//const debug = console.log;
+const debug = () => {};
+
+export class Polygon extends Component {
+  static propTypes = {
+    AMap: PropTypes.object,
+    __map__: PropTypes.object,
+    options: PropTypes.object,
+    events: PropTypes.object
+  };
+
+  constructor() {
+    super();
+    this.refElement = null;
+    this._entity = null;
+    debug(__com__, 'constructor', this._entity);
+  }
+
+  componentWillMount() {
+    debug(__com__, 'componentWillMount', this._entity);
+  }
+
+  componentDidMount() {
+    debug(__com__, 'componentDidMount', this._entity);
+    let { AMap, __map__, options, events, children } = this.props;
+    //let opts = { ...(options || {}), map: __map__, content: children };
+    let opts = { ...(options || {}), map: __map__ };
+    this._entity = createPolygon(AMap, opts, events);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    debug(__com__, 'componentWillReceiveProps', this._entity);
+  }
+
+  componentWillUpdate() {
+    debug(__com__, 'componentWillUpdate', this._entity);
+  }
+
+  componentDidUpdate(prevProps) {
+    debug(__com__, 'componentDidUpdate', this._entity);
+    let { AMap, __map__, options, events, children } = this.props;
+    //let opts = { ...(options || {}), map: __map__, content: children };
+    let opts = { ...(options || {}), map: __map__ };
+    if (!this._entity) {
+      this._entity = createPolygon(AMap, opts, events);
+      return;
+    }
+
+    // need check props changes, then update.
+    let oldOpts = {
+      ...(prevProps.options || {}),
+      map: prevProps.__map__
+    };
+    updatePolygon(this._entity, opts, events, oldOpts, prevProps.events);
+  }
+
+  componentWillUnmount() {
+    debug(__com__, 'componentWillUnmount', this._entity);
+    if (this._entity) {
+      //   this._entity.clearMap();
+      this._entity.setMap(null);
+      delete this._entity;
+      //   delete this._entity;
+      this._entity = null;
+    }
+  }
+
+  render() {
+    debug(__com__, 'render', this._entity);
+    let {
+      AMap,
+      options,
+      events,
+      match,
+      location,
+      history,
+      staticContext,
+      ...rest
+    } = this.props;
+    return null;
+    // return (
+    //   <React.Fragment>
+    //   </React.Fragment>
+    // )
+  }
+}
+
+export default Polygon;

src/Polyline.js

@@ -0,0 +1,92 @@
+import React, { Component, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { createPolyline, updatePolyline } from './api';
+const __com__ = 'Polyline';
+//const debug = console.log;
+const debug = () => {};
+
+export class Polyline extends Component {
+  static propTypes = {
+    AMap: PropTypes.object,
+    __map__: PropTypes.object,
+    options: PropTypes.object,
+    events: PropTypes.object
+  };
+
+  constructor() {
+    super();
+    this.refElement = null;
+    this._entity = null;
+    debug(__com__, 'constructor', this._entity);
+  }
+
+  componentWillMount() {
+    debug(__com__, 'componentWillMount', this.props.children, this._entity);
+  }
+
+  componentDidMount() {
+    debug(__com__, 'componentDidMount', this.props.children, this._entity);
+    let { AMap, __map__, options, events, children } = this.props;
+    //let opts = { ...(options || {}), map: __map__, content: children };
+    let opts = { ...(options || {}), map: __map__ };
+    this._entity = createPolyline(AMap, opts, events);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    debug(__com__, 'componentWillReceiveProps', this.props.children, this._entity);
+  }
+
+  componentWillUpdate() {
+    debug(__com__, 'componentWillUpdate', this.props.children, this._entity);
+  }
+
+  componentDidUpdate(prevProps) {
+    debug(__com__, 'componentDidUpdate', this.props.children, this._entity);
+    let { AMap, __map__, options, events, children } = this.props;
+    //let opts = { ...(options || {}), map: __map__, content: children };
+    let opts = { ...(options || {}), map: __map__ };
+    if (!this._entity) {
+      this._entity = createPolyline(AMap, opts, events);
+      return;
+    }
+
+    // need check props changes, then update.
+    let oldOpts = {
+      ...(prevProps.options || {}),
+      map: prevProps.__map__
+    };
+    updatePolyline(this._entity, opts, events, oldOpts, prevProps.events);
+  }
+
+  componentWillUnmount() {
+    debug(__com__, 'componentWillUnmount', this.props.children, this._entity);
+    if (this._entity) {
+      //   this._entity.clearMap();
+      this._entity.setMap(null);
+      delete this._entity;
+      //   delete this._entity;
+      this._entity = null;
+    }
+  }
+
+  render() {
+    debug(__com__, 'render', this.props.children, this._entity);
+    let {
+      AMap,
+      options,
+      events,
+      match,
+      location,
+      history,
+      staticContext,
+      ...rest
+    } = this.props;
+    return null;
+    // return (
+    //   <React.Fragment>
+    //   </React.Fragment>
+    // )
+  }
+}
+
+export default Polyline;

src/api.js

@@ -93,9 +93,10 @@ export const commonUpdate = (
   newEvents,
   oldOptions,
   oldEvents,
-  operators
+  operators,
+  __func__ = 'commonUpdate'
 ) => {
-  const __func__ = 'commonUpdate';
+  // const __func__ = 'commonUpdate';
   if (!entity) {
     console.log(__func__, 'fail! no entity!');
     return false;
@@ -195,10 +196,10 @@ export const commonUpdate = (
     __func__, 'update:',
     props,
     events,
-    newOptions,
-    newEvents,
-    oldOptions,
-    oldEvents
+    // newOptions,
+    // newEvents,
+    // oldOptions,
+    // oldEvents
   );
   return true;
 };
@@ -252,7 +253,8 @@ export const updateMap = (
     newEvents,
     oldOptions,
     oldEvents,
-    operators
+    operators,
+    'updateMap'
   )
 };
 
@@ -285,12 +287,12 @@ export const createMarker = (AMap, options, events) => {
   //   position: [116.405467, 39.907761]
   // });
   // marker.setMap(map);
-  let marker = new AMap.Marker(options);
+  let entity = new AMap.Marker(options);
   forOwn(events, (value, key) => {
-    marker.on(key, value);
+    entity.on(key, value);
   });
   console.log(__func__, 'ok!');
-  return marker;
+  return entity;
 };
 
 export const updateMarker = (
@@ -330,7 +332,8 @@ export const updateMarker = (
     newEvents,
     oldOptions,
     oldEvents,
-    operators
+    operators,
+    'updateMarker'
   )
 };
 
@@ -390,6 +393,149 @@ export const updateMassMarks = (
     newEvents,
     oldOptions,
     oldEvents,
-    operators
+    operators,
+    'updateMassMarks'
+  )
+};
+
+////////////////////////////////////////////////////////////
+// Polygon
+////////////////////////////////////////////////////////////
+/**
+ *
+ * @param {*} AMap
+ * @param {*} map
+ * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
+ * @param {*} events
+ */
+export const createPolygon = (AMap, options, events) => {
+  const __func__ = 'createPolygon';
+  if (!AMap) {
+    console.log(__func__, 'fail! no AMap!');
+    return null;
+  }
+  if (!options) {
+    console.log(__func__, 'fail! no options!');
+    return null;
+  }
+  if (!options.map) {
+    console.log(__func__, 'fail! no options.map!');
+    return null;
+  }
+  let entity = new AMap.Polygon(options);
+  forOwn(events, (value, key) => {
+    entity.on(key, value);
+  });
+  console.log(__func__, 'ok!');
+  return entity;
+};
+
+export const updatePolygon = (
+  entity,
+  newOptions,
+  newEvents,
+  oldOptions,
+  oldEvents
+) => {
+  let operators = {
+    map: v => entity.setMap(v),
+    zIndex: v => entity.setzIndex(v),
+    path: v => entity.setPath(v),
+    bubble: null,
+    cursor: null,
+    strokeColor: null,
+    strokeOpacity: null,
+    strokeWeight: null,
+    fillColor: null,
+    fillOpacity: null,
+    draggable: null,
+    extData: v => entity.setExtData(v),
+    strokeStyle: null,
+    strokeDasharray: null,
+    options: v => entity.setOptions(v)
+  };
+
+  return commonUpdate (
+    entity,
+    newOptions,
+    newEvents,
+    oldOptions,
+    oldEvents,
+    operators,
+    'updatePolygon'
   )
 };
+
+////////////////////////////////////////////////////////////
+// Polyline
+////////////////////////////////////////////////////////////
+/**
+ *
+ * @param {*} AMap
+ * @param {*} map
+ * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
+ * @param {*} events
+ */
+export const createPolyline = (AMap, options, events) => {
+  const __func__ = 'createPolyline';
+  if (!AMap) {
+    console.log(__func__, 'fail! no AMap!');
+    return null;
+  }
+  if (!options) {
+    console.log(__func__, 'fail! no options!');
+    return null;
+  }
+  if (!options.map) {
+    console.log(__func__, 'fail! no options.map!');
+    return null;
+  }
+  let entity = new AMap.Polyline(options);
+  forOwn(events, (value, key) => {
+    entity.on(key, value);
+  });
+  console.log(__func__, 'ok!');
+  return entity;
+};
+
+export const updatePolyline = (
+  entity,
+  newOptions,
+  newEvents,
+  oldOptions,
+  oldEvents
+) => {
+  let operators = {
+    map: v => entity.setMap(v),
+    zIndex: v => entity.setzIndex(v),
+    bubble: null,
+    cursor: null,
+    gedodesic: null,
+    isOutline: null,
+    borderWeight: null,
+    outlineColor: null,
+    path: v => entity.setPath(v),
+    strokeColor: null,
+    strokeOpacity: null,
+    strokeWeight: null,
+    strokeStyle: null,
+    strokeDasharray: null,
+    lineJoin: null,
+    lineCap: null,
+    draggable: null,
+    extData: v => entity.setExtData(v),
+    showDir: null,
+    options: v => entity.setOptions(v)
+  };
+
+  return commonUpdate (
+    entity,
+    newOptions,
+    newEvents,
+    oldOptions,
+    oldEvents,
+    operators,
+    'updatePolyline'
+  )
+};
+