add circle & circleTest.

lib/api.js

@@ -493,63 +493,6 @@ 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
 ////////////////////////////////////////////////////////////
@@ -607,6 +550,64 @@ export var updatePolygon = function updatePolygon(entity, newOptions, newEvents,
 };
 
 ////////////////////////////////////////////////////////////
+// Circle
+////////////////////////////////////////////////////////////
+/**
+ *
+ * @param {*} AMap
+ * @param {*} map
+ * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
+ * @param {*} events
+ */
+export var createCircle = function createCircle(options, events) {
+  var __func__ = 'createCircle';
+  if (!window.AMap || !options || !options.map) {
+    xdebug(__func__, 'fail! parameters!', 'window.AMap:' + !!window.AMap, 'options:' + !!options, 'options.map:' + !!(options && options.map));
+    return null;
+  }
+  var entity = new window.AMap.Circle(options);
+  forOwn(events, function (value, key) {
+    entity.on(key, value);
+  });
+  xdebug(__func__, 'ok!');
+  return entity;
+};
+
+export var updateCircle = function updateCircle(entity, newOptions, newEvents, oldOptions, oldEvents) {
+  var operators = {
+    map: function map(v) {
+      return entity.setMap(v);
+    },
+    zIndex: function zIndex(v) {
+      return entity.setzIndex(v);
+    },
+    center: function center(v) {
+      return entity.setCenter(v);
+    },
+    bubble: null,
+    cursor: null,
+    radius: function radius(v) {
+      return entity.setRadius(v);
+    },
+    strokeColor: null,
+    strokeOpacity: null,
+    strokeWeight: null,
+    fillColor: null,
+    fillOpacity: null,
+    strokeStyle: null,
+    extData: function extData(v) {
+      return entity.setExtData(v);
+    },
+    strokeDasharray: null,
+    options: function options(v) {
+      return entity.setOptions(v);
+    }
+  };
+
+  return commonUpdate(entity, newOptions, newEvents, oldOptions, oldEvents, operators, 'updateCircle');
+};
+
+////////////////////////////////////////////////////////////
 // Polyline
 ////////////////////////////////////////////////////////////
 /**

package.json

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

src/App.js

@@ -10,6 +10,7 @@ import MassMarks from './lib/MassMarks';
 import LayerTraffic from './lib/LayerTraffic';
 import Polygon from './lib/Polygon';
 import Polyline from './lib/Polyline';
+import Circle from './lib/Circle';
 import InfoWindow from './lib/InfoWindow';
 
 class MarkerTest extends Component {
@@ -506,6 +507,83 @@ class PolygonTest extends Component {
   }
 }
 
+class CircleTest extends Component {
+  constructor() {
+    super();
+    this.state = {};
+  }
+
+  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], center: [116.403322, 39.920255], radius: 1000 });
+    });
+  }
+
+  _mapDblclick = (e) => {
+    let center = [e.lnglat.getLng(), e.lnglat.getLat()];
+    this.setState({msg:'双击了Map!', center});
+  }
+  _mapClick = (e) => {
+    let center = [e.lnglat.getLng(), e.lnglat.getLat()];
+    this.setState({msg:'双击了Map!', center});
+  }
+  _changeRadius200 = () => {
+    this.setState({radius:500})
+  }
+  _changeRadius1000 = () => {
+    this.setState({radius:2000})
+  }
+
+  render() {
+    let { center, radius} = this.state;
+    return (
+      <div>
+      <div>
+        <div style={{margin:2}}>
+          <span style={{marginRight:2}}>改变半径radius:</span>
+          <input type='button' onClick={this._changeRadius200} value='radius200' />
+          <input type='button' onClick={this._changeRadius1000} value='radius1000' />
+        </div>
+        <div style={{margin:2}}>
+          {'消息:'+this.state.msg}
+        </div>
+        <Map
+          style={{ width: 1100, height: 800 }}
+          options={{ center: this.state.center, layers: this.state.layers }}
+          events={{
+            click: this._mapClick,
+            dblclick: this._mapDblclick,
+          }}
+      >
+          <Circle
+            options={{
+              center,
+              radius,
+              strokeColor: "#FF33FF", //线颜色
+              strokeOpacity: 0.2, //线透明度
+              strokeWeight: 3,    //线宽
+              fillColor: "#1791fc", //填充色
+              fillOpacity: 0.35,//填充透明度
+              }}
+            events={{
+              click:e=> {
+                this.setState({msg: '点击了Circle:'+JSON.stringify(e.data)})
+              }
+            }}
+          />
+        </Map>
+      </div>
+      </div>
+    );
+  }
+}
+
 class InfoWindowTest extends Component {
   constructor() {
     super();
@@ -582,6 +660,7 @@ class App extends Component {
           <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'markercarmove')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'markercarmove'})}> 移动的汽车(MarkerCarMoveTest) </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 === 'polygon')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'polygon'})}> PolygonTest </span>
+          <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'circle')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'circle'})}> CircleTest </span>
           <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'infowindow')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'infowindow'})}> InfoWindowTest </span>
         </div>
         <div>
@@ -597,6 +676,9 @@ class App extends Component {
           {this.state.test === 'polygon' &&
           <PolygonTest />
           }
+          {this.state.test === 'circle' &&
+          <CircleTest />
+          }
           {this.state.test === 'infowindow' &&
           <InfoWindowTest />
           }

src/lib/Circle.js

@@ -0,0 +1,62 @@
+import React, { Component, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { createCircle, updateCircle } from './api';
+const __com__ = 'Circle';
+//const debug = console.log;
+const debug = () => {};
+
+export class Circle extends Component {
+  static propTypes = {
+    __map__: PropTypes.object,
+    options: PropTypes.object,
+    events: PropTypes.object
+  };
+
+  constructor() {
+    super();
+    this.refElement = null;
+    this._entity = null;
+  }
+
+  componentDidMount() {
+    let { __map__, options, events, children } = this.props;
+    let opts = { ...(options || {}), map: __map__ };
+    this._entity = createCircle(opts, events);
+    if (this._entity) {
+      if (this.props.refer) this.props.refer(this._entity);
+    }
+}
+
+  componentDidUpdate(prevProps) {
+    let { __map__, options, events, children } = this.props;
+    let opts = { ...(options || {}), map: __map__ };
+    if (!this._entity) {
+      this._entity = createCircle(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__
+    };
+    updateCircle(this._entity, opts, events, oldOpts, prevProps.events);
+  }
+
+  componentWillUnmount() {
+    if (this._entity) {
+      this._entity.setMap(null);
+      this._entity = null;
+      if (this.props.refer) this.props.refer(this._entity);
+    }
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default Circle;

src/lib/api.js

@@ -476,63 +476,6 @@ 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
 ////////////////////////////////////////////////////////////
@@ -594,6 +537,66 @@ export const updatePolygon = (
 };
 
 ////////////////////////////////////////////////////////////
+// Circle
+////////////////////////////////////////////////////////////
+/**
+ *
+ * @param {*} AMap
+ * @param {*} map
+ * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
+ * @param {*} events
+ */
+export const createCircle = (options, events) => {
+  const __func__ = 'createCircle';
+  if (!window.AMap || !options || !options.map) {
+    xdebug(__func__, 'fail! parameters!', 'window.AMap:'+!!window.AMap, 'options:'+!!options, 'options.map:'+!!(options&&options.map));
+    return null;
+  }
+  let entity = new window.AMap.Circle(options);
+  forOwn(events, (value, key) => {
+    entity.on(key, value);
+  });
+  xdebug(__func__, 'ok!');
+  return entity;
+};
+
+export const updateCircle = (
+  entity,
+  newOptions,
+  newEvents,
+  oldOptions,
+  oldEvents
+) => {
+  let operators = {
+    map: v => entity.setMap(v),
+    zIndex: v => entity.setzIndex(v),
+    center: v => entity.setCenter(v),
+    bubble: null,
+    cursor: null,
+    radius: v => entity.setRadius(v),
+    strokeColor: null,
+    strokeOpacity: null,
+    strokeWeight: null,
+    fillColor: null,
+    fillOpacity: null,
+    strokeStyle: null,
+    extData: v => entity.setExtData(v),
+    strokeDasharray: null,
+    options: v => entity.setOptions(v)
+  };
+
+  return commonUpdate (
+    entity,
+    newOptions,
+    newEvents,
+    oldOptions,
+    oldEvents,
+    operators,
+    'updateCircle'
+  )
+};
+
+////////////////////////////////////////////////////////////
 // Polyline
 ////////////////////////////////////////////////////////////
 /**