From 4002ed58d6306bb1cdeca71a0aaaa94455d8e906 Mon Sep 17 00:00:00 2001
From: songyumeng <songyumeng@supermap.com>
Date: Sat, 9 Sep 2023 02:05:58 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90fix=E3=80=91scale=E5=9C=A8=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E8=BE=B9=E7=BC=98=E6=98=AFNaN=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mapboxgl/web-map/control/scale/ScaleViewModel.js |  9 +++++++--
 test/unit/mocks/crs.js                               |  8 ++++++++
 test/unit/mocks/map.js                               | 11 ++++++-----
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/mapboxgl/web-map/control/scale/ScaleViewModel.js b/src/mapboxgl/web-map/control/scale/ScaleViewModel.js
index 698d8ad2..09841287 100644
--- a/src/mapboxgl/web-map/control/scale/ScaleViewModel.js
+++ b/src/mapboxgl/web-map/control/scale/ScaleViewModel.js
@@ -45,8 +45,13 @@ export default class ScaleViewModel extends mapboxgl.Evented {
   updateScale(map, options) {
     const maxWidth = (options && options.maxWidth) || 100;
 
-    const y = map._container.clientHeight / 2;
-    const maxMeters = this._getDistance(map.unproject([0, y]), map.unproject([maxWidth, y]));
+    const centerPoint = map.project(map.crs.getLngLatCenter());
+    const left = map.unproject([centerPoint.x, centerPoint.y]);
+    let right = map.unproject([centerPoint.x + maxWidth, centerPoint.y]);
+    if (right.lng === left.lng) {
+      right = map.unproject([centerPoint.x - maxWidth, centerPoint.y]);
+    }
+    const maxMeters = this._getDistance(left, right);
 
     if (options && options.unit === 'imperial') {
       const maxFeet = 3.2808 * maxMeters;
diff --git a/test/unit/mocks/crs.js b/test/unit/mocks/crs.js
index 60f8b3dd..32734002 100644
--- a/test/unit/mocks/crs.js
+++ b/test/unit/mocks/crs.js
@@ -5,7 +5,15 @@ var Evented = require('mapbox-gl/src/util/evented');
 class CRS extends Evented {
   constructor(options) {
     super();
+    this.unit='m';
   }
+  
+  getExtent() {
+    return [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892];
+  }
+  u
+  getOrigin() { return jest.fn()}
+  getLngLatCenter() { return [0,0];}
 }
 CRS.get = baseProjection => {
   return {
diff --git a/test/unit/mocks/map.js b/test/unit/mocks/map.js
index 4acb647d..1cf07d12 100644
--- a/test/unit/mocks/map.js
+++ b/test/unit/mocks/map.js
@@ -17,6 +17,7 @@ var LngLatBounds = require('mapbox-gl/src/geo/lng_lat_bounds');
 var Evented = require('mapbox-gl/src/util/evented');
 // var Transform = require('mapbox-gl/src/geo/transform');
 var util = require('mapbox-gl/src/util/util');
+var CRS = require('./crs');
 // var Style = require('mapbox-gl/src/style/style');
 
 // var Style = require('./style');
@@ -80,7 +81,7 @@ var Map = function (options) {
   var ne = new LngLat(-73.9397, 40.8002);
   var llb = new LngLatBounds(sw, ne);
   this.bounds = this.options.bounds || llb;
-
+  this.crs = new CRS();
   try {
     this.center = this.options.center ? new LngLat(this.options.center.lng, this.options.center.lat) : new LngLat(0, 0);
   } catch (e) {
@@ -586,11 +587,11 @@ var Map = function (options) {
     };
   };
   this.getCRS = () => {
-    return {
-      getExtent: () => jest.fn()
-    };
+    return this.crs;
+  };
+  this.setCRS = () => {
+    this.crs = new CRS();
   };
-  this.setCRS = () => {};
   this.flyTo = options => {};
   this.setRenderWorldCopies = epsgCode => {};
   this.triggerRepaint = () => {};