haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-04-27 11:01:14 +00:00
Code Issues Releases Wiki Activity

fix: ui

Browse Source
This commit is contained in:
杨国璇 2025-01-10 14:02:03 +08:00
parent 125ce2430c
commit 13efff8eb0
27 changed files with 475 additions and 354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/metadata/utils/sort/sort-row.js
View File

@ -59,13 +59,13 @@ const sortRowsWithMultiSorts = (tableRows, sorts, { collaborators }) => {
* @param {object} value e.g. { collaborators, ... }
* @returns sorted rows ids, array
*/
const sortTableRows = (table, rows, sorts, { collaborators }) => {
const sortTableRows = (table, rows, sorts, { collaborators, isReturnID = true } = {}) => {
const { columns } = table;
if (!Array.isArray(rows) || rows.length === 0) return [];
const sortRows = rows.slice(0);
const validSorts = deleteInvalidSort(sorts, columns);
sortRowsWithMultiSorts(sortRows, validSorts, { collaborators });
return sortRows.map((row) => row._id);
return isReturnID ? sortRows.map((row) => row._id) : sortRows;
};
export {

50
frontend/src/metadata/views/face-recognition/person-photos/index.js
View File

@ -1,6 +1,8 @@
import React, { useCallback, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import deepCopy from 'deep-copy';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import { CenteredLoading } from '@seafile/sf-metadata-ui-component';
import metadataAPI from '../../../api';
import Metadata from '../../../model/metadata';
@ -10,11 +12,16 @@ import { Utils } from '../../../../utils/utils';
import toaster from '../../../../components/toast';
import Gallery from '../../gallery/main';
import { useMetadataView } from '../../../hooks/metadata-view';
import { PER_LOAD_NUMBER, EVENT_BUS_TYPE, FACE_RECOGNITION_VIEW_ID } from '../../../constants';
import { PER_LOAD_NUMBER, EVENT_BUS_TYPE, FACE_RECOGNITION_VIEW_ID, UTC_FORMAT_DEFAULT } from '../../../constants';
import { getRecordIdFromRecord, getParentDirFromRecord, getFileNameFromRecord } from '../../../utils/cell';
import { sortTableRows } from '../../../utils/sort';
import { useCollaborators } from '../../../hooks/collaborators';
import './index.css';
import '../../gallery/index.css';
dayjs.extend(utc);
const PeoplePhotos = ({ view, people, onClose, onDeletePeoplePhotos, onRemovePeoplePhotos }) => {
const [isLoading, setLoading] = useState(true);
const [isLoadingMore, setLoadingMore] = useState(false);
@ -22,6 +29,7 @@ const PeoplePhotos = ({ view, people, onClose, onDeletePeoplePhotos, onRemovePeo
const repoID = window.sfMetadataContext.getSetting('repoID');
const { deleteFilesCallback, store } = useMetadataView();
const { collaborators } = useCollaborators();
const onLoadMore = useCallback(async () => {
if (isLoadingMore) return;
@ -150,6 +158,38 @@ const PeoplePhotos = ({ view, people, onClose, onDeletePeoplePhotos, onRemovePeo
});
}, [repoID, metadata, store, loadData]);
const onRecordChange = useCallback(({ recordId, parentDir, fileName }, update) => {
const modifyTime = dayjs().utc().format(UTC_FORMAT_DEFAULT);
const modifier = window.sfMetadataContext.getUsername();
const { rows, columns, view } = metadata;
let newRows = [...rows];
newRows.forEach((row, index) => {
const _rowId = getRecordIdFromRecord(row);
const _parentDir = getParentDirFromRecord(row);
const _fileName = getFileNameFromRecord(row);
if ((_rowId === recordId || (_parentDir === parentDir && _fileName === fileName)) && update) {
const updatedRow = Object.assign({}, row, update, {
'_mtime': modifyTime,
'_last_modifier': modifier,
});
newRows[index] = updatedRow;
}
});
let updatedColumnKeyMap = {
'_mtime': true,
'_last_modifier': true
};
Object.keys(update).forEach(key => {
updatedColumnKeyMap[key] = true;
});
if (view.sorts.some(sort => updatedColumnKeyMap[sort.column_key])) {
newRows = sortTableRows({ columns }, newRows, view?.sorts || [], { collaborators, isReturnID: false });
}
let newMetadata = new Metadata({ rows: newRows, columns, view });
newMetadata.hasMore = false;
setMetadata(newMetadata);
}, [metadata, collaborators]);
useEffect(() => {
loadData({ sorts: view.sorts });
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -164,11 +204,15 @@ const PeoplePhotos = ({ view, people, onClose, onDeletePeoplePhotos, onRemovePeo
}, []);
useEffect(() => {
const unsubscribeViewChange = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.UPDATE_SERVER_VIEW, onViewChange);
const eventBus = window?.sfMetadataContext?.eventBus;
if (!eventBus) return;
const unsubscribeViewChange = eventBus.subscribe(EVENT_BUS_TYPE.UPDATE_SERVER_VIEW, onViewChange);
const localRecordChangedSubscribe = eventBus.subscribe(EVENT_BUS_TYPE.LOCAL_RECORD_CHANGED, onRecordChange);
return () => {
unsubscribeViewChange && unsubscribeViewChange();
localRecordChangedSubscribe && localRecordChangedSubscribe();
};
}, [onViewChange]);
}, [onViewChange, onRecordChange]);
if (isLoading) return (<CenteredLoading />);

81
frontend/src/metadata/views/map/cluster-photos/index.js
View File

@ -1,9 +1,11 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import deepCopy from 'deep-copy';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import { CenteredLoading } from '@seafile/sf-metadata-ui-component';
import Gallery from '../../gallery/main';
import { EVENT_BUS_TYPE } from '../../../constants';
import { EVENT_BUS_TYPE, UTC_FORMAT_DEFAULT } from '../../../constants';
import metadataAPI from '../../../api';
import { Utils } from '../../../../utils/utils';
import toaster from '../../../../components/toast';
@ -12,30 +14,29 @@ import { getRowsByIds } from '../../../utils/table';
import Metadata from '../../../model/metadata';
import { sortTableRows } from '../../../utils/sort';
import { useCollaborators } from '../../../hooks/collaborators';
import { getRecordIdFromRecord, getParentDirFromRecord, getFileNameFromRecord } from '../../../utils/cell';
import './index.css';
const ClusterPhotos = ({ markerIds, onClose }) => {
const [isLoading, setLoading] = useState(true);
const [metadata, setMetadata] = useState({ rows: [] });
dayjs.extend(utc);
const ClusterPhotos = ({ photoIds, onClose }) => {
const { repoID, viewID, metadata: allMetadata, store, addFolder, deleteRecords } = useMetadataView();
const { collaborators } = useCollaborators();
const rows = useMemo(() => getRowsByIds(allMetadata, markerIds), [allMetadata, markerIds]);
const columns = useMemo(() => allMetadata?.columns || [], [allMetadata]);
const [isLoading, setLoading] = useState(true);
const [metadata, setMetadata] = useState({ rows: getRowsByIds(allMetadata, photoIds), columns: allMetadata?.columns || [] });
const loadData = useCallback((view) => {
setLoading(true);
const orderRows = sortTableRows({ columns }, rows, view?.sorts || [], { collaborators });
let metadata = new Metadata({ rows, columns, view });
metadata.hasMore = false;
metadata.row_ids = orderRows;
metadata.view.rows = orderRows;
setMetadata(metadata);
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.RESET_VIEW, metadata.view);
const columns = metadata.columns;
const orderRows = sortTableRows({ columns }, metadata.rows, view?.sorts || [], { collaborators, isReturnID: false });
let newMetadata = new Metadata({ rows: orderRows, columns, view });
newMetadata.hasMore = false;
setMetadata(newMetadata);
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.RESET_VIEW, newMetadata.view);
setLoading(false);
}, [rows, columns, collaborators]);
}, [metadata, collaborators]);
const deletedByIds = useCallback((ids) => {
if (!Array.isArray(ids) || ids.length === 0) return;
@ -84,23 +85,61 @@ const ClusterPhotos = ({ markerIds, onClose }) => {
});
}, [metadata, repoID, viewID, store, loadData]);
const onRecordChange = useCallback(({ recordId, parentDir, fileName }, update) => {
const modifyTime = dayjs().utc().format(UTC_FORMAT_DEFAULT);
const modifier = window.sfMetadataContext.getUsername();
const { rows, columns, view } = metadata;
let newRows = [...rows];
newRows.forEach((row, index) => {
const _rowId = getRecordIdFromRecord(row);
const _parentDir = getParentDirFromRecord(row);
const _fileName = getFileNameFromRecord(row);
if ((_rowId === recordId || (_parentDir === parentDir && _fileName === fileName)) && update) {
const updatedRow = Object.assign({}, row, update, {
'_mtime': modifyTime,
'_last_modifier': modifier,
});
newRows[index] = updatedRow;
}
});
let updatedColumnKeyMap = {
'_mtime': true,
'_last_modifier': true
};
Object.keys(update).forEach(key => {
updatedColumnKeyMap[key] = true;
});
if (view.sorts.some(sort => updatedColumnKeyMap[sort.column_key])) {
newRows = sortTableRows({ columns }, newRows, view?.sorts || [], { collaborators, isReturnID: false });
}
let newMetadata = new Metadata({ rows: newRows, columns, view });
newMetadata.hasMore = false;
setMetadata(newMetadata);
}, [metadata, collaborators]);
useEffect(() => {
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, true);
const eventBus = window?.sfMetadataContext?.eventBus;
if (!eventBus) return;
eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, true);
return () => {
window?.sfMetadataContext?.eventBus?.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, false);
eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, false);
};
}, []);
useEffect(() => {
const unsubscribeViewChange = window?.sfMetadataContext?.eventBus?.subscribe(EVENT_BUS_TYPE.UPDATE_SERVER_VIEW, onViewChange);
const eventBus = window?.sfMetadataContext?.eventBus;
if (!eventBus) return;
const unsubscribeViewChange = eventBus.subscribe(EVENT_BUS_TYPE.UPDATE_SERVER_VIEW, onViewChange);
const localRecordChangedSubscribe = eventBus.subscribe(EVENT_BUS_TYPE.LOCAL_RECORD_CHANGED, onRecordChange);
return () => {
unsubscribeViewChange && unsubscribeViewChange();
localRecordChangedSubscribe && localRecordChangedSubscribe();
};
}, [onViewChange]);
}, [onViewChange, onRecordChange]);
useEffect(() => {
loadData({ sorts: allMetadata.view.sorts });
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (isLoading) return (<CenteredLoading />);
@ -113,7 +152,7 @@ const ClusterPhotos = ({ markerIds, onClose }) => {
};
ClusterPhotos.propTypes = {
markerIds: PropTypes.array,
photoIds: PropTypes.array,
onClose: PropTypes.func,
};

50
frontend/src/metadata/views/map/control/geolocation-control.js
View File

@ -1,50 +0,0 @@
import { mediaUrl } from '../../../../utils/constants';
import { Utils } from '../../../../utils/utils';
export function createBMapGeolocationControl(BMapGL, callback) {
function GeolocationControl() {
this.defaultAnchor = window.BMAP_ANCHOR_BOTTOM_RIGHT;
this.defaultOffset = new BMapGL.Size(30, Utils.isDesktop() ? 30 : 90);
}
GeolocationControl.prototype = new BMapGL.Control();
GeolocationControl.prototype.initialize = function (map) {
const div = document.createElement('div');
div.className = 'sf-BMap-geolocation-control';
div.style = 'display: flex; justify-content: center; align-items: center;';
const icon = document.createElement('img');
icon.className = 'sf-BMap-icon-current-location';
icon.src = `${mediaUrl}/img/current-location.svg`;
icon.style = 'width: 18px; height: 18px; display: block;';
div.appendChild(icon);
if (Utils.isDesktop()) {
setNodeStyle(div, 'height: 40px; width: 40px; line-height: 40px');
} else {
setNodeStyle(div, 'height: 35px; width: 35px; line-height: 35px; opacity: 0.75');
}
div.onclick = (e) => {
e.preventDefault();
const geolocation = new BMapGL.Geolocation();
div.className = 'sf-BMap-geolocation-control sf-BMap-geolocation-control-loading';
geolocation.getCurrentPosition((result) => {
div.className = 'sf-BMap-geolocation-control';
if (result) {
const point = result.point;
map.setCenter(point);
callback(null, point);
} else {
// Positioning failed
callback(true);
}
});
};
map.getContainer().appendChild(div);
return div;
};
return GeolocationControl;
}
function setNodeStyle(dom, styleText) {
dom.style.cssText += styleText;
}

68
frontend/src/metadata/views/map/control/zoom-control.js
View File

@ -1,68 +0,0 @@
import { Utils } from '../../../../utils/utils';
const maxZoom = 18;
const minZoom = 3;
export function createBMapZoomControl(BMapGL, callback) {
function ZoomControl() {
this.defaultAnchor = window.BMAP_ANCHOR_BOTTOM_RIGHT;
this.defaultOffset = new BMapGL.Size(80, Utils.isDesktop() ? 30 : 90);
}
ZoomControl.prototype = new BMapGL.Control();
ZoomControl.prototype.initialize = function (map) {
const div = document.createElement('div');
div.className = 'sf-BMap-zoom-control';
div.style = 'display: flex; justify-content: center; align-items: center;';
const zoomInButton = document.createElement('button');
zoomInButton.className = 'sf-BMap-zoom-button btn btn-secondary';
zoomInButton.style = 'display: flex; justify-content: center; align-items: center;';
zoomInButton.innerHTML = '<svg class="zoom-in-icon"><use xlink:href="#plus_sign" /></svg>';
div.appendChild(zoomInButton);
const divider = document.createElement('div');
divider.style = 'height: 22px; width: 1px; background-color: #ccc;';
div.appendChild(divider);
const zoomOutButton = document.createElement('button');
zoomOutButton.className = 'sf-BMap-zoom-button btn btn-secondary';
zoomOutButton.style = 'display: flex; justify-content: center; align-items: center;';
zoomOutButton.innerHTML = '<svg class="zoom-out-icon"><use xlink:href="#minus_sign" /></svg>';
div.appendChild(zoomOutButton);
if (Utils.isDesktop()) {
setNodeStyle(div, 'height: 40px; width: 111px; line-height: 40px');
} else {
setNodeStyle(div, 'height: 35px; width: 80px; line-height: 35px; opacity: 0.75');
}
const updateButtonStates = () => {
const zoomLevel = map.getZoom();
zoomInButton.disabled = zoomLevel >= maxZoom;
zoomOutButton.disabled = zoomLevel <= minZoom;
callback && callback(zoomLevel);
};
zoomInButton.onclick = (e) => {
e.preventDefault();
const nextZoom = map.getZoom() + 2;
map.zoomTo(Math.min(nextZoom, maxZoom));
};
zoomOutButton.onclick = (e) => {
e.preventDefault();
const nextZoom = map.getZoom() - 2;
map.zoomTo(Math.max(nextZoom, minZoom));
};
map.addEventListener('zoomend', updateButtonStates);
map.getContainer().appendChild(div);
return div;
};
return ZoomControl;
}
function setNodeStyle(dom, styleText) {
dom.style.cssText += styleText;
}

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

@ -4,136 +4,3 @@
display: flex;
flex-direction: column;
}
.sf-metadata-view-map #platform div:has(.custom-avatar-overlay) {
display: block !important;
}
.sf-metadata-view-map #platform div:has(.custom-image-overlay) {
display: block !important;
}
.sf-metadata-view-map .sf-metadata-map-container {
width: 100%;
height: 100%;
}
.sf-metadata-view-map .custom-image-container {
width: 86px;
height: 86px;
background-color: #fff;
padding: 3px;
border-radius: 6px;
position: relative;
cursor: default;
}
.sf-metadata-view-map .custom-image-container img {
width: 100%;
height: 100%;
border-radius: 6px;
}
.sf-metadata-view-map .custom-image-number {
position: absolute;
right: -16px;
top: -16px;
width: 32px;
height: 32px;
padding: 6px;
background: #007bff;
color: #fff;
border-radius: 50%;
text-align: center;
font-size: 16px;
line-height: 20px;
font-weight: 400;
}
.sf-metadata-view-map .custom-image-container:active::before,
.sf-metadata-view-map .custom-image-container:active .custom-image-number::before,
.sf-metadata-view-map .custom-image-number:active::before,
.sf-metadata-view-map .custom-image-number:active .custom-image-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.sf-metadata-view-map .custom-image-container:active .custom-image-number::before,
.sf-metadata-view-map .custom-image-number:active::before {
border-radius: 50%;
}
.sf-metadata-view-map .custom-image-container::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
border-radius: 2px;
}
.sf-metadata-view-map .custom-image-container:active::after,
.sf-metadata-view-map .custom-image-number:active .custom-image-container::after {
border-top: 10px solid rgba(0, 0, 0, 0.4);
}
.sf-metadata-view-map .sf-BMap-geolocation-control,
.sf-metadata-view-map .sf-BMap-zoom-control {
background-color: #fff;
opacity: 1;
overflow: hidden;
border-radius: 6px;
box-shadow: -2px -2px 4px 2px rgba(0, 0, 0, 0.1);
}
.sf-metadata-view-map .sf-BMap-geolocation-control-loading {
opacity: 0.7;
}
.sf-metadata-view-map .sf-BMap-geolocation-control:hover,
.sf-metadata-view-map .sf-BMap-zoom-button:not(.disabled):hover {
background-color: #f5f5f5;
cursor: pointer;
}
.sf-metadata-view-map .sf-BMap-zoom-button {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #666;
background-color: #fff;
border: none;
overflow: hidden;
box-shadow: none;
}
.sf-metadata-view-map .sf-BMap-zoom-button .zoom-in-icon,
.sf-metadata-view-map .sf-BMap-zoom-button .zoom-out-icon {
width: 18px;
height: 18px;
fill: currentColor;
}
.sf-metadata-view-map .sf-BMap-zoom-button:not(:disabled):active:focus {
box-shadow: none;
}
.sf-metadata-view-map .sf-BMap-zoom-button:hover {
color: #212529;
}
.sf-metadata-view-map .sf-BMap-zoom-button:disabled {
color: #ccc !important;
}

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

