@vtx/map 1.0.4 → 1.0.8

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.js

@@ -744,44 +744,88 @@ var VortexAMap = function (_React$Component) {
 
     }, {
         key: 'showControl',
-        value: function showControl() {
+        value: function showControl(props) {
             var t = this,
                 location = 'RT',
                 offset = null;
-
-            if (t.props.showControl.location) {
-                location = t.AnchorConstant[t.props.showControl.location];
+            var config = props || t.props;
+            if (t.scaleControl) {
+                t.state.gis.removeControl(t.scaleControl);
+            }
+            if (t.navigationControl) {
+                t.state.gis.removeControl(t.navigationControl);
             }
-            if (t.props.showControl.offset && t.props.showControl.offset.length > 0) {
-                offset = new AMap.Pixel(t.props.showControl.offset[0], t.props.showControl.offset[1]);
-                scaleOffset = new AMap.Pixel(t.props.showControl.offset[0] + 70, t.props.showControl.offset[1]);
+            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() {
+        value: function showMapTypeControl(props) {
             var t = this,
                 location = 'RT',
                 offset = null;
-            // TODO，MapType没有这些属性，所以下面定位和偏移不生效
-            if (t.props.satelliteSwitch.location) {
-                location = t.AnchorConstant[t.props.showControl.location];
+            var config = props || t.props;
+            if (t.mapTypeControl) {
+                t.state.gis.removeControl(t.mapTypeControl);
             }
-            if (t.props.satelliteSwitch.offset && t.props.satelliteSwitch.offset.length > 0) {
-                offset = new AMap.Pixel(t.props.satelliteSwitch.offset[0], t.props.satelliteSwitch.offset[1]);
+            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);
+            }
         }
         //获取图元数据
 
@@ -2958,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

@@ -1633,16 +1633,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);
                 }
@@ -2222,48 +2234,63 @@ var BaiduMap = function (_React$Component) {
 
     }, {
         key: 'showControl',
-        value: function showControl() {
+        value: function showControl(props) {
             var t = this,
                 location = t.AnchorConstant['tr'],
                 type = '',
                 offset = null,
                 scaleOffset = null;
-            if (t.props.showControl.location) {
-                location = t.AnchorConstant[t.props.showControl.location];
+            var config = props || t.props;
+            if (t.scaleControl) {
+                t.state.gis.removeControl(t.scaleControl);
             }
-            if (t.props.showControl.type) {
-                type = t.NavigationConstant[t.props.showControl.type];
+            if (t.navigationControl) {
+                t.state.gis.removeControl(t.navigationControl);
             }
-            if (t.props.showControl.offset && t.props.showControl.offset.length > 0) {
-                offset = new BMap.Size(t.props.showControl.offset[0], t.props.showControl.offset[1]);
-                scaleOffset = new BMap.Size(t.props.showControl.offset[0] + 70, t.props.showControl.offset[1]);
+            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, offset: scaleOffset });
             t.state.gis.addControl(control);
+            t.scaleControl = control;
             if (type !== 'null') {
                 //右上角，仅包含平移和缩放按钮
                 var navigation = new BMap.NavigationControl({ anchor: location, type: type, offset: offset });
                 t.state.gis.addControl(navigation);
+                t.navigationControl = navigation;
             }
         }
         //展示地图切换控件
 
     }, {
         key: 'showMapTypeControl',
-        value: function showMapTypeControl() {
+        value: function showMapTypeControl(props) {
             var t = this,
                 location = t.AnchorConstant['br'],
                 offset = null;
-            if (t.props.satelliteSwitch.location) {
-                location = t.AnchorConstant[t.props.satelliteSwitch.location];
+            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 (t.props.satelliteSwitch.offset && t.props.satelliteSwitch.offset.length > 0) {
-                offset = new BMap.Size(t.props.satelliteSwitch.offset[0], t.props.satelliteSwitch.offset[1]);
+            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({ anchor: location, type: BMAP_MAPTYPE_CONTROL_MAP, offset: offset });
+            var control = new BMap.MapTypeControl({ mapTypes: mapTypes, anchor: location, type: BMAP_MAPTYPE_CONTROL_HORIZONTAL, offset: offset });
             t.state.gis.addControl(control);
+            t.mapTypeControl = control;
         }
         /*设置显示区域*/
 
@@ -3119,6 +3146,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',
@@ -3132,7 +3167,7 @@ var BaiduMap = function (_React$Component) {
             if (t.moveToTimer) {
                 clearInterval(t.moveToTimer);
             }
-            window.VtxMap[t.state.mapId] = null;
+            window.VtxMap && (window.VtxMap[t.state.mapId] = null);
         }
     }]);
 

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.js

@@ -565,41 +565,75 @@ var TMap = function (_React$Component) {
 
     }, {
         key: 'showControl',
-        value: function showControl() {
+        value: function showControl(props) {
             var t = this,
                 location = t.AnchorConstant['tr'],
                 offset = null,
                 scaleOffset = null;
-            if (t.props.showControl.location) {
-                location = t.AnchorConstant[t.props.showControl.location];
+            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 (t.props.showControl.offset && t.props.showControl.offset.length > 0) {}
-            // TODO不支持偏移
-
             // 添加比例尺
             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() {
+        value: function showMapTypeControl(props) {
             var t = this,
                 location = t.AnchorConstant['br'],
                 offset = null;
-            if (t.props.satelliteSwitch.location) {
-                location = t.AnchorConstant[t.props.satelliteSwitch.location];
+            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 (t.props.satelliteSwitch.offset && t.props.satelliteSwitch.offset.length > 0) {}
-            // TODO不支持偏移
-
             // 地图切换控件
             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] });
+                }
+            }
         }
         //测距
 
@@ -1517,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'}
         */
 
     }, {
@@ -2727,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;
@@ -2790,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;
@@ -2851,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;
@@ -2912,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;
@@ -3106,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',

package/package.json

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