@@ -46,6 +46,7 @@ const onChangeBaseMap = (base_map: any) => {
.base-map-card {
display: flex;
padding: 10px;
+ gap: 10px;
.base-map-card__image {
width: 70px;
height: 70px;
@@ -54,7 +55,7 @@ const onChangeBaseMap = (base_map: any) => {
}
.base-map-card__content {
flex-grow: 1;
- padding: 4px 10px;
+ padding: 4px 0px;
& > *:not(:first-child) {
padding-top: 4px;
}
diff --git a/libs/map/basemap/src/modules/CompareBaseMapCard.vue b/libs/map/basemap/src/modules/CompareBaseMapCard.vue
new file mode 100644
index 0000000..beb468d
--- /dev/null
+++ b/libs/map/basemap/src/modules/CompareBaseMapCard.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
diff --git a/libs/map/basemap/src/modules/CompareBaseMapControl.vue b/libs/map/basemap/src/modules/CompareBaseMapControl.vue
new file mode 100644
index 0000000..3150b46
--- /dev/null
+++ b/libs/map/basemap/src/modules/CompareBaseMapControl.vue
@@ -0,0 +1,331 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ baseMap.title }}
+
+
+
+
+
+
+
+
+
diff --git a/libs/map/basemap/src/modules/index.ts b/libs/map/basemap/src/modules/index.ts
index cf53525..2791be5 100644
--- a/libs/map/basemap/src/modules/index.ts
+++ b/libs/map/basemap/src/modules/index.ts
@@ -1,3 +1,5 @@
export { default as BaseMapCard } from './BaseMapCard.vue';
export { default as BaseMapControl } from './BaseMapControl.vue';
export { default as BaseMapTagControl } from './BaseMapTagControl.vue';
+export { default as CompareBaseMapCard } from './CompareBaseMapCard.vue';
+export { default as CompareBaseMapControl } from './CompareBaseMapControl.vue';
diff --git a/libs/map/core/package.json b/libs/map/core/package.json
index 8e8f566..6b32ed6 100644
--- a/libs/map/core/package.json
+++ b/libs/map/core/package.json
@@ -36,6 +36,7 @@
"@turf/turf": "^6.5.0",
"proj4": "^2.11.0",
"lodash": "^4.17.21",
- "mapbox-gl": ">=1.13.0"
+ "mapbox-gl": ">=1.13.0",
+ "@mapbox/mapbox-gl-sync-move": "^0.3.1"
}
}
diff --git a/libs/map/core/src/extra/compare/index.ts b/libs/map/core/src/extra/compare/index.ts
new file mode 100644
index 0000000..a5290a8
--- /dev/null
+++ b/libs/map/core/src/extra/compare/index.ts
@@ -0,0 +1,4 @@
+export { default as CompareSettingCard } from './modules/CompareSettingControl/CompareSettingCard.vue';
+export { default as CompareSettingControl } from './modules/CompareSettingControl/CompareSettingControl.vue';
+export { default as MapCompare } from './modules/MapCompare.vue';
+export { getMapCompare, getMapCompareSetting } from './store';
diff --git a/libs/map/core/src/extra/compare/modules/CompareSettingControl/CompareSettingCard.vue b/libs/map/core/src/extra/compare/modules/CompareSettingControl/CompareSettingCard.vue
new file mode 100644
index 0000000..926b283
--- /dev/null
+++ b/libs/map/core/src/extra/compare/modules/CompareSettingControl/CompareSettingCard.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
diff --git a/libs/map/core/src/extra/compare/modules/CompareSettingControl/CompareSettingControl.vue b/libs/map/core/src/extra/compare/modules/CompareSettingControl/CompareSettingControl.vue
new file mode 100644
index 0000000..9815b61
--- /dev/null
+++ b/libs/map/core/src/extra/compare/modules/CompareSettingControl/CompareSettingControl.vue
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/libs/map/core/src/extra/compare/modules/MapCompare.vue b/libs/map/core/src/extra/compare/modules/MapCompare.vue
new file mode 100644
index 0000000..99a8f18
--- /dev/null
+++ b/libs/map/core/src/extra/compare/modules/MapCompare.vue
@@ -0,0 +1,388 @@
+
+
+
+
+
+ Trình duyệt của bạn không hỗ trợ hiển thị bản đồ, vui lòng đổi trình
+ duyệt hoặc cập nhật bản mới để xem.
+
+
+
+
+
+
+
diff --git a/libs/map/core/src/extra/compare/modules/helper.ts b/libs/map/core/src/extra/compare/modules/helper.ts
new file mode 100644
index 0000000..cb06c82
--- /dev/null
+++ b/libs/map/core/src/extra/compare/modules/helper.ts
@@ -0,0 +1,141 @@
+export function MapCompareSwiper(
+ handleEl: HTMLElement,
+ div1: HTMLElement,
+ div2: HTMLElement
+) {
+ let bounds = div2.getBoundingClientRect();
+
+ const resize = () => {
+ bounds = div2.getBoundingClientRect();
+ };
+
+ const getX = (e: MouseEvent | TouchEvent): number => {
+ const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+ let x = clientX - bounds.left;
+ x = Math.max(0, Math.min(x, bounds.width));
+ return x;
+ };
+
+ const setPosition = (x: number) => {
+ const pos = `translate(${x}px, 0)`;
+ handleEl.style.transform = pos;
+ handleEl.style.webkitTransform = pos;
+
+ div1.style.clip = `rect(0, ${x}px, ${bounds.height}px, 0)`;
+ div2.style.clip = `rect(0, 999em, ${bounds.height}px, ${x}px)`;
+ };
+
+ const onMove = (e: MouseEvent | TouchEvent) => {
+ setPosition(getX(e));
+ };
+
+ const onMouseUp = () => {
+ document.removeEventListener('mousemove', onMove as EventListener);
+ document.removeEventListener('mouseup', onMouseUp);
+ };
+
+ const onTouchEnd = () => {
+ document.removeEventListener('touchmove', onMove as EventListener);
+ document.removeEventListener('touchend', onTouchEnd);
+ };
+
+ const onDown = (e: MouseEvent | TouchEvent) => {
+ if ('touches' in e) {
+ document.addEventListener('touchmove', onMove as EventListener, {
+ passive: false,
+ });
+ document.addEventListener('touchend', onTouchEnd);
+ } else {
+ document.addEventListener('mousemove', onMove as EventListener);
+ document.addEventListener('mouseup', onMouseUp);
+ }
+ };
+
+ handleEl.addEventListener('mousedown', onDown as EventListener);
+ handleEl.addEventListener('touchstart', onDown as EventListener, {
+ passive: false,
+ });
+
+ const clear = () => {
+ handleEl.removeEventListener('mousedown', onDown as EventListener);
+ handleEl.removeEventListener('touchstart', onDown as EventListener);
+ div1.style.clip = '';
+ div2.style.clip = '';
+ };
+
+ // Set initial position at center
+ const initialX = bounds.width / 2;
+ setPosition(initialX);
+
+ return {
+ clear,
+ resize,
+ };
+}
+export function MapCompareSwiperVertical(
+ handleEl: HTMLElement,
+ div1: HTMLElement,
+ div2: HTMLElement
+) {
+ let bounds = div2.getBoundingClientRect();
+
+ const resize = () => {
+ bounds = div2.getBoundingClientRect();
+ setPosition(bounds.height / 2);
+ };
+
+ const getY = (e: MouseEvent | TouchEvent): number => {
+ const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+ const y = clientY - bounds.top;
+ return Math.max(0, Math.min(y, bounds.height));
+ };
+
+ const setPosition = (y: number) => {
+ handleEl.style.transform = `translateY(${y}px)`;
+
+ // Reveal upper part of div1 (from top to y)
+ div1.style.clipPath = `inset(0px 0px ${bounds.height - y}px 0px)`;
+ div2.style.clipPath = `inset(${y}px 0px 0px 0px)`;
+ };
+
+ const onMove = (e: MouseEvent | TouchEvent) => {
+ e.preventDefault();
+ setPosition(getY(e));
+ };
+
+ const onEnd = () => {
+ document.removeEventListener('mousemove', onMove);
+ document.removeEventListener('mouseup', onEnd);
+ document.removeEventListener('touchmove', onMove);
+ document.removeEventListener('touchend', onEnd);
+ };
+
+ const onStart = (e: MouseEvent | TouchEvent) => {
+ if ('touches' in e) {
+ document.addEventListener('touchmove', onMove, { passive: false });
+ document.addEventListener('touchend', onEnd);
+ } else {
+ document.addEventListener('mousemove', onMove);
+ document.addEventListener('mouseup', onEnd);
+ }
+ };
+
+ handleEl.addEventListener('mousedown', onStart);
+ handleEl.addEventListener('touchstart', onStart, { passive: false });
+
+ const clear = () => {
+ handleEl.removeEventListener('mousedown', onStart);
+ handleEl.removeEventListener('touchstart', onStart);
+ onEnd();
+ div1.style.clipPath = '';
+ div2.style.clipPath = '';
+ };
+
+ // Initial middle position
+ setPosition(bounds.height / 2);
+
+ return {
+ clear,
+ resize,
+ };
+}
diff --git a/libs/map/core/src/extra/compare/store.ts b/libs/map/core/src/extra/compare/store.ts
new file mode 100644
index 0000000..b0e143f
--- /dev/null
+++ b/libs/map/core/src/extra/compare/store.ts
@@ -0,0 +1,37 @@
+import { Ref, ref } from 'vue';
+import { addStore, getStore } from '../../store';
+
+const KEY = 'map-compare';
+export type MapLocateStore = {
+ setting: Ref<{
+ compare?: boolean;
+ split?: boolean;
+ sync?: boolean;
+ vertical?: boolean;
+ }>;
+};
+
+export function initStoreMapCompare(mapId: string) {
+ addStore
(mapId, KEY, {
+ setting: ref({
+ compare: true,
+ split: true,
+ sync: true,
+ vertical: true,
+ }),
+ });
+}
+
+export function getMapCompare(mapId: string) {
+ const store = getStore(mapId, KEY);
+ if (!store) {
+ initStoreMapCompare(mapId);
+ return getStore(mapId, KEY);
+ }
+ return store;
+}
+
+export function getMapCompareSetting(mapId: string) {
+ const store = getMapCompare(mapId);
+ return store.setting;
+}
diff --git a/libs/map/core/src/extra/index.ts b/libs/map/core/src/extra/index.ts
index bebdfc5..64dfd0f 100644
--- a/libs/map/core/src/extra/index.ts
+++ b/libs/map/core/src/extra/index.ts
@@ -1,3 +1,4 @@
+export * from './compare';
export * from './crs';
export * from './event';
export * from './image';
diff --git a/libs/map/core/src/extra/lang/hook.ts b/libs/map/core/src/extra/lang/hook.ts
index d3e814d..3f9e6f5 100644
--- a/libs/map/core/src/extra/lang/hook.ts
+++ b/libs/map/core/src/extra/lang/hook.ts
@@ -6,10 +6,13 @@ import {
setMapTranslate,
} from './store';
-// Cache for storing resolved property values
+// Cache for storing resolved property values with max size limit
+const MAX_CACHE_SIZE = 1000;
const propCache = new Map();
export function useLang(mapId: string) {
+ if (!mapId) throw new Error('mapId is required');
+
const storeLang = computed(() => getMapLang(mapId));
function transLocal(key: string, params?: Record) {
@@ -56,8 +59,13 @@ export function useLang(mapId: string) {
return { trans, setLocale, setLocaleDefault, setTranslate };
}
-function getProp(object: any, path: string | string[], defaultVal?: string) {
+function getProp(
+ object: any,
+ path: string | string[],
+ defaultVal?: string
+): string | undefined {
if (!object) return defaultVal;
+ if (!path) return defaultVal;
const pathStr = Array.isArray(path) ? path.join('.') : path;
const cacheKey = `${JSON.stringify(object)}_${pathStr}`;
@@ -67,6 +75,11 @@ function getProp(object: any, path: string | string[], defaultVal?: string) {
return propCache.get(cacheKey);
}
+ // Clear cache if it exceeds max size
+ if (propCache.size >= MAX_CACHE_SIZE) {
+ propCache.clear();
+ }
+
const _path = Array.isArray(path)
? path
: path.split('.').filter((i) => i.length);
@@ -87,6 +100,7 @@ function getProp(object: any, path: string | string[], defaultVal?: string) {
}
function interpolate(text: string, params?: Record): string {
+ if (!text) return '';
if (!params) return text;
return text.replace(/\{(\w+)\}/g, (match, key) => {
diff --git a/libs/map/core/src/model/Base.ts b/libs/map/core/src/model/Base.ts
index 4647a7b..01de3b7 100644
--- a/libs/map/core/src/model/Base.ts
+++ b/libs/map/core/src/model/Base.ts
@@ -1,5 +1,5 @@
import { getUUIDv4 } from '@hungpvq/shared';
-import { ILayer, IView, LayerBuildFunction } from '../types';
+import type { Feature, GeoJsonProperties, Geometry } from 'geojson';
export class Base {
_id: string;
@@ -10,33 +10,16 @@ export class Base {
this._id = `${getUUIDv4()}`;
}
}
-export abstract class ABuild
- implements IBuild
-{
- key = '';
- option: Partial = {};
- build!: LayerBuildFunction;
- constructor(option: Partial = {}, default_option?: Partial) {
- this.option = Object.assign({}, default_option, option);
- }
- protected setBuild(build: LayerBuildFunction) {
- this.build = build;
- return this;
- }
-}
-
-export class AView extends Base implements IView {
- parent?: ILayer = undefined;
- data_id?: string;
- setParent(_parent: ILayer) {
- this.parent = _parent;
- this.data_id = _parent.id;
- }
-}
-export type IBuild = {
- key: string;
- option?: T;
- build?: LayerBuildFunction;
- setForLayer?: (layer: ILayer) => void;
+export type IDrawHandler = {
+ addFeatures?: (
+ features: Feature[]
+ ) => Promise;
+ updateFeatures?: (
+ features: Feature[]
+ ) => Promise;
+ deleteFeatures?: (
+ features: Feature[]
+ ) => Promise;
+ getFeatures?: (point: [number, number]) => Promise;
};
diff --git a/libs/map/core/src/modules/CrsControl/CrsControl.vue b/libs/map/core/src/modules/CrsControl/CrsControl.vue
index a49c5ba..31d4d24 100644
--- a/libs/map/core/src/modules/CrsControl/CrsControl.vue
+++ b/libs/map/core/src/modules/CrsControl/CrsControl.vue
@@ -92,7 +92,7 @@ const onAdd = () => {
v-if="!crs_item.default"
@click.stop="onRemove(crs_item)"
>
-
+