@vtx/map 1.0.9 → 1.1.2

package/README.md

@@ -1,44 +1,44 @@
-# map
-
-> 地图控件
-
-## 安装
-
-```bash
-# Install
-$ npm install @vtx/map
-#或者
-$ yarn add @vtx/map
-```
-
-## 文档
-
--   [VtxMap](/docs/VtxMap.md)
--   [MapPlayer](/docs/MapPlayer.md)
--   [VtxSearchMap](/docs/VtxSearchMap.md)
--   [VtxOptMap](/docs/VtxOptMap.md)
-
-### 全量导入引用方式（==不推荐==）：
-
-```js
-# 地图组件(地图组件的ref函数现在改为getMapInstance)
-$ import { VtxMap, VtxOptMap, VtxZoomMap } from '@vtx/map';
-
-# 地图弹出框组件
-$ import { VtxSearchMap } from '@vtx/map';
-```
-
-### 使用 babel-plugin-import 动态加载引用方式(==推荐==)：
-
-```js
-# 地图组件(地图组件的ref函数现在改为getMapInstance)
-$ import { VtxMap } from '@vtx/map';
-$ const { VtxOptMap, VtxZoomMap, MapPlayer } = VtxMap;
-
-# 地图弹出框组件
-$ import { VtxSearchMap } from '@vtx/map';
-```
-
-## License
-
-[MIT](https://tldrlegal.com/license/mit-license)
+# map
+
+> 地图控件
+
+## 安装
+
+```bash
+# Install
+$ npm install @vtx/map
+#或者
+$ yarn add @vtx/map
+```
+
+## 文档
+
+-   [VtxMap](/docs/VtxMap.md)
+-   [MapPlayer](/docs/MapPlayer.md)
+-   [VtxSearchMap](/docs/VtxSearchMap.md)
+-   [VtxOptMap](/docs/VtxOptMap.md)
+
+### 全量导入引用方式（==不推荐==）：
+
+```js
+# 地图组件(地图组件的ref函数现在改为getMapInstance)
+$ import { VtxMap, VtxOptMap, VtxZoomMap } from '@vtx/map';
+
+# 地图弹出框组件
+$ import { VtxSearchMap } from '@vtx/map';
+```
+
+### 使用 babel-plugin-import 动态加载引用方式(==推荐==)：
+
+```js
+# 地图组件(地图组件的ref函数现在改为getMapInstance)
+$ import { VtxMap } from '@vtx/map';
+$ const { VtxOptMap, VtxZoomMap, MapPlayer } = VtxMap;
+
+# 地图弹出框组件
+$ import { VtxSearchMap } from '@vtx/map';
+```
+
+## License
+
+[MIT](https://tldrlegal.com/license/mit-license)

package/lib/VtxMap/AMap/AMap.css

@@ -14,6 +14,9 @@
   position: relative;
   white-space: inherit !important;
 }
+.amap-info-content {
+  padding: 0 !important;
+}
 .vtx_gmap_html_pointCollection_a {
   position: absolute;
   top: 0px;

package/lib/VtxMap/AMap/AMap.js

@@ -12,6 +12,8 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _reactDom = require('react-dom');
+
 require('./AMap.css');
 
 var _MapToolFunction = require('../MapToolFunction');
@@ -168,7 +170,8 @@ var VortexAMap = function (_React$Component) {
                 boundaryName = _t$props.boundaryName,
                 heatMapData = _t$props.heatMapData,
                 areaRestriction = _t$props.areaRestriction,
-                coverageType = _t$props.coverageType;
+                coverageType = _t$props.coverageType,
+                infoWindowData = _t$props.infoWindowData;
             // 切换地图矢量图和卫星图背景
 
             if (coverageType) {
@@ -239,6 +242,10 @@ var VortexAMap = function (_React$Component) {
             if (heatMapData) {
                 t.heatMapOverlay(heatMapData);
             }
+            // 打开信息窗体
+            if (infoWindowData) {
+                t.infoWindow(infoWindowData);
+            }
             //添加海量点
             if (mapPointCollection instanceof Array) {
                 t.addPointCollection(mapPointCollection);
@@ -651,10 +658,16 @@ var VortexAMap = function (_React$Component) {
                         ids = obj.fitView.split(',');
                     }
                     if (ids[0] instanceof Array) {
-                        var l = new AMap.LngLat(ids[0][0], ids[0][1]),
-                            r = new AMap.LngLat(ids[1][0], ids[1][1]);
-                        var b = new AMap.Bounds(l, r);
-                        t.state.gis.setBounds(b);
+                        // let l = new AMap.LngLat(ids[0][0],ids[0][1]),
+                        //     r = new AMap.LngLat(ids[1][0],ids[1][1]); 
+                        // let b = new AMap.Bounds(l,r); 
+                        // t.state.gis.setBounds(b);
+                        // fix: 高德地图在[[lng,lat],[lng,lat]]方式下的最佳视野
+                        t.state.gis.setFitView(ids.map(function (item) {
+                            return new AMap.Marker({
+                                position: new AMap.LngLat(item[0], item[1])
+                            });
+                        }));
                     } else {
                         t.state.gis.setFitView(this.GM.getMoreGraphic(ids));
                     }
@@ -747,7 +760,8 @@ var VortexAMap = function (_React$Component) {
         value: function showControl(props) {
             var t = this,
                 location = 'RT',
-                offset = null;
+                offset = null,
+                scaleOffset = null;
             var config = props || t.props;
             if (t.scaleControl) {
                 t.state.gis.removeControl(t.scaleControl);
@@ -1020,6 +1034,45 @@ var VortexAMap = function (_React$Component) {
                 t.heatmap.hide();
             }
         }
+        // 信息窗体
+
+    }, {
+        key: 'infoWindow',
+        value: function (_infoWindow) {
+            function infoWindow() {
+                return _infoWindow.apply(this, arguments);
+            }
+
+            infoWindow.toString = function () {
+                return _infoWindow.toString();
+            };
+
+            return infoWindow;
+        }(function () {
+            var d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+            var t = this;
+            var cg = {
+                width: 300,
+                height: 172
+            };
+            if (d.config) {
+                cg = _extends({}, cg, d.config);
+            }
+            var sContent = document.createElement('div');
+            var infowindow = new AMap.InfoWindow({
+                // isCustom: true,
+                content: sContent
+            });
+            infowindow.setSize(new AMap.Size(cg.width, cg.height + 20));
+
+            if (d.lat && d.lng && d.content) {
+                (0, _reactDom.render)(d.content, sContent);
+                infowindow.open(t.state.gis, [d.lng, d.lat]);
+            } else {
+                infoWindow.close();
+            }
+        })
         //添加海量点
 
     }, {
@@ -2612,7 +2665,8 @@ var VortexAMap = function (_React$Component) {
                 areaRestriction = nextProps.areaRestriction,
                 isClearAreaRestriction = nextProps.isClearAreaRestriction,
                 mapStyle = nextProps.mapStyle,
-                coverageType = nextProps.coverageType;
+                coverageType = nextProps.coverageType,
+                infoWindowData = nextProps.infoWindowData;
 
             var props = t.props;
             // 设置地图样式
@@ -2934,6 +2988,10 @@ var VortexAMap = function (_React$Component) {
             if (heatMapData && !t.deepEqual(heatMapData, props.heatMapData)) {
                 t.heatMapOverlay(heatMapData);
             }
+            // 打开信息窗体
+            if (infoWindowData && !t.deepEqual(infoWindowData, t.props.infoWindowData)) {
+                t.infoWindow(infoWindowData);
+            }
             //添加图片图层
             if (imageOverlays instanceof Array && props.imageOverlays instanceof Array && !t.deepEqual(imageOverlays, props.imageOverlays)) {
                 t.imageUrlOverlay(imageOverlays);

package/lib/VtxMap/AMap/AMap.less

@@ -14,6 +14,9 @@
     position: relative;
     white-space: inherit !important;
 }
+.amap-info-content{
+    padding: 0 !important;
+}
 .vtx_gmap_html_pointCollection_a{
     position: absolute;
     top: 0px;

package/lib/VtxMap/BMap/Map.js

@@ -12,6 +12,8 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _reactDom = require('react-dom');
+
 require('./Map.css');
 
 var _MapToolFunction = require('../MapToolFunction');
@@ -20,6 +22,10 @@ var _immutable = require('immutable');
 
 var _immutable2 = _interopRequireDefault(_immutable);
 
+var _unionBy = require('lodash/unionBy');
+
+var _unionBy2 = _interopRequireDefault(_unionBy);
+
 var _default = require('../../default');
 
 var _default2 = _interopRequireDefault(_default);
@@ -214,6 +220,7 @@ var BaiduMap = function (_React$Component) {
             var _props2 = this.props,
                 boundaryName = _props2.boundaryName,
                 heatMapData = _props2.heatMapData,
+                infoWindowData = _props2.infoWindowData,
                 customizedBoundary = _props2.customizedBoundary;
             var _state = this.state,
                 boundaryInfo = _state.boundaryInfo,
@@ -254,6 +261,10 @@ var BaiduMap = function (_React$Component) {
             if (heatMapData) {
                 t.heatMapOverlay(heatMapData);
             }
+            // 打开信息窗体
+            if (infoWindowData) {
+                t.infoWindow(infoWindowData);
+            }
             if (mapPointCollection instanceof Array) {
                 t.addPointCollection(mapPointCollection);
             }
@@ -1242,6 +1253,7 @@ var BaiduMap = function (_React$Component) {
             var t = this;
             bdNames.forEach(function (name) {
                 t._boundary.get(name, function (ary) {
+                    // fix 飞地有多个区域的问题
                     var arr = [];
                     ary.boundaries.forEach(function (item) {
                         var id = 'boundary' + new Date().getTime() + Math.random();
@@ -1316,6 +1328,34 @@ var BaiduMap = function (_React$Component) {
                 t.heatmap.hide();
             }
         }
+        //信息窗体
+
+    }, {
+        key: 'infoWindow',
+        value: function infoWindow() {
+            var d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+            var t = this;
+            var cg = {
+                width: 300,
+                height: 172
+            };
+            if (d.config) {
+                cg = _extends({}, cg, d.config);
+            }
+            var sContent = document.createElement('div');
+            var infowindow = new BMap.InfoWindow(sContent);
+
+            infowindow.setWidth(cg.width);
+            infowindow.setHeight(cg.height);
+
+            if (d.lat && d.lng && d.content) {
+                (0, _reactDom.render)(d.content, sContent);
+                t.state.gis.openInfoWindow(infowindow, new BMap.Point(d.lng, d.lat));
+            } else {
+                infowindow && t.state.gis.closeInfoWindow();
+            }
+        }
         //添加海量点   
 
     }, {
@@ -1774,7 +1814,10 @@ var BaiduMap = function (_React$Component) {
                     });
                     break;
                 case 'polygon':
-                    pts = gg.getPath().map(function (item, index) {
+                    // fix: 编辑图元时面积计算不正确，需要过滤一下重复的经纬度
+                    pts = (0, _unionBy2.default)(gg.getPath(), function (res) {
+                        return res.lng && res.lat;
+                    }).map(function (item) {
                         return [item.lng, item.lat];
                     });
                     p = _extends({}, gp, {
@@ -1917,7 +1960,11 @@ var BaiduMap = function (_React$Component) {
                         geometry: param.geometry
                     };
                     if (param.geometry.type == 'polygon') {
-                        obj.area = BMapLib.GeoUtils.getPolygonArea(param.mapLayer);
+                        // obj.area = BMapLib.GeoUtils.getPolygonArea(param.mapLayer);
+                        // fix: 只能是数组计算之前的计算因为重复的经纬度导致面积为NAN
+                        obj.area = BMapLib.GeoUtils.getPolygonArea(param.geometry.rings.map(function (item) {
+                            return new BMap.Point(item[0], item[1]);
+                        }));
                     }
                     if (param.geometry.type == 'polyline') {
                         obj.distance = t.calculateDistance(param.geometry.paths);
@@ -2756,7 +2803,8 @@ var BaiduMap = function (_React$Component) {
                 isClearAreaRestriction = nextProps.isClearAreaRestriction,
                 isClearAll = nextProps.isClearAll,
                 mapStyle = nextProps.mapStyle,
-                coverageType = nextProps.coverageType;
+                coverageType = nextProps.coverageType,
+                infoWindowData = nextProps.infoWindowData;
 
             var props = t.props;
 
@@ -3086,6 +3134,10 @@ var BaiduMap = function (_React$Component) {
             if (heatMapData && !t.deepEqual(heatMapData, props.heatMapData)) {
                 t.heatMapOverlay(heatMapData);
             }
+            // 打开信息窗体
+            if (infoWindowData && !t.deepEqual(infoWindowData, props.infoWindowData)) {
+                t.infoWindow(infoWindowData);
+            }
             //添加图片图层
             if (imageOverlays instanceof Array && props.imageOverlays instanceof Array && !t.deepEqual(imageOverlays, props.imageOverlays)) {
                 t.imageUrlOverlay(imageOverlays);

package/lib/VtxMap/OMap/Map.js

@@ -301,8 +301,8 @@ var Map = function (_React$Component) {
                 }
             });
             /*=================================start========================================*/
-            /*
-                draw对象声明, 绘制返回方法实现
+            /*
+                draw对象声明, 绘制返回方法实现
              */
             if (!t._drawmanager) {
                 t._drawmanager = new google.maps.drawing.DrawingManager({
@@ -316,9 +316,9 @@ var Map = function (_React$Component) {
                 t._cluster = new OMapLib.MarkerClusterer(map, [], { maxZoom: options.maxZoom });
             }
             /*=================================start========================================*/
-            /*
-                声明OverlayView 类
-                用于切换lnglat和 pixel
+            /*
+                声明OverlayView 类
+                用于切换lnglat和 pixel
              */
             function CanvasProjectionOverlay() {}
             CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
@@ -329,9 +329,9 @@ var Map = function (_React$Component) {
             this.canvasProjectionOverlay = new CanvasProjectionOverlay();
             this.canvasProjectionOverlay.setMap(map);
             /*=================================start========================================*/
-            /*
-                重写marker对象,支持html
-                要使用google对象,所以在creatMap中声明
+            /*
+                重写marker对象,支持html
+                要使用google对象,所以在creatMap中声明
              */
             var MyLabel = t.MyLabel = function (map) {
                 var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -725,7 +725,7 @@ var Map = function (_React$Component) {
                     var position = new t.omap.LatLng({ lng: item.longitude, lat: item.latitude });
                     var marker = null;
                     if (item.markerContent) {
-                        /*自定义html加点
+                        /*自定义html加点
                          用Label来实现,无法再添加label(高德有判断,实现不同)*/
                         //覆盖物参数
                         marker = new t.MyLabel(t.state.gis, {
@@ -747,9 +747,9 @@ var Map = function (_React$Component) {
                                 isLabel: true,
                                 labelClass: labelClass,
                                 labelContent: cg.labelContent,
-                                /*
-                                    为和百度等地图相同的参数  加上g.markerContentY值
-                                    label是使用OverlayView手动实现,与marker没有关联的原因
+                                /*
+                                    为和百度等地图相同的参数  加上g.markerContentY值
+                                    label是使用OverlayView手动实现,与marker没有关联的原因
                                  */
                                 labelOffset: { x: cg.labelPixelX, y: cg.labelPixelY + cg.markerContentY }
                             });
@@ -904,9 +904,9 @@ var Map = function (_React$Component) {
                         var oldPosition = gc.getPosition();
                         //前后点位类型都是markerContent
                         if (gc.isMarkerContent && gc.isMarkerContent() && item.markerContent) {
-                            /*
-                              自定义html加点
-                              用Label来实现,无法再添加label(高德有判断,实现不同)
+                            /*
+                              自定义html加点
+                              用Label来实现,无法再添加label(高德有判断,实现不同)
                              */
                             //覆盖物参数
                             gc.setOptions({
@@ -960,9 +960,9 @@ var Map = function (_React$Component) {
                                 gc_label.setOptions({
                                     labelClass: labelClass,
                                     labelContent: cg.labelContent,
-                                    /*
-                                        为和百度等地图相同的参数  加上g.markerContentY值
-                                        label是使用OverlayView手动实现,与marker没有关联的原因
+                                    /*
+                                        为和百度等地图相同的参数  加上g.markerContentY值
+                                        label是使用OverlayView手动实现,与marker没有关联的原因
                                      */
                                     labelOffset: { x: cg.labelPixelX, y: cg.labelPixelY + cg.markerContentY }
                                 });
@@ -1072,9 +1072,9 @@ var Map = function (_React$Component) {
                                 gc_label.setOptions({
                                     labelClass: _labelClass,
                                     labelContent: cg.labelContent,
-                                    /*
-                                        为和百度等地图相同的参数  加上g.markerContentY值
-                                        label是使用OverlayView手动实现,与marker没有关联的原因
+                                    /*
+                                        为和百度等地图相同的参数  加上g.markerContentY值
+                                        label是使用OverlayView手动实现,与marker没有关联的原因
                                      */
                                     labelOffset: { x: cg.labelPixelX, y: cg.labelPixelY + cg.markerContentY }
                                 });
@@ -2396,8 +2396,8 @@ var Map = function (_React$Component) {
             var t = this;
             t._drawmanager.setDrawingMode(null);
         }
-        /*
-            事件处理
+        /*
+            事件处理
         */
         //点击图元事件
 
@@ -2482,8 +2482,8 @@ var Map = function (_React$Component) {
                 t.props.mouseOutGraphic(obj);
             }
         }
-        /*
-            地图服务功能
+        /*
+            地图服务功能
          */
         //开启路况
 
@@ -3319,9 +3319,9 @@ var Map = function (_React$Component) {
             }
             return deg;
         }
-        /*
-            匹配控件位置方法
-            (谷歌地图有8个方位,为了统一,只使用左上,左下,右上,右下)
+        /*
+            匹配控件位置方法
+            (谷歌地图有8个方位,为了统一,只使用左上,左下,右上,右下)
          */
 
     }, {
@@ -3344,8 +3344,8 @@ var Map = function (_React$Component) {
             }
             return position;
         }
-        /*
-            地图内部需要公共方法
+        /*
+            地图内部需要公共方法
          */
 
     }, {
@@ -3560,10 +3560,10 @@ var Map = function (_React$Component) {
             if (typeof isclearAllPointCollection == 'boolean' && isclearAllPointCollection || isclearAllPointCollection && isclearAllPointCollection !== t.props.isclearAllPointCollection) {
                 t.clearAllPointCollection();
             }
-            /*点数据处理
-                pointData[2]相同的点,执行刷新
-                pointData[1]的数据在idsForGraphicId中不存在的,执行新增
-                pointData[0]数据中多余的id,执行删除
+            /*点数据处理
+                pointData[2]相同的点,执行刷新
+                pointData[1]的数据在idsForGraphicId中不存在的,执行新增
+                pointData[0]数据中多余的id,执行删除
             */
             if (mapPoints instanceof Array && props.mapPoints instanceof Array && !t.deepEqual(mapPoints, props.mapPoints)) {
                 var oldMapPoints = props.mapPoints;
@@ -3623,9 +3623,9 @@ var Map = function (_React$Component) {
                 //更新
                 t.updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
             }
-            /*
-                面数据处理
-                先全删除,再新增
+            /*
+                面数据处理
+                先全删除,再新增
             */
             if (mapPolygons instanceof Array && props.mapPolygons instanceof Array && !t.deepEqual(mapPolygons, props.mapPolygons)) {
                 var oldMapPolygons = props.mapPolygons;
@@ -3684,9 +3684,9 @@ var Map = function (_React$Component) {
                 //更新
                 t.updatePolygon([].concat(_toConsumableArray(_upds), _toConsumableArray(_otherupds)));
             }
-            /*
-                圆数据处理
-                先全删除,再新增
+            /*
+                圆数据处理
+                先全删除,再新增
             */
             if (mapCircles instanceof Array && props.mapCircles instanceof Array && !t.deepEqual(mapCircles, props.mapCircles)) {
                 var oldMapCircles = props.mapCircles;
@@ -3745,9 +3745,9 @@ var Map = function (_React$Component) {
                 //更新
                 t.updateCircle([].concat(_toConsumableArray(_upds2), _toConsumableArray(_otherupds2)));
             }
-            /*
-                线数据处理
-                先全删除,再新增
+            /*
+                线数据处理
+                先全删除,再新增
             */
             if (mapLines instanceof Array && props.mapLines instanceof Array && !t.deepEqual(mapLines, props.mapLines)) {
                 var oldMapLines = props.mapLines;

package/lib/VtxMap/OMap/Map.less

@@ -1,70 +1,70 @@
-.label-content{
-    display: inline-block;
-    padding: 5px;
-    line-height: 22px;
-    text-align: center;
-    border-radius: 5px;
-    background-color: #fff;
-    opacity: 1;
-    color: #5DD0EE;
-    transform: translate(-50%);
-    -ms-transform: translate(-50%);
-}
-.noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Chrome/Safari/Opera */
-    -khtml-user-select: none; /* Konqueror */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
-    not supported by any browser */
-}
-.vtx_gmap_html_pointCollection_a{
-    position: absolute;
-    canvas{
-        z-index: 111;
-    }
-}
-.vtx-g-rangingPoint{
-    width: 8px;
-    height: 8px;
-    background-color: #fff;
-    border: 2px solid #108ee9;
-    display: inline-block;
-    border-radius: 8px;
-    position: relative;
-    top: 5px;
-    left: 1px;
-}
-.vtx-g-rangingDistance{
-    position: relative;
-    top: -36px;
-    left: 15px;
-    height: 30px;
-    line-height: 28px;
-    background-color: #fff;
-    border: 1px solid #108ee9;
-    font-size: 12px;
-    word-break: keep-all;
-    padding: 0px 3px;
-    color: #108ee9;
-}
-.vtx-g-rang-exit{
-    width: 12px;
-    height: 12px;
-    background-color: #fff;
-    border: 2px solid #108ee9;
-    color: #108ee9;
-    line-height: 7px;
-    text-align: center;
-    font-size: 12px;
-    cursor: pointer;
-}
-.vtx-g-rang-showRangTool{
-    line-height: 18px;
-    font-size: 12px;
-    border: 1px solid #108ee9;
-    word-break: keep-all;
-    background-color: #fff;
-    padding: 0px 5px;
-}
+.label-content{
+    display: inline-block;
+    padding: 5px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 5px;
+    background-color: #fff;
+    opacity: 1;
+    color: #5DD0EE;
+    transform: translate(-50%);
+    -ms-transform: translate(-50%);
+}
+.noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Chrome/Safari/Opera */
+    -khtml-user-select: none; /* Konqueror */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
+    not supported by any browser */
+}
+.vtx_gmap_html_pointCollection_a{
+    position: absolute;
+    canvas{
+        z-index: 111;
+    }
+}
+.vtx-g-rangingPoint{
+    width: 8px;
+    height: 8px;
+    background-color: #fff;
+    border: 2px solid #108ee9;
+    display: inline-block;
+    border-radius: 8px;
+    position: relative;
+    top: 5px;
+    left: 1px;
+}
+.vtx-g-rangingDistance{
+    position: relative;
+    top: -36px;
+    left: 15px;
+    height: 30px;
+    line-height: 28px;
+    background-color: #fff;
+    border: 1px solid #108ee9;
+    font-size: 12px;
+    word-break: keep-all;
+    padding: 0px 3px;
+    color: #108ee9;
+}
+.vtx-g-rang-exit{
+    width: 12px;
+    height: 12px;
+    background-color: #fff;
+    border: 2px solid #108ee9;
+    color: #108ee9;
+    line-height: 7px;
+    text-align: center;
+    font-size: 12px;
+    cursor: pointer;
+}
+.vtx-g-rang-showRangTool{
+    line-height: 18px;
+    font-size: 12px;
+    border: 1px solid #108ee9;
+    word-break: keep-all;
+    background-color: #fff;
+    padding: 0px 5px;
+}

package/lib/VtxMap/TMap/TMap.css

@@ -24,3 +24,9 @@
 .vtx_tmap_heatmap_class canvas {
   z-index: 400 !important;
 }
+.tdt-infowindow-content {
+  margin: 0 !important;
+}
+.tdt-container a.tdt-infowindow-close-button {
+  z-index: 999;
+}

package/lib/VtxMap/TMap/TMap.js

@@ -12,6 +12,8 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _reactDom = require('react-dom');
+
 require('./TMap.css');
 
 var _MapToolFunction = require('../MapToolFunction');
@@ -164,7 +166,8 @@ var TMap = function (_React$Component) {
                 areaRestriction = _t$props.areaRestriction,
                 heatMapData = _t$props.heatMapData,
                 imageOverlays = _t$props.imageOverlays,
-                coverageType = _t$props.coverageType;
+                coverageType = _t$props.coverageType,
+                infoWindowData = _t$props.infoWindowData;
             //创建地图
 
             t.createMap();
@@ -200,6 +203,10 @@ var TMap = function (_React$Component) {
             if (heatMapData) {
                 t.heatMapOverlay(heatMapData);
             }
+            // 打开信息窗体
+            if (infoWindowData) {
+                t.infoWindow(infoWindowData);
+            }
             //添加海量点
             if (mapPointCollection instanceof Array) {
                 setTimeout(function () {
@@ -461,24 +468,25 @@ var TMap = function (_React$Component) {
                         ids = obj.fitView.split(',');
                     }
                     if (ids[0] instanceof Array) {
-                        for (var i = 0; i < ids.length; i++) {
-                            ls = new T.LngLat(ids[i][0], ids[i][1]);
-                        }
+                        ls = ids.map(function (item) {
+                            return new T.LngLat(item[0], item[1]);
+                        });
                     } else {
                         ls = getLngLats(ids);
                     }
                     break;
             }
             if (ls.length >= 1) {
+                var _t$state$gis$getViewp = t.state.gis.getViewport(ls),
+                    center = _t$state$gis$getViewp.center,
+                    zoom = _t$state$gis$getViewp.zoom;
+
                 if (obj.type == 'zoom') {
-                    t.setZoomLevel(t.state.gis.getViewport(ls).zoom);
+                    t.setZoomLevel(zoom);
                 } else if (obj.type == 'center') {
-                    var _t$state$gis$getViewp = t.state.gis.getViewport(ls),
-                        center = _t$state$gis$getViewp.center;
-
                     t.setCenter([center.lng, center.lat]);
                 } else {
-                    t.state.gis.setViewport(ls);
+                    t.state.gis.centerAndZoom(center, zoom);
                 }
             }
         }
@@ -1551,11 +1559,39 @@ var TMap = function (_React$Component) {
                 t.heatmap.hide();
             }
         }
-        /*
-            参数
-            geometryType:point/polyline/polygon/circle/rectangle  默认point
-            parameter 样式 默认null 对象{}写入方式跟add方法一样(对应点线圆面)
-            data //初始化数据   默认{id:'add'}
+        //信息窗体
+
+    }, {
+        key: 'infoWindow',
+        value: function infoWindow() {
+            var d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+            var t = this;
+            var cg = {
+                width: 300,
+                height: 172
+            };
+            if (d.config) {
+                cg = _extends({}, cg, d.config);
+            }
+            var sContent = document.createElement('div');
+            var infowindow = new T.InfoWindow();
+            infowindow.setMinWidth(cg.width);
+            infowindow.setMaxHeight(cg.height);
+
+            if (d.lat && d.lng && d.content) {
+                (0, _reactDom.render)(d.content, sContent);
+                infowindow.setContent(sContent);
+                t.state.gis.openInfoWindow(infowindow, new T.LngLat(d.lng, d.lat));
+            } else {
+                infowindow && t.state.gis.closeInfoWindow();
+            }
+        }
+        /*
+            参数
+            geometryType:point/polyline/polygon/circle/rectangle  默认point
+            parameter 样式 默认null 对象{}写入方式跟add方法一样(对应点线圆面)
+            data //初始化数据   默认{id:'add'}
         */
 
     }, {
@@ -2017,7 +2053,8 @@ var TMap = function (_React$Component) {
                     ms.geometry._extent = (0, _MapToolFunction.getMaxMin)(ms.mapLayer.getLngLats()[0])._extent;
                     obj.geometry = ms.geometry;
                     obj.param = ms;
-                    obj.area = (0, _MapToolFunction.getPolygonArea)(ms.mapLayer.getLngLats()[0]);
+                    // obj.area = getPolygonArea(ms.mapLayer.getLngLats()[0]);
+                    obj.area = t.polygonTool.getArea(ms.mapLayer.getLngLats()[0]);
                     break;
                 case 'circle':
                     obj.geometry = ms.geometry;
@@ -2729,7 +2766,8 @@ var TMap = function (_React$Component) {
                     isSetAreaRestriction = nextProps.isSetAreaRestriction,
                     areaRestriction = nextProps.areaRestriction,
                     isClearAreaRestriction = nextProps.isClearAreaRestriction,
-                    coverageType = nextProps.coverageType;
+                    coverageType = nextProps.coverageType,
+                    infoWindowData = nextProps.infoWindowData;
 
                 // 等待地图加载
 
@@ -2761,10 +2799,10 @@ var TMap = function (_React$Component) {
                     t.clearAllPointCollection();
                 }
 
-                /*点数据处理
-                    pointData[2]相同的点,执行刷新
-                    pointData[1]的数据在idsForGraphicId中不存在的,执行新增
-                    pointData[0]数据中多余的id,执行删除
+                /*点数据处理
+                    pointData[2]相同的点,执行刷新
+                    pointData[1]的数据在idsForGraphicId中不存在的,执行新增
+                    pointData[0]数据中多余的id,执行删除
                 */
                 if (mapPoints instanceof Array && t.props.mapPoints instanceof Array && !t.deepEqual(mapPoints, t.props.mapPoints)) {
                     var oldMapPoints = t.props.mapPoints;
@@ -2824,9 +2862,9 @@ var TMap = function (_React$Component) {
                     //更新
                     t.updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
                 }
-                /*
-                    面数据处理
-                    先全删除,再新增
+                /*
+                    面数据处理
+                    先全删除,再新增
                 */
                 if (mapPolygons instanceof Array && t.props.mapPolygons instanceof Array && !t.deepEqual(mapPolygons, t.props.mapPolygons)) {
                     var oldMapPolygons = t.props.mapPolygons;
@@ -2885,9 +2923,9 @@ var TMap = function (_React$Component) {
                     //更新
                     t.updatePolygon([].concat(_toConsumableArray(_upds), _toConsumableArray(_otherupds)));
                 }
-                /*
-                    圆数据处理
-                    先全删除,再新增
+                /*
+                    圆数据处理
+                    先全删除,再新增
                 */
                 if (mapCircles instanceof Array && t.props.mapCircles instanceof Array && !t.deepEqual(mapCircles, t.props.mapCircles)) {
                     var oldMapCircles = t.props.mapCircles;
@@ -2946,9 +2984,9 @@ var TMap = function (_React$Component) {
                     //更新
                     t.updateCircle([].concat(_toConsumableArray(_upds2), _toConsumableArray(_otherupds2)));
                 }
-                /*
-                    线数据处理
-                    先全删除,再新增
+                /*
+                    线数据处理
+                    先全删除,再新增
                 */
                 if (mapLines instanceof Array && t.props.mapLines instanceof Array && !t.deepEqual(mapLines, t.props.mapLines)) {
                     var oldMapLines = t.props.mapLines;
@@ -3057,6 +3095,10 @@ var TMap = function (_React$Component) {
                 if (heatMapData && !t.deepEqual(heatMapData, t.props.heatMapData)) {
                     t.heatMapOverlay(heatMapData);
                 }
+                // 打开信息窗体
+                if (infoWindowData && !t.deepEqual(infoWindowData, t.props.infoWindowData)) {
+                    t.infoWindow(infoWindowData);
+                }
                 //添加图片图层
                 if (imageOverlays instanceof Array && !t.deepEqual(imageOverlays, t.props.imageOverlays)) {
                     t.imageUrlOverlay(imageOverlays);

package/lib/VtxMap/TMap/TMap.less

@@ -28,4 +28,10 @@
         z-index: 400 !important;
     }
 }
-    
+
+.tdt-infowindow-content{
+    margin: 0 !important;
+}
+.tdt-container a.tdt-infowindow-close-button{
+    z-index: 999;
+}

package/lib/VtxSearchMap/VtxSearchMap.js

@@ -253,7 +253,8 @@ var VtxSearchMap = function (_React$Component) {
                 var lglt = this.map.getMapExtent(),
                     editGraphic = null,
                     editGraphicId = 'locationPoint';
-                if (this.props.editParam && (this.props.graphicType == 'polyline' || this.props.graphicType == 'polygon')) {
+                if (this.props.editParam) {
+                    // && (this.props.graphicType == 'polyline' || this.props.graphicType == 'polygon')
                     editGraphic = _extends({}, this.props.editParam, { id: 'drawnGraph' });
                     editGraphicId = 'drawnGraph';
                 }
@@ -574,6 +575,18 @@ var VtxSearchMap = function (_React$Component) {
                     drawProps = null;
                 }
             }
+            if (graphicType === 'rectangle') {
+                if (editGraphic) {
+                    mapPolygons.push(editGraphic);
+                    drawProps = null;
+                }
+            }
+            if (graphicType === 'circle') {
+                if (editGraphic) {
+                    mapCircles.push(editGraphic);
+                    drawProps = null;
+                }
+            }
             if (isShowOtherGraph) {
                 var otherGraph = this.props.otherGraph;
 

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@vtx/map",
-  "version": "1.0.9",
+  "version": "1.1.2",
   "description": "@vtx/map",
   "main": "lib/index.js",
   "scripts": {
+    "docs:dev": "dumi dev",
+    "docs:build": "dumi build",
     "build": "rimraf lib && babel src --out-dir lib && node styleProcessor.js",
     "prepublish": "npm run build"
   },
@@ -26,13 +28,14 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "dumi": "^1.1.40",
     "less": "^3.9.0",
     "rimraf": "^2.6.2"
   },
   "peerDependencies": {
+    "antd": "3.26.19",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "antd": "3.26.19"
+    "react-dom": "^16.12.0"
   },
   "author": "ztq",
   "license": "MIT"