add LayerTraffic.

lib/api.js

@@ -9,8 +9,8 @@ import isEmpty from 'lodash/isEmpty';
 //import loadjscssfile from './loadScript';
 import APILoader from './APILoader';
 
-//const xdebug = console.log;
-var xdebug = function xdebug() {};
+var xdebug = console.log;
+// const xdebug = () => {};
 
 export var loadApi = function loadApi() {
   var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '0325e3d6d69cd56de4980b4f28906fd8';
@@ -397,10 +397,9 @@ var createTraffic = function createTraffic(options, events) {
   }
 
   var map = options.map,
-      data = options.data,
-      restOpts = _objectWithoutProperties(options, ['map', 'data']);
+      restOpts = _objectWithoutProperties(options, ['map']);
 
-  var entity = new window.AMap.TileLayer.Traffic(data, restOpts);
+  var entity = new window.AMap.TileLayer.Traffic(restOpts);
   forOwn(events, function (value, key) {
     entity.on(key, value);
   });
@@ -424,7 +423,10 @@ export var updateTraffic = function updateTraffic(entity, newOptions, newEvents,
     zooms: null,
     detectRetina: null,
     autoRefresh: null,
-    interval: null
+    interval: null,
+    tileUrl: function tileUrl(v) {
+      return entity.setTileUrl(v);
+    } // not in options.
   };
 
   return commonUpdate(entity, newOptions, newEvents, oldOptions, oldEvents, operators, 'updateTraffic');
@@ -489,6 +491,63 @@ export var updateMassMarks = function updateMassMarks(entity, newOptions, newEve
   return commonUpdate(entity, newOptions, newEvents, oldOptions, oldEvents, operators, 'updateMassMarks');
 };
 
+// ////////////////////////////////////////////////////////////
+// // Traffic, warning! is a layer!
+// ////////////////////////////////////////////////////////////
+// /**
+//  *
+//  * @param {*} window.AMap
+//  * @param {*} map
+//  * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
+//  * @param {*} events
+//  */
+// export const createTraffic = (options, events) => {
+//   const __func__ = 'createTraffic';
+//   if (!window.AMap || !options || !options.map) {
+//     xdebug(__func__, 'fail! parameters!', 'window.AMap:'+!!window.AMap, 'options:'+!!options, 'options.map:'+!!(options&&options.map));
+//     return null;
+//   }
+//   let {map, data, style, ...restOpts} = options;
+// //   let entity = new window.AMap.TileLayer.Traffic(data, restOpts);
+// let entity = new window.AMap.Traffic(data||[], {...restOpts, style: style||[]});
+//   forOwn(events, (value, key) => {
+//     entity.on(key, value);
+//   });
+//   entity.setMap(map);
+//   xdebug(__func__, 'ok!', map, 'layers:', map.getLayers());
+//   return entity;
+// };
+
+// export const updateTraffic = (
+//   entity,
+//   newOptions,
+//   newEvents,
+//   oldOptions,
+//   oldEvents
+// ) => {
+//   let operators = {
+//     map: v => entity.setMap(v),
+//     zIndex: v => entity.setzIndex(v),
+//     opacity: v => entity.setOpacity(v),
+//     zooms: null,
+//     detectRetina: null,
+//     autoRefresh: null,
+//     interval: null,
+//     tileUrl: v => entity.setTileUrl(v), // not in options.
+//   };
+//   xdebug('updateTraffic', 'mapOld:', (oldOptions && oldOptions.map && oldOptions.map.getLayers()), 'mapNew:', (newOptions && newOptions.map && newOptions.map.getLayers()));
+
+//   return commonUpdate (
+//     entity,
+//     newOptions,
+//     newEvents,
+//     oldOptions,
+//     oldEvents,
+//     operators,
+//     'updateTraffic'
+//   )
+// };
+
 ////////////////////////////////////////////////////////////
 // Polygon
 ////////////////////////////////////////////////////////////

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-amap-next",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "这是高德地图的react版本,相比react-amap更加简单,更加贴合react用户",
   "keywords": [
     "react",

src/App.js

@@ -7,6 +7,7 @@ import { loadMap } from './lib/api';
 import Map from './lib/Map';
 import Marker from './lib/Marker';
 import MassMarks from './lib/MassMarks';
+import LayerTraffic from './lib/LayerTraffic';
 import Polygon from './lib/Polygon';
 import Polyline from './lib/Polyline';
 import InfoWindow from './lib/InfoWindow';
@@ -15,6 +16,7 @@ class MarkerTest extends Component {
   constructor() {
     super();
     this.state = {};
+    this._setMapRefer = this._setMapRefer.bind(this);
     this._mapDblclick = this._mapDblclick.bind(this);
     this._carMoving = this._carMoving.bind(this);
     this._logging = this._logging.bind(this);
@@ -43,9 +45,12 @@ class MarkerTest extends Component {
       }
   
       let carOffset = new AMap.Pixel(-26, -13);
-      this.setState({ AMap, layers: [roadNet, traffic], lineArr, carOffset });
+      this.setState({ AMap, lineArr, carOffset });
     });
   }
+  _setMapRefer (refer) {
+    this.mapRefer = refer;
+  }
 
   _mapDblclick() {
     this.setState({msg:'双击了Map!'});
@@ -58,6 +63,14 @@ class MarkerTest extends Component {
   }
 
   render() {
+    console.log('mapRefer:', this.mapRefer && this.mapRefer.getLayers());
+    let markerIcon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png';
+    switch (this.state.markerIndex) {
+      case 1: markerIcon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'; break;
+      case 2: markerIcon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'; break;
+      default:
+      case 0: markerIcon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'; break;
+    }
     return (
       <div>
       <div>
@@ -88,6 +101,15 @@ class MarkerTest extends Component {
           </span>
         </div>
         <div style={{margin:2}}>
+          <span style={{marginRight:2}}>改Marker图标:</span>
+          <span onClick={() => this.setState({ markerIndex:0 })}>
+            Marker-0
+          </span>
+          <span onClick={() => this.setState({ markerIndex:1 })}>
+            Marker-1
+          </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, 1500);
           }} value='开始' />
@@ -105,17 +127,19 @@ class MarkerTest extends Component {
           {'消息:'+this.state.msg}
         </div>
         <Map
+          refer={this._setMapRefer}
           style={{ width: 1200, height: 800 }}
-          options={{ center: this.state.center, layers: this.state.layers, zoom:13 }}
+          options={{ center: this.state.center, zoom:13 }}
           events={{
             click:this._logging,
             dblclick: this._mapDblclick,
           }}
       >
+          <LayerTraffic options={{ interval:20,opacity:0.8 }} />
           {this.state.showMarker &&
           <Marker
             options={{
-              icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+              icon: markerIcon,
               position: this.state.position || [116.405467, 39.907761]
             }}
             events={{

src/lib/LayerTraffic.js

@@ -0,0 +1,86 @@
+import React, { Component, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { createTraffic, updateTraffic } from './api';
+const __com__ = 'Traffic';
+//const debug = console.log;
+const debug = () => {};
+
+export class Traffic extends Component {
+  static propTypes = {
+    __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, this._entity);
+  }
+
+  componentDidMount() {
+    debug(__com__, 'componentDidMount', this.props, this._entity);
+    let { __map__, options, events, children } = this.props;
+    //let opts = { ...(options || {}), map: __map__, content: children };
+    let opts = { ...(options || {}), map: __map__ };
+    this._entity = createTraffic(opts, events);
+    if (this._entity) {
+      if (this.props.refer) this.props.refer(this._entity);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    debug(__com__, 'componentWillReceiveProps', this.props, this._entity);
+  }
+
+  componentWillUpdate() {
+    debug(__com__, 'componentWillUpdate', this.props, this._entity);
+  }
+
+  componentDidUpdate(prevProps) {
+    debug(__com__, 'componentDidUpdate', this.props, this._entity);
+    let { __map__, options, events } = this.props;
+    let opts = { ...(options || {}), map: __map__ };
+    if (!this._entity) {
+      debug(__com__, 'componentDidUpdate', opts, events);
+      this._entity = createTraffic(opts, events);
+      if (this._entity) {
+        if (this.props.refer) this.props.refer(this._entity);
+      }
+      return;
+    }
+
+    // need check props changes, then update.
+    let oldOpts = {
+      ...(prevProps.options || {}),
+      map: prevProps.__map__
+    };
+    updateTraffic(this._entity, opts, events, oldOpts, prevProps.events);
+  }
+
+  componentWillUnmount() {
+    debug(__com__, 'componentWillUnmount', this.props, this._entity);
+    if (this._entity) {
+      this._entity.setMap(null);
+      // delete this._entity;
+      this._entity = null;
+      if (this.props.refer) this.props.refer(this._entity);
+    }
+  }
+
+  // shouldComponentUpdate(nextProps, nextState) {
+  //   debug(__com__, 'shouldComponentUpdate', this._entity);
+  //   return false;
+  // }
+  render() {
+    debug(__com__, 'render', this._entity);
+    return null;
+  }
+}
+
+export default Traffic;

src/lib/api.js

@@ -5,8 +5,8 @@ import isEmpty from 'lodash/isEmpty';
 //import loadjscssfile from './loadScript';
 import APILoader from './APILoader'
 
-//const xdebug = console.log;
-const xdebug = () => {};
+const xdebug = console.log;
+// const xdebug = () => {};
 
 export const loadApi = (key = '0325e3d6d69cd56de4980b4f28906fd8') => {
   return new APILoader({
@@ -375,8 +375,8 @@ export const createTraffic = (options, events) => {
     xdebug(__func__, 'fail! parameters!', 'window.AMap:'+!!window.AMap, 'options:'+!!options, 'options.map:'+!!(options&&options.map));
     return null;
   }
-  let {map, data, ...restOpts} = options;
-  let entity = new window.AMap.TileLayer.Traffic(data, restOpts);
+  let {map, ...restOpts} = options;
+  let entity = new window.AMap.TileLayer.Traffic(restOpts);
   forOwn(events, (value, key) => {
     entity.on(key, value);
   });
@@ -400,6 +400,7 @@ export const updateTraffic = (
     detectRetina: null,
     autoRefresh: null,
     interval: null,
+    tileUrl: v => entity.setTileUrl(v), // not in options.
   };
 
   return commonUpdate (
@@ -474,6 +475,63 @@ export const updateMassMarks = (
   )
 };
 
+// ////////////////////////////////////////////////////////////
+// // Traffic, warning! is a layer!
+// ////////////////////////////////////////////////////////////
+// /**
+//  *
+//  * @param {*} window.AMap
+//  * @param {*} map
+//  * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
+//  * @param {*} events
+//  */
+// export const createTraffic = (options, events) => {
+//   const __func__ = 'createTraffic';
+//   if (!window.AMap || !options || !options.map) {
+//     xdebug(__func__, 'fail! parameters!', 'window.AMap:'+!!window.AMap, 'options:'+!!options, 'options.map:'+!!(options&&options.map));
+//     return null;
+//   }
+//   let {map, data, style, ...restOpts} = options;
+// //   let entity = new window.AMap.TileLayer.Traffic(data, restOpts);
+// let entity = new window.AMap.Traffic(data||[], {...restOpts, style: style||[]});
+//   forOwn(events, (value, key) => {
+//     entity.on(key, value);
+//   });
+//   entity.setMap(map);
+//   xdebug(__func__, 'ok!', map, 'layers:', map.getLayers());
+//   return entity;
+// };
+
+// export const updateTraffic = (
+//   entity,
+//   newOptions,
+//   newEvents,
+//   oldOptions,
+//   oldEvents
+// ) => {
+//   let operators = {
+//     map: v => entity.setMap(v),
+//     zIndex: v => entity.setzIndex(v),
+//     opacity: v => entity.setOpacity(v),
+//     zooms: null,
+//     detectRetina: null,
+//     autoRefresh: null,
+//     interval: null,
+//     tileUrl: v => entity.setTileUrl(v), // not in options.
+//   };
+//   xdebug('updateTraffic', 'mapOld:', (oldOptions && oldOptions.map && oldOptions.map.getLayers()), 'mapNew:', (newOptions && newOptions.map && newOptions.map.getLayers()));
+
+//   return commonUpdate (
+//     entity,
+//     newOptions,
+//     newEvents,
+//     oldOptions,
+//     oldEvents,
+//     operators,
+//     'updateTraffic'
+//   )
+// };
+
 ////////////////////////////////////////////////////////////
 // Polygon
 ////////////////////////////////////////////////////////////