@vtx/map 1.0.3

package/lib/VtxMap/GMap/Map.less

@@ -0,0 +1,87 @@
+.map{
+    width: 100%;
+    height: 100%;
+    background-color: #f1f1f1;
+}
+.vtx_gmap_html_points,.vtx_gmap_html_pointCollection{
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+.esriSimpleSlider{
+    z-index: 10000000 !important;
+}
+.label-content{
+    /*margin-left: 0;
+    width: 100px;
+    line-height: 25px;
+    text-align: center;
+    position: relative;
+    left: -43px;
+    background-color: #fff;
+    opacity: 1;
+    border-radius: 5px;
+    color: #5DD0EE;
+    word-break: break-all;
+    white-space: normal;
+    padding: 2px 8px;*/
+    display: inline-block;
+    padding: 5px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 5px;
+    background-color: #fff;
+    opacity: 1;
+    color: #5DD0EE;
+}
+.vtx-g-rangingPoint{
+    width: 7px;
+    height: 7px;
+    background-color: #fff;
+    border: 2px solid #ff0000;
+    display: inline-block;
+    border-radius: 7px;
+}
+.vtx-g-rangingDistance{
+    position: relative;
+    top: -36px;
+    left: 15px;
+    height: 30px;
+    line-height: 28px;
+    background-color: #fff;
+    border: 1px solid #ff0000;
+    font-size: 12px;
+    word-break: keep-all;
+    padding: 0px 3px;
+}
+.vtx-g-rang-exit{
+    width: 9px;
+    height: 9px;
+    background-color: #fff;
+    border: 2px solid #ff0000;
+    color: #ff0000;
+    line-height: 7px;
+    text-align: center;
+    font-size: 12px;
+    cursor: pointer;
+}
+.vtx-g-rang-showRangTool{
+    line-height: 18px;
+    font-size: 12px;
+    border: 1px solid #ff0000;
+    word-break: keep-all;
+    background-color: #fff;
+    padding: 0px 5px;
+}
+.zoom_slider_show_scale{
+    padding: 1px 8px;
+    font-size: 12px;
+    text-align: center;
+}
+.zoom_slider_show_bottom{
+    width: 100%;
+    height: 3px;
+    border: 1px solid #000;
+    border-bottom: 3px solid #000;
+    border-top: 0px;
+}

package/lib/VtxMap/Map.css

@@ -0,0 +1,7 @@
+.vtx-map {
+  width: 100%;
+  height: 100%;
+}
+.vtx-map label.BMapLabel:hover {
+  z-index: 1 !important;
+}

package/lib/VtxMap/Map.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _AMap = require('./AMap/AMap');
+
+var _AMap2 = _interopRequireDefault(_AMap);
+
+var _Map = require('./BMap/Map');
+
+var _Map2 = _interopRequireDefault(_Map);
+
+var _TMap = require('./TMap/TMap');
+
+var _TMap2 = _interopRequireDefault(_TMap);
+
+var _Map3 = require('./GMap/Map');
+
+var _Map4 = _interopRequireDefault(_Map3);
+
+require('./Map.css');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var VtxMap = function (_React$Component) {
+    _inherits(VtxMap, _React$Component);
+
+    function VtxMap(props) {
+        _classCallCheck(this, VtxMap);
+
+        return _possibleConstructorReturn(this, (VtxMap.__proto__ || Object.getPrototypeOf(VtxMap)).call(this, props));
+    }
+
+    _createClass(VtxMap, [{
+        key: 'render',
+        value: function render() {
+            var t = this;
+
+            var _t$props = t.props,
+                mapType = _t$props.mapType,
+                getMapInstance = _t$props.getMapInstance,
+                newProps = _objectWithoutProperties(_t$props, ['mapType', 'getMapInstance']);
+
+            if (typeof getMapInstance == 'function') {
+                newProps.ref = function (map) {
+                    if (map) {
+                        getMapInstance(map);
+                    }
+                };
+            }
+            switch (mapType) {
+                case 'amap':
+                    return _react2.default.createElement(_AMap2.default, newProps);
+                case 'tmap':
+                    return _react2.default.createElement(_TMap2.default, newProps);
+                case 'gmap':
+                    return _react2.default.createElement(_Map4.default, newProps);
+                default:
+                    return _react2.default.createElement(_Map2.default, newProps);
+            }
+        }
+    }]);
+
+    return VtxMap;
+}(_react2.default.Component);
+
+exports.default = VtxMap;
+module.exports = exports['default'];

package/lib/VtxMap/Map.less

@@ -0,0 +1,9 @@
+.vtx-map{
+	width: 100%;
+	height: 100%;
+    label.BMapLabel{
+        &:hover{
+            z-index: 1 !important;
+        }
+    }
+}

package/lib/VtxMap/MapToolFunction.js

@@ -0,0 +1,403 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.graphicManage = graphicManage;
+exports.RotateIcon = RotateIcon;
+exports.getMaxMin = getMaxMin;
+exports.getPolygonArea = getPolygonArea;
+exports.getPixelDistance = getPixelDistance;
+exports.getDistance = getDistance;
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function graphicManage() {
+    this.allGraphics = {}; //所有图元对象
+    this.allParam = {}; //所有添加图元的数据
+}
+graphicManage.prototype = {
+    //存储图元对象
+    setGraphic: function setGraphic(id, graphic) {
+        this.allGraphics[id] = graphic;
+        //链式调用
+        return this;
+    },
+
+    //获取图元对象
+    getGraphic: function getGraphic(id) {
+        return this.allGraphics[id];
+    },
+
+    //批量获取图元对象
+    getMoreGraphic: function getMoreGraphic(ids) {
+        var _this = this;
+
+        var rg = [];
+        ids.map(function (item, index) {
+            rg.push(_this.allGraphics[item]);
+        });
+        return rg;
+    },
+
+    //删除图元时,同时删除id
+    removeGraphic: function removeGraphic(id) {
+        delete this.allGraphics[id];
+    },
+
+    //判断id是否重复
+    isRepetition: function isRepetition(id) {
+        return !!this.allGraphics[id];
+    },
+
+    //设置图元数据
+    setGraphicParam: function setGraphicParam(id, obj) {
+        this.allParam[id] = obj;
+        //链式调用
+        return this;
+    },
+
+    //获取单个图元数据
+    getGraphicParam: function getGraphicParam(id) {
+        return this.allParam[id];
+    },
+    removeGraphicParam: function removeGraphicParam(id) {
+        delete this.allParam[id];
+    },
+
+    //批量获取图元数据
+    getMoreGraphicParam: function getMoreGraphicParam(ids) {
+        var _this2 = this;
+
+        var ap = [];
+        ids.map(function (item, index) {
+            ap.push(_this2.allParam[item]);
+        });
+        return ap;
+    },
+
+    //清空所有缓存数据
+    clearAll: function clearAll() {
+        this.allGraphics = {};
+        this.allParam = {};
+    }
+};
+
+//使用canvas 旋转图片,生成base64,达到旋转效果
+function RotateIcon() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    this.options = options;
+    this.rImg = new Image();
+    this.rImg.src = this.options.url || '';
+    var canvas = document.createElement("canvas");
+    canvas.width = this.options.width;
+    canvas.height = this.options.height;
+    this.context = canvas.getContext("2d");
+    this.canvas = canvas;
+};
+RotateIcon.prototype.setRotation = function () {
+    var deg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+    var t = this;
+    var canvas = t.context,
+        angle = deg * Math.PI / 180,
+        centerX = t.options.width / 2,
+        centerY = t.options.height / 2;
+    canvas.clearRect(0, 0, t.options.width, t.options.height);
+    canvas.save();
+    canvas.translate(centerX, centerY);
+    canvas.rotate(angle);
+    canvas.translate(-centerX, -centerY);
+    canvas.drawImage(t.rImg, -1, -1);
+    canvas.restore();
+    return t;
+};
+RotateIcon.prototype.getUrl = function () {
+    return this.canvas.toDataURL('image/png');
+};
+
+function getMaxMin() {
+    var path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+    //区别点和圆的经纬度数据处理
+    var lnglatAry = [],
+        _extent = { xmax: 0, xmin: 0, ymax: 0, ymin: 0 };
+    var p = path.map(function (item, index) {
+        var lng = item.lng,
+            lat = item.lat;
+        if (lng > _extent.xmax) {
+            _extent.xmax = lng;
+        }
+        if (lng < _extent.xmin || _extent.xmin == 0) {
+            _extent.xmin = lng;
+        }
+        if (lat > _extent.ymax) {
+            _extent.ymax = lat;
+        }
+        if (lat < _extent.ymin || _extent.ymin == 0) {
+            _extent.ymin = lat;
+        }
+        lnglatAry.push({
+            lngX: lng,
+            latX: lat
+        });
+        return [lng, lat];
+    });
+    return { path: p, _extent: _extent };
+}
+//计算面  面积
+function getPolygonArea(polygon) {
+    var pts = [].concat(_toConsumableArray(polygon));
+
+    if (pts.length < 3) {
+        //小于3个顶点，不能构建面
+        return 0;
+    }
+    if (pts[0][0] == pts[pts.length - 1][0] && pts[0][1] == pts[pts.length - 1][1]) {
+        pts.pop();
+    }
+    var totalArea = 0; //初始化总面积
+    var LowX = 0.0;
+    var LowY = 0.0;
+    var MiddleX = 0.0;
+    var MiddleY = 0.0;
+    var HighX = 0.0;
+    var HighY = 0.0;
+    var AM = 0.0;
+    var BM = 0.0;
+    var CM = 0.0;
+    var AL = 0.0;
+    var BL = 0.0;
+    var CL = 0.0;
+    var AH = 0.0;
+    var BH = 0.0;
+    var CH = 0.0;
+    var CoefficientL = 0.0;
+    var CoefficientH = 0.0;
+    var ALtangent = 0.0;
+    var BLtangent = 0.0;
+    var CLtangent = 0.0;
+    var AHtangent = 0.0;
+    var BHtangent = 0.0;
+    var CHtangent = 0.0;
+    var ANormalLine = 0.0;
+    var BNormalLine = 0.0;
+    var CNormalLine = 0.0;
+    var OrientationValue = 0.0;
+    var AngleCos = 0.0;
+    var Sum1 = 0.0;
+    var Sum2 = 0.0;
+    var Count2 = 0;
+    var Count1 = 0;
+    var Sum = 0.0;
+    var Radius = 6399593.0; //6378137.0,WGS84椭球半径   6399593,CGCS2000  椭球半径
+    var Count = pts.length;
+    for (var i = 0; i < Count; i++) {
+        if (i == 0) {
+            LowX = (pts[Count - 1].lng || pts[Count - 1][0]) * Math.PI / 180;
+            LowY = (pts[Count - 1].lat || pts[Count - 1][1]) * Math.PI / 180;
+            MiddleX = (pts[0].lng || pts[0][0]) * Math.PI / 180;
+            MiddleY = (pts[0].lat || pts[0][1]) * Math.PI / 180;
+            HighX = (pts[1].lng || pts[1][0]) * Math.PI / 180;
+            HighY = (pts[1].lat || pts[1][1]) * Math.PI / 180;
+        } else if (i == Count - 1) {
+            LowX = (pts[Count - 2].lng || pts[Count - 2][0]) * Math.PI / 180;
+            LowY = (pts[Count - 2].lat || pts[Count - 2][1]) * Math.PI / 180;
+            MiddleX = (pts[Count - 1].lng || pts[Count - 1][0]) * Math.PI / 180;
+            MiddleY = (pts[Count - 1].lat || pts[Count - 1][1]) * Math.PI / 180;
+            HighX = (pts[0].lng || pts[0][0]) * Math.PI / 180;
+            HighY = (pts[0].lat || pts[0][1]) * Math.PI / 180;
+        } else {
+            LowX = (pts[i - 1].lng || pts[i - 1][0]) * Math.PI / 180;
+            LowY = (pts[i - 1].lat || pts[i - 1][1]) * Math.PI / 180;
+            MiddleX = (pts[i].lng || pts[i][0]) * Math.PI / 180;
+            MiddleY = (pts[i].lat || pts[i][1]) * Math.PI / 180;
+            HighX = (pts[i + 1].lng || pts[i + 1][0]) * Math.PI / 180;
+            HighY = (pts[i + 1].lat || pts[i + 1][1]) * Math.PI / 180;
+        }
+        AM = Math.cos(MiddleY) * Math.cos(MiddleX);
+        BM = Math.cos(MiddleY) * Math.sin(MiddleX);
+        CM = Math.sin(MiddleY);
+        AL = Math.cos(LowY) * Math.cos(LowX);
+        BL = Math.cos(LowY) * Math.sin(LowX);
+        CL = Math.sin(LowY);
+        AH = Math.cos(HighY) * Math.cos(HighX);
+        BH = Math.cos(HighY) * Math.sin(HighX);
+        CH = Math.sin(HighY);
+        CoefficientL = (AM * AM + BM * BM + CM * CM) / (AM * AL + BM * BL + CM * CL);
+        CoefficientH = (AM * AM + BM * BM + CM * CM) / (AM * AH + BM * BH + CM * CH);
+        ALtangent = CoefficientL * AL - AM;
+        BLtangent = CoefficientL * BL - BM;
+        CLtangent = CoefficientL * CL - CM;
+        AHtangent = CoefficientH * AH - AM;
+        BHtangent = CoefficientH * BH - BM;
+        CHtangent = CoefficientH * CH - CM;
+        if (!(Math.sqrt(AHtangent * AHtangent + BHtangent * BHtangent + CHtangent * CHtangent) * Math.sqrt(ALtangent * ALtangent + BLtangent * BLtangent + CLtangent * CLtangent))) {
+            AngleCos = 0;
+        } else {
+            AngleCos = (AHtangent * ALtangent + BHtangent * BLtangent + CHtangent * CLtangent) / (Math.sqrt(AHtangent * AHtangent + BHtangent * BHtangent + CHtangent * CHtangent) * Math.sqrt(ALtangent * ALtangent + BLtangent * BLtangent + CLtangent * CLtangent));
+            AngleCos = Math.acos(AngleCos);
+        }
+        ANormalLine = BHtangent * CLtangent - CHtangent * BLtangent;
+        BNormalLine = 0 - (AHtangent * CLtangent - CHtangent * ALtangent);
+        CNormalLine = AHtangent * BLtangent - BHtangent * ALtangent;
+        if (AM != 0) OrientationValue = ANormalLine / AM;else if (BM != 0) OrientationValue = BNormalLine / BM;else OrientationValue = CNormalLine / CM;
+        if (OrientationValue > 0) {
+            Sum1 += AngleCos;
+            Count1++;
+        } else {
+            Sum2 += AngleCos;
+            Count2++;
+        }
+    }
+    var tempSum1, tempSum2;
+    tempSum1 = Sum1 + (2 * Math.PI * Count2 - Sum2);
+    tempSum2 = 2 * Math.PI * Count1 - Sum1 + Sum2;
+    if (Sum1 > Sum2) {
+        if (tempSum1 - (Count - 2) * Math.PI < 1) Sum = tempSum1;else Sum = tempSum2;
+    } else {
+        if (tempSum2 - (Count - 2) * Math.PI < 1) Sum = tempSum2;else Sum = tempSum1;
+    }
+    totalArea = (Sum - (Count - 2) * Math.PI) * Radius * Radius;
+    return totalArea; //返回总面积
+}
+//计算2点间的距离 (单位:px)
+function getPixelDistance(lt1, lt2) {
+    var x = Math.abs(lt1.x - lt2.x);
+    var y = Math.abs(lt1.y - lt2.y);
+    var d = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+    return d;
+}
+//计算2点间的距离 (单位m)
+function getDistance(point1, point2, map, wkid) {
+    var lt1 = map.toScreen(new esri.geometry.Point({
+        longitude: point1[0],
+        latitude: point1[1],
+        spatialReference: { wkid: wkid || 4326 }
+    }));
+    var lt2 = map.toScreen(new esri.geometry.Point({
+        longitude: point2[0],
+        latitude: point2[1],
+        spatialReference: { wkid: wkid || 4326 }
+    }));
+    var x = Math.abs(lt1.x - lt2.x);
+    var y = Math.abs(lt1.y - lt2.y);
+    var d = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) * map.getScale() * 0.025399998 / 96;
+    return Math.round(d * 100) / 100;
+}
+//arcgis default server  国家天地图矢量图
+//1个像素是多少米： 1像素=0.0254/96
+//第三方天地图 0.025399998   arcgis本身0.0254000508001016
+//resolution = (0.025399998 *scale)/(96*111000)
+//比例尺 resolution*111000  或 0.025399998/96*scale
+var defaultWmtsMapLayers = exports.defaultWmtsMapLayers = {
+    services: [{
+        type: 'wmts',
+        url: ['http://t1.tianditu.com/vec_c/wmts', 'http://t2.tianditu.com/cva_c/wmts'],
+        tilematrixset: 'c',
+        format: 'tiles',
+        layer: ['vec', 'cva']
+    }, {
+        type: 'wmts',
+        url: ['http://srv2.zjditu.cn/ZJEMAP_2D/wmts', 'http://srv2.zjditu.cn/ZJEMAPANNO_2D/wmts'],
+        tilematrixset: 'default028mm',
+        format: 'image/jpgpng',
+        layer: ['TDT_ZJEMAPANNO', 'TDT_ZJEMAPANNO']
+    }],
+    origin: { x: -180, y: 90 },
+    wkid: 4326,
+    fullExtent: { xmin: -180.0, ymin: -90.0, xmax: 180.0, ymax: 90.0 },
+    // initialExtent: {xmin : 119.96,ymin : 30.2,xmax : 120.3,ymax : 30.54},
+    initialExtent: {
+        xmin: 120.741407641, ymin: 30.7612148640001,
+        xmax: 121.033872803, ymax: 31.0324190470001
+    },
+    defaultType: "2D", //暂时没用到,抄上就行
+    switchTypeArrays: ["2D", "Satellite"], //暂时没用到,抄上就行
+    lods: [{
+        "level": 0,
+        "resolution": 1.40625,
+        "scale": 591658721.28
+    }, {
+        "level": 1,
+        "resolution": 0.703125,
+        "scale": 295829360.64
+    }, {
+        "level": 2,
+        "resolution": 0.3515625,
+        "scale": 147914680.32
+    }, {
+        "level": 3,
+        "resolution": 0.17578125,
+        "scale": 73957340.16
+    }, {
+        "level": 4,
+        "resolution": 0.087890625,
+        "scale": 36978670.08
+    }, {
+        "level": 5,
+        "resolution": 0.0439453125,
+        "scale": 18489335.04
+    }, {
+        "level": 6,
+        "resolution": 0.02197265625,
+        "scale": 9244667.52
+    }, {
+        "level": 7,
+        "resolution": 0.010986328125,
+        "scale": 4622333.76
+    }, {
+        "level": 8,
+        "resolution": 0.0054931640625,
+        "scale": 2311166.88
+    }, {
+        "level": 9,
+        "resolution": 0.00274658203125,
+        "scale": 1155583.44
+    }, {
+        "level": 10,
+        "resolution": 0.001373291015625,
+        "scale": 577791.72
+    }, {
+        "level": 11,
+        "resolution": 0.0006866455078125,
+        "scale": 288895.86
+    }, {
+        "level": 12,
+        "resolution": 0.00034332275390625,
+        "scale": 144447.93
+    }, {
+        "level": 13,
+        "resolution": 0.000171661376953125,
+        "scale": 72223.96
+    }, {
+        "level": 14,
+        "resolution": 0.0000858306884765625,
+        "scale": 36111.98
+    }, {
+        "level": 15,
+        "resolution": 0.00004291534423828125,
+        "scale": 18035.742100270663377549137718
+    }, {
+        "level": 16,
+        "resolution": 0.000021457672119140625,
+        "scale": 9017.871050135331688774568859
+    }, {
+        "level": 17,
+        "resolution": 0.0000107288360595703125,
+        "scale": 4508.9355250676658443872844296
+    }, {
+        "level": 18,
+        "resolution": 0.000005364418029785156,
+        "scale": 2254.46776253383
+    }, {
+        "level": 19,
+        "resolution": 0.000002682209014892578,
+        "scale": 1127.23388126692
+    }, {
+        "level": 20,
+        "resolution": 0.000001341104507446289,
+        "scale": 563.616940633458
+    }]
+};

package/lib/VtxMap/OMap/Map.css

@@ -0,0 +1,76 @@
+.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;
+}
+.vtx_gmap_html_pointCollection_a 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;
+}