@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { getFileNameFromRecord, getFileTypeFromRecord, getImageLocationFromRecord, getParentDirFromRecord, getRecordIdFromRecord } from '../../utils/cell';
import ClusterPhotos from './cluster-photos';
import MapView from './map';
import MapView from './map-view';
import { PREDEFINED_FILE_TYPE_OPTION_KEY } from '../../constants';
import { useMetadataView } from '../../hooks/metadata-view';
import { Utils } from '../../../utils/utils';
@ -60,7 +60,7 @@ const Map = () => {
}, []);
if (showCluster) {
return (<ClusterPhotos markerIds={clusterRef.current} onClose={closeCluster} />);
return (<ClusterPhotos photoIds={clusterRef.current} onClose={closeCluster} />);
}
return (<MapView images={images} onOpenCluster={openCluster} />);

4
frontend/src/metadata/views/map/map-view/control/geolocation-control/index.css Normal file
View File

@ -0,0 +1,4 @@
.sf-map-control-container.sf-map-geolocation-control {
width: 40px;
line-height: 40px;
}

44
frontend/src/metadata/views/map/map-view/control/geolocation-control/index.js Normal file
View File

@ -0,0 +1,44 @@
import classnames from 'classnames';
import { Utils } from '../../../../../../utils/utils';
import './index.css';
export function createBMapGeolocationControl(BMapGL, callback) {
function GeolocationControl() {
this.defaultAnchor = window.BMAP_ANCHOR_BOTTOM_RIGHT;
this.defaultOffset = new BMapGL.Size(30, Utils.isDesktop() ? 30 : 90);
}
GeolocationControl.prototype = new BMapGL.Control();
GeolocationControl.prototype.initialize = function (map) {
const div = document.createElement('div');
let className = classnames('sf-map-control-container sf-map-geolocation-control d-flex align-items-center justify-content-center', {
'sf-map-geolocation-control-mobile': !Utils.isDesktop()
});
const locationButton = document.createElement('div');
locationButton.className = 'sf-map-control d-flex align-items-center justify-content-center';
locationButton.innerHTML = '<i class="sf-map-control-icon sf3-font sf3-font-current-location"></i>';
div.appendChild(locationButton);
div.className = className;
div.onclick = (e) => {
e.preventDefault();
const geolocation = new BMapGL.Geolocation();
div.className = classnames(className, 'sf-map-control-loading');
geolocation.getCurrentPosition((result) => {
div.className = className;
if (result) {
const point = result.point;
callback(point);
} else {
// Positioning failed
callback();
}
});
};
map.getContainer().appendChild(div);
return div;
};
return GeolocationControl;
}

