@vtx/map 1.0.2 → 1.0.6

package/lib/VtxMap/AMap/AMap.js

@@ -91,6 +91,12 @@ var VortexAMap = function (_React$Component) {
                 rectangle: []
             }
         };
+        _this.AnchorConstant = {
+            tr: 'RT',
+            tl: 'LT',
+            bl: 'LB',
+            br: 'RB'
+        };
         _this.loadMapJs();
         return _this;
     }
@@ -103,7 +109,7 @@ var VortexAMap = function (_React$Component) {
                     resolve(window.AMap);
                 } else {
                     $.getScript(_default2.default.mapServerURL + '/A_content.js', function () {
-                        $.getScript('//webapi.amap.com/maps?v=1.4.14&key=e59ef9272e3788ac59d9a22f0f8cf9fe&plugin=AMap.Geolocation,AMap.MarkerClusterer,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.RangingTool,AMap.MouseTool,AMap.PolyEditor,AMap.CircleEditor,AMap.PlaceSearch,AMap.Heatmap', function () {
+                        $.getScript('//webapi.amap.com/maps?v=1.4.14&key=e59ef9272e3788ac59d9a22f0f8cf9fe&plugin=AMap.Geolocation,AMap.MarkerClusterer,AMap.MapType,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.RangingTool,AMap.MouseTool,AMap.PolyEditor,AMap.CircleEditor,AMap.PlaceSearch,AMap.Heatmap', function () {
                             var PointCollection = new Promise(function (resolve, reject) {
                                 $.getScript(_default2.default.mapServerURL + '/GPointCollection.js', function () {
                                     resolve();
@@ -111,7 +117,7 @@ var VortexAMap = function (_React$Component) {
                             });
                             Promise.all([PointCollection]).then(function () {
                                 (function setTime() {
-                                    var allEvents = [window.AMap, 'MarkerClusterer', 'Scale', 'ToolBar', 'DistrictSearch', 'RangingTool', 'MouseTool', 'PolyEditor', 'CircleEditor', 'PlaceSearch', 'Heatmap'];
+                                    var allEvents = [window.AMap, 'MarkerClusterer', 'MapType', 'Scale', 'ToolBar', 'DistrictSearch', 'RangingTool', 'MouseTool', 'PolyEditor', 'CircleEditor', 'PlaceSearch', 'Heatmap'];
                                     var isLoading = true;
                                     for (var i = 0; i <= allEvents.length - 1; i++) {
                                         if (i === 0) {
@@ -208,7 +214,10 @@ var VortexAMap = function (_React$Component) {
             if (showControl) {
                 t.showControl();
             }
-
+            //添加地图类型控件
+            if (t.props.satelliteSwitch) {
+                t.showMapTypeControl();
+            }
             //画边界线
             if (boundaryName instanceof Array && boundaryName.length > 0) {
                 t.addBaiduBoundary(boundaryName);
@@ -735,11 +744,87 @@ var VortexAMap = function (_React$Component) {
 
     }, {
         key: 'showControl',
-        value: function showControl() {
-            var t = this;
-            t.state.gis.addControl(t.scale);
-            if (t.props.showControl.type !== 'null' && !!t.props.showControl.type) {
-                t.state.gis.addControl(t.tool);
+        value: function showControl(props) {
+            var t = this,
+                location = 'RT',
+                offset = null;
+            var config = props || t.props;
+            if (t.scaleControl) {
+                t.state.gis.removeControl(t.scaleControl);
+            }
+            if (t.navigationControl) {
+                t.state.gis.removeControl(t.navigationControl);
+            }
+            if (config.showControl.location) {
+                location = t.AnchorConstant[config.showControl.location];
+            }
+            if (config.showControl.offset && config.showControl.offset.length > 0) {
+                offset = new AMap.Pixel(config.showControl.offset[0], config.showControl.offset[1]);
+                scaleOffset = new AMap.Pixel(config.showControl.offset[0] + 70, config.showControl.offset[1]);
+            }
+            // 添加比例尺
+            var control = new AMap.Scale({ position: location, offset: scaleOffset });
+            t.state.gis.addControl(control);
+            t.scaleControl = control;
+            // 包含平移和缩放按钮
+            var navigation = new AMap.ToolBar({ position: location, offset: offset });
+            t.state.gis.addControl(navigation);
+            t.navigationControl = navigation;
+        }
+        //展示地图切换控件
+
+    }, {
+        key: 'showMapTypeControl',
+        value: function showMapTypeControl(props) {
+            var t = this,
+                location = 'RT',
+                offset = null;
+            var config = props || t.props;
+            if (t.mapTypeControl) {
+                t.state.gis.removeControl(t.mapTypeControl);
+            }
+            if (config.satelliteSwitch.location) {
+                location = t.AnchorConstant[config.satelliteSwitch.location];
+            }
+
+            // 地图切换控件
+            var control = new AMap.MapType({ position: location, offset: offset });
+            t.state.gis.addControl(control);
+            t.mapTypeControl = control;
+
+            // TODO，MapType没有这些属性，所以下面定位和偏移不生效，手动修改
+            function reloaction() {
+                if (location == 'RT') {
+                    $('div.amap-maptypecontrol').css({ right: 0, top: 0, left: 'inherit', bottom: 'inherit' });
+                } else if (location == 'LT') {
+                    $('div.amap-maptypecontrol').css({ left: 0 + 64, top: 0, right: 'inherit', bottom: 'inherit' });
+                } else if (location == 'LB') {
+                    $('div.amap-maptypecontrol').css({ left: 0 + 64, bottom: 0 + 84, right: 'inherit', top: 'inherit' });
+                } else if (location == 'RB') {
+                    $('div.amap-maptypecontrol').css({ right: 0, bottom: 0 + 84, left: 'inherit', top: 'inherit' });
+                }
+                if (config.satelliteSwitch.offset && config.satelliteSwitch.offset.length > 0) {
+                    if (location == 'RT') {
+                        $('div.amap-maptypecontrol').css({ right: config.satelliteSwitch.offset[0], top: config.satelliteSwitch.offset[1], left: 'inherit', bottom: 'inherit' });
+                    } else if (location == 'LT') {
+                        $('div.amap-maptypecontrol').css({ left: config.satelliteSwitch.offset[0] + 64, top: config.satelliteSwitch.offset[1], right: 'inherit', bottom: 'inherit' });
+                    } else if (location == 'LB') {
+                        $('div.amap-maptypecontrol').css({ left: config.satelliteSwitch.offset[0] + 64, bottom: config.satelliteSwitch.offset[1] + 84, right: 'inherit', top: 'inherit' });
+                    } else if (location == 'RB') {
+                        $('div.amap-maptypecontrol').css({ right: config.satelliteSwitch.offset[0], bottom: config.satelliteSwitch.offset[1] + 84, left: 'inherit', top: 'inherit' });
+                    }
+                }
+            }
+            if ($('div.amap-maptypecontrol').length > 0) {
+                reloaction();
+            } else {
+                var timer = setInterval(function () {
+                    console.log(123);
+                    if ($('div.amap-maptypecontrol').length > 0) {
+                        clearInterval(timer);
+                        reloaction();
+                    }
+                }, 500);
             }
         }
         //获取图元数据
@@ -2917,6 +3002,15 @@ var VortexAMap = function (_React$Component) {
             if (typeof isClearAreaRestriction == 'boolean' && isClearAreaRestriction || isClearAreaRestriction && isClearAreaRestriction !== t.props.isClearAreaRestriction) {
                 t.clearAreaRestriction();
             }
+
+            // 比例尺控件位置改变
+            if (nextProps.showControl && JSON.stringify(nextProps.showControl) != JSON.stringify(t.props.showControl)) {
+                t.showControl(nextProps);
+            }
+            // 地图类型控件位置改变
+            if (nextProps.satelliteSwitch && JSON.stringify(nextProps.satelliteSwitch) != JSON.stringify(t.props.satelliteSwitch)) {
+                t.showMapTypeControl(nextProps);
+            }
         }
     }, {
         key: 'componentWillUnmount',

package/lib/VtxMap/BMap/Map.js

@@ -322,6 +322,19 @@ var BaiduMap = function (_React$Component) {
             } else {
                 window.VtxMap = {};
             }
+            // 控件位置常量
+            t.AnchorConstant = {
+                tr: BMAP_ANCHOR_TOP_RIGHT,
+                tl: BMAP_ANCHOR_TOP_LEFT,
+                bl: BMAP_ANCHOR_BOTTOM_LEFT,
+                br: BMAP_ANCHOR_BOTTOM_RIGHT
+                // 平移缩放控件大小
+            };t.NavigationConstant = {
+                large: BMAP_NAVIGATION_CONTROL_LARGE,
+                small: BMAP_NAVIGATION_CONTROL_SMALL,
+                pan: BMAP_NAVIGATION_CONTROL_PAN,
+                zoom: BMAP_NAVIGATION_CONTROL_ZOOM
+            };
             var map = window.VtxMap[mapId] = t.state.gis = new BMap.Map(mapId.toString(), {
                 enableMapClick: false,
                 minZoom: options.minZoom,
@@ -340,9 +353,9 @@ var BaiduMap = function (_React$Component) {
             }, 500);
             // 初始化地图,设置中心点坐标和地图级别
             map.centerAndZoom(new BMap.Point(parseFloat(options.center[0]), parseFloat(options.center[1])), options.zoom);
-            //添加地图类型控件(几乎不用,先写着)
+            //添加地图类型控件
             if (t.props.satelliteSwitch) {
-                map.addControl(new BMap.MapTypeControl());
+                t.showMapTypeControl();
             }
             //初始化路况控件
             if (!t._trafficCtrl) {
@@ -2209,47 +2222,64 @@ var BaiduMap = function (_React$Component) {
 
     }, {
         key: 'showControl',
-        value: function showControl() {
+        value: function showControl(props) {
             var t = this,
-                location = BMAP_ANCHOR_TOP_LEFT,
-                type = '';
-            switch (t.props.showControl.location) {
-                case 'tl':
-                    location = BMAP_ANCHOR_TOP_LEFT;
-                    break;
-                case 'bl':
-                    location = BMAP_ANCHOR_BOTTOM_LEFT;
-                    break;
-                case 'tr':
-                    location = BMAP_ANCHOR_TOP_RIGHT;
-                    break;
-                case 'br':
-                    location = BMAP_ANCHOR_BOTTOM_RIGHT;
-                    break;
+                location = t.AnchorConstant['tr'],
+                type = '',
+                offset = null,
+                scaleOffset = null;
+            var config = props || t.props;
+            if (t.scaleControl) {
+                t.state.gis.removeControl(t.scaleControl);
             }
-            switch (t.props.showControl.type) {
-                case 'all':
-                    type = '';
-                    break;
-                case 'small':
-                    type = BMAP_NAVIGATION_CONTROL_SMALL;
-                    break;
-                case 'pan':
-                    type = BMAP_NAVIGATION_CONTROL_PAN;
-                    break;
-                case 'zoom':
-                    type = BMAP_NAVIGATION_CONTROL_ZOOM;
-                    break;
+            if (t.navigationControl) {
+                t.state.gis.removeControl(t.navigationControl);
+            }
+            if (config.showControl.location) {
+                location = t.AnchorConstant[config.showControl.location];
+            }
+            if (config.showControl.type) {
+                type = t.NavigationConstant[config.showControl.type];
+            }
+            if (config.showControl.offset && config.showControl.offset.length > 0) {
+                offset = new BMap.Size(config.showControl.offset[0], config.showControl.offset[1]);
+                scaleOffset = new BMap.Size(config.showControl.offset[0] + 70, config.showControl.offset[1]);
             }
             // 左上角，添加比例尺
-            var control = new BMap.ScaleControl({ anchor: location });
+            var control = new BMap.ScaleControl({ anchor: location, offset: scaleOffset });
             t.state.gis.addControl(control);
+            t.scaleControl = control;
             if (type !== 'null') {
                 //右上角，仅包含平移和缩放按钮
-                var navigation = new BMap.NavigationControl({ anchor: location, type: type });
+                var navigation = new BMap.NavigationControl({ anchor: location, type: type, offset: offset });
                 t.state.gis.addControl(navigation);
+                t.navigationControl = navigation;
             }
         }
+        //展示地图切换控件
+
+    }, {
+        key: 'showMapTypeControl',
+        value: function showMapTypeControl(props) {
+            var t = this,
+                location = t.AnchorConstant['br'],
+                offset = null;
+            var config = props || t.props;
+            if (t.mapTypeControl) {
+                t.state.gis.removeControl(t.mapTypeControl);
+            }
+            if (config.satelliteSwitch.location) {
+                location = t.AnchorConstant[config.satelliteSwitch.location];
+            }
+            if (config.satelliteSwitch.offset && config.satelliteSwitch.offset.length > 0) {
+                offset = new BMap.Size(config.satelliteSwitch.offset[0], config.satelliteSwitch.offset[1]);
+            }
+            var mapTypes = [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP];
+            // 地图切换控件
+            var control = new BMap.MapTypeControl({ mapTypes: mapTypes, anchor: location, type: BMAP_MAPTYPE_CONTROL_HORIZONTAL, offset: offset });
+            t.state.gis.addControl(control);
+            t.mapTypeControl = control;
+        }
         /*设置显示区域*/
 
     }, {
@@ -3104,6 +3134,14 @@ var BaiduMap = function (_React$Component) {
                     t.removeGraphic(item.id, item.type);
                 });
             }
+            // 比例尺控件位置改变
+            if (nextProps.showControl && JSON.stringify(nextProps.showControl) != JSON.stringify(t.props.showControl)) {
+                t.showControl(nextProps);
+            }
+            // 地图类型控件位置改变
+            if (nextProps.satelliteSwitch && JSON.stringify(nextProps.satelliteSwitch) != JSON.stringify(t.props.satelliteSwitch)) {
+                t.showMapTypeControl(nextProps);
+            }
         }
     }, {
         key: 'componentWillUnmount',

package/lib/VtxMap/TMap/TMap.js

@@ -218,7 +218,10 @@ var TMap = function (_React$Component) {
             if (showControl) {
                 t.showControl();
             }
-
+            //添加地图类型控件
+            if (t.props.satelliteSwitch) {
+                t.showMapTypeControl();
+            }
             // //画边界线
             // if(boundaryName instanceof Array && boundaryName.length>0){
             //     t.addBaiduBoundary(boundaryName);
@@ -263,6 +266,13 @@ var TMap = function (_React$Component) {
             if (!window.VtxMap) {
                 window.VtxMap = {};
             }
+            // 控件位置常量
+            t.AnchorConstant = {
+                tr: T_ANCHOR_TOP_RIGHT,
+                tl: T_ANCHOR_TOP_LEFT,
+                bl: T_ANCHOR_BOTTOM_LEFT,
+                br: T_ANCHOR_BOTTOM_RIGHT
+            };
             window.VtxMap[mapId] = t.state.gis = new T.Map(mapId.toString(), {
                 //zoom等级,和百度一样默认10
                 zoom: mapZoomLevel || 10,
@@ -555,63 +565,74 @@ var TMap = function (_React$Component) {
 
     }, {
         key: 'showControl',
-        value: function showControl() {
-            var t = this;
-            var zlt = T_ANCHOR_BOTTOM_RIGHT;
-            var zls = T_ANCHOR_BOTTOM_RIGHT;
-            if (t.props.showControl) {
-                switch (t.props.showControl.location) {
-                    case 'tl':
-                        zlt = T_ANCHOR_TOP_LEFT;
-                        zls = T_ANCHOR_BOTTOM_LEFT;
-                        break;
-                    case 'bl':
-                        zlt = T_ANCHOR_BOTTOM_LEFT;
-                        zls = T_ANCHOR_BOTTOM_LEFT;
-                        break;
-                    case 'tr':
-                        zlt = T_ANCHOR_TOP_RIGHT;
-                        zls = T_ANCHOR_BOTTOM_RIGHT;
-                        break;
-                    case 'br':
-                        zlt = T_ANCHOR_BOTTOM_RIGHT;
-                        zls = T_ANCHOR_BOTTOM_RIGHT;
-                        break;
-                }
-            }
-            var zoomControl = void 0,
-                scaleControl = void 0;
-            switch (t.props.showControl.type) {
-                case 'all':
-                case 'small':
-                case 'pan':
-                case 'zoom':
-                    zoomControl = new T.Control.Zoom();
-                    scaleControl = new T.Control.Scale();
-                    this.state.gis.addControl(scaleControl);
-                    this.state.gis.addControl(zoomControl);
-                    zoomControl.setPosition(zlt);
-                    scaleControl.setPosition(zls);
-                    break;
-                default:
-                    scaleControl = new T.Control.Scale();
-                    this.state.gis.addControl(scaleControl);
-                    scaleControl.setPosition(zls);
-                    break;
+        value: function showControl(props) {
+            var t = this,
+                location = t.AnchorConstant['tr'],
+                offset = null,
+                scaleOffset = null;
+            var config = props || t.props;
+            if (t.scaleControl) {
+                t.state.gis.removeControl(t.scaleControl);
+            }
+            if (t.navigationControl) {
+                t.state.gis.removeControl(t.navigationControl);
+            }
+            if (config.showControl.location) {
+                location = t.AnchorConstant[config.showControl.location];
+            }
+            // 添加比例尺
+            var control = new T.Control.Scale({ position: location, offset: scaleOffset });
+            t.state.gis.addControl(control);
+            t.scaleControl = control;
+            // 缩放地图
+            var navigation = new T.Control.Zoom({ position: location, offset: offset });
+            t.state.gis.addControl(navigation);
+            t.navigationControl = navigation;
+
+            // TODO不支持偏移，手动偏移
+            if (config.showControl.offset && config.showControl.offset.length > 0) {
+                if (location == "topright") {
+                    $('div.tdt-top.tdt-right').css({ right: config.showControl.offset[0], top: config.showControl.offset[1] });
+                } else if (location == "topleft") {
+                    $('div.tdt-top.tdt-left').css({ left: config.showControl.offset[0], top: config.showControl.offset[1] });
+                } else if (location == "bottomleft") {
+                    $('div.tdt-bottom.tdt-left').css({ left: config.showControl.offset[0], bottom: config.showControl.offset[1] });
+                } else if (location == "bottomright") {
+                    $('div.tdt-bottom.tdt-right').css({ right: config.showControl.offset[0], bottom: config.showControl.offset[1] });
+                }
+            }
+        }
+        //展示地图切换控件
+
+    }, {
+        key: 'showMapTypeControl',
+        value: function showMapTypeControl(props) {
+            var t = this,
+                location = t.AnchorConstant['br'],
+                offset = null;
+            var config = props || t.props;
+            if (t.mapTypeControl) {
+                t.state.gis.removeControl(t.mapTypeControl);
             }
-            var fdom = document.getElementById(t.props.mapId);
-            //天地图 api问题  使用js dom操作css
-            if (t.props.showControl && t.props.showControl.location == 'bl') {
-                var dom = fdom.getElementsByClassName('tdt-control-scale')[0];
-                dom.style.position = 'relative';
-                dom.style.top = '65px';
-                dom.style.left = '45px';
+            if (config.satelliteSwitch.location) {
+                location = t.AnchorConstant[config.satelliteSwitch.location];
             }
-            if (t.props.showControl && t.props.showControl.location == 'br') {
-                var _dom = fdom.getElementsByClassName('tdt-control-scale')[0];
-                _dom.style.position = 'relative';
-                _dom.style.top = '65px';
-                _dom.style.right = '45px';
+            // 地图切换控件
+            var control = new T.Control.MapType({ position: location, offset: offset });
+            t.state.gis.addControl(control);
+            t.mapTypeControl = control;
+
+            // TODO不支持偏移，手动偏移
+            if (config.satelliteSwitch.offset && config.satelliteSwitch.offset.length > 0) {
+                if (location == "topright") {
+                    $('div.tdt-top.tdt-right').css({ right: config.satelliteSwitch.offset[0], top: config.satelliteSwitch.offset[1] });
+                } else if (location == "topleft") {
+                    $('div.tdt-top.tdt-left').css({ left: config.satelliteSwitch.offset[0], top: config.satelliteSwitch.offset[1] });
+                } else if (location == "bottomleft") {
+                    $('div.tdt-bottom.tdt-left').css({ left: config.satelliteSwitch.offset[0], bottom: config.satelliteSwitch.offset[1] });
+                } else if (location == "bottomright") {
+                    $('div.tdt-bottom.tdt-right').css({ right: config.satelliteSwitch.offset[0], bottom: config.satelliteSwitch.offset[1] });
+                }
             }
         }
         //测距
@@ -1530,11 +1551,11 @@ var TMap = function (_React$Component) {
                 t.heatmap.hide();
             }
         }
-        /*
-            参数
-            geometryType:point/polyline/polygon/circle/rectangle  默认point
-            parameter 样式 默认null 对象{}写入方式跟add方法一样(对应点线圆面)
-            data //初始化数据   默认{id:'add'}
+        /*
+            参数
+            geometryType:point/polyline/polygon/circle/rectangle  默认point
+            parameter 样式 默认null 对象{}写入方式跟add方法一样(对应点线圆面)
+            data //初始化数据   默认{id:'add'}
         */
 
     }, {
@@ -2740,10 +2761,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;
@@ -2803,9 +2824,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;
@@ -2864,9 +2885,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;
@@ -2925,9 +2946,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;
@@ -3119,6 +3140,15 @@ var TMap = function (_React$Component) {
                     }
                 }, 100);
             }
+
+            // 比例尺控件位置改变
+            if (nextProps.showControl && JSON.stringify(nextProps.showControl) != JSON.stringify(t.props.showControl)) {
+                t.showControl(nextProps);
+            }
+            // 地图类型控件位置改变
+            if (nextProps.satelliteSwitch && JSON.stringify(nextProps.satelliteSwitch) != JSON.stringify(t.props.satelliteSwitch)) {
+                t.showMapTypeControl(nextProps);
+            }
         }
     }, {
         key: 'componentWillUnmount',
@@ -3140,7 +3170,7 @@ var TMap = function (_React$Component) {
                     clearInterval(t.animTimer[j]);
                 }
             }
-            window.VtxMap[t.state.mapId] = null;
+            if (window.VtxMap && window.VtxMap[t.state.mapId]) window.VtxMap[t.state.mapId] = null;
         }
     }]);
 

package/lib/VtxSearchMap/VtxSearchMap.js

@@ -32,12 +32,6 @@ var _message2 = _interopRequireDefault(_message);
 
 require('antd/lib/message/style/css');
 
-var _icon = require('antd/lib/icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-require('antd/lib/icon/style/css');
-
 var _checkbox = require('antd/lib/checkbox');
 
 var _checkbox2 = _interopRequireDefault(_checkbox);
@@ -52,6 +46,8 @@ var _default = require('../default');
 
 var _default2 = _interopRequireDefault(_default);
 
+var _mapping = require('./mapping');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -83,8 +79,12 @@ var styles = {
     hiddenLabel: 'vtx-ui-searchmap-hiddenlabel',
     otherModal: 'vtx-ui-searchmap-othermodal'
 };
+// import Icon from 'antd/lib/icon';
+// import 'antd/lib/icon/style/css';
+
 //公共地址配置
 
+
 // message.config({
 //   top: document.getElementById('root').offsetHeight/3,
 //   duration: 5,
@@ -102,6 +102,10 @@ function distinct(ary) {
     }
 }
 
+var getIcon = function getIcon(type) {
+    return _default.antdMajorVersion === '4' ? _react2.default.createElement(_default.VtxMapIcon, { type: 'icon-' + _mapping.iconMapping[type] }) : type;
+};
+
 var VtxSearchMap = function (_React$Component) {
     _inherits(VtxSearchMap, _React$Component);
 
@@ -599,12 +603,12 @@ var VtxSearchMap = function (_React$Component) {
                             _button2.default,
                             { type: 'primary', onClick: function onClick() {
                                     _this4.callback();
-                                }, icon: 'check' },
+                                }, icon: getIcon('check') },
                             '\u786E\u5B9A'
                         ),
                         _react2.default.createElement(
                             _button2.default,
-                            { onClick: this.closeModal.bind(this), icon: 'close' },
+                            { onClick: this.closeModal.bind(this), icon: getIcon('close') },
                             '\u5173\u95ED'
                         )
                     )
@@ -617,16 +621,16 @@ var VtxSearchMap = function (_React$Component) {
                         { className: styles.top },
                         mapType == 'gmap' ? '' : [_react2.default.createElement(_input2.default, _extends({ key: '1' }, InputProps)), _react2.default.createElement(
                             _button2.default,
-                            { key: '2', type: 'primary', onClick: this.searchList.bind(this), icon: 'search' },
+                            { key: '2', type: 'primary', onClick: this.searchList.bind(this), icon: getIcon('search') },
                             '\u67E5\u8BE2'
                         ), _react2.default.createElement(
                             _button2.default,
-                            { key: '3', onClick: this.clearList.bind(this), icon: 'close' },
+                            { key: '3', onClick: this.clearList.bind(this), icon: getIcon('close') },
                             '\u6E05\u7A7A'
                         )],
                         this.state.graphicType == 'point' ? _react2.default.createElement(
                             _button2.default,
-                            { onClick: this.correction.bind(this), icon: 'environment-o' },
+                            { onClick: this.correction.bind(this), icon: getIcon('environment') },
                             '\u6821\u6B63'
                         ) : null,
                         this.state.graphicType != 'point' ? _react2.default.createElement(
@@ -645,12 +649,12 @@ var VtxSearchMap = function (_React$Component) {
                                         });
                                     });
                                     _this4.callback('editDraw');
-                                }, icon: 'edit' },
+                                }, icon: getIcon('edit') },
                             '\u91CD\u65B0\u7ED8\u5236'
                         ) : null,
                         mapType == 'gmap' ? '' : _react2.default.createElement(
                             _button2.default,
-                            { onClick: this.setFitView.bind(this), icon: 'sync' },
+                            { onClick: this.setFitView.bind(this), icon: getIcon('sync') },
                             '\u8FD4\u56DE\u5168\u5C40\u5730\u56FE'
                         ),
                         isShowOther ? _react2.default.createElement(
@@ -687,7 +691,7 @@ var VtxSearchMap = function (_React$Component) {
                                         { onClick: function onClick() {
                                                 return _this4.showOrhidden(false);
                                             }, className: styles.btn },
-                                        _react2.default.createElement(_icon2.default, { type: 'double-left' })
+                                        _react2.default.createElement(_default.VtxMapIcon, { type: 'icon-doubleleft' })
                                     )
                                 ),
                                 _react2.default.createElement(
@@ -713,7 +717,7 @@ var VtxSearchMap = function (_React$Component) {
                                 { onClick: function onClick() {
                                         return _this4.showOrhidden(true);
                                     }, className: styles.btn + ' ' + (!isShowList ? styles.show : styles.hidden) },
-                                _react2.default.createElement(_icon2.default, { type: 'double-right' })
+                                _react2.default.createElement(_default.VtxMapIcon, { type: 'icon-doubleright' })
                             )
                         ),
                         _react2.default.createElement(

package/lib/VtxSearchMap/mapping.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var iconMapping = exports.iconMapping = {
+    check: 'check',
+    close: 'close',
+    search: 'search1',
+    environment: 'location',
+    edit: 'edit',
+    sync: 'sync',
+    'double-left': 'doubleleft',
+    'double-right': 'doubleright'
+};

package/lib/default.js

@@ -3,7 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.VtxMapIcon = exports.antdMajorVersion = undefined;
 exports.getTMapTK = getTMapTK;
+
+var _package = require('antd/package.json');
+
+var createFromIconfontCN = void 0;
+var antdMajorVersion = exports.antdMajorVersion = _package.version.substring(0, 1);
+
+// 必须是3.9.0之后的版本
+if (antdMajorVersion === '3') {
+    createFromIconfontCN = require('antd/lib/icon').default.createFromIconfontCN;
+} else if (antdMajorVersion === '4') {
+    createFromIconfontCN = require('@ant-design/icons').createFromIconfontCN;
+}
+
+var VtxMapIcon = exports.VtxMapIcon = createFromIconfontCN({
+    scriptUrl: '//at.alicdn.com/t/font_2865072_ecuwrji9qwq.js'
+});
+
 var globalCfg = window.VtxPublicServiceAddress || {};
 
 exports.default = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtx/map",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "description": "@vtx/map",
   "main": "lib/index.js",
   "scripts": {