diff --git a/src/views/index.vue b/src/views/index.vue
index 49071be..772a2e8 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -87,8 +87,8 @@ const LEFT = defineComponent({
           <Ruler
               ref={rulerRef}
               index={dotIndex.value}
-              width={500}
-              height={1000}
+              width={areaData.value.width}
+              height={areaData.value.height}
               boxPos={boxPos.value}
               dots={dots.value}
               dotIndex={0}
@@ -1092,13 +1092,16 @@ function getBoundingBoxAndSize(points) {
     return R * c;
   };
 
-  const width = haversineDistance(minLat, minLon, minLat, maxLon);
-  const height = haversineDistance(minLat, minLon, maxLat, minLon);
+  const width = Math.round(haversineDistance(minLat, minLon, minLat, maxLon))
+  const height = Math.round(haversineDistance(minLat, minLon, maxLat, minLon))
 
   return {width, height};
 }
 
-
+const areaData = ref({
+  width: 500,
+  height: 1000
+})
 const saveAreaPoint = () => {
   let arr = []
   areaPoints.value.forEach((v, k) => {
@@ -1106,7 +1109,7 @@ const saveAreaPoint = () => {
   })
   Promise.all(arr).then(() => {
     ElMessage.success('保存成功')
-    console.log(getBoundingBoxAndSize(areaPoints.value))
+    areaData.value = getBoundingBoxAndSize(areaPoints.value)
   }).catch((err) => {
     ElMessage.error(err)
   })