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

package/dist/index.es.js

@@ -10,6 +10,160 @@ var css_248z$2 = ".MintMap-module_loading-point-container__znk6l {\n  display: f
 var styles$2 = {"loading-point-container":"MintMap-module_loading-point-container__znk6l","ani-blink":"MintMap-module_ani-blink__K89JK","blink":"MintMap-module_blink__mqfeV","ani-fade-in":"MintMap-module_ani-fade-in__lpHuy","fade-in":"MintMap-module_fade-in__jHpv1","ani-fade-out":"MintMap-module_ani-fade-out__5-esw","fade-out":"MintMap-module_fade-out__CIjGe","ani-expansion":"MintMap-module_ani-expansion__S2vOZ","expansion":"MintMap-module_expansion__WMo5-"};
 styleInject(css_248z$2);
 
+var PositionMirror$1 =
+/** @class */
+function () {
+  function PositionMirror(lat, lng) {
+    this.lat = lat;
+    this.lng = lng;
+  }
+
+  return PositionMirror;
+}();
+
+var GeoCalulator =
+/** @class */
+function () {
+  function GeoCalulator() {}
+
+  GeoCalulator.computeDistanceKiloMeter = function (pos1, pos2) {
+    var dLat = this.deg2rad(pos2.lat - pos1.lat);
+    var dLon = this.deg2rad(pos2.lng - pos1.lng);
+    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.deg2rad(pos1.lat)) * Math.cos(this.deg2rad(pos2.lat)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    var d = this.EARTH_EQUATORIAL_RADIUS_KM * c; // Distance in km
+
+    return d;
+  };
+
+  GeoCalulator.deg2rad = function (deg) {
+    return deg * (Math.PI / 180);
+  };
+
+  GeoCalulator.convertMeterToLatitudeValue = function (meter) {
+    return meter * this.LATITUDE_POSITION_VALUE_PER_METER;
+  };
+
+  GeoCalulator.convertLatitudeToMeterValue = function (lat) {
+    return lat * this.METER_VALUE_PER_LATITUDE;
+  };
+
+  GeoCalulator.convertLongitudeToMeterValue = function (lat, lng) {
+    return lng * this.calculateLongitudeValueWithLatitudeInMeter(lat);
+  };
+
+  GeoCalulator.getCacheUnitOfLongitudeValueWithLatitudeInMeter = function (lat) {
+    return lat.toFixed(2);
+  };
+
+  GeoCalulator.getCacheOfLongitudeValueWithLatitudeInMeter = function (latUnit) {
+    return this.CACHE_OF_LNG_PER_METER.get(latUnit);
+  };
+
+  GeoCalulator.setCacheOfLongitudeValueWithLatitudeInMeter = function (latUnit, lngValue) {
+    if (this.CACHE_OF_LNG_PER_METER.size > 10) {
+      this.CACHE_OF_LNG_PER_METER.clear();
+    }
+
+    this.CACHE_OF_LNG_PER_METER.set(latUnit, lngValue);
+  };
+
+  GeoCalulator.calculateLongitudeValueWithLatitudeInMeter = function (lat) {
+    // const t = Date.now()
+    // Cache check
+    var latUnit = this.getCacheUnitOfLongitudeValueWithLatitudeInMeter(lat);
+    var fromCache = this.getCacheOfLongitudeValueWithLatitudeInMeter(latUnit);
+
+    if (fromCache !== undefined) {
+      // console.log(`cache hit!! ${Date.now() - t} ms`, fromCache, latUnit, this.CACHE_OF_LNG_PER_METER.size);
+      return fromCache;
+    } // Convert latitude and longitude to radians
+
+
+    var latRad = lat * Math.PI / 180; // Calculate Earth's radius at the given latitude
+
+    var radius = this.EARTH_EQUATORIAL_RADIUS * Math.sqrt(1 - Math.pow(this.EARTH_ECCENTRICITY * Math.sin(latRad), 2)); // Calculate the length of one degree of longitude in meters
+
+    var distance = 2 * Math.PI * radius * Math.cos(latRad) / 360; // Cache set
+
+    this.setCacheOfLongitudeValueWithLatitudeInMeter(latUnit, distance); // console.log(`calculated ${Date.now() - t} ms`)
+
+    return distance;
+  };
+
+  GeoCalulator.computeNextPositionAndDistances = function (context) {
+    var pos1 = context.pos1,
+        pos2 = context.pos2,
+        prevPos2 = context.prevPos2,
+        velocityKmh = context.velocityKmh,
+        prevVelocityKmh = context.prevVelocityKmh,
+        elapsedTimeMs = context.elapsedTimeMs; // console.log('velocityKmh / elapsedTimeMs',velocityKmh , elapsedTimeMs);
+    //총 가야할 거리 (km)
+
+    if (pos2 !== prevPos2) {
+      //목표가 바뀌면 거리 및 비율 재계산
+      context.totalDistance = this.computeDistanceKiloMeter(pos1, pos2);
+      context.currDistance = 0;
+      context.prevPos2 = pos2;
+    }
+
+    var totalDistance = context.totalDistance; // console.log('totalDistance', totalDistance);
+    //ms 속으로 환산
+
+    if (velocityKmh !== prevVelocityKmh) {
+      //속도가 바뀌면 재계산
+      context.vPerMs = velocityKmh / this.MS_FROM_HOUR;
+      context.prevVelocityKmh = velocityKmh;
+    }
+
+    var vPerMs = context.vPerMs; //console.log('vPerMs', vPerMs);
+    //실제 가는 거리 계산
+
+    var nextDistance = context.distanceRemain ? context.distanceRemain : context.currDistance + elapsedTimeMs * vPerMs; //console.log('nextDistance', nextDistance);
+    //목표점까지 이동 후에도 남는 거리
+
+    context.currDistance = nextDistance;
+
+    if (totalDistance < context.currDistance) {
+      //이동 거리가 현재 목표점을 넘어가는 경우
+      context.distanceRemain = context.currDistance - totalDistance;
+      context.nextPos = pos2;
+      return context;
+    } else {
+      context.distanceRemain = 0;
+    } //각 축으로 나가야할 비율
+
+
+    var ratio = nextDistance / totalDistance; //console.log('ratio', ratio);
+    //방향값 체크
+
+    var latCalib = pos2.lat > pos1.lat ? 1 : -1;
+    var lngCalib = pos2.lng > pos1.lng ? 1 : -1; //각 축에 보정된 새로운 지점 리턴
+
+    var newPos = new PositionMirror$1(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
+
+    if ((latCalib === 1 && pos2.lat <= newPos.lat || latCalib === -1 && pos2.lat >= newPos.lat) && (lngCalib === 1 && pos2.lng <= newPos.lng || lngCalib === -1 && pos2.lng >= newPos.lng)) {
+      newPos = pos2;
+    } // console.log('newPos', newPos);
+    //console.log('==============================================================\n');
+
+
+    context.nextPos = newPos;
+    return context;
+  };
+
+  GeoCalulator.EARTH_EQUATORIAL_RADIUS = 6378137; //meter (6,378,137 m)
+
+  GeoCalulator.EARTH_EQUATORIAL_RADIUS_KM = GeoCalulator.EARTH_EQUATORIAL_RADIUS / 1000;
+  GeoCalulator.EARTH_ECCENTRICITY = 0.08181919;
+  GeoCalulator.METER_VALUE_PER_LATITUDE = 110.32 * 1000; //위도 기준 1도는 110.32km
+
+  GeoCalulator.LATITUDE_POSITION_VALUE_PER_METER = 1 / GeoCalulator.METER_VALUE_PER_LATITUDE;
+  GeoCalulator.CACHE_OF_LNG_PER_METER = new Map();
+  GeoCalulator.MS_FROM_HOUR = 60 * 60 * 1000;
+  return GeoCalulator;
+}();
+
 var LinePoints =
 /** @class */
 function () {
@@ -209,11 +363,7 @@ function () {
 
   PolygonCalculator.simplifyPoints = function (polygon, tolerance, lastRepeated) {
     var target = lastRepeated ? polygon.slice(0, polygon.length - 1) : polygon;
-    return this.simplify(target.map(function (position) {
-      return [position.lng, position.lat];
-    }), tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE).map(function (point) {
-      return new PositionMirror(point[1], point[0]);
-    });
+    return this.simplify(target, tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE);
   };
 
   PolygonCalculator.simplify = function (points, tolerance) {
@@ -247,12 +397,12 @@ function () {
 
 
   PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd) {
-    var x = point[0];
-    var y = point[1];
-    var x1 = lineStart[0];
-    var y1 = lineStart[1];
-    var x2 = lineEnd[0];
-    var y2 = lineEnd[1];
+    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;
@@ -289,154 +439,11 @@ function () {
     return area;
   };
 
-  PolygonCalculator.TOLERANCE_NAVER_STYLE = 0.0001;
-  PolygonCalculator.TOLERANCE_GOOGLE_STYLE = 0.00001;
+  PolygonCalculator.TOLERANCE_NAVER_STYLE = 1;
+  PolygonCalculator.TOLERANCE_GOOGLE_STYLE = 1;
   return PolygonCalculator;
 }();
 
-var GeoCalulator =
-/** @class */
-function () {
-  function GeoCalulator() {}
-
-  GeoCalulator.computeDistanceKiloMeter = function (pos1, pos2) {
-    var dLat = this.deg2rad(pos2.lat - pos1.lat);
-    var dLon = this.deg2rad(pos2.lng - pos1.lng);
-    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.deg2rad(pos1.lat)) * Math.cos(this.deg2rad(pos2.lat)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
-    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    var d = this.EARTH_EQUATORIAL_RADIUS_KM * c; // Distance in km
-
-    return d;
-  };
-
-  GeoCalulator.deg2rad = function (deg) {
-    return deg * (Math.PI / 180);
-  };
-
-  GeoCalulator.convertMeterToLatitudeValue = function (meter) {
-    return meter * this.LATITUDE_POSITION_VALUE_PER_METER;
-  };
-
-  GeoCalulator.convertLatitudeToMeterValue = function (lat) {
-    return lat * this.METER_VALUE_PER_LATITUDE;
-  };
-
-  GeoCalulator.convertLongitudeToMeterValue = function (lat, lng) {
-    return lng * this.calculateLongitudeValueWithLatitudeInMeter(lat);
-  };
-
-  GeoCalulator.getCacheUnitOfLongitudeValueWithLatitudeInMeter = function (lat) {
-    return lat.toFixed(2);
-  };
-
-  GeoCalulator.getCacheOfLongitudeValueWithLatitudeInMeter = function (latUnit) {
-    return this.CACHE_OF_LNG_PER_METER.get(latUnit);
-  };
-
-  GeoCalulator.setCacheOfLongitudeValueWithLatitudeInMeter = function (latUnit, lngValue) {
-    if (this.CACHE_OF_LNG_PER_METER.size > 10) {
-      this.CACHE_OF_LNG_PER_METER.clear();
-    }
-
-    this.CACHE_OF_LNG_PER_METER.set(latUnit, lngValue);
-  };
-
-  GeoCalulator.calculateLongitudeValueWithLatitudeInMeter = function (lat) {
-    // const t = Date.now()
-    // Cache check
-    var latUnit = this.getCacheUnitOfLongitudeValueWithLatitudeInMeter(lat);
-    var fromCache = this.getCacheOfLongitudeValueWithLatitudeInMeter(latUnit);
-
-    if (fromCache !== undefined) {
-      // console.log(`cache hit!! ${Date.now() - t} ms`, fromCache, latUnit, this.CACHE_OF_LNG_PER_METER.size);
-      return fromCache;
-    } // Convert latitude and longitude to radians
-
-
-    var latRad = lat * Math.PI / 180; // Calculate Earth's radius at the given latitude
-
-    var radius = this.EARTH_EQUATORIAL_RADIUS * Math.sqrt(1 - Math.pow(this.EARTH_ECCENTRICITY * Math.sin(latRad), 2)); // Calculate the length of one degree of longitude in meters
-
-    var distance = 2 * Math.PI * radius * Math.cos(latRad) / 360; // Cache set
-
-    this.setCacheOfLongitudeValueWithLatitudeInMeter(latUnit, distance); // console.log(`calculated ${Date.now() - t} ms`)
-
-    return distance;
-  };
-
-  GeoCalulator.computeNextPositionAndDistances = function (context) {
-    var pos1 = context.pos1,
-        pos2 = context.pos2,
-        prevPos2 = context.prevPos2,
-        velocityKmh = context.velocityKmh,
-        prevVelocityKmh = context.prevVelocityKmh,
-        elapsedTimeMs = context.elapsedTimeMs; // console.log('velocityKmh / elapsedTimeMs',velocityKmh , elapsedTimeMs);
-    //총 가야할 거리 (km)
-
-    if (pos2 !== prevPos2) {
-      //목표가 바뀌면 거리 및 비율 재계산
-      context.totalDistance = this.computeDistanceKiloMeter(pos1, pos2);
-      context.currDistance = 0;
-      context.prevPos2 = pos2;
-    }
-
-    var totalDistance = context.totalDistance; // console.log('totalDistance', totalDistance);
-    //ms 속으로 환산
-
-    if (velocityKmh !== prevVelocityKmh) {
-      //속도가 바뀌면 재계산
-      context.vPerMs = velocityKmh / this.MS_FROM_HOUR;
-      context.prevVelocityKmh = velocityKmh;
-    }
-
-    var vPerMs = context.vPerMs; //console.log('vPerMs', vPerMs);
-    //실제 가는 거리 계산
-
-    var nextDistance = context.distanceRemain ? context.distanceRemain : context.currDistance + elapsedTimeMs * vPerMs; //console.log('nextDistance', nextDistance);
-    //목표점까지 이동 후에도 남는 거리
-
-    context.currDistance = nextDistance;
-
-    if (totalDistance < context.currDistance) {
-      //이동 거리가 현재 목표점을 넘어가는 경우
-      context.distanceRemain = context.currDistance - totalDistance;
-      context.nextPos = pos2;
-      return context;
-    } else {
-      context.distanceRemain = 0;
-    } //각 축으로 나가야할 비율
-
-
-    var ratio = nextDistance / totalDistance; //console.log('ratio', ratio);
-    //방향값 체크
-
-    var latCalib = pos2.lat > pos1.lat ? 1 : -1;
-    var lngCalib = pos2.lng > pos1.lng ? 1 : -1; //각 축에 보정된 새로운 지점 리턴
-
-    var newPos = new PositionMirror(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
-
-    if ((latCalib === 1 && pos2.lat <= newPos.lat || latCalib === -1 && pos2.lat >= newPos.lat) && (lngCalib === 1 && pos2.lng <= newPos.lng || lngCalib === -1 && pos2.lng >= newPos.lng)) {
-      newPos = pos2;
-    } // console.log('newPos', newPos);
-    //console.log('==============================================================\n');
-
-
-    context.nextPos = newPos;
-    return context;
-  };
-
-  GeoCalulator.EARTH_EQUATORIAL_RADIUS = 6378137; //meter (6,378,137 m)
-
-  GeoCalulator.EARTH_EQUATORIAL_RADIUS_KM = GeoCalulator.EARTH_EQUATORIAL_RADIUS / 1000;
-  GeoCalulator.EARTH_ECCENTRICITY = 0.08181919;
-  GeoCalulator.METER_VALUE_PER_LATITUDE = 110.32 * 1000; //위도 기준 1도는 110.32km
-
-  GeoCalulator.LATITUDE_POSITION_VALUE_PER_METER = 1 / GeoCalulator.METER_VALUE_PER_LATITUDE;
-  GeoCalulator.CACHE_OF_LNG_PER_METER = new Map();
-  GeoCalulator.MS_FROM_HOUR = 60 * 60 * 1000;
-  return GeoCalulator;
-}();
-
 /**
  * 좌표값
  * @description 위도/경도, DOM 상의 X/Y 좌표
@@ -1610,7 +1617,7 @@ function (_super) {
                 case 2:
                   options = {
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
-                    zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
+                    zoom: ((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel) || this.getBaseToMapZoom(15),
                     draggable: this.mapProps.draggable === false ? false : true,
                     scrollWheel: this.mapProps.draggable === false ? false : true,
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
@@ -1761,6 +1768,15 @@ function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
   };
 
+  NaverMintMapController.prototype.positionToOffset = function (position) {
+    if (!this.map) {
+      return new Offset(0, 0);
+    }
+
+    var offset = this.map.getProjection().fromCoordToOffset(new naver.maps.LatLng(position.lat, position.lng));
+    return new Offset(offset.x, offset.y);
+  };
+
   NaverMintMapController.prototype.addEventListener = function (eventName, callback) {
     var _this = this;
 
@@ -2309,7 +2325,7 @@ function (_super) {
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                     maxZoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.maxZoomLevel,
                     minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
-                    zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
+                    zoom: ((_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel) || this.getBaseToMapZoom(15),
                     disableDefaultUI: true,
                     gestureHandling: this.mapProps.draggable === false ? 'none' : 'greedy',
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
@@ -2970,7 +2986,7 @@ function (_super) {
                 case 2:
                   options = {
                     center: this.positionToLatLng((_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center),
-                    level: this.getBaseToMapZoom(((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel) || 10),
+                    level: this.getBaseToMapZoom(((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel) || 15),
                     draggable: this.mapProps.draggable === false ? false : true,
                     scrollWheel: this.mapProps.draggable === false ? false : true,
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true
@@ -3448,10 +3464,10 @@ function SVGPolygon(_a) {
     var width = maxX - minX;
     var height = maxY - minY;
     return {
-      containerLeft: Math.floor(minX),
-      containerTop: Math.floor(minY),
-      containerWidth: Math.floor(width),
-      containerHeight: Math.floor(height)
+      containerLeft: minX,
+      containerTop: minY,
+      containerWidth: width,
+      containerHeight: height
     };
   }, []);
   var getD = useCallback(function (_a) {
@@ -3525,7 +3541,7 @@ function SVGPolygon(_a) {
     height: height,
     fill: mode === 'POLYLINE' ? 'none' : background,
     stroke: mode === 'POLYLINE' ? 'black' : 'green',
-    strokeLinejoin: "round",
+    strokeLinejoin: "miter",
     strokeLinecap: "butt",
     d: d
   }, shapeProperties))), React.createElement("div", {
@@ -4372,11 +4388,9 @@ function PolygonMarker(_a) {
 
   var _l = useState([]),
       innerOffsets = _l[0],
-      setInnerOffsets = _l[1]; //offset cache
+      setInnerOffsets = _l[1]; //polygon props ref
 
 
-  var offsetCache = useRef(new Map()); //polygon props ref
-
   var polygonPropsRef = useRef({
     position: position,
     innerPositions: innerPositions,
@@ -4387,7 +4401,6 @@ function PolygonMarker(_a) {
 
   useEffect(function () {
     // console.log('polygon changed');
-    offsetCache.current.clear();
     polygonPropsRef.current = {
       position: position,
       innerPositions: innerPositions,
@@ -4409,53 +4422,42 @@ function PolygonMarker(_a) {
         innerPositions = _a.innerPositions,
         simplifyPath = _a.simplifyPath,
         simplifyTolerance = _a.simplifyTolerance,
-        lastReapeated = _a.lastReapeated;
-    var prevCache = offsetCache.current.get(zoomLevel.current);
-
-    if (prevCache) {
-      var offsets_1 = [];
-      offsets_1.push.apply(offsets_1, prevCache.offsets);
-      setOffsets(offsets_1);
-      var innerOffsets_1 = [];
-      innerOffsets_1.push.apply(innerOffsets_1, prevCache.innerOffsets);
-      setInnerOffsets(innerOffsets_1);
-      setPolygonStart(prevCache.start);
-    } else {
-      // path
-      var simplified = simplifyPath ? PolygonCalculator.simplifyPoints(position, simplifyTolerance, lastReapeated) : position;
-      var offsets_2 = simplified.map(function (pos) {
-        var off = controller.positionToOffset(pos);
-        return new Offset(Math.floor(off.x), Math.floor(off.y));
-      });
-      setOffsets(offsets_2); //inner path
+        lastReapeated = _a.lastReapeated; // path
 
-      var innerPath = [];
+    var maxLat = undefined;
+    var minLng = undefined;
+    var offsets = position.map(function (pos) {
+      if (maxLat === undefined || maxLat < pos.lat) {
+        maxLat = pos.lat;
+      }
 
-      if (innerPositions) {
-        for (var _i = 0, innerPositions_1 = innerPositions; _i < innerPositions_1.length; _i++) {
-          var innerPosition = innerPositions_1[_i];
-          var simplified_1 = simplifyPath ? PolygonCalculator.simplifyPoints(innerPosition, simplifyTolerance, lastReapeated) : innerPosition;
-          var offsets_3 = simplified_1.map(function (pos) {
-            var off = controller.positionToOffset(pos);
-            return new Offset(Math.floor(off.x), Math.floor(off.y));
-          });
-          innerPath.push(offsets_3);
-        }
+      if (minLng === undefined || minLng > pos.lng) {
+        minLng = pos.lng;
+      }
 
-        setInnerOffsets(innerPath);
-      } //start point
+      return controller.positionToOffset(pos);
+    });
+    var simplified = simplifyPath ? PolygonCalculator.simplifyPoints(offsets, simplifyTolerance, lastReapeated) : offsets;
+    setOffsets(simplified); //inner path
 
+    var innerPath = [];
 
-      var regionInfo = PolygonCalculator.getRegionInfo(simplified);
-      var startPosition = regionInfo.maxLat && regionInfo.minLng ? new Position(regionInfo.maxLat, regionInfo.minLng) : undefined;
-      setPolygonStart(startPosition); //cache set
+    if (innerPositions) {
+      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);
+        });
+        var simplified_1 = simplifyPath ? PolygonCalculator.simplifyPoints(offsets_1, simplifyTolerance, lastReapeated) : offsets_1;
+        innerPath.push(simplified_1);
+      }
 
-      offsetCache.current.set(zoomLevel.current, {
-        start: startPosition,
-        offsets: offsets_2,
-        innerOffsets: innerPath
-      });
-    }
+      setInnerOffsets(innerPath);
+    } //start point
+
+
+    var startPosition = maxLat && minLng ? new Position(maxLat, minLng) : undefined;
+    setPolygonStart(startPosition);
   }, []);
   return React.createElement(React.Fragment, null, polygonStart && React.createElement(MapMarkerWrapper, {
     position: polygonStart,
@@ -5155,7 +5157,7 @@ function MapCanvasWrapper(_a) {
         var pos = item.position; // console.log('canvas mouseevent check', pos.offset);
 
         if (pos && !pos.offset) {
-          pos.offset = controller.positionToOffset(pos);
+          pos.offset = positionToOffset(pos);
         }
 
         if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
@@ -5188,7 +5190,7 @@ function MapCanvasWrapper(_a) {
 
       if (map) {
         // const center = controller.getCenter()
-        // center.offset = controller.positionToOffset(center)
+        // center.offset = positionToOffset(center)
         // if(center.offset){
         //   prevX.current = center.offset.x
         //   prevY.current = center.offset.y
@@ -5208,7 +5210,7 @@ function MapCanvasWrapper(_a) {
 
           if (containerRef.current) {
             // const pos = controller.getCenter()
-            // pos.offset = controller.positionToOffset(pos)
+            // pos.offset = positionToOffset(pos)
             // const deltaX = prevX.current - pos.offset.x
             // const deltaY = prevY.current - pos.offset.y
             // offsetProvider.current.x += deltaX
@@ -5234,7 +5236,7 @@ function MapCanvasWrapper(_a) {
 
         map.addListener('mousemove', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
-          var clickedOffset = controller.positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
+          var clickedOffset = positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
 
           var hitSet = processMouseEvent(clickedOffset, 'onMouseOver'); //mouse out 처리
 
@@ -5248,7 +5250,7 @@ function MapCanvasWrapper(_a) {
 
         map.addListener('click', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
-          var clickedOffset = controller.positionToOffset(clickPosition);
+          var clickedOffset = positionToOffset(clickPosition);
           processMouseEvent(clickedOffset, 'onClick');
         });
       }
@@ -5319,7 +5321,7 @@ function MapCanvasWrapper(_a) {
       if (item.visible === undefined || item.visible) {
         var pos = item.position; //위치 변환
 
-        pos.offset = controller.positionToOffset(pos);
+        pos.offset = positionToOffset(pos);
 
         if (item.anchor) {
           pos.offset.x += item.anchor.x;
@@ -5348,6 +5350,22 @@ 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: {

package/dist/index.js

@@ -16,9 +16,10 @@ var MapLoadingComponents = require('./components/mint-map/core/advanced/MapLoadi
 var MarkerMovingHook = require('./components/mint-map/core/hooks/MarkerMovingHook.js');
 var MintMapProvider = require('./components/mint-map/core/provider/MintMapProvider.js');
 var animation = require('./components/mint-map/core/util/animation.js');
-var calculate = require('./components/mint-map/core/util/calculate.js');
+var geo = require('./components/mint-map/core/util/geo.js');
 var waiting = require('./components/mint-map/core/util/waiting.js');
 var cluster = require('./components/mint-map/core/util/cluster.js');
+var polygon = require('./components/mint-map/core/util/polygon.js');
 var MapControlWrapper = require('./components/mint-map/core/wrapper/MapControlWrapper.js');
 var MapMarkerWrapper = require('./components/mint-map/core/wrapper/MapMarkerWrapper.js');
 var MapPolygonWrapper = require('./components/mint-map/core/wrapper/MapPolygonWrapper.js');
@@ -49,10 +50,10 @@ exports.useMarkerMoving = MarkerMovingHook.useMarkerMoving;
 exports.MintMapProvider = MintMapProvider.MintMapProvider;
 exports.useMintMapController = MintMapProvider.useMintMapController;
 exports.AnimationPlayer = animation.AnimationPlayer;
-exports.GeoCalulator = calculate.GeoCalulator;
-exports.PolygonCalculator = calculate.PolygonCalculator;
+exports.GeoCalulator = geo.GeoCalulator;
 exports.waiting = waiting.waiting;
 exports.getClusterInfo = cluster.getClusterInfo;
+exports.PolygonCalculator = polygon.PolygonCalculator;
 exports.MapControlWrapper = MapControlWrapper.MapControlWrapper;
 exports.MapMarkerWrapper = MapMarkerWrapper.MapMarkerWrapper;
 exports.MapPolygonWrapper = MapPolygonWrapper.MapPolygonWrapper;