63
frontend/src/metadata/views/map/map-view/control/index.css Normal file
View File

@ -0,0 +1,63 @@
.sf-map-control-container {
height: 40px;
width: fit-content;
background-color: rgba(255, 255, 255, .9);
opacity: 1;
overflow: hidden;
border-radius: 6px;
box-shadow: -2px -2px 4px 2px rgba(0, 0, 0, 0.1);
line-height: 40px;
}
.sf-map-control-container.sf-map-control-loading {
opacity: 0.7;
}
.sf-map-control-container.sf-map-control-container-mobile {
height: 35px;
line-height: 35px;
opacity: .75;
}
.sf-map-control-container .sf-map-control-divider {
height: 100%;
width: 1px;
position: relative;
background-color: inherit;
}
.sf-map-control-container .sf-map-control-divider::before {
content: '';
position: absolute;
top: 9px;
height: 22px;
width: 1px;
background-color: #ccc;
}
.sf-map-control-container .sf-map-control {
height: 40px;
width: 40px;
color: #666;
background-color: inherit;
text-align: center;
}
.sf-map-control-container.sf-map-control-container-mobile .sf-map-control {
height: 35px;
width: 35px;
opacity: .75;
}
.sf-map-control-container .sf-map-control .sf-map-control-icon {
font-size: 18px;
}
.sf-map-control-container .sf-map-control:not(.disabled):hover {
cursor: pointer;
color: #212529;
}
.sf-map-control-container .sf-map-control.disabled {
color: #ccc;
}

2
frontend/src/metadata/views/map/control/index.js → frontend/src/metadata/views/map/map-view/control/index.js
View File

