[fix]maplibregl getZoom

Author: luoxiao-supermap

src/common/iServer/InitMapServiceBase.js

@@ -1,6 +1,7 @@
 /* Copyright© 2000 - 2023 SuperMap Software Co.Ltd. All rights reserved.
  * This program are made available under the terms of the Apache License, Version 2.0
  * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
+ import { scaleToResolution, getZoomByResolution } from '../util/MapCalculateUtil';
 
 /**
  * @private
@@ -104,3 +105,37 @@ export function getEpsgCode(prjCoordSys) {
   }
   return 'EPSG:' + epsgCode;
 }
+
+
+/**
+ * @private
+ * @function createMapOptions
+ * @description mapboxgl maplibregl 获取地图resolutions。
+ * @returns {Array} resolutions
+ */
+ export function scalesToResolutions(bounds, maxZoom = 22, tileSize = 512) {
+  var resolutions = [];
+  const maxReolution = Math.abs(bounds.left - bounds.right) / tileSize;
+  for (let i = 0; i < maxZoom; i++) {
+    resolutions.push(maxReolution / Math.pow(2, i));
+  }
+  return resolutions.sort(function (a, b) {
+    return b - a;
+  });
+}
+
+/**
+ * @private
+ * @function getZoom
+ * @description mapboxgl maplibregl 获取地图zoom。
+ * @param {Object} resetServiceInfo - rest 地图服务信息。
+ * @param {string} resetServiceInfo.scale - scale
+ * @param {Object} resetServiceInfo.dpi - dpi
+ * @param {Object} resetServiceInfo.coordUnit- coordUnit。
+ * @param {Object} extent - extent。
+ * @returns {number} zoom
+ */
+ export function getZoom({ scale, dpi, coordUnit }, extent) {
+  const resolutions = scalesToResolutions(extent);
+  return getZoomByResolution(scaleToResolution(scale, dpi, coordUnit), resolutions);
+}

src/mapboxgl/mapping/InitMap.js

@@ -1,8 +1,7 @@
 import mapboxgl from 'mapbox-gl';
 import { MapService } from '../services/MapService';
 import { FetchRequest } from '@supermap/iclient-common/util/FetchRequest';
-import { InitMapServiceBase, isPlaneProjection } from '@supermap/iclient-common/iServer/InitMapServiceBase';
-import { scaleToResolution, getZoomByResolution } from '@supermap/iclient-common/util/MapCalculateUtil';
+import { InitMapServiceBase, isPlaneProjection, getZoom  } from '@supermap/iclient-common/iServer/InitMapServiceBase';
 import proj4 from 'proj4';
 
 /**
@@ -241,35 +240,4 @@ async function createMapOptions(url, resetServiceInfo, options) {
   };
 }
 
-/**
- * @private
- * @function createMapOptions
- * @description 获取地图resolutions。
- * @returns {Array} resolutions
- */
-function scalesToResolutions(bounds, maxZoom = 22, tileSize = 512) {
-  var resolutions = [];
-  const maxReolution = Math.abs(bounds.left - bounds.right) / tileSize;
-  for (let i = 0; i < maxZoom; i++) {
-    resolutions.push(maxReolution / Math.pow(2, i));
-  }
-  return resolutions.sort(function (a, b) {
-    return b - a;
-  });
-}
 
-/**
- * @private
- * @function getZoom
- * @description 获取地图zoom。
- * @param {Object} resetServiceInfo - rest 地图服务信息。
- * @param {string} resetServiceInfo.scale - scale
- * @param {Object} resetServiceInfo.dpi - dpi
- * @param {Object} resetServiceInfo.coordUnit- coordUnit。
- * @param {Object} extent - extent。
- * @returns {number} zoom
- */
-function getZoom({ scale, dpi, coordUnit }, extent) {
-  const resolutions = scalesToResolutions(extent);
-  return getZoomByResolution(scaleToResolution(scale, dpi, coordUnit), resolutions);
-}

src/maplibregl/mapping/InitMap.js

@@ -1,6 +1,6 @@
 import maplibregl from 'maplibre-gl';
 import { MapService } from '../services/MapService';
-import { InitMapServiceBase, isPlaneProjection } from '@supermap/iclient-common/iServer/InitMapServiceBase';
+import { InitMapServiceBase, isPlaneProjection, getZoom } from '@supermap/iclient-common/iServer/InitMapServiceBase';
 import proj4 from 'proj4';
 /**
  * @function initMap
@@ -77,7 +77,7 @@ async function createMapOptions(url, resetServiceInfo, options) {
   }
   const sourceType = options.type || 'raster';
   const mapOptions = options.mapOptions || {};
-  const { center } = resetServiceInfo;
+  const { center, bounds, scale, dpi, coordUnit } = resetServiceInfo;
   const mapCenter = center ? proj4('EPSG:3857', 'EPSG:4326', [center.x, center.y]) : [0, 0];
   let tileUrl =
     sourceType === 'vector-tile'
@@ -90,9 +90,11 @@ async function createMapOptions(url, resetServiceInfo, options) {
     const transparent = mapOptions.transparent !== false;
     tileUrl += `/zxyTileImage.png?z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`;
   }
+  const zoom = getZoom({ scale, dpi, coordUnit }, bounds);
   return {
     container: 'map',
     center: mapCenter,
+    zoom,
     style:
       sourceType === 'raster'
         ? {
@@ -117,4 +119,4 @@ async function createMapOptions(url, resetServiceInfo, options) {
         : tileUrl,
     ...mapOptions
   };
-}
+}