@deepinnet-components/pc 0.0.53 → 0.0.55

package/dist/Map2D/Map/index.js

@@ -15,7 +15,9 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // @ts-nocheck
 import { useEffect, useRef, useState } from 'react';
+import arrowImg from "../demo/imgs/\u7BAD\u5934\u65B9\u5411.png";
 import "../index.less";
+import { getBase64FromLocalImage } from "../utils";
 var Map = function Map(props) {
   var id = props.id,
     _props$opts = props.opts,
@@ -96,6 +98,26 @@ var Map = function Map(props) {
       if (props.onRightClick) {
         map === null || map === void 0 || map.on('contextmenu', mapRightClick);
       }
+      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var base64, image;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return getBase64FromLocalImage(arrowImg);
+            case 2:
+              base64 = _context2.sent;
+              _context2.next = 5;
+              return map.loadImage(base64);
+            case 5:
+              image = _context2.sent;
+              map.addImage('custom-arrow', image.data);
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }))();
     }
   }, [map]);
   return /*#__PURE__*/React.createElement("div", {

package/dist/Map2D/MapPolyline/index.js

@@ -164,23 +164,25 @@ var MapPolyline = function MapPolyline(props) {
         obj[item.id] = (_item$metadata = item.metadata) === null || _item$metadata === void 0 ? void 0 : _item$metadata.zIndex;
       });
       var fKey = findKeyWithMinValueGreaterThan(obj, zIndex, [id]);
-      if (fKey) {
-        map.moveLayer(id, fKey);
-        if (getOutline()) {
-          map.moveLayer(outlineId, fKey);
-        }
-        if (getArrowLine()) {
-          map.moveLayer(allowLayerId, fKey);
-        }
-      } else {
-        map.moveLayer(id);
-        if (getOutline()) {
-          map.moveLayer(outlineId);
-        }
-        if (getArrowLine()) {
-          map.moveLayer(allowLayerId);
+      try {
+        if (fKey) {
+          map.moveLayer(id, fKey);
+          if (getOutline()) {
+            map.moveLayer(outlineId, fKey);
+          }
+          if (getArrowLine()) {
+            map.moveLayer(allowLayerId, fKey);
+          }
+        } else {
+          map.moveLayer(id);
+          if (getOutline()) {
+            map.moveLayer(outlineId);
+          }
+          if (getArrowLine()) {
+            map.moveLayer(allowLayerId);
+          }
         }
-      }
+      } catch (error) {}
     }
   }, [zIndex, map, line]);
   useEffect(function () {
@@ -209,7 +211,8 @@ var MapPolyline = function MapPolyline(props) {
       },
       zIndex: zIndex,
       metadata: {
-        zIndex: zIndex
+        zIndex: zIndex,
+        isArrow: isArrow
       }
     };
     if (multi && isGetColor) {
@@ -229,10 +232,9 @@ var MapPolyline = function MapPolyline(props) {
       map.setPaintProperty(id, 'line-color', lineColor);
       map.setPaintProperty(id, 'line-width', width);
       map.setPaintProperty(id, 'line-opacity', opacity);
-    } else {
-      // console.log('添加layer')
-      map.addLayer(lineObj);
       if (isArrow) {
+        var arrowLayer = map.getLayer(allowLayerId);
+        if (arrowLayer) return;
         var arrowLineObj = {
           id: allowLayerId,
           type: 'symbol',
@@ -251,6 +253,35 @@ var MapPolyline = function MapPolyline(props) {
         };
         map.addLayer(arrowLineObj);
         setArrowLine(arrowLineObj);
+      } else {
+        var _arrowLayer = map.getLayer(allowLayerId);
+        if (_arrowLayer) {
+          map === null || map === void 0 || map.removeLayer(allowLayerId);
+        }
+        setArrowLine(undefined);
+      }
+    } else {
+      // console.log('添加layer')
+      map.addLayer(lineObj);
+      if (isArrow) {
+        var _arrowLineObj = {
+          id: allowLayerId,
+          type: 'symbol',
+          source: id,
+          layout: {
+            'icon-image': arrowConfig.img || 'custom-arrow',
+            // 箭头图标
+            'symbol-placement': 'line',
+            'symbol-spacing': arrowConfig.spacing || 25,
+            // 图标间隔，默认为250
+            'icon-size': arrowConfig.size || 1
+          },
+          metadata: {
+            zIndex: zIndex
+          }
+        };
+        map.addLayer(_arrowLineObj);
+        setArrowLine(_arrowLineObj);
       }
     }
     setLine(deepClone(lineObj));
@@ -289,20 +320,21 @@ var MapPolyline = function MapPolyline(props) {
         map.addLayer(outlineObj);
         map.moveLayer(outlineId, id);
       }
+      setOutline(outlineObj);
     } else {
       var _layer = map.getLayer(outlineId);
       if (_layer) {
         // console.log('删除outline')
         map === null || map === void 0 || map.removeLayerAndSource(outlineId);
       }
+      setOutline(undefined);
     }
-    setOutline(outlineObj);
   }
   useEffect(function () {
     if (!map || !sourceData) return;
     drawLine();
     drawOutLine();
-  }, [map, sourceData, color, width, opacity, isOutline]);
+  }, [map, sourceData, color, width, opacity, isOutline, isArrow]);
   var flagRef = useRef(false);
   function onMouseenter(e) {
     if (flagRef.current) return;
@@ -328,7 +360,7 @@ var MapPolyline = function MapPolyline(props) {
     var _e$originalEvent, _e$originalEvent$stop;
     (_e$originalEvent = e.originalEvent) === null || _e$originalEvent === void 0 || (_e$originalEvent$stop = _e$originalEvent.stopPropagation) === null || _e$originalEvent$stop === void 0 || _e$originalEvent$stop.call(_e$originalEvent);
     var features = map.queryRenderedFeatures(e.point);
-    console.log(features);
+    // console.log(features);
     if (!features.length) return;
     var item = features.find(function (item) {
       return item.source.includes('customPolyline::');

package/dist/Map2D/demo/mapPolyline.js

@@ -61,8 +61,7 @@ var App = function App() {
     color: '#f00',
     onClick: function onClick(feature, e) {
       console.log(feature, e);
-    },
-    isArrow: true
+    }
   }), /*#__PURE__*/React.createElement(MapPolyline, {
     map: map,
     path: path2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepinnet-components/pc",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",