@vtx/map 1.1.4 → 1.1.7

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);
                         });
                     });
@@ -315,16 +333,24 @@ var OlMap = function (_React$Component) {
                 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,
+            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 = {};
             }
-            window.OlMap[mapId] = t.state.gis = new ol.Map({
+            if (!minZoom) {
+                minZoom = 2;
+            }
+            if (!maxZoom) {
+                maxZoom = 19;
+            }
+            if (!projection) {
+                projection = 'EPSG:4326';
+            }
+            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], //中心点
@@ -349,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);
             }
         }
         // 设置中心点
@@ -625,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;
@@ -920,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);
         }
         // 绘图时创建提示
 
@@ -949,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;
@@ -1052,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',
@@ -1332,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)) {
@@ -1476,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)) {
@@ -1485,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,
@@ -1561,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!');
@@ -1812,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',
@@ -1849,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!');
@@ -1960,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',
@@ -1995,7 +2149,7 @@ var OlMap = function (_React$Component) {
                         y: parseFloat(item.latitude),
                         radius: parseFloat(item.radius)
                     },
-                    source: gc.source
+                    source: gp.source
                 });
             });
             //刷新图元
@@ -2105,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,
@@ -2241,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内部
 
@@ -2276,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));
         }
         //计算多个点的距离(常用于线计算)
 
@@ -2692,6 +3009,8 @@ var OlMap = function (_React$Component) {
                 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;
@@ -2954,10 +3273,13 @@ var OlMap = function (_React$Component) {
                 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 (setCenter) == 'boolean' && setCenter) || (setCenter && setCenter !== t.props.setCenter)) {
+            //     if (!(t.getCurrentCenter().lng == mapCenter[0] && t.getCurrentCenter().lat == mapCenter[1])) {
+            //         t.setCenter(mapCenter);
+            //     }
+            // }
+            if (nextProps.mapCenter && nextProps.mapCenter.length > 0 && JSON.stringify(nextProps.mapCenter) !== JSON.stringify(this.props.mapCenter)) {
+                t.setCenter(mapCenter);
             }
             //设置点聚合
             if (typeof setCluster == 'boolean' && setCluster || setCluster && setCluster !== t.props.setCluster) {
@@ -3027,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);
             }
@@ -3046,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);
             }
@@ -3190,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 = {
@@ -3221,7 +3543,7 @@ var OlMap = function (_React$Component) {
                     clearInterval(t.animTimer[j]);
                 }
             }
-            window.OlMap[t.state.mapId] = null;
+            window.VtxMap[t.state.mapId] = null;
         }
     }]);
 

package/lib/VtxModal/VtxModal.css

@@ -1,62 +0,0 @@
-.vtx-ui-modal-normal .ant-modal .ant-modal-content {
-  height: 100%;
-}
-.vtx-ui-modal-normal .ant-modal .ant-modal-content .ant-modal-body {
-  max-height: calc(100% - 108px);
-  overflow: auto;
-  background-color: #fbfbfb;
-}
-.vtx-ui-modal-normal .vtx-ui-modal-title {
-  position: relative;
-  width: 100%;
-}
-.vtx-ui-modal-normal .vtx-ui-modal-title .vtx-ui-modal-title_name {
-  width: 100%;
-  color: #108EE2;
-}
-.vtx-ui-modal-normal .vtx-ui-modal-title .vtx-ui-modal-close,
-.vtx-ui-modal-normal .vtx-ui-modal-title .vtx-ui-modal-maximizeIcon {
-  position: absolute;
-  top: -13px;
-  right: -16px;
-}
-.vtx-ui-modal-normal .vtx-ui-modal-title .vtx-ui-modal-close p,
-.vtx-ui-modal-normal .vtx-ui-modal-title .vtx-ui-modal-maximizeIcon p {
-  width: 36px;
-  height: 48px;
-  text-align: center;
-  line-height: 48px;
-  cursor: pointer;
-  border: 0;
-  background: transparent;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 10;
-  font-weight: 700;
-  text-decoration: none;
-  -webkit-transition: color 0.3s ease;
-  transition: color 0.3s ease;
-  color: rgba(0, 0, 0, 0.43);
-  outline: 0;
-  display: inline-block;
-}
-.vtx-ui-modal-normal .vtx-ui-modal-title .vtx-ui-modal-close p:hover,
-.vtx-ui-modal-normal .vtx-ui-modal-title .vtx-ui-modal-maximizeIcon p:hover {
-  color: #444;
-  text-decoration: none;
-}
-.vtx-ui-modal-normal .vtx-ui-modal-title .vtx-ui-modal-maximizeIcon {
-  right: 20px;
-}
-.vtx-ui-modal-maxClass .ant-modal {
-  top: 0 !important;
-  left: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  padding-bottom: 0 !important;
-  overflow: hidden;
-}
-.vtx-ui-modal-maxClass .ant-modal-body {
-  height: calc(100% - 108px) !important;
-}

