@vtx/map 1.1.0 → 1.1.4

package/lib/VtxMap/OlMap/Map.js

@@ -0,0 +1,3255 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+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);
+
+require('./Map.css');
+
+var _default = require('../../default');
+
+var _default2 = _interopRequireDefault(_default);
+
+var _MapToolFunction = require('../MapToolFunction');
+
+var _immutable = require('immutable');
+
+var _immutable2 = _interopRequireDefault(_immutable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 _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 Set = _immutable2.default.Set;
+
+var OlMap = function (_React$Component) {
+    _inherits(OlMap, _React$Component);
+
+    function OlMap(props) {
+        _classCallCheck(this, OlMap);
+
+        var _this = _possibleConstructorReturn(this, (OlMap.__proto__ || Object.getPrototypeOf(OlMap)).call(this, props));
+
+        _this.zIndexGraphics = []; //需要放在最后的图元,zoom和pan时刷新dom到最后
+        _this.htmlPointsId = 'vtx_gmap_html_points'; //html点位容器id class管理
+        _this.pointCollectionId = 'vtx_gmap_html_pointCollection'; //海量点canvas点位容器id class管理
+        _this.Label = {}; //所有label 集合
+        _this.labelLayer = { x: 0, y: 0 }; //label图层 位置管理
+        _this.viewer = null;
+        _this.GM = new _MapToolFunction.graphicManage(); //初始化 图元管理方法
+        _this.getPolygonArea = _MapToolFunction.getPolygonArea;
+        _this.layer = null; //保存地图图层数据
+        _this.loadTimer = null; //初始化地图 load时延缓数据处理
+        _this.animTimer = {}; //点位跳动动画 定时集合
+        _this.animCount = {}; //点位跳动动画 定时计数
+        _this.moveToTimer = null; //moveTo时间对象
+        _this.drawToolbar = null; //地图绘制对象即interaction
+        _this.drawParam = {}; //缓存 绘制的数据
+        _this.editToolbar = null; //编辑对象
+        _this.editId = ''; //当前编辑的图元id
+        _this.drawSource = null;
+        _this.drawVector = null;
+        // 图元绘制保存
+        _this.drawInfo = {
+            sketch: null,
+            listener: null
+        };
+        _this.mouseNowPosition = { x: 0, y: 0, px: 0, py: 0, isCount: false };
+        _this.heatmap = null; //热力图对象
+        _this.clusterMarkers = []; //聚合点位id数组
+        _this.clusterPs = []; //聚合集合点
+        _this.clusterPt = []; //地图中聚合点集合
+        _this.morepoints = []; //海量点集合
+        _this.areaRestriction = null; //区域限制数据
+        _this.movePoints = [];
+        //是否绘制测距
+        _this.rangingTool = {
+            isRanging: false, //是否开启状态
+            line: {}, //线
+            points: [], //点
+            distance: 0, //测距长度
+            mapRangingTool: null //测距回调
+        };
+        _this.rangingTools = {}; //测距点线缓存
+        _this.rangingInfo = {
+            sketch: null,
+            helpTooltipElement: null,
+            helpTooltip: null,
+            deleteContent: null,
+            measureTooltipElement: null,
+            measureTooltip: null,
+            deleteToolTip: null,
+            continuePolygonMsg: '点击继续绘制图形',
+            continueLineMsg: '点击继续绘制线',
+            listener: null
+        };
+        _this.state = {
+            gis: null, //地图对象
+            mapId: props.mapId,
+            mapCreated: false,
+            pointIds: [], //地图上点的ids
+            lineIds: [], //地图上线的ids
+            polygonIds: [], //地图上面的ids
+            circleIds: [], //地图上圆的ids
+            editGraphic: '', //当前编辑完后图元所有数据
+            boundaryInfo: [], //当前画出的边界线的id和区域名
+            drawIds: {
+                //绘制工具id集合
+                point: [],
+                polyline: [],
+                polygon: [],
+                circle: [],
+                rectangle: []
+            }
+        };
+        _this.loadMapJs();
+        return _this;
+    }
+    // 引入ol样式
+
+
+    _createClass(OlMap, [{
+        key: 'loadMapJs',
+        value: function loadMapJs() {
+            this.loadMapComplete = new Promise(function (resolve, reject) {
+                if (window.OlMap) {
+                    resolve(window.OlMap);
+                } else {
+                    $.getScript(_default2.default.openlayerServerURL + '/ol.js', function () {
+                        var PointCollection = new Promise(function (resolve, reject) {
+                            $.getScript(_default2.default.mapServerURL + '/GPointCollection.js', function () {
+                                resolve();
+                            });
+                        });
+                        Promise.all([PointCollection]).then(function () {
+                            resolve(window.OlMap);
+                        });
+                    });
+                    $.getScript(_default2.default.openlayerServerURL + '/bd09.js');
+                    $.getScript(_default2.default.openlayerServerURL + '/olScreen.js');
+                    $('<link>').attr({
+                        rel: 'stylesheet',
+                        type: 'text/css',
+                        href: _default2.default.openlayerServerURL + '/ol.css'
+                    }).appendTo('head');
+                }
+            });
+        }
+        // 初始化地圖
+
+    }, {
+        key: 'init',
+        value: function init() {
+            var t = this;
+            // 创建地图
+            t.createMap();
+            t.drawSource = new ol.source.Vector({ wrapX: false });
+            t.drawVector = new ol.layer.Vector({ source: t.drawSource });
+            var initData = function initData() {
+                var _t$props = t.props,
+                    mapPoints = _t$props.mapPoints,
+                    mapLines = _t$props.mapLines,
+                    mapPolygons = _t$props.mapPolygons,
+                    mapCircles = _t$props.mapCircles,
+                    mapVisiblePoints = _t$props.mapVisiblePoints,
+                    mapCluster = _t$props.mapCluster,
+                    mapPointCollection = _t$props.mapPointCollection,
+                    areaRestriction = _t$props.areaRestriction,
+                    heatMapData = _t$props.heatMapData;
+                // 初始化中心点
+
+                t.setCenter();
+                // 添加点
+                if (mapPoints instanceof Array) {
+                    t.addPoint(mapPoints);
+                }
+                //添加线
+                if (mapLines instanceof Array) {
+                    t.addLine(mapLines);
+                }
+                //添加面
+                if (mapPolygons instanceof Array) {
+                    t.addPolygon(mapPolygons);
+                }
+                //添加圆
+                if (mapCircles instanceof Array) {
+                    t.addCircle(mapCircles);
+                }
+                //是否设置比例尺
+                if (t.props.showControl) {
+                    t.showControl();
+                }
+                // 画热力图
+                if (heatMapData) {
+                    t.heatMapOverlay(heatMapData);
+                }
+                //设置点聚合
+                if (mapCluster instanceof Array) {
+                    t.cluster(mapCluster);
+                }
+                /*设置指定图元展示*/
+                if (mapVisiblePoints) {
+                    t.setVisiblePoints(mapVisiblePoints);
+                }
+                //添加海量点
+                if (mapPointCollection instanceof Array) {
+                    t.addPointCollection(mapPointCollection);
+                }
+                //设置区域限制
+                if (areaRestriction && !!areaRestriction[0] && !!areaRestriction[1]) {
+                    t.setAreaRestriction(areaRestriction);
+                }
+                t.setState({
+                    mapCreated: true
+                });
+            };
+            var event = function event(e, status) {
+                var gis = t.state.gis;
+
+                var overall_feature = null; //鼠标移入事件时记录当前的feature，为鼠标移出要素时保存操作的要素对象
+                var dragAddMoveFlag = false; //记录地图拖拽和移动事件
+                // 地图开始加载时
+                gis.on('loadstart', function () {
+                    gis.getTargetElement().classList.add('spinner');
+                });
+                // 地图加载结束时
+                gis.on('loadend', function () {
+                    gis.getTargetElement().classList.remove('spinner');
+                });
+                // 地图双击事件
+                gis.on('dbclick', function (evt) {});
+                // 地图点击事件
+                gis.on('singleclick', function (evt) {
+                    var feature = gis.forEachFeatureAtPixel(evt.pixel, function (feature) {
+                        return feature;
+                    });
+                    if (feature) {
+                        var target = feature.getProperties();
+                        //  top: e.clientY,//当前点所在的位置(屏幕)
+                        // left: e.clientX,
+                        t.clickGraphic(target.id, evt);
+                    } else {
+                        t.clickMap(evt);
+                    }
+                });
+                // 鼠标移动事件 - 当鼠标指向要素时改变光标状态
+                gis.on('pointermove', function (evt) {
+                    var pixel = gis.getEventPixel(evt.originalEvent);
+                    var hit = gis.hasFeatureAtPixel(pixel);
+                    gis.getTargetElement().style.cursor = hit ? 'pointer' : 'default';
+                    // 获取到当前鼠标移动下的feature
+                    var feature = gis.forEachFeatureAtPixel(pixel, function (feature, layer) {
+                        return feature;
+                    });
+                    if (feature) {
+                        overall_feature = feature;
+                        var values = feature.getProperties();
+                        t.mouseOverGraphic(values.id, evt);
+                    } else {
+                        if (overall_feature) {
+                            overall_feature.dispatchEvent({ type: 'mousein', event: evt });
+                            var _values = overall_feature.getProperties();
+                            t.mouseOutGraphic(_values.id, evt);
+                            overall_feature = null;
+                        }
+                    }
+                });
+                // 鼠标拖拽事件 - 拖拽开始即是地图移动开始
+                gis.on('pointerdrag', function (evt) {
+                    dragAddMoveFlag = true;
+                    t.dragMapStart(evt);
+                    t.moveStart(evt);
+                });
+                var zoom = 0;
+                // 地图移动事件 - 移动结束即是拖拽事件结束 也是地图缩放事件（无开始和结束事件）的监听
+                gis.on('moveend', function (evt) {
+                    t.dragMapEnd(evt);
+                    t.moveEnd(evt);
+                    t.zoomStart(evt);
+                    setTimeout(function () {
+                        t.zoomEnd(evt);
+                    }, 300);
+                    dragAddMoveFlag = false;
+                });
+                // gis.getViewport().addEventListener('mouseout', function () {
+                //     helpTooltipElement.classList.add('hidden');
+                // });
+            };
+            event();
+            t.setCenter(t.props.center);
+            initData();
+        }
+        // 创建地图
+
+    }, {
+        key: 'createMap',
+        value: function createMap() {
+            var t = this;
+            var _t$props2 = t.props,
+                _t$props2$olProps = _t$props2.olProps,
+                olProps = _t$props2$olProps === undefined ? {} : _t$props2$olProps,
+                _t$props2$mapCenter = _t$props2.mapCenter,
+                mapCenter = _t$props2$mapCenter === undefined ? [] : _t$props2$mapCenter,
+                mapId = _t$props2.mapId,
+                mapZoomLevel = _t$props2.mapZoomLevel,
+                minZoom = _t$props2.minZoom,
+                maxZoom = _t$props2.maxZoom;
+            var _olProps$projection = olProps.projection,
+                projection = _olProps$projection === undefined ? 'EPSG:4326' : _olProps$projection,
+                olCoverage = olProps.olCoverage;
+
+            if (window.OlMap) {
+                window.OlMap[mapId] = null;
+            } else {
+                window.OlMap = {};
+            }
+            window.OlMap[mapId] = t.state.gis = new ol.Map({
+                target: mapId.toString(),
+                view: new ol.View({
+                    center: mapCenter && mapCenter instanceof Array && mapCenter.length == 2 ? mapCenter : [116.400433, 39.906705], //中心点
+                    zoom: mapZoomLevel || 10,
+                    projection: projection,
+                    minZoom: minZoom,
+                    maxZoom: maxZoom
+                }),
+                controls: ol.control.defaults({
+                    zoom: false,
+                    rotate: false,
+                    attribution: false
+                })
+            });
+            // 基本地图视图
+            t.viewer = new ol.View({
+                center: mapCenter && mapCenter instanceof Array && mapCenter.length == 2 ? mapCenter : [116.400433, 39.906705], //中心点
+                zoom: mapZoomLevel || 10,
+                projection: projection,
+                minZoom: minZoom,
+                maxZoom: maxZoom
+            });
+            if ((olCoverage || []).length > 0) {
+                (olCoverage || []).map(function (item) {
+                    if (OL_SCREEN[item.coverage]) {
+                        var _layer = eval(OL_SCREEN[item.coverage].initLayer);
+                        t.state.gis.addLayer(_layer);
+                    }
+                });
+            } else {
+                var _layer2 = eval(OL_SCREEN.default.initLayer);
+                t.state.gis.addLayer(_layer2);
+            }
+        }
+        // 设置中心点
+
+    }, {
+        key: 'setCenter',
+        value: function setCenter(gt) {
+            var t = this;
+            if (gt) {
+                //经纬度 必须存在 否则不操作
+                if (!gt[0] || !gt[1]) {
+                    return false;
+                }
+                //如果设置的经纬度 与当前中心点一样 不操作
+                var c = t.getCenter();
+                if (c.lng == gt[0] && c.lat == gt[1]) {
+                    return false;
+                }
+                t.state.gis.getView().setCenter(gt);
+                t.viewer.animate({
+                    center: gt,
+                    duration: 2000
+                });
+            }
+        }
+        //获取当前中心点
+
+    }, {
+        key: 'getCenter',
+        value: function getCenter() {
+            var t = this;
+            var gis = t.state.gis;
+
+            var _gis$getView$calculat = gis.getView().calculateExtent(gis.getSize()),
+                _gis$getView$calculat2 = _slicedToArray(_gis$getView$calculat, 4),
+                xmin = _gis$getView$calculat2[0],
+                ymin = _gis$getView$calculat2[1],
+                xmax = _gis$getView$calculat2[2],
+                ymax = _gis$getView$calculat2[3];
+
+            return { lng: (xmin + xmax) / 2, lat: (ymin + ymax) / 2 };
+        }
+        //编辑图元
+
+    }, {
+        key: 'doEdit',
+        value: function doEdit(id) {
+            var t = this;
+            //获取图元对象
+            var gc = t.GM.getGraphic(id);
+            var gp = t.GM.getGraphicParam(id);
+            if (!gc) return false;
+            //关闭先前编辑的图元
+            if (!!t.state.editId) {
+                t.endEdit();
+            }
+            if (!t.editToolbar) {
+                t.editToolbar = new ol.interaction.Modify({
+                    source: gp.source
+                });
+                t.state.gis.addInteraction(t.editToolbar);
+                t.editToolbar.on('modifyend', function (e) {
+                    var feature = gc;
+                    e.features.forEach(function (feature) {
+                        feature = feature;
+                    });
+                    //返回参数
+                    var param = {
+                        id: id,
+                        e: e
+                    };
+                    // 绘制内部管理的图元
+                    if (gp.geometry.type == 'point') {
+                        var cur = feature.getProperties().geometry;
+
+                        var _cur$flatCoordinates = _slicedToArray(cur.flatCoordinates, 2),
+                            lng = _cur$flatCoordinates[0],
+                            lat = _cur$flatCoordinates[1];
+                        //处理点返回参数
+
+
+                        param = _extends({}, param, {
+                            attributes: _extends({}, gp.attributes, {
+                                longitude: lng,
+                                latitude: lat,
+                                other: _extends({}, gp.attributes, {
+                                    longitude: lng,
+                                    latitude: lat
+                                })
+                            }),
+                            param: {
+                                attributes: _extends({}, gp.attributes, {
+                                    longitude: lng,
+                                    latitude: lat,
+                                    other: _extends({}, gp.attributes, {
+                                        longitude: lng,
+                                        latitude: lat
+                                    })
+                                }),
+                                geometryType: gp.geometry.type,
+                                mapLayer: t.GM.getGraphic(id)
+                            },
+                            geometryType: gp.geometry.type,
+                            geometry: {
+                                type: 'point',
+                                x: lng,
+                                y: lat
+                            }
+                        });
+                    }
+                    //线
+                    if (gp.geometry.type == 'polyline') {
+                        var _cur = feature.getProperties().geometry;
+                        var oddList = [],
+                            evenList = [];
+                        _cur.flatCoordinates.map(function (item, index) {
+                            // 判断下标奇偶数
+                            if (index % 2 === 0) {
+                                evenList.push(item);
+                            } else {
+                                oddList.push(item);
+                            }
+                        });
+                        var path = oddList.map(function (item, index) {
+                            return [evenList[index], oddList[index]];
+                        });
+                        //处理线返回参数
+
+                        var _t$dealData = t.dealData(path),
+                            lnglatAry = _t$dealData.lnglatAry,
+                            _extent = _t$dealData._extent;
+
+                        param = _extends({}, param, {
+                            attributes: _extends({}, gp.attributes, {
+                                paths: path,
+                                other: _extends({}, gp.attributes, {
+                                    paths: path
+                                })
+                            }),
+                            param: {
+                                attributes: _extends({}, gp.attributes, {
+                                    paths: path,
+                                    other: _extends({}, gp.attributes, {
+                                        paths: path
+                                    })
+                                }),
+                                geometry: {
+                                    paths: path,
+                                    _extent: _extent,
+                                    type: "polyline"
+                                },
+                                geometryType: 'polyline',
+                                lnglatAry: lnglatAry,
+                                mapLayer: t.GM.getGraphic(id)
+                            },
+                            geometryType: gp.geometry.type,
+                            geometry: {
+                                paths: path,
+                                _extent: _extent,
+                                type: "polyline"
+                            },
+                            distance: t.calculateDistance(path)
+                        });
+                    }
+                    //面
+                    if (gp.geometry.type == 'polygon') {
+                        var _cur2 = feature.getProperties().geometry;
+                        var _oddList = [],
+                            _evenList = [];
+                        _cur2.flatCoordinates.map(function (item, index) {
+                            // 判断下标奇偶数
+                            if (index % 2 === 0) {
+                                _evenList.push(item);
+                            } else {
+                                _oddList.push(item);
+                            }
+                        });
+                        var _path = _oddList.map(function (item, index) {
+                            return [_evenList[index], _oddList[index]];
+                        });
+                        //处理线返回参数
+
+                        var _t$dealData2 = t.dealData(_path),
+                            _lnglatAry = _t$dealData2.lnglatAry,
+                            _extent2 = _t$dealData2._extent;
+
+                        param = _extends({}, param, {
+                            attributes: _extends({}, gp.attributes, {
+                                rings: _path,
+                                other: _extends({}, gp.attributes, {
+                                    paths: _path
+                                })
+                            }),
+                            param: {
+                                attributes: _extends({}, gp.attributes, {
+                                    rings: _path,
+                                    other: _extends({}, gp.attributes, {
+                                        paths: _path
+                                    })
+                                }),
+                                geometry: {
+                                    rings: _path,
+                                    type: 'polygon',
+                                    _extent: _extent2
+                                },
+                                geometryType: 'polygon',
+                                lnglatAry: _lnglatAry,
+                                mapLayer: t.GM.getGraphic(id)
+                            },
+                            geometryType: gp.geometry.type,
+                            geometry: {
+                                rings: _path,
+                                type: 'polygon',
+                                _extent: _extent2
+                            },
+                            area: (0, _MapToolFunction.getPolygonArea)(_path)
+                        });
+                    }
+                    if (gp.geometry.type == 'circle') {
+                        var _cur3 = feature.getProperties().geometry;
+                        var center = _cur3.getCenter();
+                        var sketchCoords_ = [_cur3.flatCoordinates[0], _cur3.flatCoordinates[1]];
+                        var sketchCoords_2 = [_cur3.flatCoordinates[2], _cur3.flatCoordinates[3]];
+                        var radius = ol.sphere.getDistance(sketchCoords_, sketchCoords_2);
+                        param = _extends({}, param, {
+                            attributes: _extends({}, gp.attributes, {
+                                longitude: center[0],
+                                latitude: center[1],
+                                radius: radius,
+                                other: _extends({}, gp.attributes, {
+                                    longitude: center[0],
+                                    latitude: center[1],
+                                    radius: radius
+                                })
+                            }),
+                            param: {
+                                attributes: _extends({}, gp.attributes, {
+                                    longitude: center[0],
+                                    latitude: center[1],
+                                    radius: radius,
+                                    other: _extends({}, gp.attributes, {
+                                        longitude: center[0],
+                                        latitude: center[1],
+                                        radius: radius
+                                    })
+                                }),
+                                geometry: {
+                                    x: center[0],
+                                    y: center[1],
+                                    radius: radius,
+                                    type: 'circle'
+                                },
+                                geometryType: 'circle',
+                                mapLayer: t.GM.getGraphic(id)
+                            },
+                            geometryType: gp.geometry.type,
+                            area: Math.PI * Math.pow(radius, 2),
+                            geometry: {
+                                type: 'circle',
+                                x: center[0],
+                                y: center[1],
+                                radius: radius
+                            }
+                        });
+                    }
+                    if ('editGraphicChange' in t.props && typeof t.props.editGraphicChange == 'function') {
+                        t.props.editGraphicChange(param);
+                    }
+                    t.GM.setGraphic(id, feature).setGraphicParam(id, _extends({}, param));
+                });
+            }
+            t.editId = id;
+        }
+        //关闭编辑
+
+    }, {
+        key: 'endEdit',
+        value: function endEdit() {
+            var t = this;
+            if (t.editToolbar) {
+                t.state.gis.removeInteraction(t.editToolbar);
+                t.editToolbar = null;
+            }
+            t.editId = '';
+        }
+        // 绘制图元
+
+    }, {
+        key: 'draw',
+        value: function draw(obj) {
+            var t = this;
+            var drawInfo = t.drawInfo;
+            var gis = t.state.gis;
+
+            var drawParam = {},
+                image = void 0,
+                stroke = void 0,
+                fill = void 0;
+            //初始化参数
+            drawParam.geometryType = obj.geometryType || 'point';
+            drawParam.parameter = obj.parameter ? _extends({}, obj.parameter) : {};
+            drawParam.data = obj.data ? _extends({}, obj.data) : {};
+            drawParam.data.id = (obj.data || {}).id || 'draw' + new Date().getTime();
+            //缓存 绘制的数据
+            t.drawParam = drawParam;
+            //判断id是否存在
+            var len = t.state.drawIds[drawParam.geometryType].indexOf(drawParam.data.id);
+            if (len > -1) {
+                //如果id存在 删除存在的图元,清除drawId中的id数据
+                t.removeGraphic(drawParam.data.id);
+                t.state.drawIds[drawParam.geometryType].splice(len, 1);
+            }
+            var type = 'Point',
+                style = new ol.style.Style({
+                image: new ol.style.Icon({
+                    anchor: [-drawParam.parameter.markerContentX || -15, -drawParam.parameter.markerContentY || -15],
+                    anchorXUnits: 'pixels',
+                    anchorYUnits: 'pixels',
+                    src: drawParam.parameter.url || _default2.default.mapServerURL + '/images/defaultMarker.png',
+                    opacity: 1,
+                    scale: drawParam.parameter.scale || 1
+                })
+            });
+            switch (drawParam.geometryType) {
+                case 'point':
+                    type = 'Point';
+                    style = new ol.style.Style({
+                        image: new ol.style.Icon({
+                            anchor: [-drawParam.parameter.markerContentX || -15, -drawParam.parameter.markerContentY || -15],
+                            anchorXUnits: 'pixels',
+                            anchorYUnits: 'pixels',
+                            src: drawParam.parameter.url || _default2.default.mapServerURL + '/images/defaultMarker.png',
+                            opacity: 1,
+                            scale: drawParam.parameter.scale || 1
+                        })
+                    });
+                    break;
+                case 'polyline':
+                    type = 'LineString';
+                    style = new ol.style.Style({
+                        stoke: new ol.style.Stroke({
+                            color: drawParam.parameter.color || '#277ffa',
+                            width: drawParam.parameter.lineWidth || 3,
+                            lineDash: drawParam.parameter.lineType == 'dashed' ? [2] : undefined
+                        })
+                    });
+                    break;
+                case 'polygon':
+                    type = 'Polygon';
+                    style = new ol.style.Style({
+                        stoke: new ol.style.Stroke({
+                            color: drawParam.parameter.color || '#277ffa',
+                            width: drawParam.parameter.lineWidth || 3,
+                            lineDash: drawParam.parameter.lineType == 'dashed' ? [2] : undefined
+                        }),
+                        fill: new ol.style.Fill({
+                            color: drawParam.parameter.pellucidity ? getRgbColor(drawParam.parameter.color || '#277ffa', drawParam.parameter.pellucidity) : drawParam.parameter.color || '#277ffa'
+                        })
+                    });
+                    break;
+                case 'circle':
+                    type = 'Circle';
+                    style = new ol.style.Style({
+                        stoke: new ol.style.Stroke({
+                            color: drawParam.parameter.color || '#277ffa',
+                            width: drawParam.parameter.lineWidth || 3,
+                            lineDash: drawParam.parameter.lineType == 'dashed' ? [2] : undefined
+                        }),
+                        fill: new ol.style.Fill({
+                            color: drawParam.parameter.pellucidity ? getRgbColor(drawParam.parameter.color || '#277ffa', drawParam.parameter.pellucidity) : drawParam.parameter.color || '#277ffa'
+                        })
+                    });
+                    break;
+            }
+            if (!t.drawToolbar) {
+                t.drawToolbar = new ol.interaction.Draw({
+                    source: t.drawSource,
+                    type: type
+                    // style: style
+                });
+                gis.addInteraction(t.drawToolbar);
+                t.drawToolbar.on('drawend', function (e) {
+                    // 关闭绘制事件
+                    t.drawToolbar.finishDrawing();
+                    // 移除
+                    gis.removeInteraction(t.drawToolbar);
+                    var gc = e.feature.getGeometry();
+                    //返回参数
+                    var param = {};
+                    // 绘制内部管理的图元
+                    if (t.drawParam.geometryType == 'point') {
+                        var _gc$flatCoordinates = _slicedToArray(gc.flatCoordinates, 2),
+                            lng = _gc$flatCoordinates[0],
+                            lat = _gc$flatCoordinates[1];
+
+                        t.addPoint([{
+                            id: t.drawParam.data.id,
+                            longitude: lng,
+                            latitude: lat,
+                            url: t.drawParam.parameter.url || _default2.default.mapServerURL + '/images/defaultMarker.png',
+                            config: _extends({}, t.drawParam.parameter)
+                        }], 'point');
+                        //处理点返回参数
+                        param = {
+                            id: t.drawParam.data.id,
+                            attributes: {
+                                id: t.drawParam.data.id,
+                                url: t.drawParam.parameter.url || _default2.default.mapServerURL + '/images/defaultMarker.png',
+                                config: {
+                                    width: t.drawParam.parameter.width || 30,
+                                    height: t.drawParam.parameter.height || 30
+                                }
+                            },
+                            geometry: gc,
+                            geometryType: 'point',
+                            mapLayer: t.GM.getGraphic(t.drawParam.data.id)
+                        };
+                    }
+                    //线
+                    if (t.drawParam.geometryType == 'polyline') {
+                        var oddList = [],
+                            evenList = [];
+                        gc.flatCoordinates.map(function (item, index) {
+                            // 判断下标奇偶数
+                            if (index % 2 === 0) {
+                                evenList.push(item);
+                            } else {
+                                oddList.push(item);
+                            }
+                        });
+                        var path = oddList.map(function (item, index) {
+                            return [evenList[index], oddList[index]];
+                        });
+                        t.addLine([{
+                            id: t.drawParam.data.id,
+                            paths: path,
+                            config: _extends({}, t.drawParam.parameter)
+                        }], 'polyline');
+                        //处理线返回参数
+
+                        var _t$dealData3 = t.dealData(path),
+                            lnglatAry = _t$dealData3.lnglatAry,
+                            _extent = _t$dealData3._extent;
+
+                        param = {
+                            lnglatAry: lnglatAry,
+                            id: t.drawParam.data.id,
+                            geometry: _extends({}, e.geometry, {
+                                paths: path,
+                                _extent: _extent
+                            }),
+                            attributes: {
+                                id: t.drawParam.data.id,
+                                config: _extends({}, t.drawParam.parameter)
+                            },
+                            distance: t.calculateDistance(path),
+                            geometryType: 'polyline',
+                            mapLayer: t.GM.getGraphic(t.drawParam.data.id)
+                        };
+                    }
+                    //面
+                    if (t.drawParam.geometryType == 'polygon') {
+                        var _oddList2 = [],
+                            _evenList2 = [];
+                        gc.flatCoordinates.map(function (item, index) {
+                            // 判断下标奇偶数
+                            if (index % 2 === 0) {
+                                _evenList2.push(item);
+                            } else {
+                                _oddList2.push(item);
+                            }
+                        });
+                        var _path2 = _oddList2.map(function (item, index) {
+                            return [_evenList2[index], _oddList2[index]];
+                        });
+                        t.addPolygon([{
+                            id: t.drawParam.data.id,
+                            rings: _path2,
+                            config: _extends({}, t.drawParam.parameter)
+                        }], t.drawParam.geometryType);
+                        //处理线返回参数
+
+                        var _t$dealData4 = t.dealData(_path2),
+                            _lnglatAry2 = _t$dealData4.lnglatAry,
+                            _extent3 = _t$dealData4._extent;
+
+                        param = {
+                            lnglatAry: _lnglatAry2,
+                            id: t.drawParam.data.id,
+                            geometry: _extends({}, e.geometry, {
+                                rings: _path2,
+                                type: t.drawParam.geometryType,
+                                _extent: _extent3
+                            }),
+                            attributes: {
+                                id: t.drawParam.data.id,
+                                config: _extends({}, t.drawParam.parameter)
+                            },
+                            area: (0, _MapToolFunction.getPolygonArea)(_path2),
+                            geometryType: t.drawParam.geometryType,
+                            mapLayer: t.GM.getGraphic(t.drawParam.data.id)
+                        };
+                    }
+                    if (t.drawParam.geometryType == 'circle') {
+                        var center = e.feature.getGeometry().getCenter();
+                        // let radius = e.feature.getGeometry().getRadius();
+                        // console.log(center, radius)
+                        var sketchCoords_ = e.target.sketchCoords_[0];
+                        var sketchCoords_2 = e.target.sketchCoords_[1];
+                        var radius = ol.sphere.getDistance(sketchCoords_, sketchCoords_2);
+                        // let metersPerUnit = gis.getView().getProjection().getMetersPerUnit();
+                        // console.log(radius, metersPerUnit)
+                        // let circleRadius =  radius / metersPerUnit;
+                        // console.log(circleRadius)
+                        t.addCircle([{
+                            id: t.drawParam.data.id,
+                            longitude: center[0],
+                            latitude: center[1],
+                            radius: radius,
+                            config: _extends({}, t.drawParam.parameter)
+                        }], t.drawParam.geometryType);
+                        param = {
+                            area: Math.PI * Math.pow(radius, 2),
+                            attributes: {
+                                id: t.drawParam.data.id,
+                                config: _extends({}, t.drawParam.parameter)
+                            },
+                            geometry: {
+                                type: t.drawParam.geometryType,
+                                x: center[0],
+                                y: center[1],
+                                radius: radius
+                            },
+                            geometryType: t.drawParam.geometryType,
+                            mapLayer: t.GM.getGraphic(t.drawParam.data.id)
+                        };
+                    }
+                    if ('drawEnd' in t.props && typeof t.props.drawEnd == 'function') {
+                        t.props.drawEnd(param);
+                    }
+                });
+            }
+        }
+        // 关闭绘制
+
+    }, {
+        key: 'closeDraw',
+        value: function closeDraw() {
+            var t = this;
+            var gis = t.state.gis;
+
+            if (t.drawToolbar) {
+                // 关闭绘制事件
+                t.drawToolbar.finishDrawing();
+                // 移除
+                gis.removeInteraction(t.drawToolbar);
+                t.drawToolbar = null;
+                t.drawInfo = {
+                    sketch: null,
+                    listener: null
+                };
+            }
+        }
+        // 绘图时创建绘图结果提示
+
+    }, {
+        key: 'createMeasureTooltip',
+        value: function createMeasureTooltip() {
+            var t = this;
+            var gis = t.state.gis;
+            var drawInfo = t.drawInfo;
+
+            if (drawInfo.measureTooltipElement) {
+                drawInfo.measureTooltipElement.parentNode.removeChild(measureTooltipElement);
+            }
+            drawInfo.measureTooltipElement = document.createElement('div');
+            drawInfo.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
+            drawInfo.measureTooltip = new ol.Overlay({
+                element: drawInfo.measureTooltipElement,
+                offset: [0, -15],
+                positioning: 'bottom-center',
+                stopEvent: false,
+                insertFirst: false
+            });
+            gis.addOverlay(drawInfo.measureTooltip);
+        }
+        // 绘图时创建提示
+
+    }, {
+        key: 'createHelpTooltip',
+        value: function createHelpTooltip() {
+            var t = this;
+            var gis = t.state.gis;
+            var drawInfo = t.drawInfo;
+
+            if (drawInfo.helpTooltipElement) {
+                drawInfo.helpTooltipElement.parentNode.removeChild(helpTooltipElement);
+            }
+            drawInfo.helpTooltipElement = document.createElement('div');
+            drawInfo.helpTooltipElement.className = 'ol-tooltip hidden';
+            drawInfo.helpTooltip = new ol.Overlay({
+                element: drawInfo.helpTooltipElement,
+                offset: [15, 0],
+                positioning: 'center-left'
+            });
+            gis.addOverlay(drawInfo.helpTooltip);
+        }
+        /*工具方法*/
+
+    }, {
+        key: 'vtxRangingTool',
+        value: function vtxRangingTool(mapRangingTool) {
+            var t = this;
+            //关闭测距时双击地图缩放功能
+            t.state.gis.disableDoubleClickZoom();
+            //开启测距状态
+            if (!t.rangingTool.isRanging) {
+                t.rangingTool.isRanging = true;
+            }
+            //初始测距回调
+            if (!t.rangingTool.mapRangingTool) {
+                t.rangingTool.mapRangingTool = mapRangingTool;
+            }
+        }
+        // 获取地图的当前位置状态信息
+
+    }, {
+        key: 'getMapExtent',
+        value: function getMapExtent() {
+            var t = this;
+            var gis = t.state.gis;
+
+            var obj = {};
+            if (gis) {
+                var nowBounds = gis.getView().calculateExtent(gis.getSize());
+                obj.southWest = {
+                    lng: nowBounds[0],
+                    lat: nowBounds[1]
+                };
+                obj.northEast = {
+                    lng: nowBounds[2],
+                    lat: nowBounds[3]
+                };
+                obj.nowCenter = t.getCenter();
+                obj.zoom = t.getZoomLevel();
+
+                var _gis$getSize = gis.getSize(),
+                    _gis$getSize2 = _slicedToArray(_gis$getSize, 2),
+                    width = _gis$getSize2[0],
+                    height = _gis$getSize2[1];
+
+                obj.mapSize = { width: width, height: height };
+                obj.radius = ol.sphere.getDistance([obj.nowCenter.lng, obj.nowCenter.lat], [obj.northEast.lng, obj.northEast.lat]);
+                return obj;
+            }
+        }
+        //将制定图元展示在视野内 (强制改变地图中心位置)
+        /*
+            参数arg格式如下1,2
+            1.string   格式如:'1,a,2,3,4'
+            2.数组 ['1','2']
+        */
+
+    }, {
+        key: 'setVisiblePoints',
+        value: function setVisiblePoints(mapVisiblePoints) {
+            var t = this;
+            var gis = t.state.gis;
+
+            var arg = null;
+            var type = mapVisiblePoints.type;
+            var ary = []; //图元id集合
+            var obj = []; //经纬度集合
+            switch (mapVisiblePoints.fitView) {
+                case 'point':
+                    arg = this.state.pointIds;
+                    break;
+                case 'line':
+                    arg = this.state.lineIds;
+                    break;
+                case 'polygon':
+                    arg = this.state.polygonIds;
+                    break;
+                case 'circle':
+                    arg = this.state.circleIds;
+                    break;
+                case 'all':
+                    arg = this.state.pointIds.concat(this.state.lineIds).concat(this.state.polygonIds).concat(this.state.circleIds);
+                    break;
+                default:
+                    arg = mapVisiblePoints.fitView;
+                    break;
+            }
+            if (typeof arg === 'string') {
+                ary = arg.split(',');
+                obj = t.getFitView(ary);
+            } else if (arg instanceof Array) {
+                if (ary[0] instanceof Array) {
+                    obj = gis.getFitView(ary[0]);
+                } else {
+                    obj = t.getFitView(arg);
+                }
+            }
+            if (!obj) {
+                return false;
+            }
+            // let zoom = t.state.gis.getView().getZoom();
+            if (type) {
+                gis.getView().fit(obj, gis.getSize());
+            }
+            // if(!type || type == 'all'){
+
+            // }else if(type == 'zoom'){
+            //     gis.getView().setZoom(zoom)
+            // }else if(type == 'center'){
+            //     gis.getView().setCenter(obj.lngLat);
+            // }
+        }
+    }, {
+        key: 'getFitView',
+        value: function getFitView(ids) {
+            var t = this;
+            if (ids.length > 0) {
+                var maxX = null,
+                    maxY = null,
+                    minX = null,
+                    minY = null;
+                for (var i = 0; i < ids.length; i++) {
+                    var coord = t.GM.getGraphic(ids[i]);
+                    var boundsArry = coord.getGeometry().getExtent();
+                    if (minX === null) {
+                        minX = boundsArry[0];
+                        minY = boundsArry[1];
+                        maxX = boundsArry[2];
+                        maxY = boundsArry[3];
+                    } else {
+                        minX = Math.min(boundsArry[0], minX);
+                        minY = Math.min(boundsArry[1], minY);
+                        maxX = Math.max(boundsArry[2], maxX);
+                        maxY = Math.max(boundsArry[3], maxY);
+                    }
+                }
+                var bounds = [minX, minY, maxX, maxY];
+                return bounds;
+            }
+        }
+        /*功能方法*/
+        //获取当前地图的中心位置
+
+    }, {
+        key: 'getCurrentCenter',
+        value: function getCurrentCenter() {
+            var t = this;
+            var gis = t.state.gis;
+
+            var extent = gis.getView().calculateExtent(gis.getSize());
+            return [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2];
+        }
+        //获取当前比例尺
+
+    }, {
+        key: 'getZoomLevel',
+        value: function getZoomLevel() {
+            var t = this;
+            return t.state.gis.getView().getZoom();
+        }
+        //获取图元数据
+
+    }, {
+        key: 'getGraphic',
+        value: function getGraphic(id) {
+            var t = this;
+            if (!id) {
+                return false;
+            }
+            var gp = t.GM.getGraphicParam(id);
+            var gg = t.GM.getGraphic(id);
+            if (!gg) {
+                return false;
+            }
+            var p = {},
+                pts = [],
+                lng = 0,
+                lat = 0;
+            switch (gp.geometryType) {
+                case 'point':
+                    lng = gp.geometry.x;
+                    lat = gp.geometry.y;
+                    p = _extends({}, gp, {
+                        mapLayer: gg,
+                        geometry: _extends({}, gp.geometry, {
+                            x: lng,
+                            y: lat
+                        }),
+                        attributes: _extends({}, gp.attributes, {
+                            longitude: lng,
+                            latitude: lat,
+                            other: _extends({}, gp.attributes.other, {
+                                longitude: lng,
+                                latitude: lat
+                            })
+                        })
+                    });
+                    break;
+                case 'polyline':
+                    pts = gp.geometry.paths;
+                    p = _extends({}, gp, {
+                        mapLayer: gg,
+                        geometry: _extends({}, gp.geometry, {
+                            paths: pts
+                        }),
+                        attributes: _extends({}, gp.attributes, {
+                            paths: pts,
+                            other: _extends({}, gp.attributes.other, {
+                                paths: pts
+                            })
+                        })
+                    });
+                    break;
+                case 'polygon':
+                    pts = gp.geometry.rings;
+                    p = _extends({}, gp, {
+                        mapLayer: gg,
+                        geometry: _extends({}, gp.geometry, {
+                            rings: pts
+                        }),
+                        attributes: _extends({}, gp.attributes, {
+                            rings: pts,
+                            other: _extends({}, gp.attributes.other, {
+                                rings: pts
+                            })
+                        }),
+                        area: (0, _MapToolFunction.getPolygonArea)(pts)
+                    });
+                    break;
+                case 'circle':
+                    lng = gp.geometry.x;
+                    lat = gp.geometry.y;
+                    var radius = gp.geometry.radius;
+                    p = _extends({}, gp, {
+                        mapLayer: gg,
+                        geometry: _extends({}, gp.geometry, {
+                            x: lng,
+                            y: lat,
+                            radius: radius
+                        }),
+                        attributes: _extends({}, gp.attributes, {
+                            longitude: lng,
+                            latitude: lat,
+                            radius: radius,
+                            other: _extends({}, gp.attributes.other, {
+                                longitude: lng,
+                                latitude: lat,
+                                radius: radius
+                            })
+                        })
+                    });
+                    break;
+            }
+            return p;
+        }
+        // 转换dom节点
+
+    }, {
+        key: 'parseDom',
+        value: function parseDom(domStr) {
+            var domObj = document.createElement('div');
+            domObj.innerHTML = domStr;
+            return domObj.childNodes;
+        }
+        //添加海量点
+
+    }, {
+        key: 'addPointCollection',
+        value: function addPointCollection() {
+            var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+            var t = this;
+            data.map(function (item, index) {
+                var d = item || {};
+                var points = (d.points || []).map(function (d, i) {
+                    var p = t.state.gis.getPixelFromCoordinate([d.lng, d.lat]);
+                    return [p[0], p[1]];
+                });
+
+                var _t$state$gis$getSize = t.state.gis.getSize(),
+                    _t$state$gis$getSize2 = _slicedToArray(_t$state$gis$getSize, 2),
+                    width = _t$state$gis$getSize2[0],
+                    height = _t$state$gis$getSize2[1];
+
+                var options = {
+                    size: d.size,
+                    shape: d.shape,
+                    color: d.color,
+                    width: width,
+                    height: height,
+                    mapId: t.props.mapId
+                };
+                var VotexpointCollection = new GMapLib.PointCollection(points, options);
+                t.morepoints.push({
+                    id: d.id,
+                    value: VotexpointCollection
+                });
+                VotexpointCollection.draw();
+            });
+        }
+        //更新海量点
+
+    }, {
+        key: 'updatePointCollection',
+        value: function updatePointCollection() {
+            var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+            var t = this;
+            data.map(function (ds, ind) {
+                t.morepoints.map(function (item, index) {
+                    if (item.id == ds.id) {
+                        var points = (ds.points || []).map(function (d, i) {
+                            var p = t.state.gis.getPixelFromCoordinate([d.lng, d.lat]);
+                            return [p[0], p[1]];
+                        });
+
+                        var _t$state$gis$getSize3 = t.state.gis.getSize(),
+                            _t$state$gis$getSize4 = _slicedToArray(_t$state$gis$getSize3, 2),
+                            width = _t$state$gis$getSize4[0],
+                            height = _t$state$gis$getSize4[1];
+
+                        var options = {
+                            size: ds.size,
+                            shape: ds.shape,
+                            color: ds.color,
+                            width: width,
+                            height: height
+                        };
+                        item.value.reDraw(points, options);
+                    }
+                });
+            });
+        }
+        //删除海量点
+
+    }, {
+        key: 'clearPointCollection',
+        value: function clearPointCollection() {
+            var ids = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+            var t = this;
+            ids.map(function (id, ind) {
+                t.morepoints.map(function (item, index) {
+                    if (id == item.id) {
+                        item.value.clear();
+                    }
+                });
+            });
+        }
+        //删除全部海量点
+
+    }, {
+        key: 'clearAllPointCollection',
+        value: function clearAllPointCollection() {
+            var t = this;
+            t.morepoints.map(function (item, index) {
+                item.value.clear();
+            });
+        }
+        // 添加点
+
+    }, {
+        key: 'addPoint',
+        value: function addPoint(mapPoints, type) {
+            var _this2 = this;
+
+            var t = this;
+            var ps = [];
+            var psids = [].concat(_toConsumableArray(t.state.pointIds));
+            mapPoints.map(function (item, index) {
+                //如果id重复,直接跳过不执行.
+                if (_this2.GM.isRepetition(item.id)) {
+                    console.warn('\u52A0\u70B9id: ' + item.id + ' \u91CD\u590D');
+                    return false;
+                }
+                //点位数据不符合,直接跳过
+                if (!item.longitude || !item.latitude) {
+                    console.warn('\u70B9 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF');
+                    return false;
+                }
+                // 创建点位图元要素
+                var feature = new ol.Feature({
+                    geometry: new ol.geom.Point([item.longitude, item.latitude]),
+                    name: item.name,
+                    id: item.id,
+                    params: _extends({}, item)
+                });
+                var cg = {
+                    width: 30,
+                    height: 30,
+                    labelContent: '',
+                    labelPixelX: 0,
+                    labelPixelY: 34,
+                    markerContentX: -13,
+                    markerContentY: -42,
+                    zIndex: 100,
+                    deg: 0,
+                    scale: 1
+                };
+                //初始化默认数据
+                if (item.config) {
+                    cg = _extends({}, cg, item.config);
+                }
+                // 覆盖物样式参数
+                var style = void 0,
+                    icon = void 0,
+                    txt = void 0;
+                if (!!item.markerContent) {
+                    var nodes = t.parseDom(item.markerContent)[0];
+                    // 创建地图自定义覆盖物
+                    var pop = new ol.Overlay({
+                        id: item.id,
+                        position: [item.longitude, item.latitude],
+                        positioning: 'center-center',
+                        element: nodes,
+                        autoPanMargin: 20,
+                        autoPan: true,
+                        offset: [0, -20],
+                        insertFirst: true
+                    });
+                    t.state.gis.addOverlay(pop);
+                } else {
+                    // 创建地图要素图标样式
+                    style = new ol.style.Style({
+                        image: new ol.style.Icon({
+                            anchor: [-cg.markerContentX, -cg.markerContentY],
+                            anchorXUnits: 'pixels',
+                            anchorYUnits: 'pixels',
+                            src: item.url || _default2.default.mapServerURL + '/images/defaultMarker.png',
+                            // imgSize: [cg.width, cg.height],
+                            opacity: cg.opacity,
+                            scale: cg.scale || 1
+                        })
+                    });
+                }
+                if (!!item.canShowLabel && item.canShowLabel) {
+                    // 创建地图要素图标样式
+                    style = new ol.style.Style({
+                        image: new ol.style.Icon({
+                            anchor: [-cg.markerContentX, -cg.markerContentY],
+                            anchorXUnits: 'pixels',
+                            anchorYUnits: 'pixels',
+                            src: item.url || _default2.default.mapServerURL + '/images/defaultMarker.png',
+                            // imgSize: [cg.width, cg.height],
+                            opacity: cg.opacity,
+                            scale: cg.scale || 1
+                        }),
+                        // 创建地图要素文字样式
+                        text: new ol.style.Text({
+                            textAlign: 'center', //对齐方式
+                            textBaseline: 'middle', //文本基线
+                            font: 'normal 12px 微软雅黑', //字体样式
+                            text: cg.labelContent, //文本内容
+                            offsetX: cg.labelPixelX, // x轴偏置
+                            offsetY: cg.labelPixelY, // Y轴偏置
+                            fill: new ol.style.Fill({
+                                //填充样式
+                                color: 'rgba(0,0,0,0.8)'
+                            }),
+                            backgroundFill: new ol.style.Fill({
+                                // 填充背景
+                                color: 'rgba(255, 255, 255, 0.3)'
+                            }),
+                            padding: [2, 5, 2, 5]
+                        })
+                    });
+                }
+                feature.setStyle(style);
+                // 初始化适量数据源
+                var source = new ol.source.Vector({
+                    features: [feature],
+                    name: 'point',
+                    id: item.id
+                });
+                var pointLayer = new ol.layer.Vector({
+                    name: 'point',
+                    source: source,
+                    id: item.id
+                });
+                //添加点位图层
+                t.state.gis.addLayer(pointLayer);
+                if (!item.markerContent && cg.BAnimationType == 0) {
+                    marker.setAnimation(BMAP_ANIMATION_BOUNCE);
+                } else if (!item.markerContent && cg.BAnimationType == 1) {
+                    marker.setAnimation(BMAP_ANIMATION_DROP);
+                }
+                psids.push(item.id);
+                //缓存图元的数据,偏于后期操作
+                _this2.GM.setGraphic(item.id, feature).setGraphicParam(item.id, {
+                    attributes: _extends({}, item, { other: item }),
+                    geometryType: 'point',
+                    geometry: {
+                        type: 'point',
+                        x: item.longitude,
+                        y: item.latitude
+                    },
+                    source: source
+                });
+            });
+            if (type !== 'defined') {
+                t.state.pointIds = psids;
+            }
+        }
+        //更新点
+
+    }, {
+        key: 'updatePoint',
+        value: function updatePoint() {
+            var _this3 = this;
+
+            var mapPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+            var t = this;
+            mapPoints.map(function (item, index) {
+                //判断图元是否存在.
+                if (_this3.GM.isRepetition(item.id)) {
+                    //点位数据不符合,直接跳过
+                    if (!item.longitude || !item.latitude) {
+                        console.warn('\u70B9 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF');
+                        return false;
+                    }
+                    var gc = t.GM.getGraphic(item.id);
+                    var cg = {
+                        width: 30,
+                        height: 30,
+                        labelContent: '',
+                        labelPixelX: 0,
+                        labelPixelY: 34,
+                        BAnimationType: 3,
+                        //默认点的偏移值就不同
+                        markerContentX: -15,
+                        markerContentY: -30,
+                        deg: 0
+                    };
+                    if (item.config) {
+                        cg = _extends({}, cg, item.config);
+                    }
+                    var fStyle = gc.getStyle();
+                    var fText = fStyle.getText();
+                    var text = void 0,
+                        icon = void 0,
+                        _marker = void 0;
+                    if (item.markerContent) {
+                        var overlay = t.state.gis.getOverlayById(item.id);
+                        var nodes = t.parseDom(item.markerContent)[0];
+                        overlay.setElement(nodes);
+                        overlay.setPosition([item.longitude, item.latitude]);
+                        t.state.gis.changed();
+                    } else {
+                        icon = new ol.style.Icon({
+                            anchor: [-cg.markerContentX, -cg.markerContentY],
+                            anchorXUnits: 'pixels',
+                            anchorYUnits: 'pixels',
+                            src: item.url || _default2.default.mapServerURL + '/images/defaultMarker.png',
+                            // imgSize: [cg.width, cg.height],
+                            opacity: cg.opacity,
+                            scale: cg.scale || 1,
+                            rotation: Math.PI / 180 * cg.deg
+                        });
+                        if (item.canShowLabel) {
+                            text = new ol.style.Text({
+                                textAlign: 'center', //对齐方式
+                                textBaseline: 'middle', //文本基线
+                                font: 'normal 12px 微软雅黑', //字体样式
+                                text: cg.labelContent, //文本内容
+                                offsetX: cg.labelPixelX || fText.offsetX_, // x轴偏置
+                                offsetY: cg.labelPixelY || fText.offsetY_, // Y轴偏置
+                                fill: new ol.style.Fill({
+                                    //填充样式
+                                    color: 'rgba(0,0,0,0.8)'
+                                }),
+                                backgroundFill: new ol.style.Fill({
+                                    // 填充背景
+                                    color: 'rgba(255, 255, 255, 0.3)'
+                                }),
+                                padding: [2, 5, 2, 5]
+                            });
+                        }
+                        if (text) {
+                            gc.setStyle(new ol.style.Style({
+                                image: icon,
+                                text: text
+                            }));
+                        } else {
+                            gc.setStyle(new ol.style.Style({
+                                image: icon
+                            }));
+                        }
+                    }
+                    gc.setGeometry(new ol.geom.Point([item.longitude, item.latitude]));
+                    _this3.GM.setGraphicParam(item.id, {
+                        attributes: _extends({}, item, { other: item }),
+                        geometryType: 'point',
+                        geometry: {
+                            type: 'point',
+                            x: item.longitude,
+                            y: item.latitude
+                        },
+                        source: gc.source
+                    });
+                } else {
+                    console.warn('\u66F4\u65B0\u7684\u70B9\u4F4Did\u4E0D\u5B58\u5728!');
+                    return false;
+                }
+            });
+        }
+        // 添加先
+
+    }, {
+        key: 'addLine',
+        value: function addLine(mapLines, type) {
+            var _this4 = this;
+
+            var t = this;
+            var ls = [];
+            var lsids = [].concat(_toConsumableArray(t.state.lineIds));
+            //遍历添加线(图元)
+            mapLines.map(function (item, index) {
+                //如果id重复,直接跳过不执行.
+                if (_this4.GM.isRepetition(item.id)) {
+                    console.warn('\u591A\u6298\u7EBFid: ' + item.id + ' \u91CD\u590D');
+                    return false;
+                }
+                //多折线点位数据不符合,直接跳过
+                if (!(item.paths && item.paths.length >= 2)) {
+                    console.warn('\u591A\u6298\u7EBFpaths\u6570\u636E\u9519\u8BEF');
+                    return false;
+                }
+                var cg = {
+                    color: '#277ffa',
+                    pellucidity: 0.9,
+                    lineWidth: 5,
+                    lineType: 'solid',
+                    isHidden: false
+                };
+                if (item.config) {
+                    cg = _extends({}, cg, item.config);
+                }
+                var style = new ol.style.Style({
+                    stroke: new ol.style.Stroke({
+                        color: cg.color,
+                        width: cg.lineWidth,
+                        lineDash: cg.lineType == 'dashed' ? [2] : undefined
+                    })
+                });
+                var polyline = new ol.Feature({
+                    geometry: new ol.geom.LineString(item.paths),
+                    id: item.id,
+                    params: _extends({}, item)
+                });
+                polyline.setStyle(style);
+                var source = new ol.source.Vector({
+                    features: [polyline],
+                    name: 'polyline',
+                    id: item.id
+                });
+                var lineLayer = new ol.layer.Vector({
+                    name: 'polyline',
+                    id: item.id,
+                    source: source
+                });
+                t.state.gis.addLayer(lineLayer);
+                //缓存图元的数据,便于后期操作
+                var pts = item.paths.map(function (itt, ind) {
+                    return [].concat(_toConsumableArray(itt));
+                });
+                _this4.GM.setGraphic(item.id, polyline).setGraphicParam(item.id, {
+                    attributes: _extends({}, item, {
+                        paths: pts,
+                        other: item
+                    }),
+                    geometryType: 'polyline',
+                    geometry: {
+                        type: 'polyline',
+                        paths: pts
+                    },
+                    source: source
+                });
+                ls.push(polyline);
+                lsids.push(item.id);
+                t.state.lineIds.push(item.id);
+            });
+            if (type !== 'defined') {
+                t.state.lineIds = lsids;
+            }
+        }
+        //更新线
+
+    }, {
+        key: 'updateLine',
+        value: function updateLine(mapLines) {
+            var _this5 = this;
+
+            var t = this;
+            //遍历添加线(图元)
+            mapLines.map(function (item, index) {
+                //判断图元是否存在.
+                if (_this5.GM.isRepetition(item.id)) {
+                    //多折线点位数据不符合,直接跳过
+                    if (!(item.paths && item.paths.length >= 2)) {
+                        console.warn('\u591A\u6298\u7EBFpaths\u6570\u636E\u9519\u8BEF');
+                        return false;
+                    }
+                    //初始化默认参数
+                    var cg = {
+                        color: '#277ffa',
+                        pellucidity: 0.9,
+                        lineWidth: 5,
+                        lineType: 'solid', //'solid'  'dashed'
+                        isHidden: false
+                        //获取原有的图元
+                    };var gc = _this5.GM.getGraphic(item.id);
+                    var gp = _this5.GM.getGraphicParam(item.id);
+                    //重新初始化值
+                    if (item.config) {
+                        cg = _extends({}, cg, item.config);
+                    }
+                    var pts = item.paths.map(function (itt, ind) {
+                        return [].concat(_toConsumableArray(itt));
+                    });
+                    var style = new ol.style.Style({
+                        stroke: new ol.style.Stroke({
+                            color: cg.color,
+                            width: cg.lineWidth,
+                            lineDash: cg.lineType == 'dashed' ? [2] : undefined,
+                            zIndex: cg.zIndex || 0
+                        })
+                    });
+                    gc.setStyle(function () {
+                        return style;
+                    });
+                    gc.setGeometry(new ol.geom.LineString(pts));
+                    _this5.GM.setGraphicParam(item.id, {
+                        attributes: _extends({}, item, {
+                            paths: pts,
+                            other: item
+                        }),
+                        geometryType: 'polyline',
+                        geometry: {
+                            type: 'polyline',
+                            paths: pts
+                        },
+                        source: gp.source
+                    });
+                } else {
+                    console.warn('\u66F4\u65B0\u7684\u591A\u6298\u7EBFid\u4E0D\u5B58\u5728!');
+                    return false;
+                }
+            });
+        }
+        //添加面
+
+    }, {
+        key: 'addPolygon',
+        value: function addPolygon(mapPolygons) {
+            var _this6 = this;
+
+            var t = this;
+            var pgs = [];
+            var pgsids = [].concat(_toConsumableArray(t.state.polygonIds));
+            //遍历添加面(图元)
+            mapPolygons.map(function (item, index) {
+                //如果id重复,直接跳过不执行.
+                if (_this6.GM.isRepetition(item.id)) {
+                    console.warn('\u591A\u8FB9\u5F62id: ' + item.id + ' \u91CD\u590D');
+                    return false;
+                }
+                //多边形点位数据不符合,直接跳过
+                if (!(item.rings && item.rings.length >= 3)) {
+                    console.warn('\u591A\u8FB9\u5F62rings\u6570\u636E\u9519\u8BEF');
+                    return false;
+                }
+                var cg = {
+                    lineType: 'solid',
+                    lineWidth: 5,
+                    lineColor: '#277ffa',
+                    lineOpacity: 1,
+                    color: '#fff',
+                    pellucidity: 0.5
+                };
+                if (item.config) {
+                    cg = _extends({}, cg, item.config);
+                }
+                var style = new ol.style.Style({
+                    stroke: new ol.style.Stroke({
+                        color: cg.lineColor,
+                        width: cg.lineWidth,
+                        lineDash: cg.lineType == 'dashed' ? [2] : undefined
+                    }),
+                    fill: new ol.style.Fill({
+                        color: cg.pellucidity ? getRgbColor(cg.color, cg.pellucidity) : cg.color
+                    })
+                });
+                var polygon = new ol.Feature({
+                    geometry: new ol.geom.Polygon([item.rings]),
+                    id: item.id,
+                    params: _extends({}, item),
+                    name: 'polygon'
+                });
+                polygon.setStyle(style);
+                var source = new ol.source.Vector({
+                    features: [polygon],
+                    id: item.id
+                });
+                var polygonLayer = new ol.layer.Vector({
+                    name: 'polygon',
+                    id: item.id,
+                    source: source
+                });
+                t.state.gis.addLayer(polygonLayer);
+                //缓存图元的数据,便于后期操作
+                var pts = item.rings.map(function (itt, ind) {
+                    return [].concat(_toConsumableArray(itt));
+                });
+                _this6.GM.setGraphic(item.id, polygon).setGraphicParam(item.id, {
+                    attributes: _extends({}, item, {
+                        rings: pts,
+                        other: item
+                    }),
+                    geometryType: 'polygon',
+                    geometry: {
+                        type: 'polygon',
+                        rings: pts
+                    },
+                    source: source
+                });
+                pgs.push(polygon);
+                pgsids.push(item.id);
+            });
+            t.state.polygonIds = pgsids;
+        }
+        //更新面
+
+    }, {
+        key: 'updatePolygon',
+        value: function updatePolygon(mapPolygons) {
+            var _this7 = this;
+
+            var t = this;
+            mapPolygons.map(function (item, index) {
+                //判断图元是否存在.
+                if (_this7.GM.isRepetition(item.id)) {
+                    //多边形点位数据不符合,直接跳过
+                    if (!(item.rings && item.rings.length >= 3)) {
+                        console.warn('\u591A\u8FB9\u5F62rings\u6570\u636E\u9519\u8BEF');
+                        return false;
+                    }
+                    //获取原有的图元
+                    var gc = _this7.GM.getGraphic(item.id);
+                    //获取原有的面属性,转换key值
+                    var cg = {
+                        lineType: 'solid',
+                        lineWidth: 5,
+                        lineColor: '#277ffa',
+                        lineOpacity: 1,
+                        color: '#fff',
+                        pellucidity: 0.5
+                    };
+                    //重新初始化值
+                    if (item.config) {
+                        cg = _extends({}, cg, item.config);
+                    }
+                    var pts = item.rings.map(function (itt, ind) {
+                        return [].concat(_toConsumableArray(itt));
+                    });
+                    gc.setGeometry(new ol.geom.Polygon([pts]));
+                    gc.setStyle(new ol.style.Style({
+                        stroke: new ol.style.Stroke({
+                            color: cg.lineColor,
+                            width: cg.lineWidth,
+                            lineDash: cg.lineType == 'dashed' ? [2] : undefined
+                        }),
+                        fill: new ol.style.Fill({
+                            color: cg.pellucidity ? getRgbColor(cg.color, cg.pellucidity) : cg.color
+                        })
+                    }));
+                    _this7.GM.setGraphicParam(item.id, {
+                        attributes: _extends({}, item, {
+                            rings: pts,
+                            other: item
+                        }),
+                        geometryType: 'polygon',
+                        geometry: {
+                            type: 'polygon',
+                            rings: pts
+                        },
+                        source: gc.source
+                    });
+                } else {
+                    console.warn('\u66F4\u65B0\u7684\u591A\u8FB9\u5F62id\u4E0D\u5B58\u5728!');
+                    return false;
+                }
+            });
+        }
+        //添加圆  circle
+
+    }, {
+        key: 'addCircle',
+        value: function addCircle(mapCircles, type) {
+            var t = this;
+            var ccsids = [].concat(_toConsumableArray(t.state.circleIds));
+            if (type) {
+                ccsids = [].concat(_toConsumableArray(t.state.drawIds[type]));
+            }
+            mapCircles.map(function (item, index) {
+                //如果id重复,直接跳过不执行.
+                if (t.GM.isRepetition(item.id)) {
+                    console.warn('\u5706id: ' + item.id + ' \u91CD\u590D');
+                    return false;
+                }
+                //圆 点位数据不符合,直接跳过
+                if (!item.longitude || !item.latitude) {
+                    console.warn('\u5706 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF');
+                    return false;
+                }
+                var cg = {
+                    lineType: 'solid',
+                    lineWidth: 5,
+                    lineColor: '#277ffa',
+                    lineOpacity: 1,
+                    color: '#fff',
+                    pellucidity: 0.5
+                    // isHidden: false  //后期需要在加
+                };
+                if (item.config) {
+                    cg = _extends({}, cg, item.config);
+                }
+                var style = new ol.style.Style({
+                    stroke: new ol.style.Stroke({
+                        color: cg.lineColor,
+                        width: cg.lineWidth,
+                        lineDash: cg.lineType == 'dashed' ? [2] : undefined
+                    }),
+                    fill: new ol.style.Fill({
+                        color: cg.pellucidity ? getRgbColor(cg.color, cg.pellucidity) : cg.color
+                    })
+                });
+                var metersPerUnit = t.state.gis.getView().getProjection().getMetersPerUnit();
+                var circleRadius = item.radius / metersPerUnit;
+                var circle = new ol.Feature({
+                    geometry: new ol.geom.Circle([item.longitude, item.latitude], parseFloat(circleRadius)),
+                    id: item.id,
+                    params: _extends({}, item),
+                    name: 'circle'
+                });
+                circle.setStyle(style);
+                var source = new ol.source.Vector({
+                    features: [circle],
+                    name: 'circle',
+                    id: item.id
+                });
+                var circleLayer = new ol.layer.Vector({
+                    name: 'circle',
+                    id: item.id,
+                    source: source
+                });
+                t.state.gis.addLayer(circleLayer);
+                ccsids.push(item.id);
+                t.GM.setGraphic(item.id, circle).setGraphicParam(item.id, {
+                    attributes: _extends({}, item, { other: item }),
+                    geometryType: 'circle',
+                    geometry: {
+                        type: 'circle',
+                        x: parseFloat(item.longitude),
+                        y: parseFloat(item.latitude),
+                        radius: parseFloat(item.radius)
+                    },
+                    source: source
+                });
+            });
+            //添加绘制点
+            if (type) {
+                t.state.drawIds = _extends({}, t.state.drawIds, _defineProperty({}, type, ccsids));
+            } else {
+                t.state.circleIds = ccsids;
+            }
+        }
+        //更新圆
+
+    }, {
+        key: 'updateCircle',
+        value: function updateCircle(mapCircles) {
+            var t = this;
+            mapCircles.map(function (item, index) {
+                //判断图元是否存在.
+                if (t.GM.isRepetition(item.id)) {
+                    //圆 点位数据不符合,直接跳过
+                    if (!item.longitude || !item.latitude) {
+                        console.warn('\u5706 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF');
+                        return false;
+                    }
+                } else {
+                    console.warn('\u66F4\u65B0\u7684\u5706id\u4E0D\u5B58\u5728!');
+                    return false;
+                }
+                //获取原有的图元
+                var gc = t.GM.getGraphic(item.id);
+                //获取原有的面属性,转换key值
+                var cg = {
+                    lineType: 'solid',
+                    lineWidth: 5,
+                    lineColor: '#277ffa',
+                    lineOpacity: 1,
+                    color: '#fff',
+                    pellucidity: 0.5
+                    // isHidden: false  //后期需要在加
+                };
+                if (item.config) {
+                    cg = _extends({}, cg, item.config);
+                }
+                var metersPerUnit = t.state.gis.getView().getProjection().getMetersPerUnit();
+                var circleRadius = item.radius / metersPerUnit;
+                gc.setGeometry(new ol.geom.Circle([item.longitude, item.latitude], parseFloat(circleRadius)));
+                gc.setStyle(new ol.style.Style({
+                    stroke: new ol.style.Stroke({
+                        color: cg.lineColor,
+                        width: cg.lineWidth,
+                        lineDash: cg.lineType == 'dashed' ? [2] : undefined
+                    }),
+                    fill: new ol.style.Fill({
+                        color: cg.pellucidity ? getRgbColor(cg.color, cg.pellucidity) : cg.color
+                    })
+                }));
+                t.GM.setGraphicParam(item.id, {
+                    attributes: _extends({}, item, { other: item }),
+                    geometryType: 'circle',
+                    geometry: {
+                        type: 'circle',
+                        x: parseFloat(item.longitude),
+                        y: parseFloat(item.latitude),
+                        radius: parseFloat(item.radius)
+                    },
+                    source: gc.source
+                });
+            });
+            //刷新图元
+        }
+        // 工具方法
+        //删除图元
+
+    }, {
+        key: 'removeGraphic',
+        value: function removeGraphic(id, type) {
+            var t = this;
+            var graphic = t.GM.getGraphic(id);
+            var gp = t.GM.getGraphicParam(id);
+            //刪除label
+            if (t.Label[id]) {
+                t.Label[id].html.remove();
+                delete t.Label[id];
+            }
+            if (!!graphic) {
+                //清除聚合点 避免异常
+                // t._cluster.removeMarker(this.GM.getGraphic(id));
+                //清除地图中图元
+                // const layers = t.state.gis.getLayers().getArray();
+                // console.log(layers)
+                // const layer = layers.filter(item => item.getProperties().name == type)[0];
+                // console.log(layer)
+                console.log(gp);
+                console.log(gp.source);
+                gp.source.removeFeature(graphic);
+                // layer && layer.getSource().removeFeature(graphic);
+                //清除对应id的图元数据缓存
+                t.GM.removeGraphic(id);
+            } else {
+                return false;
+            }
+            for (var i = 0; i < t.movePoints.length; i++) {
+                if (t.movePoints[i].id == id) {
+                    t.movePoints.splice(i, 1);
+                    continue;
+                }
+            }
+            var ids = [];
+            switch (type) {
+                case 'point':
+                    ids = t.state.pointIds;
+                    break;
+                case 'line':
+                    ids = t.state.lineIds;
+                    break;
+                case 'polygon':
+                    ids = t.state.polygonIds;
+                    break;
+                case 'circle':
+                    ids = t.state.circleIds;
+                    break;
+                case 'draw':
+                    if (t.state.drawIds.point.indexOf(id) > -1) {
+                        t.state.drawIds.point.splice(t.state.drawIds.point.indexOf(id), 1);
+                    }
+                    if (t.state.drawIds.polyline.indexOf(id) > -1) {
+                        t.state.drawIds.polyline.splice(t.state.drawIds.polyline.indexOf(id), 1);
+                    }
+                    if (t.state.drawIds.polygon.indexOf(id) > -1) {
+                        t.state.drawIds.polygon.splice(t.state.drawIds.polygon.indexOf(id), 1);
+                    }
+                    if (t.state.drawIds.circle.indexOf(id) > -1) {
+                        t.state.drawIds.circle.splice(t.state.drawIds.circle.indexOf(id), 1);
+                    }
+                    if (t.state.drawIds.rectangle.indexOf(id) > -1) {
+                        t.state.drawIds.rectangle.splice(t.state.drawIds.rectangle.indexOf(id), 1);
+                    }
+                    break;
+                default:
+                    if (t.state.pointIds.indexOf(id) > -1) {
+                        t.state.pointIds.splice(t.state.pointIds.indexOf(id), 1);
+                    }
+                    if (t.state.lineIds.indexOf(id) > -1) {
+                        t.state.lineIds.splice(t.state.lineIds.indexOf(id), 1);
+                    }
+                    if (t.state.polygonIds.indexOf(id) > -1) {
+                        t.state.polygonIds.splice(t.state.polygonIds.indexOf(id), 1);
+                    }
+                    if (t.state.circleIds.indexOf(id) > -1) {
+                        t.state.circleIds.splice(t.state.circleIds.indexOf(id), 1);
+                    }
+                    break;
+            }
+            if (id == t.state.editId) {
+                t.state.editId = '';
+            }
+            if (ids.indexOf(id) != -1) {
+                ids.splice(ids.indexOf(id), 1);
+            }
+        }
+        //清空地图
+
+    }, {
+        key: 'clearAll',
+        value: function clearAll() {
+            var t = this;
+            var gis = t.state.gis;
+
+            var layers = gis.getLayers();
+            //清空热力图
+            if (t.heatmap) {
+                var hMap = layers.filter(function (item) {
+                    return item.name == 'heatMap';
+                })[0];
+                hMap.getSource().clear();
+                map.removeLayer(layer);
+            }
+            t.heatmap = null;
+            t.movePoints = [];
+            t.clearAllPointCollection();
+            //循环所有id删除
+            var _t$state = t.state,
+                pointIds = _t$state.pointIds,
+                lineIds = _t$state.lineIds,
+                polygonIds = _t$state.polygonIds,
+                circleIds = _t$state.circleIds,
+                drawIds = _t$state.drawIds;
+            //拷贝数组,避免原数组操作,影响循环
+
+            var ps = [].concat(_toConsumableArray(pointIds)),
+                ls = [].concat(_toConsumableArray(lineIds)),
+                pgs = [].concat(_toConsumableArray(polygonIds)),
+                cs = [].concat(_toConsumableArray(circleIds));
+            // 删除点
+            for (var i = 0; i < ps.length; i++) {
+                t.removeGraphic(ps[i], 'point');
+            }
+            // 删除线
+            for (var _i = 0; _i < ls.length; _i++) {
+                t.removeGraphic(ls[_i], 'line');
+            }
+            // 删除面
+            for (var _i2 = 0; _i2 < pgs.length; _i2++) {
+                t.removeGraphic(pgs[_i2], 'polygon');
+            }
+            // 删除圆
+            for (var _i3 = 0; _i3 < cs.length; _i3++) {
+                t.removeGraphic(cs[_i3], 'circle');
+            }
+            //删除绘制的点
+            var point = drawIds.point,
+                polyline = drawIds.polyline,
+                polygon = drawIds.polygon,
+                circle = drawIds.circle,
+                rectangle = drawIds.rectangle;
+
+            for (var _i4 = 0; _i4 < point.length; _i4++) {
+                t.removeGraphic(point[_i4]);
+            }
+            for (var _i5 = 0; _i5 < polyline.length; _i5++) {
+                t.removeGraphic(polyline[_i5]);
+            }
+            for (var _i6 = 0; _i6 < polygon.length; _i6++) {
+                t.removeGraphic(polygon[_i6]);
+            }
+            for (var _i7 = 0; _i7 < circle.length; _i7++) {
+                t.removeGraphic(circle[_i7]);
+            }
+            for (var _i8 = 0; _i8 < rectangle.length; _i8++) {
+                t.removeGraphic(rectangle[_i8]);
+            }
+        }
+        //展示比例尺
+
+    }, {
+        key: 'showControl',
+        value: function showControl() {
+            var t = this,
+                type = '',
+                location = { top: 20, left: 20 },
+                ls = { top: 20, left: 60 };
+            var gis = t.state.gis;
+
+            var _gis$getSize3 = gis.getSize(),
+                _gis$getSize4 = _slicedToArray(_gis$getSize3, 2),
+                w = _gis$getSize4[0],
+                h = _gis$getSize4[1];
+
+            var scaleControl = new ol.control.ScaleLine({
+                units: 'metric' //设置度量单位
+            });
+            var zoomControl = new ol.control.Zoom({});
+            var ZoomSliderControl = new ol.control.ZoomSlider({});
+            gis.addControl(scaleControl);
+            gis.addControl(zoomControl);
+            gis.addControl(ZoomSliderControl);
+        }
+        //设置区域限制
+
+    }, {
+        key: 'setAreaRestriction',
+        value: function setAreaRestriction(areaRestriction) {
+            var t = this;
+
+            var _t$dealData5 = t.dealData(areaRestriction),
+                _et = _t$dealData5._extent;
+
+            t.areaRestriction = t.state.gis.getView().setProperties({
+                extent: [_et.xmax, _et.ymax, _et.xmin, _et.ymin]
+            }, false);
+        }
+        //关闭区域限制
+
+    }, {
+        key: 'clearAreaRestriction',
+        value: function clearAreaRestriction() {
+            var t = this;
+            t.areaRestriction = null;
+        }
+        //区域限制逻辑
+
+    }, {
+        key: 'dealAreaRestriction',
+        value: function dealAreaRestriction(e) {
+            var t = this;
+            //如果在区域内,不处理
+            if (t.areaRestriction.contains(e.extent.getCenter())) {
+                return;
+            }
+            // if(t.containsExtent(t.areaRestriction,e.extent)){
+            //    return;
+            // }
+            var _t$areaRestriction = t.areaRestriction,
+                xmin1 = _t$areaRestriction.xmin,
+                xmax1 = _t$areaRestriction.xmax,
+                ymin1 = _t$areaRestriction.ymin,
+                ymax1 = _t$areaRestriction.ymax;
+            var _e$extent = e.extent,
+                xmin2 = _e$extent.xmin,
+                xmax2 = _e$extent.xmax,
+                ymin2 = _e$extent.ymin,
+                ymax2 = _e$extent.ymax;
+
+            var x = e.extent.getCenter().x,
+                y = e.extent.getCenter().y;
+            if (x < xmin1) x = xmin1 + 0.1;
+            if (x > xmax1) x = xmax1 - 0.1;
+            if (y < ymin1) y = ymin1 + 0.1;
+            if (y > ymax1) y = ymax1 - 0.1;
+            t.state.gis.getView().setCenter([x, y]);
+        }
+        /*公共方法*/
+        //判断extent1是否在extent2内部
+
+    }, {
+        key: 'containsExtent',
+        value: function containsExtent(e1, e2) {
+            var xmin1 = e1.xmin,
+                xmax1 = e1.xmax,
+                ymin1 = e1.ymin,
+                ymax1 = e1.ymax;
+            var xmin2 = e2.xmin,
+                xmax2 = e2.xmax,
+                ymin2 = e2.ymin,
+                ymax2 = e2.ymax;
+
+            return xmin2 > xmin1 && xmax2 < xmax1 && ymin2 > ymin1 && ymax2 < ymax1;
+        }
+        //将图元z-index设置成最高
+
+    }, {
+        key: 'czIndex',
+        value: function czIndex(id) {
+            var t = this;
+            $('#' + t.props.mapId + '_graphics_layer').append(t.GM.getGraphic(id).getNode());
+        }
+    }, {
+        key: 'equalsPoint',
+        value: function equalsPoint(a, b) {
+            return a.x == b.x && a.y == b.y;
+        }
+        //计算2点间距离 单位m 精确到2位小数
+
+    }, {
+        key: 'calculatePointsDistance',
+        value: function calculatePointsDistance(fp, ep) {
+            return Math.round(ol.sphere.getDistance(fp, ep));
+        }
+        //计算多个点的距离(常用于线计算)
+
+    }, {
+        key: 'calculateDistance',
+        value: function calculateDistance(ps) {
+            var t = this,
+                totalDistance = 0;
+            if (ps.length < 0) {
+                return 0;
+            }
+            for (var i = 0; i < ps.length; i++) {
+                if (i < ps.length - 1) {
+                    totalDistance += t.calculatePointsDistance(ps[i], ps[i + 1]);
+                }
+            }
+            return Math.round(totalDistance * 100) / 100;
+        }
+        //处理线和面的 经纬度数据
+
+    }, {
+        key: 'dealData',
+        value: function dealData(paths) {
+            //区别点和圆的经纬度数据处理
+            var lnglatAry = [],
+                _extent = { xmax: 0, xmin: 0, ymax: 0, ymin: 0 },
+                path = [];
+            path = paths.map(function (item, index) {
+                var lng = item[0],
+                    lat = item[1];
+                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 { lnglatAry: lnglatAry, _extent: _extent, path: path };
+        }
+        //处理点位图元的添加 和 更新
+
+    }, {
+        key: 'dealLabelGraphics',
+        value: function dealLabelGraphics(id, label) {
+            var t = this;
+            if (label) {
+                var position = (t.GM.getGraphic(id) || {}).geometry || label.position;
+                //经纬度转top和left
+                var tl = t.state.gis.toScreen(position),
+                    lbl = _extends({}, label);
+                //渲染優化
+                if (!(tl.y < -50 || tl.x < -50 || tl.y > t.state.gis.height || tl.x > t.state.gis.width)) {
+                    //设置label的位置(通过定位来实现)
+                    label.html.css({
+                        position: 'absolute',
+                        top: tl.y + (label.offset.y || 0) - t.labelLayer.y,
+                        left: tl.x + (label.offset.x || 0) - t.labelLayer.x
+                    });
+                    //添加点位到(地图)
+                    $('#' + t.htmlPointsId).append(label.html);
+                    lbl.add = true;
+                } else {
+                    lbl.add = false;
+                }
+                //记录下label的dom对象,用于后期修改和删除(基本是删除)
+                t.Label[id] = lbl;
+            }
+        }
+        //点的跳动动画
+
+    }, {
+        key: 'pointAnimation',
+        value: function pointAnimation(id, marker) {
+            var t = this;
+            //null时关闭跳动
+            if (!!marker) {
+                if (t.animTimer[id]) {
+                    clearInterval(t.animTimer[id]);
+                }
+                t.animTimer[id] = setInterval(function () {
+                    //点被隐藏时,没有执行,定时不关
+                    if (marker.symbol) {
+                        var shape = _extends({}, marker.symbol);
+                        //初始数据  点位有变动,重新刷新数据
+                        if (!t.animCount[id] || shape.yoffset != t.animCount[id].now) {
+                            t.animCount[id] = {
+                                start: shape.yoffset,
+                                now: shape.yoffset,
+                                notation: -1
+                            };
+                        }
+                        if (t.animCount[id].now - t.animCount[id].start == 20) {
+                            t.animCount[id].notation = -1;
+                        }
+                        if (t.animCount[id].now - t.animCount[id].start == 0) {
+                            t.animCount[id].notation = 1;
+                        }
+                        shape.yoffset = t.animCount[id].now = t.animCount[id].now + t.animCount[id].notation * 2;
+                        marker.symbol.setOffset(shape.xoffset, shape.yoffset);
+                        t.state.gis.graphics.refresh();
+                    }
+                }, 35);
+            } else {
+                clearInterval(t.animTimer[id]);
+            }
+        }
+    }, {
+        key: 'moveAnimation',
+        value: function moveAnimation() {
+            var t = this;
+            if (t.moveToTimer) {
+                clearInterval(t.moveToTimer);
+            }
+            t.moveToTimer = setInterval(function () {
+                for (var i = 0; i < t.movePoints.length; i++) {
+                    t.movePoints[i].waitTime += 10;
+                    t.movePoints[i].deleteTime -= 10;
+                }
+                t.movePoints.sort(function (x, y) {
+                    return y.waitTime - x.waitTime;
+                });
+                var nowMovePoints = t.movePoints.slice(0, 10),
+                    deleteIndex = [];
+                for (var _i9 = 0; _i9 < nowMovePoints.length; _i9++) {
+                    var _nowMovePoints$_i = nowMovePoints[_i9],
+                        id = _nowMovePoints$_i.id,
+                        rx = _nowMovePoints$_i.rx,
+                        ry = _nowMovePoints$_i.ry,
+                        waitTime = _nowMovePoints$_i.waitTime,
+                        deleteTime = _nowMovePoints$_i.deleteTime,
+                        ddeg = _nowMovePoints$_i.ddeg;
+
+                    var gc = t.GM.getGraphic(id);
+                    if (!gc || !gc._graphicsLayer) {
+                        clearInterval(t.moveToTimer);
+                    } else {
+                        var gg = gc.getGeometry();
+                        var tx = gg[0] + rx,
+                            ty = gg[1] + ry;
+                        gc.setGeometry([tx, ty]);
+                        t.movePoints[_i9].waitTime = 0;
+                        if (deleteTime <= 0) {
+                            deleteIndex.push(_i9);
+                        }
+                    }
+                }
+                deleteIndex.sort(function (a, b) {
+                    return b - a;
+                });
+                for (var _i10 = 0; _i10 < deleteIndex.length; _i10++) {
+                    t.movePoints.splice(deleteIndex[_i10], 1);
+                }
+                if (nowMovePoints.length == 0) {
+                    clearInterval(t.moveToTimer);
+                }
+            }, 10);
+        }
+        //点位移动动画效果
+
+    }, {
+        key: 'moveTo',
+        value: function moveTo(id, lnglat, delay, autoRotation, urlright, urlleft) {
+            delay = delay || 3;
+            var t = this,
+                timer = 10;
+            delay = eval(delay) * 1000;
+            var count = delay / timer,
+                gc = this.GM.getGraphic(id);
+            var s = gc.geometry,
+                e = { x: lnglat[0], y: lnglat[1] };
+            if (t.equalsPoint(s, e)) {
+                return false;
+            } else {
+                var ddeg = 0,
+                    url = null;
+                //计算角度,旋转
+                if (autoRotation) {
+                    //自己实现旋转
+                    ddeg = t.rotateDeg(gc.geometry, lnglat);
+                    if (urlleft && ddeg < -90 && ddeg > -270) {
+                        ddeg += 180;
+                        url = urlleft;
+                    } else {
+                        url = urlright;
+                    }
+                    gc.setStyle(new ol.style.Style({
+                        image: new ol.style.Icon({
+                            src: url,
+                            rotation: Math.PI / 180 * ddeg
+                        })
+                    }));
+                }
+                //拆分延迟移动定位
+                var rx = (e.x - s.x) / count,
+                    ry = (e.y - s.y) / count;
+                var isHave = false;
+                for (var i = 0; i < t.movePoints.length; i++) {
+                    if (t.movePoints[i].id == id) {
+                        t.movePoints.splice(i, 1, {
+                            id: id,
+                            rx: rx,
+                            ry: ry,
+                            waitTime: 0,
+                            deleteTime: delay
+                        });
+                        isHave = true;
+                    }
+                }
+                if (!isHave) {
+                    t.movePoints.push({
+                        id: id,
+                        rx: rx,
+                        ry: ry,
+                        waitTime: 0,
+                        deleteTime: delay
+                    });
+                }
+            }
+        }
+        //点位角度旋转(以指向东(右)为0°)
+
+    }, {
+        key: 'rotateDeg',
+        value: function rotateDeg(sp, ep) {
+            var t = this;
+            var spLngLat = sp;
+            if (Array.isArray(sp)) {
+                spLngLat = new ol.geom.Point(sp[0], sp[1]);
+            }
+            var s = t.state.gis.getPixelFromCoordinate(spLngLat),
+
+            //获取当前点位的经纬度
+            e = t.state.gis.getPixelFromCoordinate(new ol.geom.Point(ep[0], ep[1])),
+                deg = 0;
+            if (e.x != s.x) {
+                var tan = (e.y - s.y) / (e.x - s.x),
+                    atan = Math.atan(tan);
+                deg = atan * 360 / (2 * Math.PI);
+                //degree  correction;
+                if (e.x < s.x) {
+                    deg = -deg + 90 + 90;
+                } else {
+                    deg = -deg;
+                }
+                deg = -deg;
+            } else {
+                var disy = e.y - s.y;
+                var bias = 0;
+                if (disy > 0) bias = -1;else bias = 1;
+                if (disy == 0) bias = 0;
+                deg = -bias * 90;
+            }
+            return deg;
+        }
+        //对比对象数据是否相等
+
+    }, {
+        key: 'deepEqual',
+        value: function deepEqual(a, b) {
+            return _immutable2.default.is(_immutable2.default.fromJS(a), _immutable2.default.fromJS(b));
+        }
+        //数据解析(分析,新增,更新,删除对应的数据)
+
+    }, {
+        key: 'dataMatch',
+        value: function dataMatch(oldData, newData, type) {
+            var onlyOldData = Set(oldData).subtract(Set(newData)).toJS();
+            var onlyNewData = Set(newData).subtract(Set(oldData)).toJS();
+            var onlyOldIDs = onlyOldData.map(function (item) {
+                return item[type];
+            });
+            var onlyNewIDs = onlyNewData.map(function (item) {
+                return item[type];
+            });
+            var updateDataIDs = Set(onlyOldIDs).intersect(Set(onlyNewIDs)).toJS();
+            var updatedData = onlyNewData.filter(function (item) {
+                return updateDataIDs.indexOf(item[type]) > -1;
+            });
+            var replacedData = onlyOldData.filter(function (item) {
+                return updateDataIDs.indexOf(item[type]) > -1;
+            });
+            var deletedDataIDs = onlyOldIDs.filter(function (oldID) {
+                return updateDataIDs.indexOf(oldID) == -1;
+            });
+            var addedData = onlyNewData.filter(function (item) {
+                return updateDataIDs.indexOf(item[type]) == -1;
+            });
+
+            return { deletedDataIDs: deletedDataIDs, addedData: addedData, updatedData: updatedData, replacedData: replacedData };
+        }
+        //处理需要增加图元的数据(避免意外问题)
+
+    }, {
+        key: 'dealAdd',
+        value: function dealAdd(ary, ids) {
+            var ads = [],
+                otherupds = [];
+            for (var i = 0; i < ary.length; i++) {
+                if (ids.indexOf(ary[i].id) > -1) {
+                    otherupds.push(ary[i]);
+                } else {
+                    ads.push(ary[i]);
+                }
+            }
+            return { ads: ads, otherupds: otherupds };
+        }
+        //处理需要更新图元的数据(避免意外问题)
+
+    }, {
+        key: 'dealUpdate',
+        value: function dealUpdate(ary, ids) {
+            var upds = [],
+                otherads = [];
+            for (var i = 0; i < ary.length; i++) {
+                if (ids.indexOf(ary[i].id) > -1) {
+                    upds.push(ary[i]);
+                } else {
+                    otherads.push(ary[i]);
+                }
+            }
+            return { upds: upds, otherads: otherads };
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var t = this;
+            var _map = this.props;
+            return _react2.default.createElement('div', { id: _map.mapId, style: { width: '100%', height: '100%' } });
+        }
+        //初始化
+
+    }, {
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            var t = this;
+            t.loadMapComplete.then(function () {
+                t.init();
+            });
+        }
+        //已加载组件，收到新的参数时调用
+
+    }, {
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps, prevProps) {
+            var t = this;
+            //点/线旧数据
+            var _t$state2 = t.state,
+                pointIds = _t$state2.pointIds,
+                lineIds = _t$state2.lineIds,
+                polygonIds = _t$state2.polygonIds,
+                circleIds = _t$state2.circleIds,
+                drawIds = _t$state2.drawIds;
+            var point = drawIds.point,
+                polyline = drawIds.polyline,
+                polygon = drawIds.polygon,
+                circle = drawIds.circle,
+                rectangle = drawIds.rectangle;
+            //点/线新数据
+
+            var _nextProps$mapPoints = nextProps.mapPoints,
+                mapPoints = _nextProps$mapPoints === undefined ? [] : _nextProps$mapPoints,
+                _nextProps$mapLines = nextProps.mapLines,
+                mapLines = _nextProps$mapLines === undefined ? [] : _nextProps$mapLines,
+                _nextProps$mapPolygon = nextProps.mapPolygons,
+                mapPolygons = _nextProps$mapPolygon === undefined ? [] : _nextProps$mapPolygon,
+                _nextProps$mapCircles = nextProps.mapCircles,
+                mapCircles = _nextProps$mapCircles === undefined ? [] : _nextProps$mapCircles,
+                _nextProps$customized = nextProps.customizedBoundary,
+                customizedBoundary = _nextProps$customized === undefined ? [] : _nextProps$customized,
+                isOpenTrafficInfo = nextProps.isOpenTrafficInfo,
+                boundaryName = nextProps.boundaryName,
+                heatMapData = nextProps.heatMapData,
+                mapVisiblePoints = nextProps.mapVisiblePoints,
+                setVisiblePoints = nextProps.setVisiblePoints,
+                setCenter = nextProps.setCenter,
+                mapCenter = nextProps.mapCenter,
+                setZoomLevel = nextProps.setZoomLevel,
+                mapZoomLevel = nextProps.mapZoomLevel,
+                setCluster = nextProps.setCluster,
+                mapCluster = nextProps.mapCluster,
+                isRangingTool = nextProps.isRangingTool,
+                mapRangingTool = nextProps.mapRangingTool,
+                isRemove = nextProps.isRemove,
+                mapRemove = nextProps.mapRemove,
+                mapDraw = nextProps.mapDraw,
+                isDraw = nextProps.isDraw,
+                isCloseDraw = nextProps.isCloseDraw,
+                editGraphicId = nextProps.editGraphicId,
+                isDoEdit = nextProps.isDoEdit,
+                isEndEdit = nextProps.isEndEdit,
+                mapPointCollection = nextProps.mapPointCollection,
+                isclearAllPointCollection = nextProps.isclearAllPointCollection,
+                isSetAreaRestriction = nextProps.isSetAreaRestriction,
+                areaRestriction = nextProps.areaRestriction,
+                isClearAreaRestriction = nextProps.isClearAreaRestriction,
+                isClearAll = nextProps.isClearAll;
+            // 等待地图加载
+
+            if (!t.state.mapCreated) return;
+            /*点数据处理
+                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;
+                var newMapPoints = mapPoints;
+                //过滤编辑的图元
+                if (!!t.editId) {
+                    oldMapPoints = t.props.mapPoints.filter(function (item) {
+                        return item.id !== editGraphicId;
+                    });
+                    newMapPoints = mapPoints.filter(function (item) {
+                        return item.id !== editGraphicId;
+                    });
+                }
+
+                var _t$dataMatch = t.dataMatch(oldMapPoints, newMapPoints, 'id'),
+                    deletedDataIDs = _t$dataMatch.deletedDataIDs,
+                    addedData = _t$dataMatch.addedData,
+                    updatedData = _t$dataMatch.updatedData;
+
+                var _t$dealAdd = t.dealAdd(addedData, [].concat(_toConsumableArray(pointIds), _toConsumableArray(point))),
+                    ads = _t$dealAdd.ads,
+                    otherupds = _t$dealAdd.otherupds;
+
+                var _t$dealUpdate = t.dealUpdate(updatedData, [].concat(_toConsumableArray(pointIds), _toConsumableArray(point))),
+                    upds = _t$dealUpdate.upds,
+                    otherads = _t$dealUpdate.otherads;
+                //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
+
+
+                var _iteratorNormalCompletion = true;
+                var _didIteratorError = false;
+                var _iteratorError = undefined;
+
+                try {
+                    for (var _iterator = deletedDataIDs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                        var id = _step.value;
+
+                        t.removeGraphic(id, 'point');
+                    }
+                    //增加
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally {
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return) {
+                            _iterator.return();
+                        }
+                    } finally {
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+
+                t.addPoint([].concat(_toConsumableArray(ads), _toConsumableArray(otherads)));
+                //更新
+                t.updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
+            }
+            /*
+                线数据处理
+                先全删除,再新增
+            */
+            if (mapLines instanceof Array && t.props.mapLines instanceof Array && !t.deepEqual(mapLines, t.props.mapLines)) {
+                var oldMapLines = t.props.mapLines;
+                var newMapLines = mapLines;
+                if (!!t.editId) {
+                    oldMapLines = t.props.mapLines.filter(function (item) {
+                        return item.id !== editGraphicId;
+                    });
+                    newMapLines = mapLines.filter(function (item) {
+                        return item.id !== editGraphicId;
+                    });
+                }
+
+                var _t$dataMatch2 = t.dataMatch(oldMapLines, newMapLines, 'id'),
+                    _deletedDataIDs = _t$dataMatch2.deletedDataIDs,
+                    _addedData = _t$dataMatch2.addedData,
+                    _updatedData = _t$dataMatch2.updatedData;
+
+                var _t$dealAdd2 = t.dealAdd(_addedData, [].concat(_toConsumableArray(lineIds), _toConsumableArray(polyline))),
+                    _ads = _t$dealAdd2.ads,
+                    _otherupds = _t$dealAdd2.otherupds;
+
+                var _t$dealUpdate2 = t.dealUpdate(_updatedData, [].concat(_toConsumableArray(lineIds), _toConsumableArray(polyline))),
+                    _upds = _t$dealUpdate2.upds,
+                    _otherads = _t$dealUpdate2.otherads;
+                //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
+
+
+                var _iteratorNormalCompletion2 = true;
+                var _didIteratorError2 = false;
+                var _iteratorError2 = undefined;
+
+                try {
+                    for (var _iterator2 = _deletedDataIDs[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+                        var _id = _step2.value;
+
+                        t.removeGraphic(_id, 'line');
+                    }
+                    //增加
+                } catch (err) {
+                    _didIteratorError2 = true;
+                    _iteratorError2 = err;
+                } finally {
+                    try {
+                        if (!_iteratorNormalCompletion2 && _iterator2.return) {
+                            _iterator2.return();
+                        }
+                    } finally {
+                        if (_didIteratorError2) {
+                            throw _iteratorError2;
+                        }
+                    }
+                }
+
+                t.addLine([].concat(_toConsumableArray(_ads), _toConsumableArray(_otherads)));
+                //更新
+                t.updateLine([].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;
+                var newMapPolygons = mapPolygons;
+                if (!!t.editId) {
+                    oldMapPolygons = t.props.mapPolygons.filter(function (item) {
+                        return item.id !== editGraphicId;
+                    });
+                    newMapPolygons = mapPolygons.filter(function (item) {
+                        return item.id !== editGraphicId;
+                    });
+                }
+
+                var _t$dataMatch3 = t.dataMatch(oldMapPolygons, newMapPolygons, 'id'),
+                    _deletedDataIDs2 = _t$dataMatch3.deletedDataIDs,
+                    _addedData2 = _t$dataMatch3.addedData,
+                    _updatedData2 = _t$dataMatch3.updatedData;
+
+                var _t$dealAdd3 = t.dealAdd(_addedData2, [].concat(_toConsumableArray(rectangle), _toConsumableArray(polygon), _toConsumableArray(polygonIds))),
+                    _ads2 = _t$dealAdd3.ads,
+                    _otherupds2 = _t$dealAdd3.otherupds;
+
+                var _t$dealUpdate3 = t.dealUpdate(_updatedData2, [].concat(_toConsumableArray(rectangle), _toConsumableArray(polygon), _toConsumableArray(polygonIds))),
+                    _upds2 = _t$dealUpdate3.upds,
+                    _otherads2 = _t$dealUpdate3.otherads;
+                //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
+
+
+                var _iteratorNormalCompletion3 = true;
+                var _didIteratorError3 = false;
+                var _iteratorError3 = undefined;
+
+                try {
+                    for (var _iterator3 = _deletedDataIDs2[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+                        var _id2 = _step3.value;
+
+                        t.removeGraphic(_id2, 'polygon');
+                    }
+                    //增加
+                } catch (err) {
+                    _didIteratorError3 = true;
+                    _iteratorError3 = err;
+                } finally {
+                    try {
+                        if (!_iteratorNormalCompletion3 && _iterator3.return) {
+                            _iterator3.return();
+                        }
+                    } finally {
+                        if (_didIteratorError3) {
+                            throw _iteratorError3;
+                        }
+                    }
+                }
+
+                t.addPolygon([].concat(_toConsumableArray(_ads2), _toConsumableArray(_otherads2)));
+                //更新
+                t.updatePolygon([].concat(_toConsumableArray(_upds2), _toConsumableArray(_otherupds2)));
+            }
+            /*
+                圆数据处理
+                先全删除,再新增
+            */
+            if (mapCircles instanceof Array && t.props.mapCircles instanceof Array && !t.deepEqual(mapCircles, t.props.mapCircles)) {
+                var oldMapCircles = t.props.mapCircles;
+                var newMapCircles = mapCircles;
+                if (!!t.editId) {
+                    oldMapCircles = t.props.mapCircles.filter(function (item) {
+                        return item.id !== editGraphicId;
+                    });
+                    newMapCircles = mapCircles.filter(function (item) {
+                        return item.id !== editGraphicId;
+                    });
+                }
+
+                var _t$dataMatch4 = t.dataMatch(oldMapCircles, newMapCircles, 'id'),
+                    _deletedDataIDs3 = _t$dataMatch4.deletedDataIDs,
+                    _addedData3 = _t$dataMatch4.addedData,
+                    _updatedData3 = _t$dataMatch4.updatedData;
+
+                var _t$dealAdd4 = t.dealAdd(_addedData3, [].concat(_toConsumableArray(circleIds), _toConsumableArray(circle))),
+                    _ads3 = _t$dealAdd4.ads,
+                    _otherupds3 = _t$dealAdd4.otherupds;
+
+                var _t$dealUpdate4 = t.dealUpdate(_updatedData3, [].concat(_toConsumableArray(circleIds), _toConsumableArray(circle))),
+                    _upds3 = _t$dealUpdate4.upds,
+                    _otherads3 = _t$dealUpdate4.otherads;
+                //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
+
+
+                var _iteratorNormalCompletion4 = true;
+                var _didIteratorError4 = false;
+                var _iteratorError4 = undefined;
+
+                try {
+                    for (var _iterator4 = _deletedDataIDs3[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+                        var _id3 = _step4.value;
+
+                        t.removeGraphic(_id3, 'circle');
+                    }
+                    //增加
+                } catch (err) {
+                    _didIteratorError4 = true;
+                    _iteratorError4 = err;
+                } finally {
+                    try {
+                        if (!_iteratorNormalCompletion4 && _iterator4.return) {
+                            _iterator4.return();
+                        }
+                    } finally {
+                        if (_didIteratorError4) {
+                            throw _iteratorError4;
+                        }
+                    }
+                }
+
+                t.addCircle([].concat(_toConsumableArray(_ads3), _toConsumableArray(_otherads3)));
+                //更新
+                t.updateCircle([].concat(_toConsumableArray(_upds3), _toConsumableArray(_otherupds3)));
+            }
+            //图元编辑调用
+            if (typeof isDoEdit == 'boolean' && isDoEdit || isDoEdit && isDoEdit !== t.props.isDoEdit) {
+                t.doEdit(editGraphicId);
+            }
+            // 获取热力图
+            if (heatMapData && !t.deepEqual(heatMapData, t.props.heatMapData)) {
+                t.heatMapOverlay(heatMapData);
+            }
+            //清空地图
+            if (typeof isClearAll == 'boolean' && isClearAll || isClearAll && isClearAll !== t.props.isClearAll) {
+                t.clearAll();
+            }
+            //测距工具调用
+            if (typeof isRangingTool == 'boolean' && isRangingTool || isRangingTool && isRangingTool !== t.props.isRangingTool) {
+                t.vtxRangingTool(mapRangingTool);
+            }
+            /*设置指定图元展示*/
+            if (typeof setVisiblePoints == 'boolean' && setVisiblePoints || setVisiblePoints && setVisiblePoints !== t.props.setVisiblePoints) {
+                t.setVisiblePoints(mapVisiblePoints);
+            }
+            //设置中心点
+            if (typeof setCenter == 'boolean' && setCenter || setCenter && setCenter !== t.props.setCenter) {
+                if (!(t.getCurrentCenter().lng == mapCenter[0] && t.getCurrentCenter().lat == mapCenter[1])) {
+                    t.setCenter(mapCenter);
+                }
+            }
+            //设置点聚合
+            if (typeof setCluster == 'boolean' && setCluster || setCluster && setCluster !== t.props.setCluster) {
+                t.cluster(mapCluster);
+            }
+            //图元编辑调用
+            if (typeof isDoEdit == 'boolean' && isDoEdit || isDoEdit && isDoEdit !== t.props.isDoEdit) {
+                t.doEdit(editGraphicId);
+            }
+            //关闭图元编辑
+            if (typeof isEndEdit == 'boolean' && isEndEdit || isEndEdit && isEndEdit !== t.props.isEndEdit) {
+                t.endEdit();
+            }
+            //绘制图元
+            if (typeof isDraw == 'boolean' && isDraw || isDraw && isDraw !== t.props.isDraw) {
+                t.draw(mapDraw);
+            }
+            //关闭绘制
+            if (typeof isCloseDraw == 'boolean' && isCloseDraw || isCloseDraw && isCloseDraw !== t.props.isCloseDraw) {
+                t.closeDraw();
+            }
+            //单独删除操作
+            if (typeof isRemove == 'boolean' && isRemove || isRemove && isRemove !== t.props.isRemove) {
+                mapRemove.map(function (item, index) {
+                    t.removeGraphic(item.id, item.type);
+                });
+            }
+            //设置区域限制
+            if (typeof isSetAreaRestriction == 'boolean' && isSetAreaRestriction || isSetAreaRestriction && isSetAreaRestriction !== t.props.isSetAreaRestriction && areaRestriction && !!areaRestriction[0] && !!areaRestriction[1]) {
+                t.setAreaRestriction(areaRestriction);
+            }
+            //关闭区域限制
+            if (typeof isClearAreaRestriction == 'boolean' && isClearAreaRestriction || isClearAreaRestriction && isClearAreaRestriction !== t.props.isClearAreaRestriction) {
+                t.clearAreaRestriction();
+            }
+        }
+        // 地图事件
+        //地图点击事件
+
+    }, {
+        key: 'clickMap',
+        value: function clickMap(e) {
+            var t = this;
+            if (typeof t.props.clickMap === 'function') {
+                var obj = t.getMapExtent();
+                obj.e = e;
+                obj.clickLngLat = {
+                    lng: (e.mapPoint || {}).x,
+                    lat: (e.mapPoint || {}).y
+                };
+                obj.pixel = {
+                    x: (e.screenPoint || {}).x,
+                    y: (e.screenPoint || {}).y
+                };
+                t.props.clickMap(obj);
+            }
+        }
+        // 要素鼠标悬浮事件
+
+    }, {
+        key: 'mouseOverGraphic',
+        value: function mouseOverGraphic(id, e) {
+            var t = this;
+            if (t.state.editId == id) return false;
+            if (typeof t.props.mouseOverGraphic === 'function') {
+                var obj = {
+                    e: e,
+                    id: id,
+                    param: t.getGraphic(id),
+                    top: e.pixel_ ? e.pixel_[0] : undefined, //当前点所在的位置(屏幕)
+                    left: e.pixel_ ? e.pixel_[1] : undefined
+                };
+                t.props.mouseOverGraphic(obj);
+            }
+        }
+        // 要素鼠标移开事件
+
+    }, {
+        key: 'mouseOutGraphic',
+        value: function mouseOutGraphic(id, e) {
+            var t = this;
+            //编辑中的图元关闭其他事件返回
+            if (t.state.editId == id) return false;
+            if (typeof t.props.mouseOutGraphic === 'function') {
+                var obj = {
+                    e: e,
+                    id: id,
+                    param: t.getGraphic(id),
+                    top: e.pixel_ ? e.pixel_[0] : undefined, //当前点所在的位置(屏幕)
+                    left: e.pixel_ ? e.pixel_[1] : undefined
+                };
+                t.props.mouseOutGraphic(obj);
+            }
+        }
+        //地图拖动之前事件
+
+    }, {
+        key: 'dragMapStart',
+        value: function dragMapStart(e) {
+            var t = this;
+            if (typeof t.props.dragMapStart === 'function') {
+                var obj = t.getMapExtent();
+                obj.e = e;
+                t.props.dragMapStart(obj);
+            }
+        }
+        //地图拖动结束后事件
+
+    }, {
+        key: 'dragMapEnd',
+        value: function dragMapEnd(e) {
+            var t = this;
+            if (typeof t.props.dragMapEnd === 'function') {
+                var obj = t.getMapExtent();
+                obj.e = e;
+                t.props.dragMapEnd(obj);
+            }
+        }
+        //热力图
+
+    }, {
+        key: 'heatMapOverlay',
+        value: function heatMapOverlay() {
+            var d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+            var t = this;
+            var cg = {
+                radius: 20,
+                max: 100,
+                visible: true,
+                opacity: 0.7,
+                gradient: ['#00f', '#0ff', '#0f0', '#ff0', '#f00']
+            };
+            if (d.config) {
+                cg = _extends({}, cg, d.config);
+            }
+            var gradient = [];
+            if (cg.gradient) {
+                for (var key in cg.gradient) {
+                    gradient.push(cg.gradient[key]);
+                }
+                cg.gradient = gradient;
+            }
+            var heatData = {
+                type: 'FeatureCollection',
+                features: (d.data || []).map(function (item) {
+                    return {
+                        type: 'Feature',
+                        properties: {
+                            weight: item.count ? item.count / 100 : 0.5
+                        },
+                        geometry: {
+                            type: 'Point',
+                            coordinates: [item.lng, item.lat]
+                        }
+                    };
+                })
+            };
+            var heatSource = new ol.source.Vector({
+                features: new ol.format.GeoJSON().readFeatures(heatData)
+            });
+            t.heatmap = new ol.layer.Heatmap({
+                name: 'heatmap',
+                source: heatSource,
+                radius: cg.radius,
+                visible: cg.visible,
+                blur: eval(cg.opacity) * 100,
+                gradient: gradient,
+                weight: function weight(e) {
+                    return e.getProperties().count; //根据权重展示热力图！关键点，weight范围为：0-1！！！
+                }
+            });
+            t.state.gis.addLayer(t.heatmap);
+        }
+        //地图移动之前事件
+
+    }, {
+        key: 'moveStart',
+        value: function moveStart(e) {
+            var t = this;
+            if (typeof t.props.moveStart === 'function') {
+                var obj = t.getMapExtent();
+                obj.e = e;
+                t.props.moveStart(obj);
+            }
+        }
+        //地图移动结束后事件
+
+    }, {
+        key: 'moveEnd',
+        value: function moveEnd(e) {
+            var t = this;
+            if (typeof t.props.moveEnd === 'function') {
+                var obj = t.getMapExtent();
+                obj.e = e;
+                t.props.moveEnd(obj);
+            }
+        }
+        //地图更改缩放级别开始时触发触发此事件
+
+    }, {
+        key: 'zoomStart',
+        value: function zoomStart(e) {
+            var t = this;
+            if (typeof t.props.zoomStart === 'function') {
+                var obj = t.getMapExtent();
+                obj.e = e;
+                t.props.zoomStart(obj);
+            }
+        }
+        //地图更改缩放级别结束时触发触发此事件
+
+    }, {
+        key: 'zoomEnd',
+        value: function zoomEnd(e) {
+            var t = this;
+            if (typeof t.props.zoomEnd === 'function') {
+                var obj = t.getMapExtent();
+                obj.e = e;
+                t.props.zoomEnd(obj);
+            }
+        }
+        // 图元点击事件
+
+    }, {
+        key: 'clickGraphic',
+        value: function clickGraphic(id, e) {
+            var t = this;
+            if (id) {
+                //编辑中的图元关闭其他事件返回
+                if (t.editId == id) return false;
+                if (typeof t.props.clickGraphic === 'function') {
+                    var _e$pixel_ = _slicedToArray(e.pixel_, 2),
+                        clientX = _e$pixel_[0],
+                        clientY = _e$pixel_[1];
+
+                    var param = t.getGraphic(id, clientX, clientY);
+                    var obj = {
+                        param: param,
+                        type: param.geometry.type, //图元类型
+                        attributes: _extends({}, param.attributes.other, { config: param.attributes.config }), //添加时图元信息
+                        top: clientY, //当前点所在的位置(屏幕)
+                        left: clientX,
+                        e: e
+                    };
+                    t.props.clickGraphic(obj);
+                }
+            }
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            //关闭moveTo定时
+            var t = this;
+            if (t.moveToTimer) {
+                clearInterval(t.moveToTimer);
+            }
+            //关闭animation定时
+            for (var j in t.animTimer) {
+                if (t.animTimer[j]) {
+                    clearInterval(t.animTimer[j]);
+                }
+            }
+            window.OlMap[t.state.mapId] = null;
+        }
+    }]);
+
+    return OlMap;
+}(_react2.default.Component);
+
+exports.default = OlMap;
+
+
+function getRgbColor(color, opacity) {
+    var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+    if (!reg.test(color)) {
+        return;
+    }
+    var newStr = color.toLowerCase().replace(/\#/g, '');
+    var len = newStr.length;
+    if (len == 3) {
+        var t = '';
+        for (var i = 0; i < len; i++) {
+            t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1));
+        }
+        newStr = t;
+    }
+    var arr = []; //将字符串分隔，两个两个的分隔
+    for (var i = 0; i < 6; i = i + 2) {
+        var s = newStr.slice(i, i + 2);
+        arr.push(parseInt('0x' + s));
+    }
+    return 'rgba(' + arr.join(',') + ',' + opacity + ')';
+}
+module.exports = exports['default'];