haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 14:50:29 +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) => {
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', () => {
if (clickTimeout) {
clearTimeout(clickTimeout);
clickTimeout = null;
const zoom = map.getZoom();
map.setZoom(Math.min(zoom + 1, MAX_ZOOM));
map.setCenter(image.wgs_84);
map.setCenter(image.gcPosition);
return;
}
clickTimeout = setTimeout(() => {
@@ -25,7 +25,7 @@ export const createGoogleMarkerClusterer = (map, images, onClusterLeaveIds) => {
});
return new window.google.maps.marker.AdvancedMarkerElement({
position: image.wgs_84,
position: image.gcPosition,
map,
content: overlay,
});
@@ -36,8 +36,8 @@ export const createGoogleMarkerClusterer = (map, images, onClusterLeaveIds) => {
markers,
renderer: {
render: (cluster) => {
const imagesInBounds = images.filter(image => cluster.bounds.contains(image.wgs_84));
const overlay = customImageOverlay({ isCluster: true, reduces: { src: imagesInBounds[0].src }, pointCount: cluster.count });
const imagesInBounds = images.filter(image => cluster.bounds.contains(image.gcPosition));
const overlay = customImageOverlay({ isCluster: true, reduces: { src: imagesInBounds[0].src }, pointCount: cluster.count, className: 'custom-image-overlay google-custom-overlay' });
overlay.addEventListener('click', () => {
if (clickTimeout) {
clearTimeout(clickTimeout);
@@ -48,13 +48,14 @@ export const createGoogleMarkerClusterer = (map, images, onClusterLeaveIds) => {
return;
}
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));
clickTimeout = null;
}, 300);
});
return new window.google.maps.marker.AdvancedMarkerElement({
position: cluster.position,
position: imagesInBounds[0].gcPosition,
content: overlay,
});
}

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

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

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

@@ -67,6 +67,7 @@ const Map = () => {
parentDir,
location: bdPosition,
wgs_84: { lng, lat },
gcPosition,
};
})
.filter(Boolean);
@@ -109,7 +110,7 @@ const Map = () => {
const renderGoogleMap = useCallback(() => {
if (!window.google?.maps?.Map) return;
mapRef.current = createGoogleMap({ center, zoom, onMapState });
createGoogleMarkerClusterer(mapRef.current, images, onClusterLeaveIds);
window.mapClustererInstance = createGoogleMarkerClusterer(mapRef.current, images, onClusterLeaveIds);
window.mapViewInstance = mapRef.current;
}, [images, center, zoom, onMapState, onClusterLeaveIds]);
@@ -207,7 +208,8 @@ const Map = () => {
viewDom.replaceChild(container, containerRef.current);
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

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

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