feat: optimize code

frontend/src/metadata/views/map/index.css

@@ -5,6 +5,10 @@
   flex-direction: column;
 }
 
+.sf-metadata-view-map #platform div:nth-child(2) div:has(.custom-avatar-overlay) {
+  display: block !important;
+}
+
 .sf-metadata-view-map .sf-metadata-map-container {
   width: 100%;
   height: 100%;

frontend/src/metadata/views/map/map.js

@@ -33,7 +33,7 @@ const Map = ({ images, onOpenCluster }) => {
     const zoomControl = new ZoomControl();
     const GeolocationControl = createBMapGeolocationControl(window.BMapGL, (err, point) => {
       if (!err && point) {
-        mapRef.current.setCenter({ lng: point.lng, lat: point.lat });
+        mapRef.current.setCenter(point);
       }
     });
 
@@ -48,7 +48,6 @@ const Map = ({ images, onOpenCluster }) => {
     const imageUrl = `${mediaUrl}img/marker.png`;
     const avatarMarker = customAvatarOverlay(centerPoint, appAvatarURL, imageUrl);
     mapRef.current.addOverlay(avatarMarker);
-    setTimeout(() => mapRef.current.showOverlayContainer(), 3000);
   }, []);
 
   const getBMapType = useCallback((type) => {
@@ -101,7 +100,8 @@ const Map = ({ images, onOpenCluster }) => {
   const initializeCluster = useCallback(() => {
     if (mapRef.current && !clusterRef.current) {
       clusterRef.current = new window.BMapLib.MarkerCluster(mapRef.current, {
-        callback: (e, markers) => onClickMarker(e, markers)
+        callback: (e, markers) => onClickMarker(e, markers),
+        maxZoom: 21,
       });
     }
   }, [onClickMarker]);
@@ -109,21 +109,24 @@ const Map = ({ images, onOpenCluster }) => {
   const renderBaiduMap = useCallback(() => {
     if (!mapRef.current || !window.BMapGL.Map) return;
     let { center, zoom } = loadMapState();
+    let userPosition = { lng: 116.40396418840683, lat: 39.915106021711345 };
     // ask for user location
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition((userInfo) => {
-        center = { lng: userInfo.coords.longitude, lat: userInfo.coords.latitude };
+        const gcPosition = wgs84_to_gcj02(userInfo.coords.longitude, userInfo.coords.latitude);
-        const gcPosition = wgs84_to_gcj02(center.lng, center.lat);
         const bdPosition = gcj02_to_bd09(gcPosition.lng, gcPosition.lat);
         const { lng, lat } = bdPosition;
-        center = new window.BMapGL.Point(lng, lat);
+        userPosition = new window.BMapGL.Point(lng, lat);
+        center = userPosition;
         window.sfMetadataContext.localStorage.setItem(STORAGE_MAP_CENTER_KEY, center);
       });
     }
     const mapTypeValue = window.sfMetadataContext.localStorage.getItem(STORAGE_MAP_TYPE_KEY);
     mapRef.current = new window.BMapGL.Map('sf-metadata-map-container', {
       enableMapClick: false,
-      mapType: getBMapType(mapTypeValue)
+      minZoom: 3,
+      maxZoom: 21,
+      mapType: getBMapType(mapTypeValue),
     });
 
     if (isValidPosition(center?.lng, center?.lat)) {
@@ -131,14 +134,13 @@ const Map = ({ images, onOpenCluster }) => {
     }
 
     mapRef.current.enableScrollWheelZoom(true);
+    addMapController();
 
-    initializeUserMarker(center);
+    initializeUserMarker(userPosition);
     initializeCluster();
 
     batchIndexRef.current = 0;
     renderMarkersBatch();
-
-    addMapController();
   }, [addMapController, initializeCluster, initializeUserMarker, renderMarkersBatch, getBMapType, loadMapState]);
 
   useEffect(() => {

frontend/src/metadata/views/map/overlay/custom-avatar-overlay.js

@@ -13,6 +13,7 @@ const customAvatarOverlay = (point, avatarUrl, bgUrl, width = 20, height = 25) =
       this._map = map;
       const divBox = document.createElement('div');
       const divImg = new Image();
+      divBox.className = 'custom-avatar-overlay';
       divBox.style.position = 'absolute';
       divBox.style.width = `${this._width}px`;
       divBox.style.height = `${this._height}px`;

media/js/map/marker-clusterer.js

@@ -31,6 +31,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
         pixelSW.y += gridSize;
         var newNE = map.pixelToPoint(pixelNE);
         var newSW = map.pixelToPoint(pixelSW);
+        if (!newSW || !newNE) return null;
         return new BMapGL.Bounds(newSW, newNE);
     };
 
@@ -41,7 +42,6 @@ var BMapLib = window.BMapLib = BMapLib || {};
      * @return {BMapGL.Bounds} 返回不越界的视图范围
      */
     var cutBoundsInRange = function (bounds) {
-        console.log(bounds);
         var maxX = getRange(bounds.getNorthEast().lng, -180, 180);
         var minX = getRange(bounds.getSouthWest().lng, -180, 180);
         var maxY = getRange(bounds.getNorthEast().lat, -90, 90);
@@ -124,7 +124,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
 
             var opts = options || {};
             this._gridSize = opts["gridSize"] || 60;
-            this._maxZoom = opts["maxZoom"] || 18;
+            this._maxZoom = opts["maxZoom"] || 21;
             this._minClusterSize = opts["minClusterSize"] || 2;
             this._isAverageCenter = false;
             if (opts['isAverageCenter'] != undefined) {
@@ -138,9 +138,9 @@ var BMapLib = window.BMapLib = BMapLib || {};
                 that._redraw();
             });
 
-            this._map.addEventListener("moveend",function(){
+            // this._map.addEventListener("moveend",function(){
-                 that._redraw();
+            //      that._redraw();
-            });
+            // });
 
             var mkrs = opts["markers"];
             isArray(mkrs) && this.addMarkers(mkrs);
@@ -191,7 +191,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
         var mapBounds = this._map.getBounds();
         var extendedBounds = getExtendedBounds(this._map, mapBounds, this._gridSize);
         for(var i = 0, marker; marker = this._markers[i]; i++){
-            if(!marker.isInCluster && extendedBounds.containsPoint(marker._position) ){
+            if(!marker.isInCluster && extendedBounds && extendedBounds.containsPoint(marker._position) ){
                 this._addToClosestCluster(marker);
             }
         }