diff --git a/frontend/src/metadata/views/map/index.css b/frontend/src/metadata/views/map/index.css index b6afc61a49..ca7ed52589 100644 --- a/frontend/src/metadata/views/map/index.css +++ b/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%; diff --git a/frontend/src/metadata/views/map/map.js b/frontend/src/metadata/views/map/map.js index 9ed2d35de3..4dbef7eadd 100644 --- a/frontend/src/metadata/views/map/map.js +++ b/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(center.lng, center.lat); + const gcPosition = wgs84_to_gcj02(userInfo.coords.longitude, userInfo.coords.latitude); 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(() => { diff --git a/frontend/src/metadata/views/map/overlay/custom-avatar-overlay.js b/frontend/src/metadata/views/map/overlay/custom-avatar-overlay.js index 9b21e97834..27b0545e70 100644 --- a/frontend/src/metadata/views/map/overlay/custom-avatar-overlay.js +++ b/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`; diff --git a/media/js/map/marker-clusterer.js b/media/js/map/marker-clusterer.js index 283af7b3ff..e29c871024 100644 --- a/media/js/map/marker-clusterer.js +++ b/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(){ - that._redraw(); - }); + // this._map.addEventListener("moveend",function(){ + // 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); } } @@ -624,7 +624,7 @@ var BMapLib = window.BMapLib = BMapLib || {}; * @return {BMapGL.Bounds} 计算出的范围。 */ Cluster.prototype.getBounds = function() { - var bounds = new BMapGL.Bounds(this._center,this._center); + var bounds = new BMapGL.Bounds(this._center, this._center); for (var i = 0, marker; marker = this._markers[i]; i++) { bounds.extend(marker.getPosition()); }