@vtx/map 1.0.7 → 1.1.0

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));
                     }
@@ -1020,6 +1033,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 +2664,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 +2987,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');
@@ -214,6 +216,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 +257,10 @@ var BaiduMap = function (_React$Component) {
             if (heatMapData) {
                 t.heatMapOverlay(heatMapData);
             }
+            // 打开信息窗体
+            if (infoWindowData) {
+                t.infoWindow(infoWindowData);
+            }
             if (mapPointCollection instanceof Array) {
                 t.addPointCollection(mapPointCollection);
             }
@@ -1242,12 +1249,17 @@ var BaiduMap = function (_React$Component) {
             var t = this;
             bdNames.forEach(function (name) {
                 t._boundary.get(name, function (ary) {
-                    var id = 'boundary' + new Date().getTime();
-                    var paths = ary.boundaries[0].split(';').map(function (item, index) {
-                        return item.split(',');
+                    // fix 飞地有多个区域的问题
+                    var arr = [];
+                    ary.boundaries.forEach(function (item) {
+                        var id = 'boundary' + new Date().getTime() + Math.random();
+                        var paths = item.split(';').map(function (item, index) {
+                            return item.split(',');
+                        });
+                        arr.push({ id: id, rings: paths, name: name });
+                        t.state.boundaryInfo.push({ id: id, name: name });
                     });
-                    t.addPolygon([{ id: id, rings: paths }]);
-                    t.state.boundaryInfo.push({ id: id, name: name });
+                    t.addPolygon(arr);
                 });
             });
         }
@@ -1312,6 +1324,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();
+            }
+        }
         //添加海量点   
 
     }, {
@@ -1633,16 +1673,28 @@ var BaiduMap = function (_React$Component) {
                     break;
             }
 
+            /**
+             * 用法
+             * map.setVisiblePoints('lng,lat;lng,lat')
+             */
             if (typeof arg === 'string') {
                 ary = arg.split(',');
                 obj = t.getFitView(ary);
             } else if (arg instanceof Array) {
-                if (ary[0] instanceof Array) {
+                /**
+                 * 用法
+                 * map.setVisiblePoints([[lng,lat],[lng,lat]])
+                */
+                if (arg[0] instanceof Array) {
                     var a = [];
-                    for (var i = 0; i < ary.length; i++) {
-                        a = new BMap.Point(ary[i][0], ary[i][1]);
+                    for (var i = 0; i < arg.length; i++) {
+                        a.push(new BMap.Point(arg[i][0], arg[i][1]));
                     }
                     obj = t.state.gis.getViewport(a);
+                    /**
+                     * 用法
+                     * map.setVisiblePoints(['lng,lat','lng,lat'])
+                    */
                 } else {
                     obj = t.getFitView(arg);
                 }
@@ -2740,7 +2792,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;
 
@@ -3070,6 +3123,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/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,6 +1559,34 @@ var TMap = 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 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
@@ -2729,7 +2765,8 @@ var TMap = function (_React$Component) {
                     isSetAreaRestriction = nextProps.isSetAreaRestriction,
                     areaRestriction = nextProps.areaRestriction,
                     isClearAreaRestriction = nextProps.isClearAreaRestriction,
-                    coverageType = nextProps.coverageType;
+                    coverageType = nextProps.coverageType,
+                    infoWindowData = nextProps.infoWindowData;
 
                 // 等待地图加载
 
@@ -3057,6 +3094,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/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@vtx/map",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "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"