@vtx/map 1.1.5 → 1.1.7-beta.0

package/lib/VtxMap/OlMap/Map.js

@@ -96,13 +96,26 @@ var OlMap = function (_React$Component) {
             sketch: null,
             helpTooltipElement: null,
             helpTooltip: null,
-            deleteContent: null,
             measureTooltipElement: null,
             measureTooltip: null,
+            deleteToolTipElement: null,
             deleteToolTip: null,
             continuePolygonMsg: '点击继续绘制图形',
             continueLineMsg: '点击继续绘制线',
-            listener: null
+            listener: null,
+            drawElements: [],
+            drawLayer: null,
+            feature: null,
+            draw: null
+        };
+        _this.clusterInfo = {
+            clickFeature: null,
+            clickResolution: null,
+            hoverFeature: null,
+            clusterSource: null,
+            clusterHulls: null,
+            clusters: null,
+            clusterCircles: null
         };
         _this.state = {
             gis: null, //地图对象
@@ -142,7 +155,12 @@ var OlMap = function (_React$Component) {
                                 resolve();
                             });
                         });
-                        Promise.all([PointCollection]).then(function () {
+                        var Client9 = new Promise(function (resolve, reject) {
+                            $.getScript(_default2.default.openlayerServerURL + '/iclient9-openlayers.js', function () {
+                                resolve();
+                            });
+                        });
+                        Promise.all([PointCollection, Client9]).then(function () {
                             resolve(window.OlMap);
                         });
                     });