package/lib/VtxModal/VtxModal.js

@@ -12,19 +12,17 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-require('./VtxModal.css');
+require('./VtxModal.less');
 
 var _modal = require('antd/lib/modal');
 
 var _modal2 = _interopRequireDefault(_modal);
 
-require('antd/lib/modal/style/css');
+require('antd/lib/modal/style');
 
-var _icon = require('antd/lib/icon');
+require('antd/lib/icon/style');
 
-var _icon2 = _interopRequireDefault(_icon);
-
-require('antd/lib/icon/style/css');
+var _default = require('../default');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -197,7 +195,7 @@ var VtxModal = function (_React$Component) {
                                     });
                                 }
                             },
-                            maximizable ? _react2.default.createElement(_icon2.default, { type: 'shrink' }) : _react2.default.createElement(_icon2.default, { type: 'arrows-alt' })
+                            maximizable ? _react2.default.createElement(_default.VtxMapIcon, { type: 'icon-shrink' }) : _react2.default.createElement(_default.VtxMapIcon, { type: 'icon-arrawsalt' })
                         )
                     ) : null,
                     closable ? _react2.default.createElement(
@@ -206,9 +204,9 @@ var VtxModal = function (_React$Component) {
                         _react2.default.createElement(
                             'p',
                             { onClick: t.props.onCancel },
-                            _react2.default.createElement(_icon2.default, { type: 'close' })
+                            _react2.default.createElement(_default.VtxMapIcon, { type: 'icon-close' })
                         )
-                    ) : ''
+                    ) : null
                 );
             }();
             var bodyStyle = _extends({}, this.props.bodyStyle);

package/lib/VtxModal/VtxModal.less

