@mapless/core 1.0.7 → 1.0.12

package/dist/index.js

@@ -1,9 +1,10 @@
 import { area as turf_area, center as turf_center, centroid, circle, distance as turf_distance, ellipse, length as turf_length, pointsWithinPolygon, polygon as turf_polygon } from "@turf/turf";
 import mapbox_gl, { LngLat, MapMouseEvent, Marker, MercatorCoordinate, Popup } from "mapbox-gl";
-import { AmbientLight, AnimationMixer, BoxGeometry, BoxHelper, BufferGeometry, CatmullRomCurve3, Clock, Color, ConeGeometry, CurvePath, CylinderGeometry, DirectionalLight, DoubleSide, Group, Line, LineBasicMaterial, LineCurve3, LoopRepeat, Matrix4, Mesh, MeshBasicMaterial, PerspectiveCamera, PointLight, Scene, SphereGeometry, SpotLight, TorusGeometry, TubeGeometry, Vector3, WebGLRenderer } from "three";
+import { AmbientLight, AnimationMixer, BoxGeometry, BoxHelper, BufferGeometry, CatmullRomCurve3, Clock, Color, ConeGeometry, CurvePath, CylinderGeometry, DirectionalLight, DoubleSide, Group, InstancedMesh, Line, LineBasicMaterial, LineCurve3, LoopRepeat, Matrix4, Mesh, MeshBasicMaterial, Object3D, PerspectiveCamera, PointLight, Raycaster, Scene, SphereGeometry, SpotLight, TorusGeometry, TubeGeometry, Vector3, Vector4, WebGLRenderer } from "three";
 import gcoord from "gcoord";
 import mapbox_gl_draw from "@mapbox/mapbox-gl-draw";
 import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
+import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";
 import { GLTFLoader, Line2, LineGeometry, LineMaterial } from "three-stdlib";
 class MapThree {
     mapless = void 0;
@@ -16,6 +17,7 @@ class MapThree {
     renderableObjects = new Map();
     isInitialized = false;
     customLayerId = null;
+    lastProjectionMatrix = null;
     constructor(props){
         const { mapless } = props;
         this.mapless = mapless;
@@ -54,6 +56,7 @@ class MapThree {
                     renderableObj.mesh.visible = false;
                 });
                 this.camera.projectionMatrix = m;
+                this.lastProjectionMatrix = m.clone();
                 this.renderer.resetState();
                 this.renderer.render(this.scene, this.camera);
                 this.renderableObjects.forEach((renderableObj)=>{
@@ -317,6 +320,140 @@ class MapThree {
             this.removeRenderableObject(id);
         });
     }
+    raycast(point, objects, tolerance = 30) {
+        if (!this.camera || !this.scene || !this.renderer) return null;
+        const map = this.mapless?.map;
+        if (!map) return null;
+        const mapContainer = map.getCanvas();
+        const ndcX = point.x / mapContainer.width * 2 - 1;
+        const ndcY = 2 * -(point.y / mapContainer.height) + 1;
+        const targetObjects = objects || Array.from(this.renderableObjects.values()).map((obj)=>obj.mesh);
+        let closestHit = null;
+        let minDistance = 1 / 0;
+        const screenPositions = new Map();
+        for (const targetObj of targetObjects){
+            const renderableObj = Array.from(this.renderableObjects.values()).find((obj)=>obj.mesh === targetObj);
+            if (renderableObj && this.lastProjectionMatrix) {
+                let l;
+                if (renderableObj.transform.matrix) l = renderableObj.transform.matrix.clone();
+                else {
+                    l = new Matrix4().makeTranslation(renderableObj.transform.translateX, renderableObj.transform.translateY, renderableObj.transform.translateZ).scale(new Vector3(renderableObj.transform.scale, -renderableObj.transform.scale, renderableObj.transform.scale));
+                    if (void 0 !== renderableObj.transform.rotateX || void 0 !== renderableObj.transform.rotateY || void 0 !== renderableObj.transform.rotateZ) {
+                        const rotationX = new Matrix4().makeRotationAxis(new Vector3(1, 0, 0), renderableObj.transform.rotateX || 0);
+                        const rotationY = new Matrix4().makeRotationAxis(new Vector3(0, 1, 0), renderableObj.transform.rotateY || 0);
+                        const rotationZ = new Matrix4().makeRotationAxis(new Vector3(0, 0, 1), renderableObj.transform.rotateZ || 0);
+                        l.multiply(rotationX).multiply(rotationY).multiply(rotationZ);
+                    }
+                }
+                const mvpMatrix = this.lastProjectionMatrix.clone().multiply(l);
+                const inverseMVP = mvpMatrix.invert();
+                const nearPoint = new Vector4(ndcX, ndcY, -1, 1).applyMatrix4(inverseMVP);
+                nearPoint.divideScalar(nearPoint.w);
+                const farPoint = new Vector4(ndcX, ndcY, 1, 1).applyMatrix4(inverseMVP);
+                farPoint.divideScalar(farPoint.w);
+                const origin = new Vector3(nearPoint.x, nearPoint.y, nearPoint.z);
+                const direction = new Vector3(farPoint.x - nearPoint.x, farPoint.y - nearPoint.y, farPoint.z - nearPoint.z).normalize();
+                const raycaster = new Raycaster(origin, direction);
+                const intersects = raycaster.intersectObject(targetObj, true);
+                const centerPoint = new Vector4(0, 0, 0, 1).applyMatrix4(mvpMatrix);
+                const screenX = (centerPoint.x / centerPoint.w + 1) * 0.5 * mapContainer.width;
+                const screenY = (-centerPoint.y / centerPoint.w + 1) * 0.5 * mapContainer.height;
+                const depth = centerPoint.z / centerPoint.w;
+                const scale = renderableObj.transform.scale;
+                const screenRadius = 50 * scale / Math.abs(depth);
+                screenPositions.set(targetObj, {
+                    x: screenX,
+                    y: screenY,
+                    radius: screenRadius
+                });
+                if (intersects.length > 0 && intersects[0].distance < minDistance) {
+                    minDistance = intersects[0].distance;
+                    closestHit = {
+                        object: intersects[0].object,
+                        distance: intersects[0].distance,
+                        point: intersects[0].point
+                    };
+                }
+            }
+        }
+        if (!closestHit) for (const [obj, screenPos] of screenPositions){
+            const dx = screenPos.x - point.x;
+            const dy = screenPos.y - point.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance < Math.max(screenPos.radius, tolerance)) return {
+                object: obj,
+                distance: 0,
+                point: new Vector3()
+            };
+        }
+        return closestHit;
+    }
+    registerRenderableObjectClick(id, onClick, tolerance = 30) {
+        const renderableObj = this.renderableObjects.get(id);
+        if (!renderableObj) {
+            console.warn(`RenderableObject with id "${id}" not found`);
+            return null;
+        }
+        const map = this.mapless?.map;
+        if (!map) {
+            console.warn('Map not initialized');
+            return null;
+        }
+        const handleClick = (e)=>{
+            map.triggerRepaint();
+            requestAnimationFrame(()=>{
+                const point = {
+                    x: e.point.x,
+                    y: e.point.y
+                };
+                const hit = this.raycast(point, [
+                    renderableObj.mesh
+                ], tolerance);
+                if (hit?.object) onClick(hit.object, hit.point);
+            });
+        };
+        map.on('click', handleClick);
+        return ()=>{
+            map.off('click', handleClick);
+        };
+    }
+    registerGlobalClick(onClick) {
+        const map = this.mapless?.map;
+        if (!map) {
+            console.warn('Map not initialized');
+            return null;
+        }
+        const handleClick = (e)=>{
+            const point = {
+                x: e.point.x,
+                y: e.point.y
+            };
+            const hit = this.raycast(point);
+            if (hit) {
+                let renderableId;
+                for (const [id, obj] of this.renderableObjects)if (this.isObjectInHierarchy(hit.object, obj.mesh)) {
+                    renderableId = id;
+                    break;
+                }
+                onClick({
+                    ...hit,
+                    renderableId
+                });
+            }
+        };
+        map.on('click', handleClick);
+        return ()=>{
+            map.off('click', handleClick);
+        };
+    }
+    isObjectInHierarchy(obj, root) {
+        let current = obj;
+        while(current){
+            if (current === root) return true;
+            current = current.parent;
+        }
+        return false;
+    }
     dispose() {
         this.clear();
         this.clearRenderableObjects();
@@ -11224,6 +11361,17 @@ class Mapless extends Base {
             pitch: 0
         });
     }
