haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 23:02:26 +00:00
Code Issues Releases Wiki Activity

optimize overlay pixel position (#7887)

Browse Source 
Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries
2025-06-05 11:24:18 +08:00
committed by GitHub
parent 139a25f59f
commit 766b2e6f5c
4 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/metadata/views/map/google.js
View File

@@ -8,14 +8,14 @@ let clickTimeout = null;
export const createGoogleMarkerClusterer = (map, images, onClusterLeaveIds) => { export const createGoogleMarkerClusterer = (map, images, onClusterLeaveIds) => {
const markers = images.map(image => { const markers = images.map(image => {
const overlay = customImageOverlay({ isCluster: false, src: image.src }); const overlay = customImageOverlay({ isCluster: false, src: image.src, className: 'custom-image-overlay google-custom-overlay' });
overlay.addEventListener('click', () => { overlay.addEventListener('click', () => {
if (clickTimeout) { if (clickTimeout) {
clearTimeout(clickTimeout); clearTimeout(clickTimeout);
clickTimeout = null; clickTimeout = null;
const zoom = map.getZoom(); const zoom = map.getZoom();
map.setZoom(Math.min(zoom + 1, MAX_ZOOM)); map.setZoom(Math.min(zoom + 1, MAX_ZOOM));
map.setCenter(image.wgs_84); map.setCenter(image.gcPosition);
return; return;
} }
clickTimeout = setTimeout(() => { clickTimeout = setTimeout(() => {
@@ -25,7 +25,7 @@ export const createGoogleMarkerClusterer = (map, images, onClusterLeaveIds) => {
}); });
return new window.google.maps.marker.AdvancedMarkerElement({ return new window.google.maps.marker.AdvancedMarkerElement({
position: image.wgs_84, position: image.gcPosition,
map, map,
content: overlay, content: overlay,
}); });
@@ -36,8 +36,8 @@ export const createGoogleMarkerClusterer = (map, images, onClusterLeaveIds) => {
markers, markers,
renderer: { renderer: {
render: (cluster) => { render: (cluster) => {
const imagesInBounds = images.filter(image => cluster.bounds.contains(image.wgs_84)); const imagesInBounds = images.filter(image => cluster.bounds.contains(image.gcPosition));
const overlay = customImageOverlay({ isCluster: true, reduces: { src: imagesInBounds[0].src }, pointCount: cluster.count }); const overlay = customImageOverlay({ isCluster: true, reduces: { src: imagesInBounds[0].src }, pointCount: cluster.count, className: 'custom-image-overlay google-custom-overlay' });
overlay.addEventListener('click', () => { overlay.addEventListener('click', () => {
if (clickTimeout) { if (clickTimeout) {
clearTimeout(clickTimeout); clearTimeout(clickTimeout);
@@ -48,13 +48,14 @@ export const createGoogleMarkerClusterer = (map, images, onClusterLeaveIds) => {
return; return;
} }
clickTimeout = setTimeout(() => { clickTimeout = setTimeout(() => {
const imagesInBounds = images.filter(image => cluster.bounds.contains(image.wgs_84)); const imagesInBounds = images.filter(image => cluster.bounds.contains(image.gcPosition));
onClusterLeaveIds(imagesInBounds.map(image => image.id)); onClusterLeaveIds(imagesInBounds.map(image => image.id));
clickTimeout = null; clickTimeout = null;
}, 300); }, 300);
}); });
return new window.google.maps.marker.AdvancedMarkerElement({ return new window.google.maps.marker.AdvancedMarkerElement({
position: cluster.position, position: imagesInBounds[0].gcPosition,
content: overlay, content: overlay,
}); });
} }

5
frontend/src/metadata/views/map/index.css
View File

@@ -18,6 +18,11 @@
height: 100%; height: 100%;
} }
.sf-metadata-view-map .custom-image-overlay.google-custom-overlay {
left: -40px;
top: -80px;
}
.sf-metadata-view-map .custom-image-container { .sf-metadata-view-map .custom-image-container {
width: 86px; width: 86px;
height: 86px; height: 86px;

6
frontend/src/metadata/views/map/index.js
View File

@@ -67,6 +67,7 @@ const Map = () => {
parentDir, parentDir,
location: bdPosition, location: bdPosition,
wgs_84: { lng, lat }, wgs_84: { lng, lat },
gcPosition,
}; };
}) })
.filter(Boolean); .filter(Boolean);
@@ -109,7 +110,7 @@ const Map = () => {
const renderGoogleMap = useCallback(() => { const renderGoogleMap = useCallback(() => {
if (!window.google?.maps?.Map) return; if (!window.google?.maps?.Map) return;
mapRef.current = createGoogleMap({ center, zoom, onMapState }); mapRef.current = createGoogleMap({ center, zoom, onMapState });
createGoogleMarkerClusterer(mapRef.current, images, onClusterLeaveIds); window.mapClustererInstance = createGoogleMarkerClusterer(mapRef.current, images, onClusterLeaveIds);
window.mapViewInstance = mapRef.current; window.mapViewInstance = mapRef.current;
}, [images, center, zoom, onMapState, onClusterLeaveIds]); }, [images, center, zoom, onMapState, onClusterLeaveIds]);
@@ -207,7 +208,8 @@ const Map = () => {
viewDom.replaceChild(container, containerRef.current); viewDom.replaceChild(container, containerRef.current);
mapRef.current = window.mapViewInstance; mapRef.current = window.mapViewInstance;
createGoogleMarkerClusterer(mapRef.current, images, onClusterLeaveIds); window.mapClustererInstance && window.mapClustererInstance.clearMarkers();
window.mapClustererInstance = createGoogleMarkerClusterer(mapRef.current, images, onClusterLeaveIds);
} }
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps

3
frontend/src/metadata/views/map/overlay/custom-image-overlay.js
View File

@@ -1,10 +1,11 @@
const OVERLAY_SIZE = 80; const OVERLAY_SIZE = 80;
const customImageOverlay = (props) => { const customImageOverlay = (props) => {
const { isCluster, pointCount, reduces } = props; const { isCluster, pointCount, reduces, className } = props;
const src = isCluster ? reduces.src : props.src; const src = isCluster ? reduces.src : props.src;
const div = document.createElement('div'); const div = document.createElement('div');
div.className = className;
div.style.position = 'absolute'; div.style.position = 'absolute';
const container = document.createElement('div'); const container = document.createElement('div');