@@ -1,3 +1,5 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
 .vtx-ui-modal-normal{
     .ant-modal{
         .ant-modal-content{
@@ -5,7 +7,7 @@
             .ant-modal-body{
                 max-height: e('calc(100% - 108px)');
                 overflow: auto;
-                background-color: #fbfbfb;
+                background-color: @table-expanded-row-bg;
             }
         }
     }
@@ -14,7 +16,7 @@
         width: 100%;
         .vtx-ui-modal-title_name{
             width: 100%;
-            color: #108EE2;
+            color:  @primary-color;
         }
         .vtx-ui-modal-close,.vtx-ui-modal-maximizeIcon{
             position: absolute;
@@ -36,11 +38,11 @@
                 text-decoration: none;
                 -webkit-transition: color .3s ease;
                 transition: color .3s ease;
-                color: rgba(0, 0, 0, 0.43);
+                color: @text-color;
                 outline: 0;
                 display: inline-block;
                 &:hover{
-                    color: #444;
+                    color: @text-color-secondary;
                     text-decoration: none;
                 }
             }

package/lib/VtxModal/draggableModal.js

@@ -20,7 +20,7 @@ var _modal = require('antd/lib/modal');
 
 var _modal2 = _interopRequireDefault(_modal);
 
-require('antd/lib/modal/style/css');
+require('antd/lib/modal/style');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/VtxSearchMap/VtxSearchMap.css

@@ -1,170 +0,0 @@
-.vtx-ui-searchmap-searchmodal {
-  z-index: 1001;
-}
-.vtx-ui-searchmap-searchmodal .ant-modal {
-  width: calc(100% - 200px) !important;
-  min-width: 800px;
-  height: 70vh;
-}
-.vtx-ui-searchmap-searchmodal .ant-modal .ant-modal-title {
-  color: #108EE9;
-}
-.vtx-ui-searchmap-searchmodal .ant-modal .ant-modal-content {
-  width: 100%;
-  height: 100%;
-}
-.vtx-ui-searchmap-searchmodal .ant-modal .ant-modal-content .ant-modal-body {
-  width: 100%;
-  height: calc(100% - 108px) !important;
-  padding: 0px;
-  background-color: white;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap {
-  width: 100%;
-  height: 100%;
-  padding-top: 48px;
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-top,
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-bottom {
-  width: 100%;
-  height: 48px;
-  position: absolute;
-  left: 0px;
-  padding: 10px 15px;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-top button,
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-bottom button {
-  margin-left: 10px;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-top {
-  top: 0px;
-  border-bottom: 1px solid #e1e1e1;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-top .vtx-ui-searchmap-othermodal {
-  position: absolute;
-  right: 25px;
-  line-height: 28px;
-  display: inline-block;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-bottom {
-  bottom: 0px;
-  border-top: 1px solid #e1e1e1;
-  text-align: right;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  padding-left: 25px;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-show {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-hidden {
-  display: none;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-w_l {
-  width: 300px !important;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-content_left {
-  width: 25px;
-  height: 100%;
-  display: inline-block;
-  -webkit-transition-duration: 0.3s;
-  -o-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  transition-property: width;
-  vertical-align: top;
-  border-right: 1px solid #e1e1e1;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 10;
-  background-color: #FFF;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-content_left .vtx-ui-searchmap-listtitle {
-  width: 100%;
-  height: 30px;
-  line-height: 30px;
-  border-bottom: 1px solid #e1e1e1;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-content_left .vtx-ui-searchmap-listtitle .vtx-ui-searchmap-title {
-  width: calc(100% - 30px);
-  display: inline-block;
-  padding-left: 15px;
-  font-size: 15px;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-content_left .vtx-ui-searchmap-listtitle .vtx-ui-searchmap-btn {
-  display: inline-block;
-  width: 30px;
-  text-align: center;
-  color: #0c88e8;
-  height: 30px;
-  line-height: 30px;
-  cursor: pointer;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-content_left .vtx-ui-searchmap-lists {
-  width: 100%;
-  line-height: 35px;
-  border-bottom: 1px solid #e1e1e1;
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0px 15px;
-  cursor: pointer;
-  color: #999;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-content_left .vtx-ui-searchmap-lists:hover {
-  background-color: #ECF6FD;
-  color: #108EE9;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-content_left .vtx-ui-searchmap-lists.vtx-ui-searchmap-select {
-  background-color: #ECF6FD;
-  color: #108EE9;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-content_left .vtx-ui-searchmap-scrollauto {
-  height: calc(100% - 30px);
-  overflow-y: auto;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-content_right {
-  width: 100%;
-  height: 100%;
-  display: inline-block;
-  -webkit-transition-duration: 0.3s;
-  -o-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  transition-property: width;
-}
-.vtx-ui-searchmap-searchmodal .vtx-ui-searchmap-searchmap .vtx-ui-searchmap-content .vtx-ui-searchmap-btn {
-  text-align: center;
-  color: #0c88e8;
-  height: 30px;
-  line-height: 30px;
-  cursor: pointer;
-}
-.vtx-ui-searchmap-showlabel {
-  margin-left: 0;
-  width: 100px;
-  line-height: 25px;
-  text-align: center;
-  position: relative;
-  left: -38px;
-  background-color: #222020;
-  opacity: 0.6;
-  border-radius: 5px;
-  color: #FFF;
-  padding: 2px 8px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-break: normal;
-  overflow: hidden;
-}
-.vtx-ui-searchmap-hiddenlabel {
-  display: none;
-}

package/lib/VtxSearchMap/VtxSearchMap.js

@@ -12,31 +12,31 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-require('./VtxSearchMap.css');
+require('./VtxSearchMap.less');
 
 var _button = require('antd/lib/button');
 
 var _button2 = _interopRequireDefault(_button);
 
-require('antd/lib/button/style/css');
+require('antd/lib/button/style');
 
 var _input = require('antd/lib/input');
 
 var _input2 = _interopRequireDefault(_input);
 
-require('antd/lib/input/style/css');
+require('antd/lib/input/style');
 
 var _message = require('antd/lib/message');
 
 var _message2 = _interopRequireDefault(_message);
 
-require('antd/lib/message/style/css');
+require('antd/lib/message/style');
 
 var _checkbox = require('antd/lib/checkbox');
 
 var _checkbox2 = _interopRequireDefault(_checkbox);
 
-require('antd/lib/checkbox/style/css');
+require('antd/lib/checkbox/style');
 
 var _VtxModal = require('../VtxModal');
 
@@ -766,10 +766,9 @@ var VtxSearchMap = function (_React$Component) {
                                 clickGraphic: this.clickGraphic.bind(this),
                                 clickMap: function clickMap() {
                                     t.isClickMap = true;
-                                }
-                            }, drawProps, {
+                                },
                                 olProps: olProps
-                            }))
+                            }, drawProps))
                         )
                     )
                 )

package/lib/VtxSearchMap/VtxSearchMap.less

@@ -1,3 +1,5 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
 .vtx-ui-searchmap-searchmodal{
     z-index: 1001;
     .ant-modal{
@@ -5,7 +7,7 @@
         min-width: 800px;
         height: 70vh;
         .ant-modal-title{
-            color: #108EE9;
+            color: @primary-color;
         }
         .ant-modal-content{
             width: 100%;
@@ -14,7 +16,7 @@
                 width: 100%;
                 height: e('calc(100% - 108px)') !important;
                 padding: 0px;
-                background-color: white;
+                background-color: @body-background;
             }
         }
     }
@@ -38,7 +40,7 @@
         }
         .vtx-ui-searchmap-top{
             top: 0px;
-            border-bottom: 1px solid #e1e1e1;
+            border-bottom: 1px solid @border-color-base;
             .vtx-ui-searchmap-othermodal{
                 position: absolute;
                 right: 25px;
@@ -48,7 +50,7 @@
         }
         .vtx-ui-searchmap-bottom{
             bottom: 0px;
-            border-top: 1px solid #e1e1e1;
+            border-top: 1px solid @border-color-base;
             text-align: right;
         }
         .vtx-ui-searchmap-content{
@@ -76,17 +78,17 @@
                 transition-duration: 0.3s;
                 transition-property: width;
                 vertical-align: top;
-                border-right: 1px solid #e1e1e1;
+                border-right: 1px solid @border-color-base;
                 position: absolute;
                 top: 0px;
                 left: 0px;
                 z-index: 10;
-                background-color: #FFF;
+                background-color: @body-background;
                 .vtx-ui-searchmap-listtitle{
                     width: 100%;
                     height: 30px;
                     line-height: 30px;
-                    border-bottom: 1px solid #e1e1e1;
+                    border-bottom: 1px solid @border-color-base;;
                     .vtx-ui-searchmap-title{
                         width: e('calc(100% - 30px)');
                         display: inline-block;
@@ -97,7 +99,7 @@
                         display: inline-block;
                         width: 30px;
                         text-align: center;
-                        color: #0c88e8;
+                        color: @primary-color;
                         height: 30px;
                         line-height: 30px;
                         cursor: pointer;
@@ -106,7 +108,7 @@
                 .vtx-ui-searchmap-lists{
                     width: 100%;
                     line-height: 35px;
-                    border-bottom: 1px solid #e1e1e1;
+                    border-bottom: 1px solid @border-color-base;;
                     font-size: 12px;
                     overflow: hidden;
                     text-overflow: ellipsis;
@@ -116,12 +118,12 @@
                     color: #999;
                     &:hover{
                         background-color: #ECF6FD;
-                        color: #108EE9;
+                        color: @primary-color;
                     }
                 }
                 .vtx-ui-searchmap-lists.vtx-ui-searchmap-select{
                     background-color: #ECF6FD;
-                    color: #108EE9;
+                    color: @primary-color;
                 }
                 .vtx-ui-searchmap-scrollauto{
                     height: e('calc(100% - 30px)');
@@ -139,7 +141,7 @@
             }
             .vtx-ui-searchmap-btn{
                 text-align: center;
-                color: #0c88e8;
+                color: @primary-color;
                 height: 30px;
                 line-height: 30px;
                 cursor: pointer;

package/lib/default.js

@@ -19,7 +19,7 @@ if (antdMajorVersion === '3') {
 }
 
 var VtxMapIcon = exports.VtxMapIcon = createFromIconfontCN({
-    scriptUrl: '//at.alicdn.com/t/font_2865072_ecuwrji9qwq.js'
+    scriptUrl: '//at.alicdn.com/t/font_2865072_vy1sa1whz3l.js'
 });
 
 var globalCfg = window.VtxPublicServiceAddress || {};

package/package.json

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