+    setCoordSystem(coordSystem) {
+        if (!this.CoordTrans) return;
+        const prevSystem = this.CoordSystem || 'wgs84';
+        if (prevSystem === coordSystem) return;
+        this.CoordTrans = createCoordTransformer({
+            dataSystem: coordSystem,
+            tileSystem: this.CoordTrans.TileSystem
+        });
+        this.emitterless.emit('coordSystemChange', coordSystem, prevSystem);
+        console.log(`CoordSystem changed: ${prevSystem} -> ${coordSystem}`);
+    }
     fitBounds(coordinates, padding = 20) {
         if (!this.map || !coordinates.length) return;
         const bounds = coordinates.reduce((bounds, coord)=>bounds.extend(coord), new mapbox_gl.LngLatBounds(coordinates[0], coordinates[0]));
@@ -13781,8 +13929,15 @@ const stateColorRule = [
 ];
 class MovableManager extends EmitManager {
     movables = void 0;
+    iconRotationAlignment = 'map';
+    showNameByDefault;
+    iconBaseSize;
+    circleBaseRadius;
     constructor(mapless, options){
         super(mapless, options, 'movable');
+        this.showNameByDefault = options?.showNameByDefault ?? false;
+        this.iconBaseSize = options?.iconBaseSize ?? 0.3;
+        this.circleBaseRadius = options?.circleBaseRadius ?? 8;
         this.onInitialized();
         this.setupClickHandler();
         this.setupHoverHandler();
@@ -13849,8 +14004,8 @@ class MovableManager extends EmitManager {
                         ],
                         true
                     ],
-                    0.4,
-                    0.3
+                    this.iconBaseSize + 0.1,
+                    this.iconBaseSize
                 ],
                 'icon-rotate': [
                     'get',
@@ -13858,8 +14013,11 @@ class MovableManager extends EmitManager {
                 ],
                 'icon-allow-overlap': true,
                 'icon-ignore-placement': true,
-                'icon-rotation-alignment': 'map',
-                'text-field': [
+                'icon-rotation-alignment': this.iconRotationAlignment,
+                'text-field': this.showNameByDefault ? [
+                    'get',
+                    'name'
+                ] : [
                     'case',
                     [
                         '==',
@@ -13927,8 +14085,8 @@ class MovableManager extends EmitManager {
                         ],
                         true
                     ],
-                    10,
-                    8
+                    this.circleBaseRadius + 2,
+                    this.circleBaseRadius
                 ],
                 'circle-color': stateColorRule,
                 'circle-stroke-width': [
@@ -14111,12 +14269,19 @@ class MovableManager extends EmitManager {
             padding: padding ?? 50
         });
     }
+    setIconRotationAlignment(alignment) {
+        this.iconRotationAlignment = alignment;
+        if (this.map && this.idHub?.detailLayerId) this.map.setLayoutProperty(this.idHub.detailLayerId, 'icon-rotation-alignment', alignment);
+    }
+    getIconRotationAlignment() {
+        return this.iconRotationAlignment;
+    }
     destroy() {
         super.destroy();
         this.movables = void 0;
     }
 }
-const attachMovable = (mapless, name)=>mapless?.use(MovableManager, name);
+const attachMovable = (mapless, name, options)=>mapless?.use(MovableManager, name, options);
 const getMovable = (mapless, name)=>mapless?.get(MovableManager, name);
 const detachMovable = (mapless, name)=>mapless?.unuse(MovableManager, name);
 const hasAzimuth = (station)=>maplessPreset.movableTypes.includes(station.category || '');
@@ -16440,6 +16605,7 @@ class AirspaceManager extends manager_Manager {
         defaultFillOpacity: 0.3
     };
     originalProperties = {};
+    originalGeometries = {};
     constructor(mapless, options){
         super(mapless, options, 'airspace');
         this.onInitialized();
@@ -16453,7 +16619,19 @@ class AirspaceManager extends manager_Manager {
     handleCoordSystemChange(_system) {
         if (this.zones) Object.keys(this.zones).forEach((id)=>{
             const zone = this.zones[id];
-            this.drawZone(id, zone);
+            const originalGeometry = this.originalGeometries[id];
+            if (originalGeometry) this.drawZone(id, {
+                name: zone.name,
+                geometry: originalGeometry,
+                minAltitude: zone.minAltitude,
+                maxAltitude: zone.maxAltitude,
+                color: zone.color,
+                edgeColor: zone.edgeColor,
+                edgeOpacity: zone.edgeOpacity,
+                edgeWidth: zone.edgeWidth,
+                fillColor: zone.fillColor,
+                fillOpacity: zone.fillOpacity
+            });
         });
     }
     createIdHub(_idHub) {
@@ -16533,11 +16711,16 @@ class AirspaceManager extends manager_Manager {
     }
     drawZone(id, options) {
         const { name = '', geometry, minAltitude = this.config.defaultMinAltitude, maxAltitude = this.config.defaultMaxAltitude, color = this.config.defaultColor, edgeColor = this.config.defaultEdgeColor, edgeOpacity = this.config.defaultEdgeOpacity, edgeWidth = this.config.defaultEdgeWidth, fillColor = this.config.defaultFillColor, fillOpacity = this.config.defaultFillOpacity } = options;
+        this.originalGeometries[id] = geometry;
+        const transformedGeometry = geometry.map((polygon)=>polygon.map((coord)=>this.mapless?.coordTrans('dataToTile', [
+                    coord[0],
+                    coord[1]
+                ])));
         const feature = {
             type: 'Feature',
             geometry: {
                 type: 'Polygon',
-                coordinates: geometry
+                coordinates: transformedGeometry
             },
             properties: {
                 id,
@@ -16555,7 +16738,7 @@ class AirspaceManager extends manager_Manager {
         this.zones[id] = {
             id,
             name,
-            geometry,
+            geometry: transformedGeometry,
             minAltitude,
             maxAltitude,
             color,
@@ -16604,11 +16787,13 @@ class AirspaceManager extends manager_Manager {
         if (!this.zones[id]) return;
         delete this.zones[id];
         delete this.originalProperties[id];
+        delete this.originalGeometries[id];
         this.updateSource();
     }
     clearZones() {
         this.zones = {};
         this.originalProperties = {};
+        this.originalGeometries = {};
         this.mapless?.setEmptyData(this.idHub?.sourceId);
     }
     updateZone(id, options) {
@@ -16664,7 +16849,8 @@ class AirspaceManager extends manager_Manager {
             });
         });
         if (coordinates.length > 0 && this.mapless?.map) {
-            const bounds = coordinates.reduce((bounds, coord)=>bounds.extend(coord), new mapbox_gl.LngLatBounds(coordinates[0], coordinates[0]));
+            const originalCoordinates = coordinates.map((coord)=>this.mapless?.coordTrans('tileToData', coord));
+            const bounds = originalCoordinates.reduce((bounds, coord)=>bounds.extend(coord), new mapbox_gl.LngLatBounds(originalCoordinates[0], originalCoordinates[0]));
             const currentPitch = this.mapless.map.getPitch();
             const currentBearing = this.mapless.map.getBearing();
             this.mapless.map.fitBounds(bounds, {
@@ -16674,10 +16860,26 @@ class AirspaceManager extends manager_Manager {
             });
         }
     }
+    setFillExtrusionVisible(visible) {
+        if (this.map && this.idHub?.fillLayerId) this.map.setLayoutProperty(this.idHub.fillLayerId, 'visibility', visible ? 'visible' : 'none');
+    }
+    isFillExtrusionVisible() {
+        if (this.map && this.idHub?.fillLayerId) {
+            const visibility = this.map.getLayoutProperty(this.idHub.fillLayerId, 'visibility');
+            return 'none' !== visibility;
+        }
+        return true;
+    }
+    toggleFillExtrusion() {
+        const currentState = this.isFillExtrusionVisible();
+        this.setFillExtrusionVisible(!currentState);
+        return !currentState;
+    }
     destroy() {
         super.destroy();
         this.zones = {};
         this.originalProperties = {};
+        this.originalGeometries = {};
     }
 }
 const attachAirspace = (mapless, name)=>mapless?.use(AirspaceManager, name);
@@ -16838,6 +17040,7 @@ class MapModelManager extends EmitManager {
         0
     ];
     themeColorModels = new Set();
+    modelOptions = new Map();
     constructor(mapless, options){
         super(mapless, options, 'mapModel');
         this.map = mapless.map;
@@ -16848,6 +17051,14 @@ class MapModelManager extends EmitManager {
         this.onInitialized();
         this.setupGlobalClickHandler();
     }
+    handleCoordSystemChange(_system) {
+        if (this.modelOptions.size > 0) {
+            this.clearModels();
+            this.modelOptions.forEach((options)=>{
+                this.addModel(options);
+            });
+        }
+    }
     setupGlobalClickHandler() {
         if (!this.map) return;
         this.globalClickHandler = (e)=>{
@@ -16930,12 +17141,17 @@ class MapModelManager extends EmitManager {
         if (!this.map) throw new Error('Map not initialized');
         const sourceId = this.generateSourceId();
         const layerId = this.generateLayerId();
+        const originalPosition = config.position || config.lngLat || [
+            0,
+            0
+        ];
+        const transformedPosition = this.mapless?.coordTrans('dataToTile', originalPosition);
         const sourceConfig = {
             type: 'model',
             models: {
                 [modelId]: {
                     uri: config.uri,
-                    position: config.position || config.lngLat,
+                    position: transformedPosition,
                     altitude: config.altitude || 0
                 }
             }
@@ -17080,6 +17296,7 @@ class MapModelManager extends EmitManager {
             materialOverrides,
             nodeOverrides
         });
+        this.modelOptions.set(id, options);
         if (!materialOverrides || 0 === Object.keys(materialOverrides).length) {
             this.themeColorModels.add(id);
             const themeColor = this.getDefaultThemeColor();
@@ -17095,9 +17312,10 @@ class MapModelManager extends EmitManager {
         const modelData = this.models.get(id);
         if (!modelData) return;
         if (!this.map) return;
+        const transformedPosition = this.mapless?.coordTrans('dataToTile', lngLat);
         const source = this.map.getSource(modelData.sourceId);
         if (source?.models?.[id]) {
-            source.models[id].position = lngLat;
+            source.models[id].position = transformedPosition;
             source.models[id].altitude = altitude;
         }
         if (this.map.getLayer(modelData.layerId)) this.map.setPaintProperty(modelData.layerId, 'model-translation', [
@@ -17105,6 +17323,11 @@ class MapModelManager extends EmitManager {
             0,
             altitude
         ]);
+        const options = this.modelOptions.get(id);
+        if (options) {
+            options.lngLat = lngLat;
+            if (void 0 !== altitude) options.altitude = altitude;
+        }
     }
     updateModelRotation(id, rotation) {
         const modelData = this.models.get(id);
@@ -17133,6 +17356,7 @@ class MapModelManager extends EmitManager {
         if (this.map.getLayer(modelData.layerId)) this.map.removeLayer(modelData.layerId);
         if (this.map.getSource(modelData.sourceId)) this.map.removeSource(modelData.sourceId);
         this.models.delete(id);
+        this.modelOptions.delete(id);
         this.themeColorModels.delete(id);
         if (this.selectedModelId === id) this.selectedModelId = null;
     }
@@ -17182,10 +17406,52 @@ class MapModelManager extends EmitManager {
             previousId
         });
     }
+    hideLayer(id) {
+        if (void 0 === id) return void this.models.forEach((modelData)=>{
+            if (this.map?.getLayer(modelData.layerId)) this.map?.setLayoutProperty(modelData.layerId, 'visibility', 'none');
+        });
+        const modelData = this.models.get(id);
+        if (!modelData) return;
+        if (!this.map) return;
+        if (this.map.getLayer(modelData.layerId)) this.map.setLayoutProperty(modelData.layerId, 'visibility', 'none');
+    }
+    showLayer(id) {
+        if (void 0 === id) return void this.models.forEach((modelData)=>{
+            if (this.map?.getLayer(modelData.layerId)) this.map?.setLayoutProperty(modelData.layerId, 'visibility', 'visible');
+        });
+        const modelData = this.models.get(id);
+        if (!modelData) return;
+        if (!this.map) return;
+        if (this.map.getLayer(modelData.layerId)) this.map.setLayoutProperty(modelData.layerId, 'visibility', 'visible');
+    }
+    toggleLayer(id) {
+        if (void 0 === id) {
+            this.models.forEach((modelData)=>{
+                const isVisible = this.isLayerVisible(modelData.id);
+                if (isVisible) this.hideLayer(modelData.id);
+                else this.showLayer(modelData.id);
+            });
+            return true;
+        }
+        const isVisible = this.isLayerVisible(id);
+        if (isVisible) this.hideLayer(id);
+        else this.showLayer(id);
+        return !isVisible;
+    }
+    isLayerVisible(id) {
+        const modelData = this.models.get(id);
+        if (!modelData) return false;
+        if (!this.map) return false;
+        const layer = this.map.getLayer(modelData.layerId);
+        if (!layer) return false;
+        const visibility = layer.visibility;
+        return 'none' !== visibility;
+    }
     destroy() {
         if (this.map && this.globalClickHandler) this.map.off('click', this.globalClickHandler);
         this.selectedModelId = null;
         this.themeColorModels.clear();
+        this.modelOptions.clear();
         this.clearModels();
     }
 }
@@ -17272,7 +17538,8 @@ class BasicThreeObjectManager extends manager_Manager {
             matrix: matrix.clone()
         });
         else {
-            const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(lngLat, altitude);
+            const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+            const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
             const mercatorScale = modelAsMercator.meterInMercatorCoordinateUnits() * scale;
             mapThree.addRenderableObject(id, mesh, {
                 translateX: modelAsMercator.x,
@@ -17289,7 +17556,13 @@ class BasicThreeObjectManager extends manager_Manager {
             type,
             mesh,
             geometry,
-            material
+            material,
+            originalOptions: {
+                lngLat,
+                altitude,
+                rotation,
+                scale
+            }
         });
         console.log(`BasicThreeObject added: ${id}`, {
             type,
@@ -17309,7 +17582,8 @@ class BasicThreeObjectManager extends manager_Manager {
         if (!mapThree) return;
         const objData = this.objects.get(id);
         if (!objData) return void console.warn(`Object with id "${id}" not found`);
-        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(lngLat, altitude);
+        const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
         const renderableObj = mapThree.getRenderableObject(id);
         if (renderableObj) mapThree.updateRenderableObjectTransform(id, {
             ...renderableObj.transform,
@@ -17317,6 +17591,10 @@ class BasicThreeObjectManager extends manager_Manager {
             translateY: modelAsMercator.y,
             translateZ: modelAsMercator.z
         });
+        if (objData.originalOptions) {
+            objData.originalOptions.lngLat = lngLat;
+            objData.originalOptions.altitude = altitude;
+        }
     }
     updateObjectRotation(id, rotation) {
         const mapThree = this.getMapThree();
@@ -17350,7 +17628,8 @@ class BasicThreeObjectManager extends manager_Manager {
         if (!mapThree) return;
         const objData = this.objects.get(id);
         if (!objData) return void console.warn(`Object with id "${id}" not found`);
-        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(lngLat, altitude);
+        const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
         const mercatorScale = modelAsMercator.meterInMercatorCoordinateUnits() * scale;
         const renderableObj = mapThree.getRenderableObject(id);
         if (renderableObj) mapThree.updateRenderableObjectTransform(id, {
@@ -17421,6 +17700,27 @@ class BasicThreeObjectManager extends manager_Manager {
     getObjectIds() {
         return Array.from(this.objects.keys());
     }
+    handleCoordSystemChange(_system) {
+        const mapThree = this.getMapThree();
+        if (!mapThree || 0 === this.objects.size) return;
+        this.objects.forEach((objData, id)=>{
+            if (!objData.originalOptions) return;
+            const { lngLat, altitude, rotation, scale } = objData.originalOptions;
+            mapThree.removeRenderableObject(id);
+            const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+            const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
+            const mercatorScale = modelAsMercator.meterInMercatorCoordinateUnits() * (scale || 1);
+            mapThree.addRenderableObject(id, objData.mesh, {
+                translateX: modelAsMercator.x,
+                translateY: modelAsMercator.y,
+                translateZ: modelAsMercator.z,
+                rotateX: rotation?.[0] || 0,
+                rotateY: rotation?.[1] || 0,
+                rotateZ: rotation?.[2] || 0,
+                scale: mercatorScale
+            });
+        });
+    }
     destroy() {
         this.clearObjects();
     }
@@ -17470,10 +17770,11 @@ class Curve3DManager extends manager_Manager {
     }
     calculateTransform(points) {
         if (0 === points.length) throw new Error('Cannot calculate transform for empty points');
-        const firstPoint = mapbox_gl.MercatorCoordinate.fromLngLat([
+        const transformedFirst = this.mapless?.coordTrans('dataToTile', [
             points[0].lng,
             points[0].lat
-        ], points[0].alt);
+        ]);
+        const firstPoint = mapbox_gl.MercatorCoordinate.fromLngLat(transformedFirst, points[0].alt);
         return {
             translateX: firstPoint.x,
             translateY: firstPoint.y,
@@ -17486,10 +17787,11 @@ class Curve3DManager extends manager_Manager {
         points.forEach((point, index)=>{
             if (0 === index) vector3Points.push(new Vector3(0, 0, 0));
             else {
-                const currentMercator = mapbox_gl.MercatorCoordinate.fromLngLat([
+                const transformedPoint = this.mapless?.coordTrans('dataToTile', [
                     point.lng,
                     point.lat
-                ], point.alt);
+                ]);
+                const currentMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedPoint, point.alt);
                 const dx = currentMercator.x - transform.translateX;
                 const dy = currentMercator.y - transform.translateY;
                 const dz = currentMercator.z - transform.translateZ;
@@ -17498,6 +17800,33 @@ class Curve3DManager extends manager_Manager {
         });
         return vector3Points;
     }
+    handleCoordSystemChange(_system) {
+        if (this.curves.size > 0 && this.getMapThree()) {
+            const entries = Array.from(this.curves.entries());
+            entries.forEach(([id, curveData])=>{
+                const mapThree = this.getMapThree();
+                if (mapThree) mapThree.removeRenderableObject(id);
+                const transform = this.calculateTransform(curveData.originalPoints);
+                const points = this.convertPoints(curveData.originalPoints, transform);
+                const mesh = this.createMesh({
+                    ...curveData,
+                    points
+                });
+                if (mapThree) mapThree.addRenderableObject(id, mesh, {
+                    translateX: transform.translateX,
+                    translateY: transform.translateY,
+                    translateZ: transform.translateZ,
+                    scale: transform.scale
+                });
+                this.curves.set(id, {
+                    ...curveData,
+                    points,
+                    transform,
+                    mesh
+                });
+            });
+        }
+    }
     addCurve(id, config) {
         const mapThree = this.getMapThree();
         if (!mapThree) throw new Error('Three scene not initialized. Call useThree first.');
@@ -17517,7 +17846,8 @@ class Curve3DManager extends manager_Manager {
             points,
             mesh: null,
             transform,
-            config: curveConfig
+            config: curveConfig,
+            originalPoints: config.points
         };
         if (points.length >= 2) {
             const mesh = this.createMesh(curveData);
@@ -17550,6 +17880,7 @@ class Curve3DManager extends manager_Manager {
             mapThree.removeRenderableObject(id);
             curveData.transform = this.calculateTransform(config.points);
             curveData.points = this.convertPoints(config.points, curveData.transform);
+            curveData.originalPoints = config.points;
             const mesh = this.createMesh(curveData);
             curveData.mesh = mesh;
             mapThree.addRenderableObject(id, mesh, {
@@ -17600,6 +17931,353 @@ const curve3d = Curve3DManager;
 const attachCurve3D = (mapless, name, options)=>mapless?.use(Curve3DManager, name, options);
 const getCurve3D = (mapless, name)=>mapless?.get(Curve3DManager, name);
 const detachCurve3D = (mapless, name)=>mapless?.unuse(Curve3DManager, name);
+class InstancedModelManager extends manager_Manager {
+    scene = null;
+    camera = null;
+    renderer = null;
+    customLayerId;
+    isInitialized = false;
+    instancedMeshes = new Map();
+    instanceDataMap = new Map();
+    rotationAngles = new Map();
+    autoRotateEnabled = new Map();
+    rotationSpeeds = new Map();
+    clickCallback = null;
+    lastProjectionMatrix = null;
+    originalConfigs = new Map();
+    constructor(mapless){
+        super(mapless);
+        this.map = mapless.map;
+        this.customLayerId = `instanced-model-layer-${this.gmid}`;
+    }
+    initThree() {
+        if (this.isInitialized || !this.map) return;
+        const canvas = this.map.getCanvas();
+        const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+        if (!gl) return void console.error('InstancedModelManager: WebGL context not available');
+        this.scene = new Scene();
+        this.camera = new PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 10000);
+        this.renderer = new WebGLRenderer({
+            canvas: canvas,
+            context: gl,
+            antialias: false
+        });
+        this.renderer.autoClear = false;
+        this.renderer.setClearColor(0x000000, 0);
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        const ambientLight = new AmbientLight(0xffffff, 0.6);
+        this.scene.add(ambientLight);
+        const directionalLight = new DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(0, -70, 100);
+        this.scene.add(directionalLight);
+        const directionalLight2 = new DirectionalLight(0xffffff, 0.5);
+        directionalLight2.position.set(0, 70, 100);
+        this.scene.add(directionalLight2);
+        this.setupCustomLayer();
+        this.isInitialized = true;
+        console.log('InstancedModelManager: Initialized', {
+            canvas: `${canvas.width}x${canvas.height}`,
+            customLayerId: this.customLayerId
+        });
+    }
+    setupCustomLayer() {
+        if (!this.map) return;
+        const customLayer = {
+            id: this.customLayerId,
+            type: 'custom',
+            renderingMode: '3d',
+            onAdd: ()=>{
+                console.log('InstancedModelManager: Custom layer added');
+                this.setupClickHandler();
+            },
+            render: (_gl, matrix)=>{
+                if (!this.camera || !this.renderer || !this.scene) return;
+                this.updateAutoRotate();
+                this.camera.projectionMatrix = new Matrix4().fromArray(matrix);
+                this.lastProjectionMatrix = this.camera.projectionMatrix.clone();
+                _gl.enable(_gl.DEPTH_TEST);
+                this.renderer.resetState();
+                this.renderer.render(this.scene, this.camera);
+                if (this.map) this.map.triggerRepaint();
+            }
+        };
+        this.map.addLayer(customLayer);
+    }
+    setupClickHandler() {
+        if (!this.map) return;
+        const canvas = this.map.getCanvas();
+        const handleClick = (e)=>{
+            if (!this.camera || !this.scene || !this.renderer || !this.lastProjectionMatrix) return;
+            const rect = canvas.getBoundingClientRect();
+            const ndcX = (e.clientX - rect.left) / rect.width * 2 - 1;
+            const ndcY = 2 * -((e.clientY - rect.top) / rect.height) + 1;
+            const meshes = Array.from(this.instancedMeshes.entries());
+            let closestHit = null;
+            let minDistance = 1 / 0;
+            for (const [groupId, instancedMesh] of meshes){
+                const inverseProj = this.lastProjectionMatrix.clone().invert();
+                const nearPoint = new Vector4(ndcX, ndcY, -1, 1).applyMatrix4(inverseProj);
+                nearPoint.divideScalar(nearPoint.w);
+                const farPoint = new Vector4(ndcX, ndcY, 1, 1).applyMatrix4(inverseProj);
+                farPoint.divideScalar(farPoint.w);
+                const origin = new Vector3(0, 0, 0);
+                const direction = new Vector3(farPoint.x - nearPoint.x, farPoint.y - nearPoint.y, farPoint.z - nearPoint.z).normalize();
+                const raycaster = new Raycaster(origin, direction);
+                const intersects = raycaster.intersectObject(instancedMesh, false);
+                if (intersects.length > 0 && intersects[0].distance < minDistance) {
+                    const intersection = intersects[0];
+                    const instanceId = intersection.instanceId;
+                    if (void 0 !== instanceId) {
+                        minDistance = intersection.distance;
+                        closestHit = {
+                            groupId,
+                            instanceIndex: instanceId,
+                            point: intersection.point,
+                            distance: intersection.distance
+                        };
+                    }
+                }
+            }
+            if (closestHit && this.clickCallback) {
+                const instanceData = this.instanceDataMap.get(closestHit.groupId)?.[closestHit.instanceIndex];
+                if (instanceData) this.clickCallback({
+                    id: closestHit.groupId,
+                    instanceIndex: closestHit.instanceIndex,
+                    point: closestHit.point,
+                    lngLat: instanceData.lngLat,
+                    altitude: instanceData.altitude
+                });
+            }
+        };
+        canvas.addEventListener('click', handleClick);
+    }
+    onClick(callback) {
+        this.clickCallback = callback;
+    }
+    updateAutoRotate() {
+        this.autoRotateEnabled.forEach((enabled, id)=>{
+            if (!enabled) return;
+            const instancedMesh = this.instancedMeshes.get(id);
+            const angles = this.rotationAngles.get(id);
+            const speed = this.rotationSpeeds.get(id) || 0.01;
+            if (!instancedMesh || !angles) return;
+            const dummy = new Object3D();
+            const count = instancedMesh.count;
+            for(let i = 0; i < count; i++){
+                instancedMesh.getMatrixAt(i, dummy.matrix);
+                dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
+                angles[i] += speed;
+                dummy.rotation.set(0, 0, angles[i]);
+                dummy.updateMatrix();
+                instancedMesh.setMatrixAt(i, dummy.matrix);
+            }
+            instancedMesh.instanceMatrix.needsUpdate = true;
+        });
+    }
+    generateInstances(config) {
+        const instances = [];
+        for(let i = 0; i < config.count; i++){
+            const lngOffset = (Math.random() - 0.5) * config.spread * 2;
+            const latOffset = (Math.random() - 0.5) * config.spread * 2;
+            const altitude = 500 * Math.random();
+            const rotation = Math.random() * Math.PI * 2;
+            const scaleVariation = 1 + 2 * Math.random();
+            instances.push({
+                lngLat: [
+                    config.center[0] + lngOffset,
+                    config.center[1] + latOffset
+                ],
+                altitude,
+                rotation,
+                scale: scaleVariation
+            });
+        }
+        return instances;
+    }
+    handleCoordSystemChange(_system) {
+        if (!this.scene || !this.map || 0 === this.originalConfigs.size) return;
+        this.originalConfigs.forEach((config, id)=>{
+            this.remove(id);
+            this.load(id, config).catch((error)=>{
+                console.error(`Failed to reload instanced model "${id}" after coord system change:`, error);
+            });
+        });
+    }
+    async load(id, config) {
+        this.initThree();
+        if (!this.scene || !this.map) throw new Error('Three.js scene not initialized');
+        this.remove(id);
+        const loader = new GLTFLoader();
+        try {
+            console.log('InstancedModel: Loading model', config.url);
+            const gltf = await new Promise((resolve, reject)=>{
+                loader.load(config.url, resolve, void 0, reject);
+            });
+            const gltfScene = gltf.scene;
+            const meshes = [];
+            gltfScene.traverse((object)=>{
+                if (object instanceof Mesh) meshes.push(object);
+            });
+            if (0 === meshes.length) throw new Error('No mesh found in model');
+            console.log('InstancedModel: Found meshes', {
+                count: meshes.length,
+                details: meshes.map((m, i)=>({
+                        index: i,
+                        vertices: m.geometry.attributes.position?.count,
+                        hasMaterial: !!m.material,
+                        materialArray: Array.isArray(m.material)
+                    }))
+            });
+            let meshToUse;
+            if (1 === meshes.length) meshToUse = meshes[0];
+            else {
+                const geometries = meshes.map((mesh)=>{
+                    const geometry = mesh.geometry.clone();
+                    geometry.applyMatrix4(mesh.matrixWorld);
+                    return geometry;
+                });
+                const geometry = mergeGeometries(geometries, false);
+                if (geometry) meshToUse = new Mesh(geometry, meshes[0].material);
+                else {
+                    console.warn('Failed to merge geometries, falling back to first mesh');
+                    meshToUse = meshes[0];
+                }
+            }
+            const mesh = meshToUse;
+            const materialToUse = Array.isArray(mesh.material) ? mesh.material[0] : mesh.material;
+            const instancedMesh = new InstancedMesh(mesh.geometry.clone(), materialToUse.clone(), config.count);
+            instancedMesh.castShadow = true;
+            instancedMesh.receiveShadow = true;
+            if ('side' in instancedMesh.material) instancedMesh.material.side = DoubleSide;
+            const instances = this.generateInstances(config);
+            const angles = new Float32Array(config.count);
+            const transformedCenter = this.mapless?.coordTrans('dataToTile', config.center);
+            const meterInMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedCenter, 0).meterInMercatorCoordinateUnits();
+            console.log('InstancedModel: Creating instances', {
+                instanceCount: config.count,
+                center: config.center,
+                scale: config.scale,
+                meterInMercator,
+                firstInstanceLngLat: instances[0].lngLat,
+                firstInstanceAlt: instances[0].altitude
+            });
+            const dummy = new Object3D();
+            instances.forEach((instance, i)=>{
+                const transformedLngLat = this.mapless?.coordTrans('dataToTile', instance.lngLat);
+                const mercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, instance.altitude);
+                dummy.position.set(mercator.x, mercator.y, mercator.z);
+                dummy.rotation.set(0, 0, instance.rotation);
+                const scale = meterInMercator * config.scale * instance.scale;
+                dummy.scale.set(scale, -scale, scale);
+                dummy.updateMatrix();
+                instancedMesh.setMatrixAt(i, dummy.matrix);
+                angles[i] = instance.rotation;
+            });
+            instancedMesh.instanceMatrix.needsUpdate = true;
+            this.scene.add(instancedMesh);
+            this.instancedMeshes.set(id, instancedMesh);
+            this.instanceDataMap.set(id, instances);
+            this.rotationAngles.set(id, angles);
+            this.autoRotateEnabled.set(id, config.autoRotate || false);
+            this.rotationSpeeds.set(id, config.rotationSpeed || 0.01);
+            this.originalConfigs.set(id, config);
+            console.log(`InstancedModel "${id}" loaded with ${config.count} instances`);
+        } catch (error) {
+            console.error(`Failed to load instanced model "${id}":`, error);
+            throw error;
+        }
+    }
+    enableAutoRotate(id, speed = 0.01) {
+        this.autoRotateEnabled.set(id, true);
+        this.rotationSpeeds.set(id, speed);
+    }
+    disableAutoRotate(id) {
+        this.autoRotateEnabled.set(id, false);
+    }
+    updateInstance(id, index, lngLat, altitude) {
+        const instancedMesh = this.instancedMeshes.get(id);
+        if (!instancedMesh) return;
+        const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+        const mercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
+        const dummy = new Object3D();
+        instancedMesh.getMatrixAt(index, dummy.matrix);
+        dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
+        dummy.position.set(mercator.x, mercator.y, mercator.z);
+        dummy.updateMatrix();
+        instancedMesh.setMatrixAt(index, dummy.matrix);
+        instancedMesh.instanceMatrix.needsUpdate = true;
+        const instances = this.instanceDataMap.get(id);
+        if (instances && instances[index]) {
+            instances[index].lngLat = lngLat;
+            instances[index].altitude = altitude;
+        }
+    }
+    setInstanceVisible(id, visible) {
+        const instancedMesh = this.instancedMeshes.get(id);
+        if (instancedMesh) instancedMesh.visible = visible;
+    }
+    setVisible(visible) {
+        this.IsVisible = visible;
+        this.instancedMeshes.forEach((mesh)=>{
+            mesh.visible = visible;
+        });
+    }
+    getInstanceCount(id) {
+        const instancedMesh = this.instancedMeshes.get(id);
+        return instancedMesh?.count || 0;
+    }
+    getIds() {
+        return Array.from(this.instancedMeshes.keys());
+    }
+    remove(id) {
+        const instancedMesh = this.instancedMeshes.get(id);
+        if (!instancedMesh) return;
+        this.scene?.remove(instancedMesh);
+        instancedMesh.geometry.dispose();
+        if (Array.isArray(instancedMesh.material)) instancedMesh.material.forEach((m)=>{
+            m.dispose();
+        });
+        else instancedMesh.material.dispose();
+        this.instancedMeshes.delete(id);
+        this.instanceDataMap.delete(id);
+        this.rotationAngles.delete(id);
+        this.autoRotateEnabled.delete(id);
+        this.rotationSpeeds.delete(id);
+    }
+    clear() {
+        const ids = this.getIds();
+        ids.forEach((id)=>{
+            this.remove(id);
+        });
+    }
+    setColor(id, color) {
+        const instancedMesh = this.instancedMeshes.get(id);
+        if (!instancedMesh) return;
+        const meshColor = 'string' == typeof color ? new Color(color) : color;
+        if (Array.isArray(instancedMesh.material)) instancedMesh.material.forEach((m)=>{
+            if ('color' in m) m.color.set(meshColor);
+        });
+        else if ('color' in instancedMesh.material) instancedMesh.material.color.set(meshColor);
+    }
+    destroy() {
+        this.clear();
+        if (this.map && this.customLayerId) try {
+            this.map.removeLayer(this.customLayerId);
+        } catch  {}
+        if (this.renderer) {
+            this.renderer.dispose();
+            this.renderer = null;
+        }
+        this.scene = null;
+        this.camera = null;
+        this.isInitialized = false;
+        this.originalConfigs.clear();
+    }
+}
+const instancedModel = InstancedModelManager;
+const attachInstancedModel = (mapless, name)=>mapless?.use(InstancedModelManager, name);
+const getInstancedModel = (mapless, name)=>mapless?.get(InstancedModelManager, name);
+const detachInstancedModel = (mapless, name)=>mapless?.unuse(InstancedModelManager, name);
 class Line2Manager extends manager_Manager {
     mapThree = null;
     lines = new Map();
@@ -17664,10 +18342,11 @@ class Line2Manager extends manager_Manager {
     }
     calculateTransform(points) {
         if (0 === points.length) throw new Error('Cannot calculate transform for empty points');
-        const firstPoint = mapbox_gl.MercatorCoordinate.fromLngLat([
+        const transformedFirst = this.mapless?.coordTrans('dataToTile', [
             points[0].lng,
             points[0].lat
-        ], points[0].alt);
+        ]);
+        const firstPoint = mapbox_gl.MercatorCoordinate.fromLngLat(transformedFirst, points[0].alt);
         return {
             translateX: firstPoint.x,
             translateY: firstPoint.y,
@@ -17680,10 +18359,11 @@ class Line2Manager extends manager_Manager {
         points.forEach((point, index)=>{
             if (0 === index) positions.push(0, 0, 0);
             else {
-                const currentMercator = mapbox_gl.MercatorCoordinate.fromLngLat([
+                const transformedPoint = this.mapless?.coordTrans('dataToTile', [
                     point.lng,
                     point.lat
-                ], point.alt);
+                ]);
+                const currentMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedPoint, point.alt);
                 const dx = currentMercator.x - transform.translateX;
                 const dy = currentMercator.y - transform.translateY;
                 const dz = currentMercator.z - transform.translateZ;
@@ -17692,6 +18372,23 @@ class Line2Manager extends manager_Manager {
         });
         return positions;
     }
+    handleCoordSystemChange(_system) {
+        const mapThree = this.getMapThree();
+        if (!mapThree || 0 === this.lines.size) return;
+        this.lines.forEach((lineData, id)=>{
+            mapThree.removeRenderableObject(id);
+            lineData.transform = this.calculateTransform(lineData.points);
+            const positions = this.convertPoints(lineData.points, lineData.transform);
+            lineData.geometry.setPositions(positions);
+            lineData.geometry.computeBoundingSphere();
+            mapThree.addRenderableObject(id, lineData.line2, {
+                translateX: lineData.transform.translateX,
+                translateY: lineData.transform.translateY,
+                translateZ: lineData.transform.translateZ,
+                scale: lineData.transform.scale
+            });
+        });
+    }
     createMaterial(config) {
         const colorNumber = 'string' == typeof config.color ? new Color(config.color).getHex() : 'number' == typeof config.color ? config.color : new Color(config.color).getHex();
         const material = new LineMaterial({
@@ -17976,6 +18673,7 @@ class ModelManager extends manager_Manager {
     prefabs = new Map();
     mixers = new Map();
     clock = new Clock();
+    modelConfigs = new Map();
     constructor(mapless){
         super(mapless);
         this.map = mapless.map;
@@ -18037,7 +18735,8 @@ class ModelManager extends manager_Manager {
             });
             this.prefabs.set(modelId, model);
         }
-        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(lngLat, altitude);
+        const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
         const mercatorScale = modelAsMercator.meterInMercatorCoordinateUnits() * scale;
         mapThree.addRenderableObject(modelId, model, {
             translateX: modelAsMercator.x,
@@ -18048,6 +18747,13 @@ class ModelManager extends manager_Manager {
             rotateZ: rotation[2],
             scale: mercatorScale
         });
+        this.modelConfigs.set(modelId, {
+            url,
+            lngLat,
+            altitude,
+            rotation,
+            scale
+        });
         console.log('Model loaded:', {
             id: modelId,
             transform: {
@@ -18135,7 +18841,8 @@ class ModelManager extends manager_Manager {
                 }
             });
         }
-        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(lngLat, altitude);
+        const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
         const mercatorScale = modelAsMercator.meterInMercatorCoordinateUnits() * scale;
         if (groupId) {
             const group = mapThree.getGroup(groupId);
@@ -18150,6 +18857,7 @@ class ModelManager extends manager_Manager {
             rotateZ: rotation[2],
             scale: mercatorScale
         });
+        this.modelConfigs.set(id, config);
         console.log('Model added:', {
             id,
             transform: {
@@ -18167,7 +18875,8 @@ class ModelManager extends manager_Manager {
     updateModelPosition(id, lngLat, altitude = 0) {
         const mapThree = this.getMapThree();
         if (!mapThree) return;
-        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(lngLat, altitude);
+        const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
         const renderableObj = mapThree.getRenderableObject(id);
         if (renderableObj) mapThree.updateRenderableObjectTransform(id, {
             ...renderableObj.transform,
@@ -18175,6 +18884,11 @@ class ModelManager extends manager_Manager {
             translateY: modelAsMercator.y,
             translateZ: modelAsMercator.z
         });
+        const config = this.modelConfigs.get(id);
+        if (config) {
+            config.lngLat = lngLat;
+            config.altitude = altitude;
+        }
     }
     updateModelRotation(id, rotation) {
         const mapThree = this.getMapThree();
@@ -18222,6 +18936,7 @@ class ModelManager extends manager_Manager {
         if (!mapThree) return;
         mapThree.removeRenderableObject(id);
         this.stopAnimation(id);
+        this.modelConfigs.delete(id);
     }
     clearModels() {
         const mapThree = this.getMapThree();
@@ -18234,6 +18949,24 @@ class ModelManager extends manager_Manager {
             mixer.stopAllAction();
         });
         this.mixers.clear();
+        this.modelConfigs.clear();
+    }
+    handleCoordSystemChange(_system) {
+        const mapThree = this.getMapThree();
+        if (!mapThree || 0 === this.modelConfigs.size) return;
+        this.modelConfigs.forEach((config, id)=>{
+            const transformedLngLat = this.mapless?.coordTrans('dataToTile', config.lngLat);
+            const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, config.altitude || 0);
+            const mercatorScale = modelAsMercator.meterInMercatorCoordinateUnits() * (config.scale || 1);
+            const renderableObj = mapThree.getRenderableObject(id);
+            if (renderableObj) mapThree.updateRenderableObjectTransform(id, {
+                ...renderableObj.transform,
+                translateX: modelAsMercator.x,
+                translateY: modelAsMercator.y,
+                translateZ: modelAsMercator.z,
+                scale: mercatorScale
+            });
+        });
     }
     getModel(id) {
         const mapThree = this.getMapThree();
@@ -18290,6 +19023,8 @@ class ThreeManager extends manager_Manager {
     };
     boxHelper = null;
     isSelected = false;
+    clickCleanup = null;
+    originalModelConfig = null;
     constructor(mapless){
         super(mapless);
         this.map = mapless.map;
@@ -18315,18 +19050,18 @@ class ThreeManager extends manager_Manager {
         0,
         0,
         0
-    ], scale = 1) {
+    ], scale = 1, color) {
         const mapThree = this.getMapThree();
         if (!mapThree) throw new Error('MapThree not initialized. Call useThree first.');
         const loader = new GLTFLoader();
         return new Promise((resolve, reject)=>{
             loader.load(url, (gltf)=>{
                 this.model = gltf.scene;
-                this.model.traverse((child)=>{
+                if (color) this.model.traverse((child)=>{
                     if (child instanceof Mesh) {
                         const material = child.material;
                         if (material.emissive) {
-                            material.emissive = new Color(0x00ffff);
+                            material.emissive = new Color(color);
                             material.emissiveIntensity = 0.5;
                         }
                     }
@@ -18335,7 +19070,8 @@ class ThreeManager extends manager_Manager {
                 this.baseRotation = [
                     ...rotation
                 ];
-                const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(lngLat, altitude);
+                const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+                const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
                 this.modelTransform = {
                     translateX: modelAsMercator.x,
                     translateY: modelAsMercator.y,
@@ -18357,6 +19093,14 @@ class ThreeManager extends manager_Manager {
                     action.play();
                     this.currentAction = action;
                 }
+                this.originalModelConfig = {
+                    url,
+                    lngLat,
+                    altitude,
+                    rotation,
+                    scale,
+                    color
+                };
                 const animationNames = this.animations.map((anim)=>anim.name);
                 resolve({
                     model: this.model,
@@ -18399,11 +19143,16 @@ class ThreeManager extends manager_Manager {
     updatePosition(lngLat, altitude = 0) {
         const mapThree = this.getMapThree();
         if (!mapThree || !this.model) return;
-        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(lngLat, altitude);
+        const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
         this.modelTransform.translateX = modelAsMercator.x;
         this.modelTransform.translateY = modelAsMercator.y;
         this.modelTransform.translateZ = modelAsMercator.z;
         this.modelTransform.scale = modelAsMercator.meterInMercatorCoordinateUnits() * this.userScale;
+        if (this.originalModelConfig) {
+            this.originalModelConfig.lngLat = lngLat;
+            this.originalModelConfig.altitude = altitude;
+        }
         this._buildFullTransformMatrix(this.currentOrientation.heading, this.currentOrientation.pitch, this.currentOrientation.roll);
     }
     _applyBaseRotation() {
@@ -18535,13 +19284,37 @@ class ThreeManager extends manager_Manager {
         if (!this.boxHelper || !this.model) return;
         this.boxHelper.update();
     }
+    registerClick(onClick, tolerance = 30) {
+        const mapThree = this.getMapThree();
+        if (!mapThree || !this.modelId) {
+            console.warn('ThreeManager: Cannot register click, MapThree or modelId not available');
+            return null;
+        }
+        if (this.clickCleanup) {
+            this.clickCleanup();
+            this.clickCleanup = null;
+        }
+        const cleanup = mapThree.registerRenderableObjectClick(this.modelId, (_object, point)=>{
+            if (onClick && this.model) onClick(this.model, point);
+        }, tolerance);
+        this.clickCleanup = cleanup;
+        return cleanup;
+    }
+    unregisterClick() {
+        if (this.clickCleanup) {
+            this.clickCleanup();
+            this.clickCleanup = null;
+        }
+    }
     dispose() {
+        this.unregisterClick();
         this.deselect();
         const mapThree = this.getMapThree();
         if (mapThree && this.modelId) mapThree.removeRenderableObject(this.modelId);
         this.model = null;
         this.animations = [];
         this.currentAction = null;
+        this.originalModelConfig = null;
         if (this.mixer) {
             this.mixer.stopAllAction();
             this.mixer = null;
@@ -18550,6 +19323,19 @@ class ThreeManager extends manager_Manager {
             this.updateAnimation();
         });
     }
+    handleCoordSystemChange(_system) {
+        if (!this.originalModelConfig) return;
+        const mapThree = this.getMapThree();
+        if (!mapThree || !this.model) return;
+        const { lngLat, altitude } = this.originalModelConfig;
+        const transformedLngLat = this.mapless?.coordTrans('dataToTile', lngLat);
+        const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(transformedLngLat, altitude);
+        this.modelTransform.translateX = modelAsMercator.x;
+        this.modelTransform.translateY = modelAsMercator.y;
+        this.modelTransform.translateZ = modelAsMercator.z;
+        this.modelTransform.scale = modelAsMercator.meterInMercatorCoordinateUnits() * this.userScale;
+        this._buildFullTransformMatrix(this.currentOrientation.heading, this.currentOrientation.pitch, this.currentOrientation.roll);
+    }
     destroy() {
         this.dispose();
     }
@@ -20482,4 +21268,4 @@ function detachPathTracker(mapless) {
         pathTrackerManagers.delete(mapless);
     }
 }
-export { AirspaceManager, basicObject as BasicThreeObjectManager, ClickStrategy, CoordTransformer, curve3d as Curve3DManager, Draw, elevatedLine as ElevatedLineManager, EmitManager, FixedRectangleLayer as FixedRectangleLayerManager, FreeStrategy, Lang, line2Manager as Line2Manager, LngLat, manager_Manager as Manager, mapModel as MapModelManager, MapMouseEvent, Mapless_Base as Mapless, Marker, MercatorCoordinate, mana_three_model as ModelManager, MultiCoordTransformer, OldStationManager, paint_PaintBoard as PaintBoard, PathCollectionStrategy, path_PathTracker as PathTracker, Popup, PositionMarker, PositionMouse, QuickTrans, RectangleLayer as RectangleLayerManager, icons_Singleton as Singleton, three as ThreeManager, adjustMapConfigByCoord, attachAirspace, attachBasicObject, attachBoundary, attachCluster, attachCurve, attachCurve3D, attachElevatedLine, attachFixedRectangleLayer, attachHeatmap, attachImageData, attachLine, attachLine2, attachMapModel, attachMarker, attachModel, attachMovable, attachNewStation, attachNode, attachOldStation, attachPathTracker, attachPolygon, attachRectangleLayer, attachRoutes, attachShape, attachStep, attachText, attachThree, attachTrack, buildTileUrl, calculateObjectsInPolygon, createCoordTransformer, darkFog, darkSource, defaultSource, detachAirspace, detachBasicObject, detachBoundary, detachCluster, detachCurve, detachCurve3D, detachElevatedLine, detachFixedRectangleLayer, detachHeatmap, detachImageData, detachLine, detachLine2, detachMapModel, detachMarker, detachModel, detachMovable, detachNewStation, detachNode, detachOldStation, detachPathTracker, detachPolygon, detachRectangleLayer, detachRoutes, detachShape, detachStep, detachText, detachThree, detachTrack, ellipse, genPrefixId, getAirspace, getAllSourceCoordSystems, getBasicObject, getBoundary, getCluster, getCoordDisplayName, getCurve, getCurve3D, getElevatedLine, getFixedRectangleLayer, getHeatmap, getImageData, getLine, getLine2, getMapModel, getMarker, getModel, getMovable, getNewStation, getNode, getOldStation, getPaintCenter, getPaintCenterNRadius, getPaintPolygon, getPathTracker, getPolygon, getRectangleLayer, getRoutes, getShape, getSourceCoordSystem, getSourcesByCoordSystem, getStep, getText, getThree, getTrack, isValidCoordinate, lightFog, lightSource, lite, mapbox_gl as mapboxgl, maplessPreset, point2Feature, propwmsTransformRequest, sourcesMap, newstation_stateColorRule as stateColorRule, test2Point, throttle, transformCoordinate, transformCoordinateBetweenSources, transformCoordinates, transformMapCenter, tryFunc, tryTrans };
+export { AirspaceManager, basicObject as BasicThreeObjectManager, ClickStrategy, CoordTransformer, curve3d as Curve3DManager, Draw, elevatedLine as ElevatedLineManager, EmitManager, FixedRectangleLayer as FixedRectangleLayerManager, FreeStrategy, instancedModel as InstancedModelManager, Lang, line2Manager as Line2Manager, LngLat, manager_Manager as Manager, mapModel as MapModelManager, MapMouseEvent, Mapless_Base as Mapless, Marker, MercatorCoordinate, mana_three_model as ModelManager, MultiCoordTransformer, OldStationManager, paint_PaintBoard as PaintBoard, PathCollectionStrategy, path_PathTracker as PathTracker, Popup, PositionMarker, PositionMouse, QuickTrans, RectangleLayer as RectangleLayerManager, icons_Singleton as Singleton, three as ThreeManager, adjustMapConfigByCoord, attachAirspace, attachBasicObject, attachBoundary, attachCluster, attachCurve, attachCurve3D, attachElevatedLine, attachFixedRectangleLayer, attachHeatmap, attachImageData, attachInstancedModel, attachLine, attachLine2, attachMapModel, attachMarker, attachModel, attachMovable, attachNewStation, attachNode, attachOldStation, attachPathTracker, attachPolygon, attachRectangleLayer, attachRoutes, attachShape, attachStep, attachText, attachThree, attachTrack, buildTileUrl, calculateObjectsInPolygon, createCoordTransformer, darkFog, darkSource, defaultSource, detachAirspace, detachBasicObject, detachBoundary, detachCluster, detachCurve, detachCurve3D, detachElevatedLine, detachFixedRectangleLayer, detachHeatmap, detachImageData, detachInstancedModel, detachLine, detachLine2, detachMapModel, detachMarker, detachModel, detachMovable, detachNewStation, detachNode, detachOldStation, detachPathTracker, detachPolygon, detachRectangleLayer, detachRoutes, detachShape, detachStep, detachText, detachThree, detachTrack, ellipse, genPrefixId, getAirspace, getAllSourceCoordSystems, getBasicObject, getBoundary, getCluster, getCoordDisplayName, getCurve, getCurve3D, getElevatedLine, getFixedRectangleLayer, getHeatmap, getImageData, getInstancedModel, getLine, getLine2, getMapModel, getMarker, getModel, getMovable, getNewStation, getNode, getOldStation, getPaintCenter, getPaintCenterNRadius, getPaintPolygon, getPathTracker, getPolygon, getRectangleLayer, getRoutes, getShape, getSourceCoordSystem, getSourcesByCoordSystem, getStep, getText, getThree, getTrack, isValidCoordinate, lightFog, lightSource, lite, mapbox_gl as mapboxgl, maplessPreset, point2Feature, propwmsTransformRequest, sourcesMap, newstation_stateColorRule as stateColorRule, test2Point, throttle, transformCoordinate, transformCoordinateBetweenSources, transformCoordinates, transformMapCenter, tryFunc, tryTrans };