@vtx/map 1.1.7 → 1.1.8

package/lib/VtxMap/OlMap/Map.js

@@ -75,6 +75,7 @@ var OlMap = function (_React$Component) {
             sketch: null,
             listener: null
         };
+        _this.pointLayers = [];
         _this.mouseNowPosition = { x: 0, y: 0, px: 0, py: 0, isCount: false };
         _this.heatmap = null; //热力图对象
         _this.clusterMarkers = []; //聚合点位id数组
@@ -156,7 +157,7 @@ var OlMap = function (_React$Component) {
                             });
                         });
                         var Client9 = new Promise(function (resolve, reject) {
-                            $.getScript(_default2.default.openlayerServerURL + '/iclient9-openlayers.js', function () {
+                            $.getScript(_default2.default.openlayerServerURL + '/iclient-openlayers.min.js', function () {
                                 resolve();
                             });
                         });
@@ -1117,8 +1118,18 @@ var OlMap = function (_React$Component) {
         key: 'formatLength',
         value: function formatLength(line) {
             var flatCoordinates = line.flatCoordinates;
+            // const length = new ol.sphere.getDistance([flatCoordinates[0], flatCoordinates[1]],[flatCoordinates[2], flatCoordinates[3]]);
 
-            var length = new ol.sphere.getDistance([flatCoordinates[0], flatCoordinates[1]], [flatCoordinates[2], flatCoordinates[3]]);
+            var paths = [];
+            for (var n = 0; n < flatCoordinates.length; n += 2) {
+                paths.push([flatCoordinates[n], flatCoordinates[n + 1]]);
+            }
+            var length = 0;
+            if (paths.length >= 2) paths.map(function (item, index) {
+                if (index <= paths.length - 2) {
+                    length += ol.sphere.getDistance(paths[index], paths[index + 1]);
+                }
+            });
             var output = '';
             if (length > 100) {
                 output = Math.round(length / 1000 * 100) / 100 + ' ' + 'km';
@@ -1481,7 +1492,6 @@ 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)) {
@@ -1535,28 +1545,38 @@ var OlMap = function (_React$Component) {
                     });
                     t.state.gis.addOverlay(pop);
                 } else {
+                    var myImage = new Image(cg.width, cg.height);
+                    canvasDataURL(item.url || _default2.default.mapServerURL + '/images/defaultMarker.png', { width: cg.width, height: cg.height }, function (base64) {
+                        myImage.src = base64;
+                    });
                     // 创建地图要素图标样式
                     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],
+                            // src: item.url || `${configUrl.mapServerURL}/images/defaultMarker.png`,
+                            img: myImage,
+                            imgSize: [cg.width, cg.height],
                             opacity: cg.opacity,
                             scale: cg.scale || 1
                         })
                     });
                 }
                 if (!!item.canShowLabel && item.canShowLabel) {
+                    var _myImage = new Image(cg.width, cg.height);
+                    canvasDataURL(item.url || _default2.default.mapServerURL + '/images/defaultMarker.png', { width: cg.width, height: cg.height }, function (base64) {
+                        _myImage.src = base64;
+                    });
                     // 创建地图要素图标样式
                     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],
+                            // src: item.url || `${configUrl.mapServerURL}/images/defaultMarker.png`,
+                            img: _myImage,
+                            imgSize: [cg.width, cg.height],
                             opacity: cg.opacity,
                             scale: cg.scale || 1
                         }),
@@ -1592,6 +1612,10 @@ var OlMap = function (_React$Component) {
                     source: source,
                     id: item.id
                 });
+                t.pointLayers.push({
+                    id: item.id,
+                    layer: pointLayer
+                });
                 //添加点位图层
                 t.state.gis.addLayer(pointLayer);
                 if (!item.markerContent && cg.BAnimationType == 0) {
@@ -1613,7 +1637,10 @@ var OlMap = function (_React$Component) {
                 });
             });
             if (type !== 'defined') {
-                t.state.pointIds = psids;
+                // t.state.pointIds = psids;
+                t.setState({
+                    pointIds: psids
+                });
             }
         }
         //更新点
@@ -2263,10 +2290,13 @@ var OlMap = function (_React$Component) {
             }
             t.heatmap = null;
             t.movePoints = [];
+
+            t.state.pointIds = [];
             t.pointLayers.map(function (item) {
-                gis.removeLayer(item);
+                gis.removeLayer(item.layer);
                 t.pointLayers = [];
             });
+
             t.clearAllPointCollection();
             t.closeDraw();
             if (t.clusterInfo.clusterHulls || t.clusterInfo.clusters || t.clusterInfo.clusterCircles) {
@@ -2430,6 +2460,7 @@ var OlMap = function (_React$Component) {
                     ary = arg.split(',');
                 }
             }
