@mapless/core 0.1.0 → 1.0.11

package/dist/index.js

@@ -1,10 +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, 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 { GLTFLoader, Line2, LineGeometry, LineMaterial } from "three-stdlib";
+import { DRACOLoader, GLTFLoader, Line2, LineGeometry, LineMaterial } from "three-stdlib";
 class MapThree {
     mapless = void 0;
     scene = null;
@@ -16,6 +16,7 @@ class MapThree {
     renderableObjects = new Map();
     isInitialized = false;
     customLayerId = null;
+    lastProjectionMatrix = null;
     constructor(props){
         const { mapless } = props;
         this.mapless = mapless;
@@ -54,6 +55,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 +319,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();
@@ -832,6 +968,7 @@ const mona_loading_default_namespaceObject = "data:image/gif;base64,R0lGODlhgAGA
 const center_namespaceObject = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxMTZBRkZCNkJFRDExRUY4RTc4ODI1OTI5RDg2NEIzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxMTZBRkZDNkJFRDExRUY4RTc4ODI1OTI5RDg2NEIzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjExNkFGRjk2QkVEMTFFRjhFNzg4MjU5MjlEODY0QjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjExNkFGRkE2QkVEMTFFRjhFNzg4MjU5MjlEODY0QjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7kzyMtAAAGuElEQVR42uxd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";
 const fly_namespaceObject = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFGODkyQTNFNkJFRDExRUZCQzQzOTRDMjJCMTlEMDU3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFGODkyQTNGNkJFRDExRUZCQzQzOTRDMjJCMTlEMDU3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUY4OTJBM0M2QkVEMTFFRkJDNDM5NEMyMkIxOUQwNTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUY4OTJBM0Q2QkVEMTFFRkJDNDM5NEMyMkIxOUQwNTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Kn+fFAAAJmElEQVR42uxd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";
 const car_namespaceObject = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFFQjNCNEQ4NkJFRDExRUY5RDFCQzVGRTFERTM5QURDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFFQjNCNEQ5NkJFRDExRUY5RDFCQzVGRTFERTM5QURDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUVCM0I0RDY2QkVEMTFFRjlEMUJDNUZFMURFMzlBREMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUVCM0I0RDc2QkVEMTFFRjlEMUJDNUZFMURFMzlBREMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4N8EJcAAAKr0lEQVR42uxd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";
+const controller_namespaceObject = "data:image/png;base64,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";
 const flight_namespaceObject = "data:image/png;base64,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";
 const ship_namespaceObject = "data:image/png;base64,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";
 const circle_namespaceObject = "data:image/png;base64,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";
@@ -879,7 +1016,8 @@ const icons = {
     mobileRect: mobile_rect_namespaceObject,
     otherCircle: other_circle_namespaceObject,
     movableRect: movable_rect_namespaceObject,
-    portableRect: portable_rect_namespaceObject
+    portableRect: portable_rect_namespaceObject,
+    controllerRect: controller_namespaceObject
 };
 const borderIcon = {
     circle: {
@@ -13779,8 +13917,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();
@@ -13847,8 +13992,8 @@ class MovableManager extends EmitManager {
                         ],
                         true
                     ],
-                    0.4,
-                    0.3
+                    this.iconBaseSize + 0.1,
+                    this.iconBaseSize
                 ],
                 'icon-rotate': [
                     'get',
@@ -13856,8 +14001,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',
                     [
                         '==',
@@ -13925,8 +14073,8 @@ class MovableManager extends EmitManager {
                         ],
                         true
                     ],
-                    6,
-                    5
+                    this.circleBaseRadius + 2,
+                    this.circleBaseRadius
                 ],
                 'circle-color': stateColorRule,
                 'circle-stroke-width': [
@@ -14109,12 +14257,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 || '');
@@ -14511,6 +14666,7 @@ class NewStationManager extends EmitManager {
             'portable',
             'movable'
         ].includes(station.category?.toLowerCase())) return station.category?.toLowerCase() || '';
+        if (station.category && 'controller' === station.category.toLowerCase()) return 'controller';
         return 'other';
     };
     getFeatures = (stations)=>stations.filter((station)=>{
@@ -16425,36 +16581,26 @@ const getTrack = (mapless, name)=>mapless?.get(TrackManager, name);
 const detachTrack = (mapless, name)=>mapless?.unuse(TrackManager, name);
 class AirspaceManager extends manager_Manager {
     zones = {};
-    config;
+    config = {
+        opacity: 0.3,
+        defaultColor: '#4a90e2',
+        defaultEdgeColor: '#ff00ff',
+        defaultEdgeOpacity: 0.8,
+        defaultEdgeWidth: 2,
+        defaultMinAltitude: 0,
+        defaultMaxAltitude: 1000,
+        defaultFillColor: 'rgba(74, 144, 226, 0.3)',
+        defaultFillOpacity: 0.3
+    };
     originalProperties = {};
     constructor(mapless, options){
         super(mapless, options, 'airspace');
-        this.config = {
-            minAltitude: 0,
-            maxAltitude: 1000,
-            color: 0x4a90e2,
-            opacity: 0.3,
-            edgeColor: 0xff00ff,
-            edgeOpacity: 0.8,
-            edgeWidth: 2
-        };
         this.onInitialized();
     }
-    setConfig(config) {
-        this.config = {
-            minAltitude: config.minAltitude ?? this.config.minAltitude,
-            maxAltitude: config.maxAltitude ?? this.config.maxAltitude,
-            color: config.color ?? this.config.color,
-            opacity: config.opacity ?? this.config.opacity,
-            edgeColor: config.edgeColor ?? this.config.edgeColor,
-            edgeOpacity: config.edgeOpacity ?? this.config.edgeOpacity,
-            edgeWidth: config.edgeWidth ?? this.config.edgeWidth
-        };
-        if (this.map && this.idHub?.lineLayerId) {
-            this.map.setPaintProperty(this.idHub.lineLayerId, 'line-color', this.numberToColor(this.config.edgeColor));
-            this.map.setPaintProperty(this.idHub.lineLayerId, 'line-opacity', this.config.edgeOpacity);
-            this.map.setPaintProperty(this.idHub.lineLayerId, 'line-width', this.config.edgeWidth);
-            this.map.setPaintProperty(this.idHub.fillLayerId, 'fill-extrusion-opacity', this.config.opacity);
+    setConfig(options) {
+        if (void 0 !== options.opacity) {
+            this.config.opacity = options.opacity;
+            if (this.map && this.idHub?.fillLayerId) this.map.setPaintProperty(this.idHub.fillLayerId, 'fill-extrusion-opacity', this.config.opacity);
         }
     }
     handleCoordSystemChange(_system) {
@@ -16467,6 +16613,7 @@ class AirspaceManager extends manager_Manager {
         const newHub = new core_IdHub({
             layers: {
                 fillLayerId: 'dzmap-airspace-fill-layer',
+                fill2DLayerId: 'dzmap-airspace-fill-2d-layer',
                 lineLayerId: 'dzmap-airspace-line-layer'
             },
             sources: {
@@ -16479,14 +16626,38 @@ class AirspaceManager extends manager_Manager {
         if (!this.mapless) return;
         const sid = this.idHub?.sourceId;
         this.mapless.addEmptySource(sid);
+        this.mapless.addLayer({
+            id: this.idHub?.fill2DLayerId,
+            type: 'fill',
+            source: sid,
+            paint: {
+                'fill-color': [
+                    'get',
+                    'fillColor'
+                ],
+                'fill-opacity': [
+                    'get',
+                    'fillOpacity'
+                ]
+            }
+        });
         this.mapless.addLayer({
             id: this.idHub?.lineLayerId,
             type: 'line',
             source: sid,
             paint: {
-                'line-color': this.numberToColor(this.config.edgeColor),
-                'line-opacity': this.config.edgeOpacity,
-                'line-width': this.config.edgeWidth
+                'line-color': [
+                    'get',
+                    'edgeColor'
+                ],
+                'line-opacity': [
+                    'get',
+                    'edgeOpacity'
+                ],
+                'line-width': [
+                    'get',
+                    'edgeWidth'
+                ]
             }
         });
         this.mapless.addLayer({
@@ -16498,7 +16669,7 @@ class AirspaceManager extends manager_Manager {
                     'get',
                     'color'
                 ],
-                'fill-extrusion-opacity': this.config.opacity || 0,
+                'fill-extrusion-opacity': this.config.opacity,
                 'fill-extrusion-height': [
                     'get',
                     'maxAltitude'
@@ -16510,15 +16681,11 @@ class AirspaceManager extends manager_Manager {
             }
         });
     }
-    numberToColor(num) {
-        return `#${num.toString(16).padStart(6, '0')}`;
-    }
     generateId() {
         return `airspace-${Object.keys(this.zones).length}`;
     }
     drawZone(id, options) {
-        const { name = '', geometry, minAltitude = this.config.minAltitude, maxAltitude = this.config.maxAltitude, color = this.config.color, opacity = this.config.opacity } = options;
-        const zoneColor = this.numberToColor(color);
+        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;
         const feature = {
             type: 'Feature',
             geometry: {
@@ -16530,8 +16697,12 @@ class AirspaceManager extends manager_Manager {
                 name,
                 minAltitude,
                 maxAltitude,
-                color: zoneColor,
-                opacity
+                color,
+                edgeColor,
+                edgeOpacity,
+                edgeWidth,
+                fillColor,
+                fillOpacity
             }
         };
         this.zones[id] = {
@@ -16541,20 +16712,38 @@ class AirspaceManager extends manager_Manager {
             minAltitude,
             maxAltitude,
             color,
-            opacity,
+            edgeColor,
+            edgeOpacity,
+            edgeWidth,
+            fillColor,
+            fillOpacity,
             feature
         };
         this.originalProperties[id] = {
-            color,
-            opacity
+            color
         };
         this.updateSource();
     }
     updateSource() {
-        this.mapless?.setData(this.idHub?.sourceId, {
+        const featureCollection = {
             type: 'FeatureCollection',
             features: Object.values(this.zones).map((z)=>z.feature)
-        });
+        };
+        this.mapless?.setData(this.idHub?.sourceId, featureCollection);
+        if (this.map && this.idHub?.lineLayerId && Object.keys(this.zones).length > 0) {
+            this.map.setPaintProperty(this.idHub.lineLayerId, 'line-color', [
+                'get',
+                'edgeColor'
+            ]);
+            this.map.setPaintProperty(this.idHub.lineLayerId, 'line-opacity', [
+                'get',
+                'edgeOpacity'
+            ]);
+            this.map.setPaintProperty(this.idHub.lineLayerId, 'line-width', [
+                'get',
+                'edgeWidth'
+            ]);
+        }
     }
     addZone(options) {
         const id = options.id || this.generateId();
@@ -16575,44 +16764,36 @@ class AirspaceManager extends manager_Manager {
         this.originalProperties = {};
         this.mapless?.setEmptyData(this.idHub?.sourceId);
     }
-    updateZoneColor(id, color) {
+    updateZone(id, options) {
         const zone = this.zones[id];
         if (!zone) return;
-        zone.color = color;
-        const newColor = this.numberToColor(color);
-        if (zone.feature.properties) zone.feature.properties.color = newColor;
+        Object.assign(zone, options);
+        if (zone.feature.properties) Object.assign(zone.feature.properties, options);
+        if (options.color && !this.originalProperties[id]) this.originalProperties[id] = {
+            color: zone.color
+        };
         this.updateSource();
     }
-    updateZoneOpacity(id, opacity) {
-        const zone = this.zones[id];
-        if (!zone) return;
-        zone.opacity = opacity;
-        if (zone.feature.properties) zone.feature.properties.opacity = opacity;
-        this.updateSource();
+    updateZoneColor(id, color) {
+        this.updateZone(id, {
+            color
+        });
     }
     updateZoneAltitude(id, minAltitude, maxAltitude) {
-        const zone = this.zones[id];
-        if (!zone) return;
-        zone.minAltitude = minAltitude;
-        zone.maxAltitude = maxAltitude;
-        if (zone.feature.properties) {
-            zone.feature.properties.minAltitude = minAltitude;
-            zone.feature.properties.maxAltitude = maxAltitude;
-        }
-        this.updateSource();
+        this.updateZone(id, {
+            minAltitude,
+            maxAltitude
+        });
     }
     highlightZone(id, highlighted = true) {
-        const zone = this.zones[id];
-        if (!zone) return;
-        if (highlighted) {
-            this.updateZoneColor(id, 0xff0000);
-            this.updateZoneOpacity(id, 0.6);
-        } else {
+        if (highlighted) this.updateZone(id, {
+            color: '#ff0000'
+        });
+        else {
             const original = this.originalProperties[id];
-            if (original) {
-                this.updateZoneColor(id, original.color);
-                this.updateZoneOpacity(id, original.opacity);
-            }
+            if (original) this.updateZone(id, {
+                color: original.color
+            });
         }
     }
     getZone(id) {
@@ -16646,6 +16827,21 @@ 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 = {};
@@ -16798,10 +16994,18 @@ const elevatedLine = ElevatedLineManager;
 const attachElevatedLine = (mapless, name, options)=>mapless?.use(ElevatedLineManager, name, options);
 const getElevatedLine = (mapless, name)=>mapless?.get(ElevatedLineManager, name);
 const detachElevatedLine = (mapless, name)=>mapless?.unuse(ElevatedLineManager, name);
-class MapModelManager extends manager_Manager {
+class MapModelManager extends EmitManager {
     models = new Map();
     modelCounter = 0;
     _idHub;
+    globalClickHandler;
+    selectedModelId = null;
+    defaultSelectedColor = [
+        1,
+        0,
+        0
+    ];
+    themeColorModels = new Set();
     constructor(mapless, options){
         super(mapless, options, 'mapModel');
         this.map = mapless.map;
@@ -16809,11 +17013,76 @@ class MapModelManager extends manager_Manager {
             sources: {},
             layers: {}
         });
-        this.init();
+        this.onInitialized();
+        this.setupGlobalClickHandler();
     }
-    init() {
-        if (!this.map) console.warn('MapModelManager: Map not initialized');
+    setupGlobalClickHandler() {
+        if (!this.map) return;
+        this.globalClickHandler = (e)=>{
+            if (!this.map) return;
+            const modelLayerIds = Array.from(this.models.values()).map((m)=>m.layerId);
+            if (0 === modelLayerIds.length) return;
+            const features = this.map.queryRenderedFeatures(e.point, {
+                layers: modelLayerIds
+            });
+            if (!features || 0 === features.length) return;
+            const feature = features[0];
+            const layerId = feature.layer?.id;
+            const modelData = Array.from(this.models.values()).find((m)=>m.layerId === layerId);
+            if (modelData) {
+                const clickEvent = {
+                    id: modelData.id,
+                    url: modelData.url,
+                    lngLat: modelData.config.position || modelData.config.lngLat || [
+                        0,
+                        0
+                    ],
+                    altitude: modelData.config.altitude || 0,
+                    rotation: modelData.config.orientation,
+                    scale: modelData.config.scale,
+                    originalEvent: e
+                };
+                this.emit('modelClick', clickEvent);
+            }
+        };
+        this.map.on('click', this.globalClickHandler);
+    }
+    getDefaultThemeColor() {
+        const isDark = this.mapless?.isDark();
+        if (isDark) return [
+            68 / 255,
+            233 / 255,
+            234 / 255
+        ];
+        return null;
+    }
+    removeModelColor(id) {
+        const modelData = this.models.get(id);
+        if (!modelData) return;
+        if (!this.map) return;
+        if (this.map.getLayer(modelData.layerId)) {
+            this.map.setPaintProperty(modelData.layerId, 'model-color', void 0);
+            this.map.setPaintProperty(modelData.layerId, 'model-color-mix-intensity', void 0);
+        }
     }
+    updateAllModelsThemeColor() {
+        const themeColor = this.getDefaultThemeColor();
+        this.themeColorModels.forEach((modelId)=>{
+            const modelData = this.models.get(modelId);
+            if (!modelData) return void this.themeColorModels.delete(modelId);
+            if (modelId !== this.selectedModelId) if (themeColor) this.updateModelColor(modelId, themeColor, 0.8);
+            else this.removeModelColor(modelId);
+        });
+    }
+    onStyleChanged = (_tag)=>{
+        if (!this.map) return;
+        this.updateAllModelsThemeColor();
+        this.map.once('style.load', ()=>{
+            setTimeout(()=>{
+                this.updateAllModelsThemeColor();
+            }, 100);
+        });
+    };
     generateSourceId() {
         const id = `dzmap-model-source-${this.modelCounter}`;
         this._idHub.addSource(`model-${this.modelCounter}`, id);
@@ -16841,7 +17110,6 @@ class MapModelManager extends manager_Manager {
         };
         if (materialOverrides && Object.keys(materialOverrides).length > 0) sourceConfig.models[modelId].materialOverrideNames = Object.keys(materialOverrides);
         if (nodeOverrides && Object.keys(nodeOverrides).length > 0) sourceConfig.models[modelId].nodeOverrideNames = Object.keys(nodeOverrides);
-        console.log('Adding model source:', sourceConfig);
         this.map.addSource(sourceId, sourceConfig);
         const layerConfig = {
             id: layerId,
@@ -16949,7 +17217,6 @@ class MapModelManager extends manager_Manager {
             rotationMatch.push(defaultRotation);
             layerConfig.paint['model-rotation'] = rotationMatch;
         }
-        console.log('Adding model layer:', layerConfig);
         this.map.addLayer(layerConfig);
         return {
             sourceId,
@@ -16964,34 +17231,27 @@ class MapModelManager extends manager_Manager {
             0
         ], scale = 1, materialOverrides, nodeOverrides } = options;
         this.removeModel(id);
-        try {
-            const mainConfig = {
-                uri: url,
-                position: lngLat,
-                altitude,
-                orientation: rotation,
-                scale
-            };
-            const { sourceId, layerId } = this.addSingleModel(id, mainConfig, materialOverrides, nodeOverrides);
-            this.models.set(id, {
-                id,
-                sourceId,
-                layerId,
-                url,
-                config: mainConfig,
-                materialOverrides,
-                nodeOverrides
-            });
-            console.log(`MapModel added: ${id}`, {
-                url,
-                lngLat,
-                altitude,
-                rotation,
-                scale
-            });
-        } catch (error) {
-            console.error(`Failed to add model ${id}:`, error);
-            throw error;
+        const mainConfig = {
+            uri: url,
+            position: lngLat,
+            altitude,
+            orientation: rotation,
+            scale
+        };
+        const { sourceId, layerId } = this.addSingleModel(id, mainConfig, materialOverrides, nodeOverrides);
+        this.models.set(id, {
+            id,
+            sourceId,
+            layerId,
+            url,
+            config: mainConfig,
+            materialOverrides,
+            nodeOverrides
+        });
+        if (!materialOverrides || 0 === Object.keys(materialOverrides).length) {
+            this.themeColorModels.add(id);
+            const themeColor = this.getDefaultThemeColor();
+            if (themeColor) this.updateModelColor(id, themeColor, 0.8);
         }
     }
     addModels(models) {
@@ -17001,7 +17261,7 @@ class MapModelManager extends manager_Manager {
     }
     updateModelPosition(id, lngLat, altitude = 0) {
         const modelData = this.models.get(id);
-        if (!modelData) return void console.warn(`Model with id "${id}" not found`);
+        if (!modelData) return;
         if (!this.map) return;
         const source = this.map.getSource(modelData.sourceId);
         if (source?.models?.[id]) {
@@ -17013,25 +17273,18 @@ class MapModelManager extends manager_Manager {
             0,
             altitude
         ]);
-        console.log(`MapModel position updated: ${id}`, {
-            lngLat,
-            altitude
-        });
     }
     updateModelRotation(id, rotation) {
         const modelData = this.models.get(id);
-        if (!modelData) return void console.warn(`Model with id "${id}" not found`);
+        if (!modelData) return;
         if (!this.map) return;
         const source = this.map.getSource(modelData.sourceId);
         if (source?.models?.[id]) source.models[id].orientation = rotation;
         if (this.map.getLayer(modelData.layerId)) this.map.setPaintProperty(modelData.layerId, 'model-rotation', rotation);
-        console.log(`MapModel rotation updated: ${id}`, {
-            rotation
-        });
     }
     updateModelScale(id, scale) {
         const modelData = this.models.get(id);
-        if (!modelData) return void console.warn(`Model with id "${id}" not found`);
+        if (!modelData) return;
         if (!this.map) return;
         const source = this.map.getSource(modelData.sourceId);
         if (source?.models?.[id]) source.models[id].scale = scale;
@@ -17040,9 +17293,6 @@ class MapModelManager extends manager_Manager {
             scale,
             scale
         ]);
-        console.log(`MapModel scale updated: ${id}`, {
-            scale
-        });
     }
     removeModel(id) {
         const modelData = this.models.get(id);
@@ -17051,7 +17301,8 @@ class MapModelManager extends manager_Manager {
         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);
-        console.log(`MapModel removed: ${id}`);
+        this.themeColorModels.delete(id);
+        if (this.selectedModelId === id) this.selectedModelId = null;
     }
     clearModels() {
         const modelIds = Array.from(this.models.keys());
@@ -17059,7 +17310,6 @@ class MapModelManager extends manager_Manager {
             this.removeModel(id);
         });
         this.models.clear();
-        console.log('All MapModels cleared');
     }
     getModelCount() {
         return this.models.size;
@@ -17070,7 +17320,81 @@ class MapModelManager extends manager_Manager {
     getModelIds() {
         return Array.from(this.models.keys());
     }
+    updateModelColor(id, color, intensity = 1) {
+        const modelData = this.models.get(id);
+        if (!modelData) return;
+        if (!this.map) return;
+        if (this.map.getLayer(modelData.layerId)) {
+            this.map.setPaintProperty(modelData.layerId, 'model-color', `rgb(${255 * color[0]}, ${255 * color[1]}, ${255 * color[2]})`);
+            this.map.setPaintProperty(modelData.layerId, 'model-color-mix-intensity', intensity);
+        }
+    }
+    setDefaultSelectedColor(color) {
+        this.defaultSelectedColor = color;
+    }
+    getSelectedModelId() {
+        return this.selectedModelId;
+    }
+    selectModel(id, color) {
+        const previousId = this.selectedModelId;
+        const selectColor = color || this.defaultSelectedColor;
+        if (previousId && previousId !== id) if (this.themeColorModels.has(previousId)) {
+            const themeColor = this.getDefaultThemeColor();
+            if (themeColor) this.updateModelColor(previousId, themeColor, 0.8);
+            else this.removeModelColor(previousId);
+        } else this.removeModelColor(previousId);
+        this.selectedModelId = id;
+        if (id) this.updateModelColor(id, selectColor, 1);
+        this.emit('modelSelect', {
+            id,
+            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.clearModels();
     }
 }
@@ -17485,6 +17809,260 @@ 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();
+    rotationAngles = new Map();
+    autoRotateEnabled = new Map();
+    rotationSpeeds = new Map();
+    renderCount = 0;
+    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');
+            },
+            render: (_gl, matrix)=>{
+                if (!this.camera || !this.renderer || !this.scene) return;
+                this.renderCount++;
+                if (this.renderCount % 60 === 0) console.log('InstancedModelManager: Rendering', {
+                    frame: this.renderCount,
+                    instanceCount: this.instancedMeshes.size
+                });
+                this.updateAutoRotate();
+                this.camera.projectionMatrix = new Matrix4().fromArray(matrix);
+                _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);
+    }
+    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 = 100 * Math.random() + 50;
+            const rotation = Math.random() * Math.PI * 2;
+            const scaleVariation = 0.8 + 0.4 * Math.random();
+            instances.push({
+                lngLat: [
+                    config.center[0] + lngOffset,
+                    config.center[1] + latOffset
+                ],
+                altitude,
+                rotation,
+                scale: scaleVariation
+            });
+        }
+        return instances;
+    }
+    async load(id, config) {
+        this.initThree();
+        if (!this.scene || !this.map) throw new Error('Three.js scene not initialized');
+        this.remove(id);
+        const dracoLoader = new DRACOLoader();
+        dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
+        const loader = new GLTFLoader();
+        loader.setDRACOLoader(dracoLoader);
+        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;
+            let meshToUse = null;
+            gltfScene.traverse((object)=>{
+                if (object instanceof Mesh && !meshToUse) meshToUse = object;
+            });
+            if (!meshToUse) throw new Error('No mesh found in model');
+            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 meterInMercator = mapbox_gl.MercatorCoordinate.fromLngLat(config.center, 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 mercator = mapbox_gl.MercatorCoordinate.fromLngLat(instance.lngLat, 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.rotationAngles.set(id, angles);
+            this.autoRotateEnabled.set(id, config.autoRotate || false);
+            this.rotationSpeeds.set(id, config.rotationSpeed || 0.01);
+            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 mercator = mapbox_gl.MercatorCoordinate.fromLngLat(lngLat, 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;
+    }
+    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;
+        if (this.scene) 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.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;
+    }
+}
+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();
@@ -17632,11 +18210,6 @@ class Line2Manager extends manager_Manager {
             points: config.points,
             transform
         });
-        console.log(`Line2 added: ${id}`, {
-            pointsCount: config.points.length,
-            linewidth: lineConfig.linewidth,
-            color: lineConfig.color
-        });
     }
     addLines(lines) {
         lines.forEach((line)=>{
@@ -18168,6 +18741,19 @@ class ThreeManager extends manager_Manager {
         scale: 1
     };
     userScale = 1;
+    baseRotation = [
+        0,
+        0,
+        0
+    ];
+    currentOrientation = {
+        heading: 0,
+        pitch: 0,
+        roll: 0
+    };
+    boxHelper = null;
+    isSelected = false;
+    clickCleanup = null;
     constructor(mapless){
         super(mapless);
         this.map = mapless.map;
@@ -18193,34 +18779,40 @@ 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;
                         }
                     }
                 });
                 this.userScale = scale;
+                this.baseRotation = [
+                    ...rotation
+                ];
                 const modelAsMercator = mapbox_gl.MercatorCoordinate.fromLngLat(lngLat, altitude);
                 this.modelTransform = {
                     translateX: modelAsMercator.x,
                     translateY: modelAsMercator.y,
                     translateZ: modelAsMercator.z,
-                    rotateX: rotation[0],
-                    rotateY: rotation[1],
-                    rotateZ: rotation[2],
                     scale: modelAsMercator.meterInMercatorCoordinateUnits() * scale
                 };
+                this.currentOrientation = {
+                    heading: 0,
+                    pitch: 0,
+                    roll: 0
+                };
                 mapThree.addRenderableObject(this.modelId, this.model, this.modelTransform);
+                this._applyBaseRotation();
                 this.animations = gltf.animations || [];
                 if (this.animations.length > 0) {
                     this.mixer = new AnimationMixer(gltf.scene);
@@ -18253,6 +18845,21 @@ class ThreeManager extends manager_Manager {
         this.currentAction = action;
         console.log(`Playing animation: ${animationName}`);
     }
+    stopAnimation() {
+        if (!this.mixer || !this.currentAction) return void console.warn('No animation to stop');
+        this.currentAction.stop();
+        console.log('Animation stopped');
+    }
+    pauseAnimation() {
+        if (!this.currentAction) return void console.warn('No animation to pause');
+        this.currentAction.paused = true;
+        console.log('Animation paused');
+    }
+    resumeAnimation() {
+        if (!this.currentAction) return void console.warn('No animation to resume');
+        this.currentAction.paused = false;
+        console.log('Animation resumed');
+    }
     updatePosition(lngLat, altitude = 0) {
         const mapThree = this.getMapThree();
         if (!mapThree || !this.model) return;
@@ -18261,8 +18868,98 @@ class ThreeManager extends manager_Manager {
         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);
+    }
+    _applyBaseRotation() {
+        const mapThree = this.getMapThree();
+        if (!mapThree || !this.model) return;
+        const fullTransform = new Matrix4();
+        fullTransform.makeTranslation(this.modelTransform.translateX, this.modelTransform.translateY, this.modelTransform.translateZ);
+        const scaleVec = new Vector3(this.modelTransform.scale, -this.modelTransform.scale, this.modelTransform.scale);
+        fullTransform.scale(scaleVec);
+        const baseRotationMatrix = new Matrix4();
+        if (0 !== this.baseRotation[0]) baseRotationMatrix.multiply(new Matrix4().makeRotationX(this.baseRotation[0]));
+        if (0 !== this.baseRotation[1]) baseRotationMatrix.multiply(new Matrix4().makeRotationY(this.baseRotation[1]));
+        if (0 !== this.baseRotation[2]) baseRotationMatrix.multiply(new Matrix4().makeRotationZ(this.baseRotation[2]));
+        const headingRad = -this.currentOrientation.heading * Math.PI / 180;
+        const pitchRad = this.currentOrientation.pitch * Math.PI / 180;
+        const rollRad = this.currentOrientation.roll * Math.PI / 180;
+        const headingMatrix = new Matrix4().makeRotationZ(headingRad);
+        const pitchMatrix = new Matrix4().makeRotationX(pitchRad);
+        const rollMatrix = new Matrix4().makeRotationY(rollRad);
+        const orientationMatrix = new Matrix4();
+        orientationMatrix.multiply(rollMatrix).multiply(pitchMatrix).multiply(headingMatrix);
+        const fullRotation = new Matrix4();
+        fullRotation.multiply(orientationMatrix).multiply(baseRotationMatrix);
+        fullTransform.multiply(fullRotation);
+        this.modelTransform.matrix = fullTransform;
+        this.modelTransform.rotateX = void 0;
+        this.modelTransform.rotateY = void 0;
+        this.modelTransform.rotateZ = void 0;
         mapThree.updateRenderableObjectTransform(this.modelId, this.modelTransform);
     }
+    _buildFullTransformMatrix(heading, pitch, roll) {
+        const mapThree = this.getMapThree();
+        if (!mapThree || !this.model) return;
+        this.currentOrientation = {
+            heading,
+            pitch,
+            roll
+        };
+        const fullTransform = new Matrix4();
+        fullTransform.makeTranslation(this.modelTransform.translateX, this.modelTransform.translateY, this.modelTransform.translateZ);
+        const scaleVec = new Vector3(this.modelTransform.scale, -this.modelTransform.scale, this.modelTransform.scale);
+        fullTransform.scale(scaleVec);
+        const baseRotationMatrix = new Matrix4();
+        if (0 !== this.baseRotation[0]) baseRotationMatrix.multiply(new Matrix4().makeRotationX(this.baseRotation[0]));
+        if (0 !== this.baseRotation[1]) baseRotationMatrix.multiply(new Matrix4().makeRotationY(this.baseRotation[1]));
+        if (0 !== this.baseRotation[2]) baseRotationMatrix.multiply(new Matrix4().makeRotationZ(this.baseRotation[2]));
+        const headingRad = -heading * Math.PI / 180;
+        const pitchRad = pitch * Math.PI / 180;
+        const rollRad = roll * Math.PI / 180;
+        const headingMatrix = new Matrix4().makeRotationZ(headingRad);
+        const pitchMatrix = new Matrix4().makeRotationX(pitchRad);
+        const rollMatrix = new Matrix4().makeRotationY(rollRad);
+        const orientationMatrix = new Matrix4();
+        orientationMatrix.multiply(rollMatrix).multiply(pitchMatrix).multiply(headingMatrix);
+        const fullRotation = new Matrix4();
+        fullRotation.multiply(orientationMatrix).multiply(baseRotationMatrix);
+        fullTransform.multiply(fullRotation);
+        this.modelTransform.matrix = fullTransform;
+        this.modelTransform.rotateX = void 0;
+        this.modelTransform.rotateY = void 0;
+        this.modelTransform.rotateZ = void 0;
+        mapThree.updateRenderableObjectTransform(this.modelId, this.modelTransform);
+    }
+    setRotation(rotation) {
+        const mapThree = this.getMapThree();
+        if (!mapThree || !this.model) return;
+        this.modelTransform.rotateX = rotation[0];
+        this.modelTransform.rotateY = rotation[1];
+        this.modelTransform.rotateZ = rotation[2];
+        mapThree.updateRenderableObjectTransform(this.modelId, this.modelTransform);
+    }
+    setOrientation(heading, pitch, roll) {
+        this._buildFullTransformMatrix(heading, pitch, roll);
+    }
+    resetToBaseOrientation() {
+        this.currentOrientation = {
+            heading: 0,
+            pitch: 0,
+            roll: 0
+        };
+        this._applyBaseRotation();
+    }
+    getBaseRotation() {
+        return [
+            ...this.baseRotation
+        ];
+    }
+    getOrientation() {
+        return {
+            ...this.currentOrientation
+        };
+    }
     enable() {
         const mapThree = this.getMapThree();
         if (mapThree) mapThree.setRenderableObjectVisible(this.modelId, true);
@@ -18271,7 +18968,62 @@ class ThreeManager extends manager_Manager {
         const mapThree = this.getMapThree();
         if (mapThree) mapThree.setRenderableObjectVisible(this.modelId, false);
     }
+    select() {
+        if (!this.model || this.isSelected) return;
+        this.boxHelper = new BoxHelper(this.model, 0xffff00);
+        this.model.add(this.boxHelper);
+        this.isSelected = true;
+        this._updateBoxHelper();
+    }
+    deselect() {
+        if (!this.isSelected || !this.boxHelper) return;
+        if (this.model) this.model.remove(this.boxHelper);
+        this.boxHelper = null;
+        this.isSelected = false;
+    }
+    toggleSelect() {
+        if (this.isSelected) this.deselect();
+        else this.select();
+    }
+    setSelectionColor(color) {
+        if (this.boxHelper) {
+            const boxColor = 'string' == typeof color ? new Color(color) : color;
+            const material = this.boxHelper.material;
+            if (material) material.color.set(boxColor);
+        }
+    }
+    getSelected() {
+        return this.isSelected;
+    }
+    _updateBoxHelper() {
+        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;
@@ -19549,6 +20301,8 @@ class ClickStrategy extends PathCollectionStrategy {
     onStopCollection() {
         if (!this.map) return;
         this.map.getCanvas().style.cursor = '';
+        this.clearPoints();
+        this.updateLayers();
     }
     handleClick = (e)=>{
         if (!this.isActive) return void console.log('[ClickStrategy] Click ignored, not active');
@@ -19709,6 +20463,9 @@ class FreeStrategy extends PathCollectionStrategy {
         if (!this.map) return;
         this.map.getCanvas().style.cursor = '';
         this.isDragging = false;
+        this.clearPoints();
+        this.lastPoint = null;
+        this.updateLayer();
     }
     handleMouseDown = (e)=>{
         if (!this.isActive || !this.map) return;
@@ -19937,6 +20694,9 @@ class PathTracker {
                 type: pathType,
                 segments: [],
                 style: {
+                    color: '#1890ff',
+                    width: 2,
+                    opacity: 0.8,
                     ...this.options.defaultStyle
                 }
             };
@@ -19995,10 +20755,12 @@ class PathTracker {
             if (0 === this.currentPath.segments.length) {
                 this.currentPath = null;
                 this.isTracking = false;
+                this.updateResultLayer();
             }
         } else {
             this.currentPath = null;
             this.isTracking = false;
+            this.updateResultLayer();
         }
         this.callbacks.onCancel?.();
     }
@@ -20052,6 +20814,7 @@ class PathTracker {
     cancelTracking() {
         this.stopTracking();
         this.currentPath = null;
+        this.updateResultLayer();
     }
     clearPaths() {
         this.triggerOnClear();
@@ -20206,4 +20969,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 };