@ -1,6 +1,8 @@
import { createBMapGeolocationControl } from './geolocation-control';
import { createBMapZoomControl } from './zoom-control';
import './index.css';
export {
createBMapGeolocationControl,
createBMapZoomControl

3
frontend/src/metadata/views/map/map-view/control/zoom-control/index.css Normal file
View File

@ -0,0 +1,3 @@
.sf-map-control-container.sf-map-zoom-control-container .sf-map-control {
width: 55px;
}

59
frontend/src/metadata/views/map/map-view/control/zoom-control/index.js Normal file
View File

@ -0,0 +1,59 @@
import classnames from 'classnames';
import { Utils } from '../../../../../../utils/utils';
import './index.css';
export function createBMapZoomControl(BMapGL, { maxZoom, minZoom }, callback) {
function ZoomControl() {
this.defaultAnchor = window.BMAP_ANCHOR_BOTTOM_RIGHT;
this.defaultOffset = new BMapGL.Size(80, Utils.isDesktop() ? 30 : 90);
}
ZoomControl.prototype = new BMapGL.Control();
ZoomControl.prototype.initialize = function (map) {
const zoomLevel = map.getZoom();
const div = document.createElement('div');
div.className = classnames('sf-map-control-container sf-map-zoom-control-container d-flex align-items-center justify-content-center', {
'sf-map-control-container-mobile': !Utils.isDesktop()
});
const buttonClassName = 'sf-map-control d-flex align-items-center justify-content-center';
const zoomInButton = document.createElement('div');
zoomInButton.className = classnames(buttonClassName, { 'disabled': zoomLevel >= maxZoom });
zoomInButton.innerHTML = '<i class="sf-map-control-icon sf3-font sf3-font-zoom-in"></i>';
div.appendChild(zoomInButton);
const divider = document.createElement('div');
divider.className = 'sf-map-control-divider';
div.appendChild(divider);
const zoomOutButton = document.createElement('div');
zoomOutButton.className = classnames(buttonClassName, { 'disabled': zoomLevel <= minZoom });
zoomOutButton.innerHTML = '<i class="sf-map-control-icon sf3-font sf3-font-zoom-out"></i>';
div.appendChild(zoomOutButton);
const updateButtonStates = () => {
const zoomLevel = map.getZoom();
zoomInButton.className = classnames(buttonClassName, { 'disabled': zoomLevel >= maxZoom });
zoomOutButton.className = classnames(buttonClassName, { 'disabled': zoomLevel <= minZoom });
callback && callback(zoomLevel);
};
zoomInButton.onclick = (e) => {
e.preventDefault();
const nextZoom = map.getZoom() + 1;
map.zoomTo(Math.min(nextZoom, maxZoom));
};
zoomOutButton.onclick = (e) => {
e.preventDefault();
const nextZoom = map.getZoom() - 1;
map.zoomTo(Math.max(nextZoom, minZoom));
};
map.addEventListener('zoomend', updateButtonStates);
map.getContainer().appendChild(div);
return div;
};
return ZoomControl;
}

82
frontend/src/metadata/views/map/map-view/index.css Normal file
View File

@ -0,0 +1,82 @@
.sf-metadata-view-map #platform div:has(.custom-avatar-overlay) {
display: block !important;
}
.sf-metadata-view-map #platform div:has(.custom-image-overlay) {
display: block !important;
}
.sf-metadata-view-map .sf-metadata-map-container {
width: 100%;
height: 100%;
}
.sf-metadata-view-map .custom-image-container {
width: 86px;
height: 86px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
padding: 3px;
border-radius: 6px;
position: relative;
cursor: default;
}
.sf-metadata-view-map .custom-image-container img {
border-radius: 6px;
}
.sf-metadata-view-map .custom-image-number {
position: absolute;
right: -16px;
top: -16px;
width: 32px;
height: 32px;
line-height: 32px;
background: #007bff;
color: #fff;
border-radius: 50%;
text-align: center;
font-size: 16px;
font-weight: 400;
}
.sf-metadata-view-map .custom-image-container:active::before,
.sf-metadata-view-map .custom-image-container:active .custom-image-number::before,
.sf-metadata-view-map .custom-image-number:active::before,
.sf-metadata-view-map .custom-image-number:active .custom-image-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.sf-metadata-view-map .custom-image-container:active .custom-image-number::before,
.sf-metadata-view-map .custom-image-number:active::before {
border-radius: 50%;
}
.sf-metadata-view-map .custom-image-container::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
border-radius: 2px;
}
.sf-metadata-view-map .custom-image-container:active::after,
.sf-metadata-view-map .custom-image-number:active .custom-image-container::after {
border-top: 10px solid rgba(0, 0, 0, 0.4);
}

35
frontend/src/metadata/views/map/map.js → frontend/src/metadata/views/map/map-view/index.js
View File