@@ -318,10 +336,10 @@ var OlMap = function (_React$Component) {
             var projection = olProps.projection,
                 olCoverage = olProps.olCoverage;
 
-            if (window.OlMap) {
-                window.OlMap[mapId] = null;
+            if (window.VtxMap) {
+                window.VtxMap[mapId] = null;
             } else {
-                window.OlMap = {};
+                window.VtxMap = {};
             }
             if (!minZoom) {
                 minZoom = 2;
@@ -332,7 +350,7 @@ var OlMap = function (_React$Component) {
             if (!projection) {
                 projection = 'EPSG:4326';
             }
-            window.OlMap[mapId] = t.state.gis = new ol.Map({
+            window.VtxMap[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], //中心点
@@ -357,14 +375,22 @@ var OlMap = function (_React$Component) {
             });
             if ((olCoverage || []).length > 0) {
                 (olCoverage || []).map(function (item) {
-                    if (OL_SCREEN[item.coverage]) {
-                        var _layer = eval(OL_SCREEN[item.coverage].initLayer);
+                    if (item.coverage.startsWith("http") || item.coverage.startsWith('/')) {
+                        // 超图图层
+                        var _layer = new ol.layer.Tile({
+                            source: new ol.source.TileSuperMapRest({
+                                url: item.coverage
+                            })
+                        });
                         t.state.gis.addLayer(_layer);
+                    } else if (OL_SCREEN[item.coverage]) {
+                        var _layer2 = eval(OL_SCREEN[item.coverage].initLayer);
+                        t.state.gis.addLayer(_layer2);
                     }
                 });
             } else {
-                var _layer2 = eval(OL_SCREEN.default.initLayer);
-                t.state.gis.addLayer(_layer2);
+                var _layer3 = eval(OL_SCREEN.default.initLayer);
+                t.state.gis.addLayer(_layer3);
             }
         }
         // 设置中心点
@@ -633,7 +659,7 @@ var OlMap = function (_React$Component) {
                     if ('editGraphicChange' in t.props && typeof t.props.editGraphicChange == 'function') {
                         t.props.editGraphicChange(param);
                     }
-                    t.GM.setGraphic(id, feature).setGraphicParam(id, _extends({}, param));
+                    t.GM.setGraphic(id, feature).setGraphicParam(id, _extends({}, param, { source: gp.source }));
                 });
             }
             t.editId = id;
@@ -928,28 +954,94 @@ var OlMap = function (_React$Component) {
                 };
             }
         }
-        // 绘图时创建绘图结果提示
+        /*工具方法*/
 
     }, {
-        key: 'createMeasureTooltip',
-        value: function createMeasureTooltip() {
+        key: 'vtxRangingTool',
+        value: function vtxRangingTool() {
             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
+            var source = new ol.source.Vector({});
+            t.rangingInfo.drawLayer = new ol.layer.Vector({
+                source: source,
+                style: new ol.style.Style({
+                    fill: new ol.style.Fill({
+                        color: 'rgba(255, 255, 255, 0.2)'
+                    }),
+                    stroke: new ol.style.Stroke({
+                        color: '#ffcc33',
+                        width: 4
+                    }),
+                    image: new ol.style.Circle({
+                        radius: 7,
+                        fill: new ol.style.Fill({
+                            color: '#ffcc33'
+                        })
+                    })
+                })
+            });
+            t.rangingInfo.draw = new ol.interaction.Draw({
+                source: source,
+                type: 'LineString',
+                style: new ol.style.Style({
+                    fill: new ol.style.Fill({
+                        color: 'rgba(255, 255, 255, 0.2)'
+                    }),
+                    stroke: new ol.style.Stroke({
+                        color: 'rgba(0, 0, 0, 0.5)',
+                        lineDash: [10, 10],
+                        width: 4
+                    }),
+                    image: new ol.style.Circle({
+                        radius: 5,
+                        stroke: new ol.style.Stroke({
+                            color: 'rgba(0, 0, 0, 0.7)'
+                        }),
+                        fill: new ol.style.Fill({
+                            color: 'rgba(255, 255, 255, 0.2)'
+                        })
+                    })
+                })
+            });
+            var obj = {};
+            t.createHelpTooltip();
+            t.createMeasureTooltip();
+            t.createDeleteTooltip();
+            t.state.gis.addLayer(t.rangingInfo.drawLayer);
+            t.state.gis.addInteraction(t.rangingInfo.draw);
+            // 开始监听绘制
+            t.rangingInfo.draw.on('drawstart', function (evt) {
+                t.rangingInfo.feature = evt.feature;
+                var tooltipCoord = evt.coordinate;
+                t.rangingInfo.listener = evt.feature.getGeometry().on('change', function (evt) {
+                    var geom = evt.target;
+                    var flatCoordinates = geom.flatCoordinates;
+
+                    var lngLats = [[flatCoordinates[0], flatCoordinates[1]], [flatCoordinates[2], flatCoordinates[3]]];
+                    var output = t.formatLength(geom);
+                    tooltipCoord = geom.getLastCoordinate();
+                    obj = {
+                        distance: output,
+                        lnglats: lngLats
+                    };
+                    t.rangingInfo.measureTooltipElement.innerHTML = output;
+                    t.rangingInfo.measureTooltip.setPosition(tooltipCoord);
+                    t.rangingInfo.deleteToolTip.setPosition(tooltipCoord);
+                    t.rangingInfo.deleteToolTip.setOffset([20, 10]);
+                });
+            });
+            // 双击绘制完成
+            t.rangingInfo.draw.on('drawend', function () {
+                t.rangingInfo.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
+                t.rangingInfo.measureTooltip.setOffset([0, -7]);
+                t.rangingInfo.feature = null;
+                t.rangingInfo.measureTooltipElement = null;
+                // t.createMeasureTooltip();
+                new ol.Observable.unByKey(t.rangingInfo.listener);
+                t.state.gis.removeInteraction(t.rangingInfo.draw);
+                if ('mapRangingTool' in t.props) {
+                    t.props.mapRangingTool(obj);
+                }
             });
-            gis.addOverlay(drawInfo.measureTooltip);
         }
         // 绘图时创建提示
 
@@ -957,42 +1049,88 @@ var OlMap = function (_React$Component) {
         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);
+            if (t.rangingTool.helpTooltipElement) {
+                t.rangingTool.helpTooltipElement.parentNode.removeChild(t.rangingTool.helpTooltipElement);
             }
-            drawInfo.helpTooltipElement = document.createElement('div');
-            drawInfo.helpTooltipElement.className = 'ol-tooltip hidden';
-            drawInfo.helpTooltip = new ol.Overlay({
-                element: drawInfo.helpTooltipElement,
+            t.rangingTool.helpTooltipElement = document.createElement('div');
+            t.rangingTool.helpTooltipElement.className = 'ol-tooltip hidden';
+            t.rangingTool.helpTooltip = new ol.Overlay({
+                element: t.rangingTool.helpTooltipElement,
                 offset: [15, 0],
                 positioning: 'center-left'
             });
-            gis.addOverlay(drawInfo.helpTooltip);
+            t.state.gis.addOverlay(t.rangingTool.helpTooltip);
         }
-        /*工具方法*/
+        // 工具画图提示
 
     }, {
-        key: 'vtxRangingTool',
-        value: function vtxRangingTool(mapRangingTool) {
+        key: 'createMeasureTooltip',
+        value: function createMeasureTooltip() {
             var t = this;
-            //关闭测距时双击地图缩放功能
-            t.state.gis.disableDoubleClickZoom();
-            //开启测距状态
-            if (!t.rangingTool.isRanging) {
-                t.rangingTool.isRanging = true;
-            }
-            //初始测距回调
-            if (!t.rangingTool.mapRangingTool) {
-                t.rangingTool.mapRangingTool = mapRangingTool;
+            if (t.rangingInfo.measureTooltipElement) {
+                t.rangingInfo.measureTooltipElement.parentNode.removeChild(t.rangingInfo.measureTooltipElement);
             }
+            t.rangingInfo.measureTooltipElement = document.createElement('div');
+            t.rangingInfo.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
+            t.rangingInfo.measureTooltip = new ol.Overlay({
+                element: t.rangingInfo.measureTooltipElement,
+                offset: [0, -15],
+                positioning: 'bottom-center',
+                stopEvent: false,
+                insertFirst: false
+            });
+            t.state.gis.addOverlay(t.rangingInfo.measureTooltip);
         }
-        // 获取地图的当前位置状态信息
+        // 创建删除提示
+
+    }, {
+        key: 'createDeleteTooltip',
+        value: function createDeleteTooltip() {
+            var t = this;
+            if (t.rangingInfo.deleteToolTipElement) {
+                t.rangingInfo.deleteToolTipElement.parentNode.removeChild(t.rangingInfo.deleteToolTipElement);
+            }
+            t.rangingInfo.deleteToolTipElement = document.createElement('div');
+            t.rangingInfo.deleteToolTipElement.className = 'ol-tooltip-delete';
+            t.rangingInfo.deleteToolTipElement.innerHTML = 'X';
+            t.rangingInfo.deleteToolTipElement.addEventListener('click', function (e) {
+                t.rangingInfo.measureTooltipElement = null;
+                t.rangingInfo.helpTooltipElement = null;
+                t.rangingInfo.deleteToolTipElement = null;
+                t.state.gis.removeOverlay(t.rangingInfo.measureTooltip);
+                t.state.gis.removeOverlay(t.rangingTool.helpTooltip);
+                t.state.gis.removeOverlay(t.rangingInfo.deleteToolTip);
+                new ol.Observable.unByKey(t.rangingInfo.listener);
+                t.state.gis.removeInteraction(t.rangingInfo.draw);
+                t.state.gis.removeLayer(t.rangingInfo.drawLayer);
+            });
+            t.rangingInfo.deleteToolTip = new ol.Overlay({
+                element: t.rangingInfo.deleteToolTipElement,
+                offset: [15, 15],
+                positioning: 'bottom-center',
+                stopEvent: false,
+                insertFirst: true
+            });
+            t.state.gis.addOverlay(t.rangingInfo.deleteToolTip);
+        }
+    }, {
+        key: 'formatLength',
+        value: function formatLength(line) {
+            var flatCoordinates = line.flatCoordinates;
 
+            var length = new ol.sphere.getDistance([flatCoordinates[0], flatCoordinates[1]], [flatCoordinates[2], flatCoordinates[3]]);
+            var output = '';
+            if (length > 100) {
+                output = Math.round(length / 1000 * 100) / 100 + ' ' + 'km';
+            } else {
+                output = Math.round(length * 100) / 100 + ' ' + 'm';
+            }
+            return output;
+        }
     }, {
         key: 'getMapExtent',
+
+        // 获取地图的当前位置状态信息
         value: function getMapExtent() {
             var t = this;
             var gis = t.state.gis;
@@ -1022,10 +1160,10 @@ var OlMap = function (_React$Component) {
             }
         }
         //将制定图元展示在视野内 (强制改变地图中心位置)
-        /*
-            参数arg格式如下1,2
-            1.string   格式如:'1,a,2,3,4'
-            2.数组 ['1','2']
+        /*
+            参数arg格式如下1,2
+            1.string   格式如:'1,a,2,3,4'
+            2.数组 ['1','2']
         */
 
     }, {
@@ -1060,28 +1198,31 @@ var OlMap = function (_React$Component) {
             }
             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);
-                }
+                ary = arg;
             }
-            if (!obj) {
-                return false;
+            for (var i = 0; i < ary.length; i++) {
+                var g = t.GM.getGraphicParam(ary[i]);
+                if (g) {
+                    switch (g.geometry.type) {
+                        case 'point':
+                            obj.push([g.geometry.x, g.geometry.y]);
+                        case 'circle':
+                            obj.push([g.geometry.x, g.geometry.y]);
+                            break;
+                        case 'polyline':
+                            obj = [].concat(_toConsumableArray(obj), _toConsumableArray(g.geometry.paths));
+                            break;
+                        case 'polygon':
+                            obj = [].concat(_toConsumableArray(obj), _toConsumableArray(g.geometry.rings));
+                            break;
+                    }
+                }
             }
-            // let zoom = t.state.gis.getView().getZoom();
-            if (type) {
-                gis.getView().fit(obj, gis.getSize());
+            if (obj.length > 0) {
+                var displayRange = new ol.extent.boundingExtent(obj);
+                gis.getView().fit(displayRange, 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',
@@ -1340,6 +1481,7 @@ var OlMap = function (_React$Component) {
             var t = this;
             var ps = [];
             var psids = [].concat(_toConsumableArray(t.state.pointIds));
+            console.log('addPoint', mapPoints);
             mapPoints.map(function (item, index) {
                 //如果id重复,直接跳过不执行.
                 if (_this2.GM.isRepetition(item.id)) {
@@ -1484,6 +1626,7 @@ var OlMap = function (_React$Component) {
             var mapPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
 
             var t = this;
+            console.log('updatePoint', mapPoints);
             mapPoints.map(function (item, index) {
                 //判断图元是否存在.
                 if (_this3.GM.isRepetition(item.id)) {
@@ -1493,6 +1636,7 @@ var OlMap = function (_React$Component) {
                         return false;
                     }
                     var gc = t.GM.getGraphic(item.id);
+                    var gp = t.GM.getGraphicParam(item.id);
                     var cg = {
                         width: 30,
                         height: 30,
@@ -1569,7 +1713,7 @@ var OlMap = function (_React$Component) {
                             x: item.longitude,
                             y: item.latitude
                         },
-                        source: gc.source
+                        source: gp.source
                     });
                 } else {
                     console.warn('\u66F4\u65B0\u7684\u70B9\u4F4Did\u4E0D\u5B58\u5728!');
@@ -1820,6 +1964,7 @@ var OlMap = function (_React$Component) {
                     }
                     //获取原有的图元
                     var gc = _this7.GM.getGraphic(item.id);
+                    var gp = t.GM.getGraphicParam(item.id);
                     //获取原有的面属性,转换key值
                     var cg = {
                         lineType: 'solid',
@@ -1857,7 +2002,7 @@ var OlMap = function (_React$Component) {
                             type: 'polygon',
                             rings: pts
                         },
-                        source: gc.source
+                        source: gp.source
                     });
                 } else {
                     console.warn('\u66F4\u65B0\u7684\u591A\u8FB9\u5F62id\u4E0D\u5B58\u5728!');
@@ -1968,6 +2113,7 @@ var OlMap = function (_React$Component) {
                 }
                 //获取原有的图元
                 var gc = t.GM.getGraphic(item.id);
+                var gp = t.GM.getGraphicParam(item.id);
                 //获取原有的面属性,转换key值
                 var cg = {
                     lineType: 'solid',
@@ -2003,7 +2149,7 @@ var OlMap = function (_React$Component) {
                         y: parseFloat(item.latitude),
                         radius: parseFloat(item.radius)
                     },
-                    source: gc.source
+                    source: gp.source
                 });
             });
             //刷新图元
@@ -2113,11 +2259,28 @@ var OlMap = function (_React$Component) {
                     return item.name == 'heatMap';
                 })[0];
                 hMap.getSource().clear();
-                map.removeLayer(layer);
+                gis.removeLayer(layer);
             }
             t.heatmap = null;
             t.movePoints = [];
+            t.pointLayers.map(function (item) {
+                gis.removeLayer(item);
+                t.pointLayers = [];
+            });
             t.clearAllPointCollection();
+            t.closeDraw();
+            if (t.clusterInfo.clusterHulls || t.clusterInfo.clusters || t.clusterInfo.clusterCircles) {
+                t.clusterHulls.getSource().clear();
+                t.clusterInfo.clusterSource = null;
+                gis.removeLayer(t.clusterInfo.clusterHulls);
+                gis.removeLayer(t.clusterInfo.clusters);
+                gis.removeLayer(t.clusterInfo.clusterCircles);
+                t.clusterInfo.clusterHulls = null;
+                t.clusterInfo.clusters = null;
+                t.clusterInfo.clusterCircles = null;
+            }
+            //清空缓存数据
+            t.GM.clearAll();
             //循环所有id删除
             var _t$state = t.state,
                 pointIds = _t$state.pointIds,
@@ -2249,6 +2412,152 @@ var OlMap = function (_React$Component) {
             if (y > ymax1) y = ymax1 - 0.1;
             t.state.gis.getView().setCenter([x, y]);
         }
+        //聚合地图图元(arg为空时聚合全部点)
+
+    }, {
+        key: 'cluster',
+        value: function cluster(arg) {
+            var t = this;
+            var ary = [];
+            if (!arg) {
+                var pointIds = t.state.pointIds;
+
+                ary = pointIds;
+            } else {
+                if (Object.prototype.toString.apply(arg) === '[object Array]') {
+                    ary = arg;
+                } else if (typeof arg === 'string') {
+                    ary = arg.split(',');
+                }
+            }
+            t.pointLayers.map(function (item) {
+                t.state.gis.removeLayer(item.layer);
+                t.pointLayers = [];
+            });
+            var ms = this.GM.getMoreGraphic(ary).filter(function (item, index) {
+                // return !item && item != 0 ? false : true;
+                return item && item.getGeometry().getType() === 'Point' && !item.label;
+            });
+            var source = new ol.source.Vector({
+                features: ms
+            });
+            t.clusterInfo.clusterSource = new ol.source.Cluster({
+                distance: 80,
+                minDistance: 0,
+                source: source
+            });
+            t.clusterInfo.clusterHulls = new ol.layer.Vector({
+                source: t.clusterInfo.clusterSource,
+                style: clusterHullStyle
+            });
+            t.state.gis.addLayer(t.clusterInfo.clusterHulls);
+            t.clusterInfo.clusters = new ol.layer.Vector({
+                source: t.clusterInfo.clusterSource,
+                style: clusterStyle
+            });
+            t.state.gis.addLayer(t.clusterInfo.clusters);
+            t.clusterInfo.clusterCircles = new ol.layer.Vector({
+                source: t.clusterInfo.clusterSource,
+                style: clusterCircleStyle
+            });
+            t.state.gis.addLayer(t.clusterInfo.clusterCircles);
+            function clusterMemberStyle(clusterMember) {
+                var style = clusterMember.getStyle();
+                var image = style.getImage();
+                return new ol.style.Style({
+                    geometry: clusterMember.getGeometry(),
+                    image: image
+                });
+            }
+            function clusterCircleStyle(cluster, resolution) {
+                if (cluster !== t.clusterInfo.clickFeature || resolution !== t.clusterInfo.clickResolution) {
+                    return;
+                }
+                var clusterMembers = cluster.get('features');
+                var centerCoordinates = cluster.getGeometry().getCoordinates();
+                return generatePointsCircle(clusterMembers.length, cluster.getGeometry().getCoordinates(), resolution).reduce(function (styles, coordinates, i) {
+                    var point = new ol.geom.Point(coordinates);
+                    var line = new ol.geom.LineString([centerCoordinates, coordinates]);
+                    styles.unshift(new ol.style.Style({
+                        geometry: line,
+                        stroke: new ol.style.Stroke({
+                            color: 'rgba(204, 85, 0, 1)',
+                            width: 1.5
+                        })
+                    }));
+                    styles.push(clusterMemberStyle(new ol.Feature(_extends({}, clusterMembers[i].getProperties(), {
+                        geometry: point
+                    }))));
+                    return styles;
+                }, []);
+            }
+            function generatePointsCircle(count, clusterCenter, resolution) {
+                var circumference = 1 * 28 * (2 + count);
+                var legLength = circumference / (Math.PI * 2); //radius from circumference
+                var angleStep = Math.PI * 2 / count;
+                var res = [];
+                var angle = void 0;
+                legLength = Math.max(legLength, 35) * resolution; // Minimum distance to get outside the cluster icon.
+                for (var i = 0; i < count; ++i) {
+                    // Clockwise, like spiral.
+                    angle = Math.PI / 2 + i * angleStep;
+                    res.push([clusterCenter[0] + legLength * Math.cos(angle), clusterCenter[1] + legLength * Math.sin(angle)]);
+                }
+                return res;
+            }
+            function clusterHullStyle(cluster) {
+                if (cluster !== t.clusterInfo.hoverFeature) {
+                    return;
+                }
+                var originalFeatures = cluster.get('features');
+                var points = originalFeatures.map(function (feature) {
+                    return feature.getGeometry().getCoordinates();
+                });
+                return new ol.style.Style({
+                    geometry: new ol.geom.Polygon(points),
+                    fill: new ol.style.Fill({
+                        color: 'rgba(255, 153, 0, 0.4)'
+                    }),
+                    stroke: new ol.style.Stroke({
+                        color: 'rgba(204, 85, 0, 1)',
+                        width: 1.5
+                    })
+                });
+            }
+            function clusterStyle(feature) {
+                var size = feature.get('features').length;
+                if (size > 1) {
+                    return [new ol.style.Style({
+                        image: new ol.style.Circle({
+                            radius: 20,
+                            fill: new ol.style.Fill({
+                                color: 'rgba(255, 153, 102, 0.3)'
+                            })
+                        })
+                    }), new ol.style.Style({
+                        image: new ol.style.Circle({
+                            radius: 14,
+                            fill: new ol.style.Fill({
+                                color: 'rgba(255, 165, 0, 0.7)'
+                            })
+                        }),
+                        text: new ol.style.Text({
+                            text: size.toString(),
+                            fill: new ol.style.Fill({
+                                color: '#fff'
+                            }),
+                            stroke: new ol.style.Stroke({
+                                color: 'rgba(0, 0, 0, 0.6)',
+                                width: 3
+                            })
+                        })
+                    })];
+                } else {
+                    var originalFeature = feature.get('features')[0];
+                    return clusterMemberStyle(originalFeature);
+                }
+            }
+        }
         /*公共方法*/
         //判断extent1是否在extent2内部
 
@@ -2284,7 +2593,7 @@ var OlMap = function (_React$Component) {
     }, {
         key: 'calculatePointsDistance',
         value: function calculatePointsDistance(fp, ep) {
-            return Math.round(ol.sphere.getDistance(fp, ep));
+            return Math.round(new ol.sphere.getDistance(fp, ep));
         }
         //计算多个点的距离(常用于线计算)
 
@@ -2695,11 +3004,13 @@ var OlMap = function (_React$Component) {
             // 等待地图加载
 
             if (!t.state.mapCreated) return;
-            /*点数据处理
-                pointData[2]相同的点,执行刷新
-                pointData[1]的数据在idsForGraphicId中不存在的,执行新增
-                pointData[0]数据中多余的id,执行删除
+            /*点数据处理
+                pointData[2]相同的点,执行刷新
+                pointData[1]的数据在idsForGraphicId中不存在的,执行新增
+                pointData[0]数据中多余的id,执行删除
             */
+            console.log(mapPoints, t.props.mapPoints);
+            console.log(!t.deepEqual(mapPoints, t.props.mapPoints));
             if (mapPoints instanceof Array && t.props.mapPoints instanceof Array && !t.deepEqual(mapPoints, t.props.mapPoints)) {
                 var oldMapPoints = t.props.mapPoints;
                 var newMapPoints = mapPoints;
@@ -2758,9 +3069,9 @@ var OlMap = function (_React$Component) {
                 //更新
                 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;
@@ -2819,9 +3130,9 @@ var OlMap = function (_React$Component) {
                 //更新
                 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;
@@ -2880,9 +3191,9 @@ var OlMap = function (_React$Component) {
                 //更新
                 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;
@@ -3038,8 +3349,8 @@ var OlMap = function (_React$Component) {
                     e: e,
                     id: id,
                     param: t.getGraphic(id),
-                    top: e.pixel_ ? e.pixel_[0] : undefined, //当前点所在的位置(屏幕)
-                    left: e.pixel_ ? e.pixel_[1] : undefined
+                    top: e.pixel ? e.pixel[0] : undefined, //当前点所在的位置(屏幕)
+                    left: e.pixel ? e.pixel[1] : undefined
                 };
                 t.props.mouseOverGraphic(obj);
             }
@@ -3057,8 +3368,8 @@ var OlMap = function (_React$Component) {
                     e: e,
                     id: id,
                     param: t.getGraphic(id),
-                    top: e.pixel_ ? e.pixel_[0] : undefined, //当前点所在的位置(屏幕)
-                    left: e.pixel_ ? e.pixel_[1] : undefined
+                    top: e.pixel ? e.pixel[0] : undefined, //当前点所在的位置(屏幕)
+                    left: e.pixel ? e.pixel[1] : undefined
                 };
                 t.props.mouseOutGraphic(obj);
             }
@@ -3201,9 +3512,9 @@ var OlMap = function (_React$Component) {
                 //编辑中的图元关闭其他事件返回
                 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 _e$pixel = _slicedToArray(e.pixel, 2),
+                        clientX = _e$pixel[0],
+                        clientY = _e$pixel[1];
 
                     var param = t.getGraphic(id, clientX, clientY);
                     var obj = {
@@ -3232,7 +3543,7 @@ var OlMap = function (_React$Component) {
                     clearInterval(t.animTimer[j]);
                 }
             }
-            window.OlMap[t.state.mapId] = null;
+            window.VtxMap[t.state.mapId] = null;
         }
     }]);