+            t.state.pointIds = [];
             t.pointLayers.map(function (item) {
                 t.state.gis.removeLayer(item.layer);
                 t.pointLayers = [];
@@ -2558,6 +2589,33 @@ var OlMap = function (_React$Component) {
                 }
             }
         }
+    }, {
+        key: 'clearCluster',
+        value: function clearCluster() {
+            var t = this;
+            if (t.clusterInfo.clusterHulls) {
+                t.state.gis.removeLayer(t.clusterInfo.clusterHulls);
+                t.clusterInfo.clusterHulls = null;
+            }
+            if (t.clusterInfo.clusters) {
+                t.state.gis.removeLayer(t.clusterInfo.clusters);
+                t.clusterInfo.clusters = null;
+            }
+            if (t.clusterInfo.clusterCircles) {
+                t.state.gis.removeLayer(t.clusterInfo.clusterCircles);
+                t.clusterInfo.clusterCircles = null;
+            }
+            t.props.mapPoints.map(function (item) {
+                if (t.GM.getGraphic(item.id)) {
+                    t.GM.removeGraphic(item.id);
+                }
+            });
+            t.addPoint(t.props.mapPoints);
+            // 临时处理下
+            var view = t.state.gis.getView();
+            var zoom = view.getZoom();
+            view.setZoom(zoom - 0.5);
+        }
         /*公共方法*/
         //判断extent1是否在extent2内部
 
@@ -3009,8 +3067,6 @@ 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;
@@ -3257,8 +3313,10 @@ var OlMap = function (_React$Component) {
                 t.doEdit(editGraphicId);
             }
             // 获取热力图
-            if (heatMapData && !t.deepEqual(heatMapData, t.props.heatMapData)) {
+            if (heatMapData && heatMapData.data && !t.deepEqual(heatMapData, t.props.heatMapData)) {
                 t.heatMapOverlay(heatMapData);
+            } else if (!t.deepEqual(heatMapData, t.props.heatMapData)) {
+                t.clearHeatMap(heatMapData);
             }
             //清空地图
             if (typeof isClearAll == 'boolean' && isClearAll || isClearAll && isClearAll !== t.props.isClearAll) {
@@ -3284,6 +3342,8 @@ var OlMap = function (_React$Component) {
             //设置点聚合
             if (typeof setCluster == 'boolean' && setCluster || setCluster && setCluster !== t.props.setCluster) {
                 t.cluster(mapCluster);
+            } else if (setCluster !== t.props.setCluster) {
+                t.clearCluster();
             }
             //图元编辑调用
             if (typeof isDoEdit == 'boolean' && isDoEdit || isDoEdit && isDoEdit !== t.props.isDoEdit) {
@@ -3423,6 +3483,13 @@ var OlMap = function (_React$Component) {
                 }
                 cg.gradient = gradient;
             }
+            // if(d.data){
+            //     t.state.pointIds = [];
+            //     t.pointLayers.map(item => {
+            //         t.state.gis.removeLayer(item.layer);
+            //         t.pointLayers=[];
+            //     })
+            // }
             var heatData = {
                 type: 'FeatureCollection',
                 features: (d.data || []).map(function (item) {
@@ -3454,6 +3521,13 @@ var OlMap = function (_React$Component) {
             });
             t.state.gis.addLayer(t.heatmap);
         }
+    }, {
+        key: 'clearHeatMap',
+        value: function clearHeatMap() {
+            var t = this;
+            if (t.heatmap) t.state.gis.removeLayer(t.heatmap);
+            t.heatmap = null;
+        }
         //地图移动之前事件
 
     }, {
@@ -3574,4 +3648,40 @@ function getRgbColor(color, opacity) {
     }
     return 'rgba(' + arr.join(',') + ',' + opacity + ')';
 }
+
+// 压缩图片的方法
+function canvasDataURL(path, obj, callback) {
+    var img = new Image();
+    img.src = path;
+    img.setAttribute("crossOrigin", 'Anonymous');
+    img.onload = function () {
+        var that = this;
+        // 默认按比例压缩
+        var w = that.width,
+            h = that.height,
+            scale = w / h;
+        w = obj.width || w;
+        h = obj.height || w / scale;
+        var quality = 0.7; // 默认图片质量为0.7
+        //生成canvas
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+        // 创建属性节点
+        var anw = document.createAttribute("width");
+        anw.nodeValue = w;
+        var anh = document.createAttribute("height");
+        anh.nodeValue = h;
+        canvas.setAttributeNode(anw);
+        canvas.setAttributeNode(anh);
+        ctx.drawImage(that, 0, 0, w, h);
+        // 图像质量
+        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
+            quality = obj.quality;
+        }
+        // quality值越小，所绘制出的图像越模糊
+        var base64 = canvas.toDataURL('image/jpeg', quality);
+        // 回调函数返回base64的值
+        callback(base64);
+    };
+}
 module.exports = exports['default'];

package/package.json

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