@ -1,19 +1,23 @@
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import PropTypes from 'prop-types';
import loadBMap, { initMapInfo } from '../../../utils/map-utils';
import { appAvatarURL, baiduMapKey, googleMapKey, mediaUrl } from '../../../utils/constants';
import { isValidPosition } from '../../utils/validate';
import { wgs84_to_gcj02, gcj02_to_bd09 } from '../../../utils/coord-transform';
import { MAP_TYPE as MAP_PROVIDER } from '../../../constants';
import { EVENT_BUS_TYPE, MAP_TYPE, STORAGE_MAP_CENTER_KEY, STORAGE_MAP_TYPE_KEY, STORAGE_MAP_ZOOM_KEY } from '../../constants';
import loadBMap, { initMapInfo } from '../../../../utils/map-utils';
import { appAvatarURL, baiduMapKey, googleMapKey, mediaUrl } from '../../../../utils/constants';
import { isValidPosition } from '../../../utils/validate';
import { wgs84_to_gcj02, gcj02_to_bd09 } from '../../../../utils/coord-transform';
import { MAP_TYPE as MAP_PROVIDER } from '../../../../constants';
import { EVENT_BUS_TYPE, MAP_TYPE, STORAGE_MAP_CENTER_KEY, STORAGE_MAP_TYPE_KEY, STORAGE_MAP_ZOOM_KEY } from '../../../constants';
import { createBMapGeolocationControl, createBMapZoomControl } from './control';
import { customAvatarOverlay, customImageOverlay } from './overlay';
import './index.css';
const DEFAULT_POSITION = { lng: 104.195, lat: 35.861 };
const DEFAULT_ZOOM = 4;
const BATCH_SIZE = 500;
const MAX_ZOOM = 21;
const MIN_ZOOM = 3;
const Map = ({ images, onOpenCluster }) => {
const MapView = ({ images, onOpenCluster }) => {
const mapInfo = useMemo(() => initMapInfo({ baiduMapKey, googleMapKey }), []);
const mapRef = useRef(null);
@ -29,16 +33,13 @@ const Map = ({ images, onOpenCluster }) => {
}, []);
const addMapController = useCallback(() => {
const ZoomControl = createBMapZoomControl(window.BMapGL, saveMapState);
const ZoomControl = createBMapZoomControl(window.BMapGL, { maxZoom: MAX_ZOOM, minZoom: MIN_ZOOM }, saveMapState);
const zoomControl = new ZoomControl();
const GeolocationControl = createBMapGeolocationControl(window.BMapGL, (err, point) => {
if (!err && point) {
mapRef.current.setCenter(point);
}
const GeolocationControl = createBMapGeolocationControl(window.BMapGL, (point) => {
point && mapRef.current && mapRef.current.setCenter(point);
});
const geolocationControl = new GeolocationControl();
mapRef.current.addControl(zoomControl);
mapRef.current.addControl(geolocationControl);
}, [saveMapState]);
@ -124,8 +125,8 @@ const Map = ({ images, onOpenCluster }) => {
const mapTypeValue = window.sfMetadataContext.localStorage.getItem(STORAGE_MAP_TYPE_KEY);
mapRef.current = new window.BMapGL.Map('sf-metadata-map-container', {
enableMapClick: false,
minZoom: 3,
maxZoom: 21,
minZoom: MIN_ZOOM,
maxZoom: MAX_ZOOM,
mapType: getBMapType(mapTypeValue),
});
@ -175,9 +176,9 @@ const Map = ({ images, onOpenCluster }) => {
);
};
Map.propTypes = {
MapView.propTypes = {
images: PropTypes.array,
onOpenCluster: PropTypes.func,
};
export default Map;
export default MapView;

0
frontend/src/metadata/views/map/overlay/custom-avatar-overlay.js → frontend/src/metadata/views/map/map-view/overlay/custom-avatar-overlay.js
View File

2
frontend/src/metadata/views/map/overlay/custom-image-overlay.js → frontend/src/metadata/views/map/map-view/overlay/custom-image-overlay.js
View File

@ -1,4 +1,4 @@
import { Utils } from '../../../../utils/utils';
import { Utils } from '../../../../../utils/utils';
const customImageOverlay = (center, image, callback) => {
class ImageOverlay extends window.BMapLib.TextIconOverlay {

0
frontend/src/metadata/views/map/overlay/index.js → frontend/src/metadata/views/map/map-view/overlay/index.js
View File

6
frontend/src/utils/map-utils.js
View File

@ -1,6 +1,8 @@
import { MAP_TYPE } from '../constants';
import { mediaUrl } from './constants';
const STATIC_RESOURCE_VERSION = 0.1;
export const initMapInfo = ({ baiduMapKey, googleMapKey, mineMapKey }) => {
if (baiduMapKey) return { type: MAP_TYPE.B_MAP, key: baiduMapKey };
if (googleMapKey) return { type: MAP_TYPE.G_MAP, key: googleMapKey };
@ -30,8 +32,8 @@ export const loadMapSource = (type, key, callback) => {
export default function loadBMap(ak) {
return new Promise((resolve, reject) => {
asyncLoadBaiduJs(ak)
.then(() => asyncLoadJs(`${mediaUrl}/js/map/text-icon-overlay.js`))
.then(() => asyncLoadJs(`${mediaUrl}/js/map/marker-clusterer.js`))
.then(() => asyncLoadJs(`${mediaUrl}/js/map/text-icon-overlay.js?v=${STATIC_RESOURCE_VERSION}`))
.then(() => asyncLoadJs(`${mediaUrl}/js/map/marker-cluster.js?v=${STATIC_RESOURCE_VERSION}`))
.then(() => resolve(true))
.catch((err) => reject(err));
});

40
media/css/sf_font3/iconfont.css
View File

@ -1,11 +1,11 @@
@font-face {
font-family: "sf3-font"; /* Project id 1230969 */
src: url('./iconfont.eot?t=1733301127109'); /* IE9 */
src: url('./iconfont.eot?t=1733301127109#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./iconfont.woff2?t=1733301127109') format('woff2'),
url('./iconfont.woff?t=1733301127109') format('woff'),
url('./iconfont.ttf?t=1733301127109') format('truetype'),
url('./iconfont.svg?t=1733301127109#sf3-font') format('svg');
src: url('./iconfont.eot?t=1736476800596'); /* IE9 */
src: url('./iconfont.eot?t=1736476800596#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./iconfont.woff2?t=1736476800596') format('woff2'),
url('./iconfont.woff?t=1736476800596') format('woff'),
url('./iconfont.ttf?t=1736476800596') format('truetype'),
url('./iconfont.svg?t=1736476800596#sf3-font') format('svg');
}
.sf3-font {
@ -16,6 +16,30 @@
-moz-osx-font-smoothing: grayscale;
}
.sf3-font-zoom-out:before {
content: "\e630";
}
.sf3-font-current-location:before {
content: "\e62e";
}
.sf3-font-zoom-in:before {
content: "\e62f";
}
.sf3-font-ai:before {
content: "\e854";
}
.sf3-font-time:before {
content: "\e852";
}
.sf3-font-description:before {
content: "\e853";
}
.sf3-font-hi:before {
content: "\e603";
}
@ -24,10 +48,6 @@
content: "\e851";
}
.sf3-font-current-location:before {
content: "\e850";
}
.sf3-font-ai_generated:before {
content: "\e84f";
}

BIN
media/css/sf_font3/iconfont.eot
View File

Binary file not shown.

18
media/css/sf_font3/iconfont.svg
View File

@ -14,12 +14,22 @@
/>
<missing-glyph />
<glyph glyph-name="zoom-out" unicode="&#58928;" d="M0 440.888889m56.888889 0l910.222222 0q56.888889 0 56.888889-56.888889l0 0q0-56.888889-56.888889-56.888889l-910.222222 0q-56.888889 0-56.888889 56.888889l0 0q0 56.888889 56.888889 56.888889Z" horiz-adv-x="1024" />
<glyph glyph-name="current-location" unicode="&#58926;" d="M512 896c282.7776 0 512-229.2224 512-512s-229.2224-512-512-512S0 101.2224 0 384 229.2224 896 512 896z m51.2512-105.5744L563.2 691.2a51.2 51.2 0 0 0-102.4 0V790.4256a409.8048 409.8048 0 0 1-355.2256-355.328L107.52 435.2h102.4a51.2 51.2 0 1 0 0-102.4h-102.4l-1.9456 0.0512A409.8048 409.8048 0 0 1 460.8-22.4768V76.8a51.2 51.2 0 0 0 102.4 0l0.0512-99.2256a409.8048 409.8048 0 0 1 355.1744 355.1744L824.32 332.8a51.2 51.2 0 0 0 0 102.4h94.1056a409.8048 409.8048 0 0 1-355.1744 355.2256zM384 512m128 0l0 0q128 0 128-128l0 0q0-128-128-128l0 0q-128 0-128 128l0 0q0 128 128 128Z" horiz-adv-x="1024" />
<glyph glyph-name="zoom-in" unicode="&#58927;" d="M19.132632 448.512m53.894736 0l862.31579 0q53.894737 0 53.894737-53.894737l0 0q0-53.894737-53.894737-53.894737l-862.31579 0q-53.894737 0-53.894736 53.894737l0 0q0 53.894737 53.894736 53.894737ZM450.290526-36.540632V825.775158a53.894737 53.894737 0 0 0 107.789474 0v-862.31579a53.894737 53.894737 0 1 0-107.789474 0z" horiz-adv-x="1024" />
<glyph glyph-name="ai" unicode="&#59476;" d="M515.2 896C796.8 896 1024 678.4 1024 416s-227.2-480-508.8-480h-19.2c-12.8 0-118.4-6.4-156.8-19.2-32-6.4-89.6-28.8-124.8-38.4-3.2-3.2-16-6.4-22.4-6.4-16 0-28.8 12.8-32 32-6.4 35.2-6.4 96 12.8 150.4C67.2 144 0 268.8 0 416 3.2 678.4 230.4 896 515.2 896zM512 800C281.6 800 96 620.8 96 403.2c0-112 54.4-211.2 144-291.2l38.4-35.2c-12.8-25.6-22.4-41.6-25.6-54.4-6.4-16-9.6-41.6-6.4-54.4 25.6 12.8 64 32 92.8 38.4 54.4 12.8 134.4 19.2 172.8 19.2 182.4 0 416 160 416 377.6S742.4 800 512 800z m-92.8-124.8C329.6 675.2 256 604.8 256 518.4v-320c0-3.2 3.2-9.6 9.6-9.6h89.6V515.2c0 32 28.8 60.8 60.8 60.8s60.8-28.8 60.8-60.8v-73.6H384c-3.2 0-9.6 0-12.8-3.2-3.2-3.2-3.2-9.6-3.2-12.8v-60.8c0-12.8 9.6-19.2 19.2-19.2H480v-156.8h89.6c3.2 0 9.6 3.2 9.6 9.6v320c0 86.4-70.4 156.8-160 156.8z m297.6-131.2h-57.6c-12.8 0-19.2-6.4-19.2-19.2v-313.6c0-12.8 6.4-19.2 19.2-19.2h57.6c12.8 0 19.2 6.4 19.2 19.2v313.6c0 12.8-6.4 19.2-19.2 19.2z m-28.8 32c25.6 0 48 22.4 48 48S713.6 672 688 672 640 649.6 640 624s22.4-48 48-48z" horiz-adv-x="1024" />
<glyph glyph-name="time" unicode="&#59474;" d="M896 384c0 211.2-172.8 384-384 384S128 595.2 128 384s172.8-384 384-384 384 172.8 384 384m96 0c0-262.4-217.6-480-480-480S32 121.6 32 384 249.6 864 512 864s480-217.6 480-480m-192-48c0-25.6-22.4-48-48-48h-192c-54.4 0-96 41.6-96 96V624c0 25.6 22.4 48 48 48s48-22.4 48-48v-192c0-25.6 22.4-48 48-48h144c25.6 0 48-22.4 48-48" horiz-adv-x="1024" />
<glyph glyph-name="description" unicode="&#59475;" d="M800 809.6l134.4-134.4c32-32 32-86.4 0-115.2L332.8-44.8 64-64l16 265.6 604.8 608c32 28.8 86.4 28.8 115.2 0z m-204.8-230.4L179.2 160l-6.4-118.4 118.4 9.6 416 416-112 112z m150.4 150.4l-80-80 112-112 80 80-112 112z" horiz-adv-x="1024" />
<glyph glyph-name="hi" unicode="&#58883;" d="M512 864c262.4 0 480-214.4 480-480 0-96-28.8-188.8-76.8-262.4l64-150.4c3.2-9.6 0-19.2-9.6-22.4-3.2 0-6.4-3.2-9.6 0l-172.8 44.8c-80-54.4-172.8-83.2-272-83.2C249.6-96 32 121.6 32 384S249.6 864 512 864zM512 528v-131.2H390.4V528h-64v-326.4h64V336H512v-134.4h60.8V528H512z m147.2-67.2c22.4 0 38.4 16 38.4 38.4 0 19.2-16 38.4-38.4 38.4-19.2 0-38.4-19.2-38.4-38.4 3.2-19.2 22.4-38.4 38.4-38.4z m-25.6-259.2h57.6V435.2h-57.6v-233.6z" horiz-adv-x="1024" />
<glyph glyph-name="refresh" unicode="&#59473;" d="M512 864c163.2 0 304-76.8 390.4-201.6V742.4c0 25.6 22.4 44.8 44.8 44.8S992 768 992 742.4v-179.2c0-25.6-22.4-44.8-44.8-44.8h-195.2c-16 0-32 9.6-38.4 22.4-9.6 16-9.6 35.2 0 48 6.4 12.8 22.4 19.2 38.4 19.2h76.8c-70.4 99.2-185.6 166.4-316.8 166.4C294.4 774.4 121.6 601.6 121.6 384S294.4-6.4 512-6.4c182.4 0 332.8 121.6 377.6 291.2 6.4 19.2 19.2 32 41.6 32 12.8 0 25.6-3.2 38.4-16 16-16 12.8-32 9.6-51.2C921.6 48 729.6-96 512-96 249.6-96 32 121.6 32 384S249.6 864 512 864z" horiz-adv-x="1024" />
<glyph glyph-name="current-location" unicode="&#59472;" d="M512 864c265.6 0 480-214.4 480-480s-214.4-480-480-480S32 118.4 32 384 246.4 864 512 864z m48-118.4v-96c0-25.6-22.4-48-48-48s-48 22.4-48 48v96c-160-22.4-288-150.4-310.4-310.4h96c25.6 0 48-22.4 48-48s-22.4-48-48-48h-96c22.4-163.2 150.4-291.2 310.4-313.6v99.2c0 25.6 22.4 48 48 48s48-22.4 48-48v-99.2c163.2 22.4 291.2 150.4 313.6 313.6h-99.2c-25.6 0-48 22.4-48 48s22.4 48 48 48h99.2c-22.4 160-153.6 288-313.6 310.4zM512 512c70.4 0 128-57.6 128-128s-57.6-128-128-128-128 57.6-128 128 57.6 128 128 128z" horiz-adv-x="1024" />
<glyph glyph-name="ai_generated" unicode="&#59471;" d="M486.4 896C214.4 883.2 0 659.2 0 384c0-115.2 35.2-220.8 105.6-313.6L6.4-105.6c-3.2-3.2-3.2-9.6 0-12.8 3.2-6.4 9.6-9.6 12.8-9.6H512c275.2 0 499.2 214.4 512 486.4 6.4 144-44.8 278.4-140.8 380.8S656 896 512 896h-25.6z m-121.6-288h102.4L640 160h-102.4l-41.6 102.4h-160L294.4 160H192l172.8 448z m336 0H800v-448h-99.2V608zM416 499.2l-60.8-156.8h118.4L416 499.2z" horiz-adv-x="1024" />
<glyph glyph-name="map" unicode="&#59470;" d="M976 646.4c9.6-6.4 16-19.2 16-32v-563.2c0-16-9.6-32-25.6-38.4l-281.6-105.6c-9.6-3.2-19.2-3.2-25.6 0L352 9.6l-265.6-102.4c-12.8-3.2-25.6-3.2-38.4 3.2-9.6 6.4-16 19.2-16 32V505.6c0 16 9.6 32 25.6 38.4l128 48c-6.4-35.2-6.4-73.6 0-108.8l-64-28.8v-428.8l179.2 76.8v172.8l89.6-112v-86.4l240-80v166.4l89.6 112v-256l179.2 70.4V531.2l-60.8-25.6c3.2 35.2 3.2 70.4-6.4 105.6l102.4 38.4c16 6.4 28.8 3.2 41.6-3.2zM297.6 777.6C416 892.8 604.8 892.8 723.2 777.6c105.6-99.2 118.4-256 35.2-374.4l-198.4-246.4-9.6-9.6c-28.8-22.4-67.2-19.2-89.6 9.6l-195.2 243.2c-83.2 118.4-67.2 275.2 32 377.6z m355.2-67.2c-76.8 70.4-204.8 70.4-281.6 0-70.4-64-76.8-163.2-22.4-236.8l131.2-176c16-22.4 48-22.4 64 0l131.2 176c54.4 73.6 48 172.8-22.4 236.8zM512 704c70.4 0 128-57.6 128-128 0-44.8-25.6-86.4-64-112s-89.6-22.4-128 0-64 64-64 112c0 70.4 57.6 128 128 128z m0-96c-19.2 0-32-12.8-32-32s12.8-32 32-32 32 12.8 32 32-12.8 32-32 32z" horiz-adv-x="1024" />
@ -188,7 +198,7 @@
<glyph glyph-name="ai-search" unicode="&#59393;" d="M448.099844 896c246.015601 0 447.301092-201.285491 447.301092-447.301092 0-95.850234-28.75507-182.115445-79.875195-255.600624l182.115445-182.115445c31.950078-31.950078 31.950078-83.070203 0-115.02028s-83.070203-31.950078-115.020281 0L703.700468 78.078003c-73.485179-51.120125-159.75039-79.875195-255.600624-79.875195-246.015601 0-447.301092 201.285491-447.301092 447.301092C0.798752 694.714509 202.084243 896 448.099844 896z m0-127.800312C272.374415 768.199688 128.599064 624.424337 128.599064 448.698908s143.775351-319.50078 319.50078-319.50078 319.50078 143.775351 319.50078 319.50078S623.825273 768.199688 448.099844 768.199688zM396.979719 640.399376c15.975039 0 28.75507-9.585023 35.145086-25.560062l99.045242-309.915757c6.390016-22.365055-9.585023-47.925117-35.145086-47.925117h-3.195008c-15.975039 0-31.950078 9.585023-35.145086 25.560062l-19.170046 70.290172H317.104524l-19.170047-70.290172c-6.390016-15.975039-19.170047-25.560062-38.340093-25.560062-25.560062 0-41.535101 25.560062-35.145086 47.925117l99.045242 309.915757c6.390016 15.975039 22.365055 25.560062 38.340093 25.560062h35.145086z m-19.170047-57.51014c-12.780031-41.535101-22.365055-86.265211-35.145085-124.605305l-12.780032-41.535101h92.655227l-12.780032 41.535101c-9.585023 38.340094-19.170047 83.070203-31.950078 124.605305zM636.605304 640.399376c19.170047 0 35.145086-15.975039 35.145086-35.145086v-309.915756c0-19.170047-15.975039-35.145086-35.145086-35.145086h-3.195008c-19.170047 0-35.145086 15.975039-35.145085 35.145086V605.25429c0 19.170047 15.975039 35.145086 35.145085 35.145086h3.195008z" horiz-adv-x="1024" />
<glyph glyph-name="search" unicode="&#59394;" d="M448.099844 896c246.015601 0 447.301092-201.285491 447.301092-447.301092 0-95.850234-28.75507-182.115445-79.875195-255.600624l182.115445-182.115445c31.950078-31.950078 31.950078-83.070203 0-115.02028s-83.070203-31.950078-115.020281 0L703.700468 78.078003c-73.485179-51.120125-159.75039-79.875195-255.600624-79.875195-246.015601 0-447.301092 201.285491-447.301092 447.301092C0.798752 694.714509 202.084243 896 448.099844 896z m0-127.800312C272.374415 768.199688 128.599064 624.424337 128.599064 448.698908s143.775351-319.50078 319.50078-319.50078 319.50078 143.775351 319.50078 319.50078S623.825273 768.199688 448.099844 768.199688z" horiz-adv-x="1024" />
<glyph glyph-name="search" unicode="&#59394;" d="M448 864c230.4 0 416-185.6 416-416 0-99.2-35.2-188.8-89.6-259.2l204.8-204.8c19.2-19.2 19.2-48 0-67.2-19.2-19.2-48-19.2-67.2 0l-204.8 204.8C636.8 64 547.2 32 448 32 217.6 32 32 217.6 32 448S217.6 864 448 864z m0-96C272 768 128 624 128 448s144-320 320-320 320 144 320 320S624 768 448 768z" horiz-adv-x="1024" />
<glyph glyph-name="set-up" unicode="&#59392;" d="M512 576c105.6 0 192-86.4 192-192s-86.4-192-192-192-192 86.4-192 192 86.4 192 192 192z m0-96c-54.4 0-96-41.6-96-96s41.6-96 96-96 96 41.6 96 96-41.6 96-96 96zM432 835.2c-9.6 19.2-32 28.8-54.4 22.4-83.2-19.2-153.6-60.8-214.4-112-12.8-16-16-35.2-9.6-54.4 6.4-12.8 9.6-25.6 9.6-41.6 0-51.2-44.8-92.8-92.8-92.8-19.2 0-38.4-12.8-44.8-32-19.2-41.6-25.6-92.8-25.6-144 0-35.2 3.2-67.2 9.6-99.2 3.2-22.4 25.6-38.4 51.2-35.2h9.6c54.4 0 92.8-41.6 92.8-92.8 0-22.4-9.6-41.6-22.4-57.6-16-16-12.8-41.6 3.2-60.8 60.8-60.8 137.6-105.6 224-131.2 22.4-6.4 51.2 6.4 57.6 28.8 12.8 38.4 48 64 89.6 64s76.8-25.6 89.6-64c6.4-22.4 32-35.2 57.6-28.8 86.4 25.6 163.2 70.4 224 131.2 16 16 16 41.6 3.2 60.8-12.8 16-22.4 35.2-22.4 57.6 0 51.2 44.8 92.8 92.8 92.8h9.6c22.4-3.2 48 12.8 51.2 35.2 6.4 32 9.6 67.2 9.6 99.2 0 51.2-6.4 102.4-22.4 150.4-6.4 19.2-22.4 32-44.8 32-54.4 0-92.8 41.6-92.8 92.8 0 16 3.2 28.8 9.6 41.6 3.2 16-3.2 38.4-16 51.2-60.8 54.4-134.4 92.8-211.2 115.2-19.2 0-44.8-9.6-54.4-28.8-16-28.8-48-51.2-83.2-51.2s-70.4 22.4-83.2 51.2zM262.4 656c0 16-3.2 32-6.4 44.8 35.2 28.8 76.8 48 118.4 67.2 32-41.6 83.2-67.2 140.8-67.2 57.6 0 108.8 25.6 140.8 67.2 44.8-12.8 83.2-38.4 118.4-67.2-3.2-12.8-6.4-32-6.4-44.8 0-86.4 64-166.4 150.4-179.2 6.4-32 9.6-64 9.6-96 0-16 0-32-3.2-48-89.6-9.6-160-86.4-160-179.2 0-28.8 6.4-57.6 19.2-80-35.2-32-76.8-57.6-118.4-73.6-32 51.2-89.6 83.2-153.6 83.2s-121.6-35.2-153.6-83.2c-44.8 16-83.2 41.6-118.4 73.6 6.4 25.6 16 51.2 16 80 0 89.6-67.2 169.6-160 179.2 3.2 12.8 3.2 32 3.2 44.8 0 32 3.2 64 9.6 96 89.6 16 153.6 89.6 153.6 182.4z" horiz-adv-x="1024" />
@ -224,7 +234,7 @@
<glyph glyph-name="helpful" unicode="&#59362;" d="M988.8 496c-32 44.8-83.2 67.2-137.6 70.4l-150.4 3.2c12.8 51.2 16 99.2 12.8 140.8-6.4 48-19.2 89.6-44.8 121.6-16 22.4-35.2 38.4-60.8 48-16 9.6-35.2 16-57.6 16-83.2 0-147.2-64-147.2-140.8 0-124.8-80-227.2-176-227.2H86.4c-48 0-86.4-38.4-86.4-89.6v-480C0-89.6 38.4-128 86.4-128h678.4c41.6 0 80 12.8 112 38.4 32 25.6 54.4 60.8 64 102.4L1020.8 352c9.6 51.2 0 102.4-32 144zM185.6-44.8h-96-3.2V438.4c0 3.2 3.2 3.2 3.2 3.2h96v-486.4z m755.2 416L860.8 32c-6.4-22.4-16-41.6-35.2-54.4-19.2-12.8-41.6-22.4-64-22.4H265.6V448c22.4 3.2 41.6 12.8 64 22.4 32 16 57.6 38.4 83.2 67.2 48 57.6 73.6 134.4 73.6 217.6 0 32 28.8 54.4 67.2 54.4 3.2 0 32 0 54.4-28.8 32-44.8 35.2-131.2 3.2-243.2-3.2-12.8 0-25.6 6.4-35.2 6.4-9.6 19.2-16 32-16l201.6-3.2c28.8 0 57.6-12.8 76.8-38.4 12.8-19.2 16-48 12.8-73.6z" horiz-adv-x="1024" />
<glyph glyph-name="x-01" unicode="&#59352;" d="M851.2 723.2c19.2-19.2 19.2-48 0-67.2L579.2 384l272-268.8c16-16 19.2-44.8 3.2-64l-3.2-3.2c-19.2-19.2-48-19.2-67.2 0L512 316.79999999999995l-272-272c-19.2-19.2-48-19.2-67.2 0-19.2 19.2-19.2 48 0 67.2l272 268.8-272 272c-16 19.2-16 48-3.2 64l3.2 3.2c19.2 19.2 51.2 19.2 70.4 3.2l272-272 268.8 272c16 16 48 16 67.2 0z" horiz-adv-x="1024" />
<glyph glyph-name="x-01" unicode="&#59352;" d="M880 752c19.2-19.2 19.2-54.4 0-73.6L585.6 384l294.4-294.4c19.2-19.2 19.2-48 3.2-70.4l-3.2-3.2c-19.2-19.2-54.4-19.2-73.6 0L512 310.4l-294.4-294.4c-19.2-19.2-54.4-19.2-73.6 0-19.2 19.2-19.2 54.4 0 73.6l294.4 294.4-294.4 294.4c-19.2 19.2-22.4 51.2-3.2 70.4l3.2 3.2c19.2 19.2 54.4 19.2 73.6 0l294.4-294.4 294.4 294.4c22.4 22.4 54.4 22.4 73.6 0z" horiz-adv-x="1024" />
<glyph glyph-name="desktop" unicode="&#59168;" d="M928 832c35.2 0 64-28.8 64-64v-608c0-35.2-28.8-64-64-64H604.8c3.2-25.6 9.6-44.8 16-64h121.6c32 0 57.6-25.6 57.6-57.6s-25.6-57.6-57.6-57.6H281.6c-32 0-57.6 25.6-57.6 57.6S249.6 32 281.6 32h121.6c6.4 19.2 12.8 38.4 19.2 64H96c-35.2 0-64 28.8-64 64V768c0 35.2 28.8 64 64 64h832z m-51.2-112H147.2v-486.4h729.6V720z" horiz-adv-x="1024" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 79 KiB

BIN
media/css/sf_font3/iconfont.ttf
View File

Binary file not shown.

BIN
media/css/sf_font3/iconfont.woff
View File

Binary file not shown.

BIN
media/css/sf_font3/iconfont.woff2
View File

Binary file not shown.

28
media/js/map/marker-clusterer.js → media/js/map/marker-cluster.js
View File

@ -111,7 +111,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
* girdSize {Number} 聚合计算时网格的像素大小，默认60<br />
* maxZoom {Number} 最大的聚合级别，大于该级别就不进行相应的聚合<br />
* minClusterSize {Number} 最小的聚合数量，小于该数量的不能成为一个聚合，默认为2<br />
* isAverangeCenter {Boolean} 聚合点的落脚位置是否是所有聚合在内点的平均值，默认为否，落脚在聚合内的第一个点<br />
* isAvgCenter {Boolean} 聚合点的落脚位置是否是所有聚合在内点的平均值，默认为否，落脚在聚合内的第一个点<br />
* styles {Array<IconStyle>} 自定义聚合后的图标风格，请参考TextIconOverlay类<br />
*/
BMapLib.MarkerCluster = function(map, options){
@ -142,8 +142,8 @@ var BMapLib = window.BMapLib = BMapLib || {};
// that._redraw();
// });
var mkrs = opts["markers"];
isArray(mkrs) && this.addMarkers(mkrs);
var markers = opts["markers"];
isArray(markers) && this.addMarkers(markers);
};
/**
@ -454,19 +454,19 @@ var BMapLib = window.BMapLib = BMapLib || {};
* Cluster
* @class 表示一个聚合对象，该聚合，包含有N个标记，这N个标记组成的范围，并有予以显示在Map上的TextIconOverlay等。
* @constructor
* @param {MarkerCluster} markerClusterer 一个标记聚合器示例。
* @param {MarkerCluster} markerCluster 一个标记聚合器示例。
*/
function Cluster(markerClusterer){
this._markerClusterer = markerClusterer;
this._map = markerClusterer.getMap();
this._minClusterSize = markerClusterer.getMinClusterSize();
this._isAverageCenter = markerClusterer.isAverageCenter();
function Cluster(markerCluster){
this._markerCluster = markerCluster;
this._map = markerCluster.getMap();
this._minClusterSize = markerCluster.getMinClusterSize();
this._isAverageCenter = markerCluster.isAverageCenter();
this._center = null;//落脚位置
this._markers = [];//这个Cluster中所包含的markers
this._gridBounds = null;//以中心点为准，向四边扩大gridSize个像素的范围，也即网格范围
this._isReal = false; //真的是个聚合
this._clusterMarker = new BMapLib.TextIconOverlay(this._center, this._markers.length, {"styles":this._markerClusterer.getStyles()});
this._clusterMarker = new BMapLib.TextIconOverlay(this._center, this._markers.length, {"styles":this._markerCluster.getStyles()});
//this._map.addOverlay(this._clusterMarker);
}
@ -552,7 +552,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
*/
Cluster.prototype.updateGridBounds = function() {
var bounds = new BMapGL.Bounds(this._center, this._center);
this._gridBounds = getExtendedBounds(this._map, bounds, this._markerClusterer.getGridSize());
this._gridBounds = getExtendedBounds(this._map, bounds, this._markerCluster.getGridSize());
};
/**
@ -560,7 +560,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
* @return 无返回值。
*/
Cluster.prototype.updateClusterMarker = function () {
if (this._map.getZoom() > this._markerClusterer.getMaxZoom()) {
if (this._map.getZoom() > this._markerCluster.getMaxZoom()) {
this._clusterMarker && this._map.removeOverlay(this._clusterMarker);
for (var i = 0, marker; marker = this._markers[i]; i++) {
this._map.addOverlay(marker);
@ -589,9 +589,9 @@ var BMapLib = window.BMapLib = BMapLib || {};
return;
}
clickTimeout = setTimeout(() => {
if (this._markerClusterer && typeof this._markerClusterer.getCallback() === 'function') {
if (this._markerCluster && typeof this._markerCluster.getCallback() === 'function') {
const markers = this._markers;
this._markerClusterer.getCallback()(event, markers);
this._markerCluster.getCallback()(event, markers);
}
clickTimeout = null;
}, 300); // Delay to differentiate between single and double click

53
media/js/map/text-icon-overlay.js
View File

@ -211,7 +211,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
* @returns {string} 驼峰化处理后的字符串
*/
baidu.string.toCamelCase = function (source) {
//提前判断，提高getStyle等的效率 thanks xianwei
//提前判断，提高getStyle等的效率
if (source.indexOf('-') < 0 && source.indexOf('_') < 0) {
return source;
}
@ -649,7 +649,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
* @grammar obj.dispatchEvent(event, options)
* @param {baidu.lang.Event|String} event Event对象，或事件名称(1.1.1起支持)
* @param {Object} options 扩展参数,所含属性键值会扩展到Event对象上(1.2起支持)
* @remark 处理会调用通过addEventListenr绑定的自定义事件回调函数之外，还会调用直接绑定到对象上面的自定义事件。例如：<br>
* @remark 处理会调用通过addEventListener绑定的自定义事件回调函数之外，还会调用直接绑定到对象上面的自定义事件。例如：<br>
myobj.onMyEvent = function(){}<br>
myobj.addEventListener("onMyEvent", function(){});
*/
@ -767,7 +767,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
};
/**
*继承Overlay的intialize方法，自定义覆盖物时必须。
*继承Overlay的initialize方法，自定义覆盖物时必须。
*@param {Map} map BMapGL.Map的实例化对象。
*@return {HTMLElement} 返回覆盖物对应的HTML元素。
*/
@ -860,21 +860,20 @@ var BMapLib = window.BMapLib = BMapLib || {};
var style = this.getStyleByText(this._text, this._styles);
var newStyle = {
url: imageUrl,
size: {width: 72, height: 72}
size: { width: 86, height: 86 }
}
if (imageUrl) {
style = Object.assign(style, {url: imageUrl, size: {width: 72, height: 72}})
style = Object.assign(style, { url: imageUrl, size: { width: 86, height: 86 } })
}
const customImageNumber = `<span class="custom-image-number">${this._text}</span>`;
const customImageNumber = `<span class="custom-image-number">${this._text < 1000 ? this._text : '1k+'}</span>`;
this._domElement.style.cssText = this.buildImageCssText(newStyle);
const imageElement = `<img src=${imageUrl} width="72" height="72" />`
const imageElement = `<img src=${imageUrl} width="80" height="80" />`
const htmlString = `
<div class="custom-image-container">
${this._text > 1 ? customImageNumber : ''}
${imageUrl ? imageElement : '<div class="empty-custom-image-wrapper"></div>'}
<i class='plugin-label-arrow dtable-font dtable-icon-drop-down'></i>
</div>
<div class="custom-image-container">
${this._text > 1 ? customImageNumber : ''}
${imageUrl ? imageElement : '<div class="empty-custom-image-wrapper"></div>'}
</div>
`
const labelDocument = new DOMParser().parseFromString(htmlString, 'text/html');
const label = labelDocument.body.firstElementChild;
@ -888,14 +887,14 @@ var BMapLib = window.BMapLib = BMapLib || {};
var textColor = style['textColor'] || 'black';
var textSize = style['textSize'] || 10;
var csstext = [];
var cssText = [];
csstext.push('height:' + size.height + 'px; line-height:' + size.height + 'px;');
csstext.push('width:' + size.width + 'px; text-align:center;');
cssText.push('height:' + size.height + 'px; line-height:' + size.height + 'px;');
cssText.push('width:' + size.width + 'px; text-align:center;');
csstext.push('cursor:pointer; color:' + textColor + '; position:absolute; font-size:' +
cssText.push('cursor:pointer; color:' + textColor + '; position:absolute; font-size:' +
textSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
return csstext.join('');
return cssText.join('');
};
/**
@ -937,34 +936,34 @@ var BMapLib = window.BMapLib = BMapLib || {};
var textColor = style['textColor'] || 'black';
var textSize = style['textSize'] || 10;
var csstext = [];
var cssText = [];
if (T.browser["ie"] < 7) {
csstext.push('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
cssText.push('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
'sizingMethod=scale,src="' + url + '");');
} else {
csstext.push('background-image:url(' + url + ');');
cssText.push('background-image:url(' + url + ');');
var backgroundPosition = '0 0';
(offset instanceof BMapGL.Size) && (backgroundPosition = offset.width + 'px' + ' ' + offset.height + 'px');
csstext.push('background-position:' + backgroundPosition + ';');
cssText.push('background-position:' + backgroundPosition + ';');
}
if (size instanceof BMapGL.Size){
if (anchor instanceof BMapGL.Size) {
if (anchor.height > 0 && anchor.height < size.height) {
csstext.push('height:' + (size.height - anchor.height) + 'px; padding-top:' + anchor.height + 'px;');
cssText.push('height:' + (size.height - anchor.height) + 'px; padding-top:' + anchor.height + 'px;');
}
if(anchor.width > 0 && anchor.width < size.width){
csstext.push('width:' + (size.width - anchor.width) + 'px; padding-left:' + anchor.width + 'px;');
cssText.push('width:' + (size.width - anchor.width) + 'px; padding-left:' + anchor.width + 'px;');
}
} else {
csstext.push('height:' + size.height + 'px; line-height:' + size.height + 'px;');
csstext.push('width:' + size.width + 'px; text-align:center;');
cssText.push('height:' + size.height + 'px; line-height:' + size.height + 'px;');
cssText.push('width:' + size.width + 'px; text-align:center;');
}
}
csstext.push('cursor:pointer; color:' + textColor + '; position:absolute; font-size:' +
cssText.push('cursor:pointer; color:' + textColor + '; position:absolute; font-size:' +
textSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
return csstext.join('');
return cssText.join('');
};