@mint-ui/map 0.5.4-beta → 0.5.6-beta

package/dist/index.es.js

@@ -361,9 +361,30 @@ function () {
     return false;
   };
 
-  PolygonCalculator.simplifyPoints = function (polygon, tolerance, lastRepeated) {
-    var target = lastRepeated ? polygon.slice(0, polygon.length - 1) : polygon;
-    return this.simplify(target, tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE);
+  PolygonCalculator.simplifyPoints = function (polygon, tolerance, _lastRepeated) {
+    return this.simplify(this.pathCleaning(polygon), tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE);
+  };
+
+  PolygonCalculator.pathCleaning = function (polygon) {
+    if (polygon.length < 3) {
+      return polygon;
+    }
+
+    var main = polygon[0];
+    var delCount = 0;
+
+    for (var i = polygon.length - 1; i >= 0; i--) {
+      if (main.equals(polygon[i])) {
+        delCount += 1;
+      } else {
+        break;
+      }
+    }
+
+    delCount > 0 && polygon.splice(polygon.length - delCount, delCount);
+    var out = [];
+    out.push.apply(out, polygon);
+    return out;
   };
 
   PolygonCalculator.simplify = function (points, tolerance) {
@@ -374,8 +395,10 @@ function () {
     var dMax = 0;
     var index = 0; // Find the point with the maximum distance from the line segment
 
+    var denominator = this.perpendicularDistanceDenominator(points[0], points[points.length - 1]);
+
     for (var i = 1; i < points.length - 1; i++) {
-      var d = this.perpendicularDistance(points[i], points[0], points[points.length - 1]);
+      var d = this.perpendicularDistance(points[i], points[0], points[points.length - 1], denominator);
 
       if (d > dMax) {
         dMax = d;
@@ -393,19 +416,25 @@ function () {
       // If the maximum distance is less than or equal to the tolerance, return the endpoints
       return [points[0], points[points.length - 1]];
     }
+  };
+
+  PolygonCalculator.perpendicularDistanceDenominator = function (lineStart, lineEnd) {
+    var x1 = lineStart.x,
+        y1 = lineStart.y;
+    var x2 = lineEnd.x,
+        y2 = lineEnd.y;
+    return Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
   }; // Calculate the perpendicular distance from a point to a line segment
 
 
-  PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd) {
+  PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd, denominator) {
     var x = point.x;
     var y = point.y;
     var x1 = lineStart.x;
     var y1 = lineStart.y;
     var x2 = lineEnd.x;
     var y2 = lineEnd.y;
-    var numerator = Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1);
-    var denominator = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
-    return numerator / denominator;
+    return Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1) / denominator;
   };
 
   PolygonCalculator.calculatePolygonSize = function (polygon, innerPolygons) {
@@ -444,23 +473,23 @@ function () {
   return PolygonCalculator;
 }();
 
-/**
- * 좌표값
- * @description 위도/경도, DOM 상의 X/Y 좌표
+/**
+ * 좌표값
+ * @description 위도/경도, DOM 상의 X/Y 좌표
  */
 
 var Position =
 /** @class */
 function () {
   function Position(lat, lng) {
-    /**
-     * 위도
-     * @description 위도(latitude)
+    /**
+     * 위도
+     * @description 위도(latitude)
      */
     this.lat = 0;
-    /**
-     * 경도
-     * @description 경도(longitude)
+    /**
+     * 경도
+     * @description 경도(longitude)
      */
 
     this.lng = 0;
@@ -568,15 +597,15 @@ function () {
 
   return Bounds;
 }();
-/**
- * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+/**
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
  */
 
 var Offset =
 /** @class */
 function () {
-  /**
-   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
    */
   function Offset(x, y) {
     this.x = x;
@@ -804,12 +833,12 @@ function () {
   MintMapController.prototype.getRandomFunctionName = function (prefix) {
     return "".concat(prefix, "_").concat(v4().replace(/-/g, '_'));
   };
-  /**
-   * URL 빌더 메서드
-   *
-   * @param {string} baseUrl: 기본 URL
-   * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
-   * @returns {string} URL
+  /**
+   * URL 빌더 메서드
+   *
+   * @param {string} baseUrl: 기본 URL
+   * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
+   * @returns {string} URL
    */
 
 
@@ -822,9 +851,9 @@ function () {
     }).join('&');
     return "".concat(baseUrl, "?").concat(params);
   };
-  /**
-   * 쓰로틀링 처리
-   * @returns
+  /**
+   * 쓰로틀링 처리
+   * @returns
    */
 
 
@@ -1385,11 +1414,11 @@ function (_super) {
       var map = marker.native.getMap();
 
       if (map) {
-        /** 중요!!!!
-         * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
-         * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
-         * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
-         * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
+        /** 중요!!!!
+         * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
+         * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
+         * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
+         * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
         */
         //Position
         if (options.position && options.position instanceof Position) {
@@ -1768,7 +1797,7 @@ function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
   };
 
-  NaverMintMapController.prototype.positionToOffset = function (position) {
+  NaverMintMapController.prototype.naverPositionToOffset = function (position) {
     if (!this.map) {
       return new Offset(0, 0);
     }
@@ -3071,13 +3100,13 @@ function (_super) {
   };
 
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-    /**
-     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-     * - 가장 확대된 값 : 1
-     * - 가장 축소된 값 : 14
-     *
-     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
     */
     var mapValue = this.getBaseToMapZoom(value);
 
@@ -3262,12 +3291,12 @@ var DEFAULT_CENTER = {
   lat: 37.5036845,
   lng: 127.0448698
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MintMapProps} MintMapProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MintMapProps} MintMapProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MintMap(_a) {
@@ -3690,8 +3719,8 @@ var Marker =
 /** @class */
 function (_super) {
   __extends(Marker, _super);
-  /**
-   * 지도에 표시할 마커정보
+  /**
+   * 지도에 표시할 마커정보
    */
 
 
@@ -3709,8 +3738,8 @@ var Polyline =
 /** @class */
 function (_super) {
   __extends(Polyline, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3728,8 +3757,8 @@ var Polygon =
 /** @class */
 function (_super) {
   __extends(Polygon, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3739,8 +3768,8 @@ function (_super) {
     _this.options = options;
     return _this;
   }
-  /**
-   * 폴리곤의 중점을 구한다.
+  /**
+   * 폴리곤의 중점을 구한다.
    */
 
 
@@ -3910,12 +3939,12 @@ var offsetCalibration = function (mapType, divElement, options) {
     divElement.style.transform = "translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
   }
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 
@@ -4203,12 +4232,12 @@ var calculateAverage = function (nums) {
   return Number((sum / nums.length).toFixed(7));
 };
 
-/**
- * CircleMarker
- *
- * @param {CircleMarkerProps} CircleMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * CircleMarker
+ *
+ * @param {CircleMarkerProps} CircleMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function CircleMarker(_a) {
@@ -4320,12 +4349,12 @@ function CircleMarker(_a) {
   }, children)));
 }
 
-/**
- *PolygonMarker
- *
- * @param {PolygonMarkerProps} PolygonMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ *PolygonMarker
+ *
+ * @param {PolygonMarkerProps} PolygonMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function PolygonMarker(_a) {
@@ -4433,9 +4462,10 @@ function PolygonMarker(_a) {
 
       if (minLng === undefined || minLng > pos.lng) {
         minLng = pos.lng;
-      }
+      } //offset 계산 정확도를 위해 네이버 맵은 전용 projection 베이스의 function 을 사용한다.
 
-      return controller.positionToOffset(pos);
+
+      return controller instanceof NaverMintMapController ? controller.naverPositionToOffset(pos) : controller.positionToOffset(pos);
     });
     var simplified = simplifyPath ? PolygonCalculator.simplifyPoints(offsets, simplifyTolerance, lastReapeated) : offsets;
     setOffsets(simplified); //inner path
@@ -4446,7 +4476,8 @@ function PolygonMarker(_a) {
       for (var _i = 0, innerPositions_1 = innerPositions; _i < innerPositions_1.length; _i++) {
         var innerPosition = innerPositions_1[_i];
         var offsets_1 = innerPosition.map(function (pos) {
-          return controller.positionToOffset(pos);
+          //offset 계산 정확도를 위해 네이버 맵은 전용 projection 베이스의 function 을 사용한다.
+          return controller instanceof NaverMintMapController ? controller.naverPositionToOffset(pos) : controller.positionToOffset(pos);
         });
         var simplified_1 = simplifyPath ? PolygonCalculator.simplifyPoints(offsets_1, simplifyTolerance, lastReapeated) : offsets_1;
         innerPath.push(simplified_1);
@@ -4474,12 +4505,12 @@ function PolygonMarker(_a) {
   }, children)));
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapPolygonWrapper(_a) {
@@ -4967,12 +4998,12 @@ var getAlignPosition = function (value, align) {
 
   throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 
@@ -4997,12 +5028,12 @@ function MapControlWrapper(_a) {
   }, children);
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapPolylineWrapper(_a) {
@@ -5043,12 +5074,12 @@ var console$1 = {
   log: function () {
   }
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapCanvasWrapper(_a) {
@@ -5157,7 +5188,7 @@ function MapCanvasWrapper(_a) {
         var pos = item.position; // console.log('canvas mouseevent check', pos.offset);
 
         if (pos && !pos.offset) {
-          pos.offset = positionToOffset(pos);
+          pos.offset = controller.positionToOffset(pos);
         }
 
         if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
@@ -5236,7 +5267,7 @@ function MapCanvasWrapper(_a) {
 
         map.addListener('mousemove', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
-          var clickedOffset = positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
+          var clickedOffset = controller.positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
 
           var hitSet = processMouseEvent(clickedOffset, 'onMouseOver'); //mouse out 처리
 
@@ -5250,7 +5281,7 @@ function MapCanvasWrapper(_a) {
 
         map.addListener('click', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
-          var clickedOffset = positionToOffset(clickPosition);
+          var clickedOffset = controller.positionToOffset(clickPosition);
           processMouseEvent(clickedOffset, 'onClick');
         });
       }
@@ -5321,7 +5352,7 @@ function MapCanvasWrapper(_a) {
       if (item.visible === undefined || item.visible) {
         var pos = item.position; //위치 변환
 
-        pos.offset = positionToOffset(pos);
+        pos.offset = controller.positionToOffset(pos);
 
         if (item.anchor) {
           pos.offset.x += item.anchor.x;
@@ -5350,22 +5381,6 @@ function MapCanvasWrapper(_a) {
   }, []); //render!!!
 
   renderMain();
-
-  var positionToOffset = useCallback(function (position) {
-    var div = controller.mapDivElement;
-    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
-    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
-    var bounds = controller.getCurrBounds();
-    var maxLng = bounds.ne.lng;
-    var minLng = bounds.sw.lng;
-    var lng = Math.abs(maxLng - minLng);
-    var x = w * (position.lng - minLng) / lng;
-    var maxLat = bounds.ne.lat;
-    var minLat = bounds.sw.lat;
-    var lat = Math.abs(maxLat - minLat);
-    var y = h * (maxLat - position.lat) / lat;
-    return new Offset(x, y);
-  }, []);
   return React.createElement("div", {
     ref: containerRef,
     style: {
@@ -5383,12 +5398,12 @@ function MapCanvasWrapper(_a) {
   }), renderFlag && React.createElement(React.Fragment, null));
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapCanvasMarkerWrapper(_props) {