@mapless/core 1.0.23 → 1.0.25

package/dist/index.js

@@ -3,7 +3,7 @@ import mapbox_gl, { LngLat, MapMouseEvent, Marker, MercatorCoordinate, Point, Po
 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";
 import * as __rspack_external_three from "three";
 function buildTransformMatrix(transform) {
     if (transform.matrix) return transform.matrix.clone();
@@ -743,7 +743,7 @@ class Base {
         return this;
     };
     onManaRemove = (handler)=>{
-        this.emitter.off('managerRemove', handler);
+        this.emitter.on('managerRemove', handler);
         return this;
     };
     use(Manager, name, options) {
@@ -824,6 +824,25 @@ class MapboxRequestHandler {
         });
     }
 }
+class MapboxResizeFixer {
+    _map;
+    _interval = null;
+    constructor(map){
+        this._map = map;
+        this._map?.on('load', this.mapLoad);
+        this.startFix();
+    }
+    mapLoad() {
+        this._interval && clearInterval(this._interval);
+    }
+    startFix() {
+        this._interval = setInterval(()=>{
+            this._map?.resize();
+            const { clientWidth, clientHeight } = this._map?._canvas || {};
+            if (clientWidth && clientHeight) this._map?._resizeCanvas(clientWidth, clientHeight);
+        }, 20);
+    }
+}
 const COLOR_PRESETS = (()=>{
     const keys = Object.keys(maplessPreset.STATUS_COLORS);
     const ret = {};
@@ -11208,33 +11227,36 @@ const lightFog = {
         0
     ]
 };
-const lite = ()=>({
+const lite = (urlCount = 1, rasterOpacity)=>({
         version: 8,
         sprite: `${maplessPreset.mapboxAssets}/style/sprite`,
         glyphs: `${maplessPreset.mapboxAssets}/glyphs/mapbox/{fontstack}/{range}.pbf`,
         projection: {
             name: 'globe'
         },
-        sources: {
-            lite_world: {
-                type: 'raster',
-                tiles: [
-                    `${maplessPreset.geoServer}/{MAP_ID}/{z}/{x}/{y}`
-                ],
-                tileSize: 256,
-                volatile: true
-            }
-        },
-        layers: [
-            {
-                id: 'lite_world_layer',
+        sources: Object.fromEntries(Array.from({
+            length: urlCount
+        }, (_, i)=>[
+                `lite_world_${i + 1}`,
+                {
+                    type: 'raster',
+                    tiles: [
+                        `${maplessPreset.geoServer}/{MAP_ID}/{z}/{x}/{y}`
+                    ],
+                    tileSize: 256,
+                    volatile: true
+                }
+            ])),
+        layers: Array.from({
+            length: urlCount
+        }, (_, i)=>({
+                id: `lite_world_layer_${i + 1}`,
                 type: 'raster',
-                source: 'lite_world',
+                source: `lite_world_${i + 1}`,
                 paint: {
-                    'raster-opacity': 1
+                    'raster-opacity': rasterOpacity?.[i] ?? 1
                 }
-            }
-        ]
+            }))
     });
 const buildTileUrl = (url)=>{
     if (url.startsWith('http://') || url.startsWith('https://')) if (url.includes('/{z}/{x}/{y}')) return url;
@@ -11264,10 +11286,18 @@ const transformMapCenter = (center, fromCoord, toCoord)=>{
     });
 };
 const sourcesMap = ()=>maplessPreset.MAP_THEME_SOURCES?.reduce((prev, item)=>{
-        const copy = adjustMapConfigByCoord(lite(), item.coord);
-        copy.sources.lite_world.tiles = [
-            buildTileUrl(item.url)
+        const urls = Array.isArray(item.url) ? item.url : [
+            item.url
         ];
+        const opacities = null != item.rasterOpacity ? Array.isArray(item.rasterOpacity) ? item.rasterOpacity : [
+            item.rasterOpacity
+        ] : [];
+        const copy = adjustMapConfigByCoord(lite(urls.length, opacities), item.coord);
+        urls.forEach((url, i)=>{
+            copy.sources[`lite_world_${i + 1}`].tiles = [
+                buildTileUrl(url)
+            ];
+        });
         if (!maplessPreset.globe) copy.projection = {
             name: 'mercator'
         };
@@ -11327,6 +11357,10 @@ class Mapless extends Base {
     _mapMode = '2d';
     _mapStyle = null;
     _debug = false;
+    enableThree = true;
+    styleImageMissingHandler = (e)=>{
+        if (this.map) icons_Singleton.handleMissingImage(this.map, e.id);
+    };
     constructor(container, options){
         super();
         this.onInit = options.onMapInit;
@@ -11342,6 +11376,7 @@ class Mapless extends Base {
     initializeMap(container, options) {
         mapbox_gl.accessToken = options.accessToken || Mapless.accessToken;
         this._debug = options.debug || false;
+        this.enableThree = false !== options.enableThree;
         if (!this._debug) {
             mapbox_gl.config.REQUIRE_ACCESS_TOKEN = false;
             mapbox_gl.config.MAX_PARALLEL_IMAGE_REQUESTS = 256;
@@ -11366,13 +11401,12 @@ class Mapless extends Base {
             preserveDrawingBuffer: true,
             transformRequest: maplessPreset.transformRequest
         });
+        new MapboxResizeFixer(this.map);
         const reqHandler = new MapboxRequestHandler();
         reqHandler.setupMapboxInterceptor(this.map);
         this.map.on('zoom', this.mapZoomHandler);
         this.map.on('load', this.initCtrls);
-        this.map.on('styleimagemissing', (e)=>{
-            if (this.map) icons_Singleton.handleMissingImage(this.map, e.id);
-        });
+        this.map.on('styleimagemissing', this.styleImageMissingHandler);
         Promise.resolve().then(()=>{
             this.map && this.onInit?.(this.map);
         });
@@ -11395,7 +11429,7 @@ class Mapless extends Base {
             if (logo) logo.style.display = 'none';
             const attributions = this.map.getContainer().querySelector('.mapboxgl-ctrl-attrib');
             if (attributions) attributions.style.display = 'none';
-            this.initMapThree();
+            if (this.enableThree) this.initMapThree();
         }
     };
     mapZoomHandler = ()=>{
@@ -11568,18 +11602,19 @@ class Mapless extends Base {
         if (!this.map) return;
         this.map.flyTo({
             center: this.coordTrans('dataToTile', options.center),
-            zoom: options.zoom || this.map.getZoom(),
-            bearing: options.bearing || 0,
-            pitch: options.pitch || 0,
-            speed: options.speed || 1.2,
-            curve: options.curve || 1.42,
-            duration: options.duration || 2000,
-            essential: options.essential || true
+            zoom: options.zoom ?? this.map.getZoom(),
+            bearing: options.bearing ?? 0,
+            pitch: options.pitch ?? 0,
+            speed: options.speed ?? 1.2,
+            curve: options.curve ?? 1.42,
+            duration: options.duration ?? 2000,
+            essential: options.essential ?? true
         });
     }
     toggleLayer(layerId, visible) {
         if (!this.map?.getLayer(layerId)) return;
-        const isVisible = void 0 !== visible ? visible : this.map?.getLayoutProperty(layerId, 'visibility') !== 'none';
+        const currentVisible = this.map?.getLayoutProperty(layerId, 'visibility') !== 'none';
+        const isVisible = visible ?? !currentVisible;
         this.map?.setLayoutProperty(layerId, 'visibility', isVisible ? 'visible' : 'none');
     }
     interactionLayers(interaction) {
@@ -11628,7 +11663,12 @@ class Mapless extends Base {
     }
     destroy() {
         if (!this.map) return;
+        this.map?.off('zoom', this.mapZoomHandler);
+        this.map?.off('load', this.initCtrls);
+        this.map?.off('styleimagemissing', this.styleImageMissingHandler);
         this.clear();
+        this.mapThree?.dispose();
+        this.mapThree = null;
         this.map.remove();
         this.map = null;
     }
@@ -12424,7 +12464,7 @@ class PositionTool extends ShapeTool {
     }
     clearLayers = ()=>{
         if (this.draw?.map?.getLayer(this.pointMarkersLayer)) this.draw?.map?.removeLayer(this.pointMarkersLayer);
-        if (this.draw?.map?.getLayer(this.pointMarkersSource)) this.draw?.map?.removeLayer(this.pointMarkersSource);
+        if (this.draw?.map?.getSource(this.pointMarkersSource)) this.draw?.map?.removeSource(this.pointMarkersSource);
     };
 }
 const blue = '#3bb2d0';
@@ -12696,6 +12736,10 @@ class Draw {
     areaTool;
     angleTool;
     positionTool;
+    modeChangeHandler = (e)=>{
+        const em = e;
+        if (em?.mode === 'simple_select') this.onDrawOver?.();
+    };
     constructor(mapless){
         this.mapless = mapless;
         this.map = this.mapless.map;
@@ -12709,10 +12753,7 @@ class Draw {
             this.map.addControl(this.drawControl);
             this.map.on('draw.create', this.createMeasure);
             this.map.on('draw.update', this.updateMeasure);
-            this.map.on('draw.modechange', (e)=>{
-                const em = e;
-                if (em?.mode === 'simple_select') this.onDrawOver?.();
-            });
+            this.map.on('draw.modechange', this.modeChangeHandler);
             this.map.on('draw.delete', this.deleteMeasure);
             this.pointTool = new PointTool(this);
             this.lineTool = new LineTool(this);
@@ -12824,6 +12865,10 @@ class Draw {
     }
     destroy() {
         try {
+            this.map?.off('draw.create', this.createMeasure);
+            this.map?.off('draw.update', this.updateMeasure);
+            this.map?.off('draw.modechange', this.modeChangeHandler);
+            this.map?.off('draw.delete', this.deleteMeasure);
             this.drawControl && this.map?.removeControl(this.drawControl);
             this.drawControl = void 0;
         } catch (_error) {}
@@ -12868,6 +12913,7 @@ class MapboxLanguage {
     isTokenField = /^\{name/;
     map;
     container;
+    initialStyleUpdateHandler = ()=>this._initialStyleUpdate();
     _current = '';
     get current() {
         return this._current;
@@ -12954,12 +13000,12 @@ class MapboxLanguage {
     }
     onAdd = (map)=>{
         this.map = map;
-        this.map.on('style.load', this._initialStyleUpdate.bind(this));
+        this.map.on('style.load', this.initialStyleUpdateHandler);
         this.container = document.createElement('div');
         return this.container;
     };
     onRemove = (_map)=>{
-        this.map?.off('style.load', this._initialStyleUpdate);
+        this.map?.off('style.load', this.initialStyleUpdateHandler);
         this.map = void 0;
     };
     getDefaultPosition;
@@ -13107,6 +13153,7 @@ class IdHub {
 const core_IdHub = IdHub;
 class FixedRectangleLayerManager extends EmitManager {
     rectangles = [];
+    redrawFrame = null;
     constructor(mapless, options){
         super(mapless, options, 'fixed-rectangle');
         this.onInitialized();
@@ -13154,6 +13201,13 @@ class FixedRectangleLayerManager extends EmitManager {
         this.map.on('rotate', this.mapMoveHandler);
         this.map.on('zoom', this.mapZoomHandler);
     }
+    scheduleDrawRectangles() {
+        if (null !== this.redrawFrame) return;
+        this.redrawFrame = requestAnimationFrame(()=>{
+            this.redrawFrame = null;
+            this.drawRectangles();
+        });
+    }
     setData(data) {
         this.rectangles = data;
         this.drawRectangles();
@@ -13261,10 +13315,10 @@ class FixedRectangleLayerManager extends EmitManager {
         this.mapless?.setData(this.idHub?.rectangleSourceId, data);
     }
     mapZoomHandler = ()=>{
-        if (this.rectangles.length > 0) this.drawRectangles();
+        if (this.rectangles.length > 0) this.scheduleDrawRectangles();
     };
     mapMoveHandler = ()=>{
-        if (this.rectangles.length > 0) this.drawRectangles();
+        if (this.rectangles.length > 0) this.scheduleDrawRectangles();
     };
     destroy = ()=>{
         if (this.map) {
@@ -13273,6 +13327,10 @@ class FixedRectangleLayerManager extends EmitManager {
             this.map.off('rotate', this.mapMoveHandler);
             this.map.off('zoom', this.mapZoomHandler);
         }
+        if (null !== this.redrawFrame) {
+            cancelAnimationFrame(this.redrawFrame);
+            this.redrawFrame = null;
+        }
         super.destroy();
         this.rectangles = [];
     };
@@ -13312,6 +13370,7 @@ class RectangleLayerManager extends EmitManager {
     program = null;
     positionBuffer = null;
     colorBuffer = null;
+    clickHandler = null;
     vertexShaderSource = `
     attribute vec2 a_position;
     uniform vec2 u_resolution;
@@ -13533,6 +13592,10 @@ class RectangleLayerManager extends EmitManager {
         this.map?.triggerRepaint();
     }
     destroy = ()=>{
+        if (this.map && this.clickHandler) {
+            this.map.off('click', this.clickHandler);
+            this.clickHandler = null;
+        }
         if (this.map && this.customLayer) this.map.removeLayer(this.customLayer.id);
         this.customLayer = null;
         this.rectangles = [];
@@ -13552,8 +13615,8 @@ class RectangleLayerManager extends EmitManager {
         });
     }
     setupClickHandler() {
-        if (!this.map) return;
-        this.map.on('click', (e)=>{
+        if (!this.map || this.clickHandler) return;
+        this.clickHandler = (e)=>{
             if (!this.map || !e.point) return;
             for (const rect of this.rectangles){
                 const centerPoint = this.map.project(new mapbox_gl.LngLat(rect.lng, rect.lat));
@@ -13574,7 +13637,8 @@ class RectangleLayerManager extends EmitManager {
                     break;
                 }
             }
-        });
+        };
+        this.map.on('click', this.clickHandler);
     }
 }
 const RectangleLayer = RectangleLayerManager;
@@ -18193,6 +18257,7 @@ class MapModelManager extends EmitManager {
         this.themeColorModels.clear();
         this.modelOptions.clear();
         this.clearModels();
+        super.destroy();
     }
 }
 const mapModel = MapModelManager;
@@ -18617,6 +18682,19 @@ class Airspace3Manager extends manager_Manager {
             if (zone.edgeMesh) mapThree.setRenderableObjectVisible(`${zone.id}-edge`, visible);
         });
     }
+    setFill2DVisible(visible) {
+        if (!this.map) return;
+        const visibility = visible ? 'visible' : 'none';
+        if (this.map.getLayer(this.fill2DLayerId)) this.map.setLayoutProperty(this.fill2DLayerId, 'visibility', visibility);
+        if (this.map.getLayer(this.lineLayerId)) this.map.setLayoutProperty(this.lineLayerId, 'visibility', visibility);
+    }
+    setAllEdgesVisible(visible) {
+        const mapThree = this.getMapThree();
+        if (!mapThree) return;
+        this.zones.forEach((zone)=>{
+            if (zone.edgeMesh) mapThree.setRenderableObjectVisible(`${zone.id}-edge`, visible);
+        });
+    }
 }
 const airspace3 = Airspace3Manager;
 const attachAirspace3 = (mapless, name, options)=>mapless?.use(Airspace3Manager, name, options);
@@ -18886,6 +18964,7 @@ class BasicThreeObjectManager extends manager_Manager {
     }
     destroy() {
         this.clearObjects();
+        super.destroy();
     }
 }
 const basicObject = BasicThreeObjectManager;
@@ -19088,26 +19167,30 @@ class Curve3DManager extends manager_Manager {
     }
     destroy() {
         this.clearCurves();
+        super.destroy();
     }
 }
 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);
+const DEFAULT_MODEL_TYPE = '__default__';
 class InstancedModelManager extends manager_Manager {
     scene = null;
     camera = null;
     renderer = null;
     customLayerId;
     isInitialized = false;
-    instancedMeshes = new Map();
+    instancedModels = new Map();
     instanceDataMap = new Map();
     rotationAngles = new Map();
     autoRotateEnabled = new Map();
     rotationSpeeds = new Map();
     originalConfigs = new Map();
     clickCallback = null;
+    canvasClickHandler = null;
     lastProjectionMatrix = null;
+    zoomCleanup = null;
     constructor(mapless){
         super(mapless);
         this.map = mapless.map;
@@ -19127,6 +19210,14 @@ class InstancedModelManager extends manager_Manager {
         });
         this.renderer.autoClear = false;
         this.renderer.setPixelRatio(window.devicePixelRatio);
+        const ambientLight = new __rspack_external_three.AmbientLight(0xffffff, 0.8);
+        this.scene.add(ambientLight);
+        const directionalLight1 = new __rspack_external_three.DirectionalLight(0xffffff, 1.5);
+        directionalLight1.position.set(0, -70, 100);
+        this.scene.add(directionalLight1);
+        const directionalLight2 = new __rspack_external_three.DirectionalLight(0xffffff, 1.5);
+        directionalLight2.position.set(0, 70, 100);
+        this.scene.add(directionalLight2);
         this.setupCustomLayer();
         this.isInitialized = true;
         console.log('InstancedModelManager: Initialized');
@@ -19143,25 +19234,40 @@ class InstancedModelManager extends manager_Manager {
             },
             render: (_gl, matrix)=>{
                 if (!this.camera || !this.renderer || !this.scene) return;
-                if (0 === this.instancedMeshes.size) return;
-                this.updateAutoRotate();
+                if (0 === this.instancedModels.size) return;
                 const projMatrix = new __rspack_external_three.Matrix4().fromArray(matrix);
-                this.camera.projectionMatrix = projMatrix;
-                this.lastProjectionMatrix = projMatrix.clone();
-                this.instancedMeshes.forEach((mesh)=>{
-                    mesh.visible = true;
+                this.updateAutoRotate();
+                const camera = this.camera;
+                const renderer = this.renderer;
+                const scene = this.scene;
+                const originalVisibilities = new Map();
+                this.instancedModels.forEach((model)=>{
+                    originalVisibilities.set(model.group, model.group.visible);
+                    model.group.visible = false;
+                });
+                renderer.resetState();
+                this.instancedModels.forEach((model)=>{
+                    if (!model.visible) return;
+                    const transformMatrix = this.buildMapboxTransform(model);
+                    camera.projectionMatrix = projMatrix.clone().multiply(transformMatrix);
+                    this.lastProjectionMatrix = camera.projectionMatrix.clone();
+                    model.group.visible = true;
+                    renderer.render(scene, camera);
+                    model.group.visible = false;
+                });
+                this.instancedModels.forEach((model)=>{
+                    const visible = originalVisibilities.get(model.group);
+                    if (void 0 !== visible) model.group.visible = visible;
                 });
-                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;
+        if (!this.map || this.canvasClickHandler) return;
         const canvas = this.map.getCanvas();
-        const handleClick = (e)=>{
+        this.canvasClickHandler = (e)=>{
             if (!this.camera || !this.scene || !this.lastProjectionMatrix) return;
             const rect = canvas.getBoundingClientRect();
             const ndcX = (e.clientX - rect.left) / rect.width * 2 - 1;
@@ -19171,21 +19277,24 @@ class InstancedModelManager extends manager_Manager {
             nearPoint.divideScalar(nearPoint.w);
             const farPoint = new __rspack_external_three.Vector4(ndcX, ndcY, 1, 1).applyMatrix4(inverseProj);
             farPoint.divideScalar(farPoint.w);
-            const origin = new __rspack_external_three.Vector3(0, 0, 0);
+            const origin = new __rspack_external_three.Vector3(nearPoint.x, nearPoint.y, nearPoint.z);
             const direction = new __rspack_external_three.Vector3(farPoint.x - nearPoint.x, farPoint.y - nearPoint.y, farPoint.z - nearPoint.z).normalize();
             const raycaster = new __rspack_external_three.Raycaster(origin, direction);
             let closestHit = null;
             let minDistance = 1 / 0;
-            for (const [groupId, instancedMesh] of this.instancedMeshes){
+            for (const [groupId, model] of this.instancedModels)for (const modelMesh of model.meshes){
+                const instancedMesh = modelMesh.mesh;
                 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) {
+                        const instanceIndex = modelMesh.instanceIndexes[instanceId];
+                        if (void 0 === instanceIndex) continue;
                         minDistance = intersection.distance;
                         closestHit = {
                             groupId,
-                            instanceIndex: instanceId,
+                            instanceIndex,
                             point: intersection.point,
                             distance: intersection.distance
                         };
@@ -19203,7 +19312,7 @@ class InstancedModelManager extends manager_Manager {
                 });
             }
         };
-        canvas.addEventListener('click', handleClick);
+        canvas.addEventListener('click', this.canvasClickHandler);
     }
     onClick(callback) {
         this.clickCallback = callback;
@@ -19213,121 +19322,226 @@ class InstancedModelManager extends manager_Manager {
             if (!enabled) return;
             const angles = this.rotationAngles.get(id);
             const speed = this.rotationSpeeds.get(id) || 0.01;
-            const instancedMesh = this.instancedMeshes.get(id);
-            if (!angles || !instancedMesh) return;
+            const model = this.instancedModels.get(id);
+            const instances = this.instanceDataMap.get(id);
+            if (!angles || !model || !instances) return;
             const dummy = new __rspack_external_three.Object3D();
-            for(let i = 0; i < instancedMesh.count; i++){
-                instancedMesh.getMatrixAt(i, dummy.matrix);
-                const pos = new __rspack_external_three.Vector3();
-                const quat = new __rspack_external_three.Quaternion();
-                const scl = new __rspack_external_three.Vector3();
-                dummy.matrix.decompose(pos, quat, scl);
-                angles[i] += speed;
-                quat.setFromAxisAngle(new __rspack_external_three.Vector3(0, 0, 1), angles[i]);
-                dummy.matrix.compose(pos, quat, scl);
-                instancedMesh.setMatrixAt(i, dummy.matrix);
+            const instanceMatrix = new __rspack_external_three.Matrix4();
+            for(let i = 0; i < instances.length; i++)angles[i] += speed;
+            for (const modelMesh of model.meshes){
+                modelMesh.instanceIndexes.forEach((instanceIndex, localIndex)=>{
+                    const instance = instances[instanceIndex];
+                    if (!instance) return;
+                    const rotation = [
+                        instance.rotation[0],
+                        instance.rotation[1],
+                        instance.rotation[2] + angles[instanceIndex]
+                    ];
+                    this._setInstanceMatrixWithZoom(model, modelMesh, localIndex, instance, rotation, dummy, instanceMatrix, model.scaleFollowZoom ? 2 ** (model.referenceZoom - (this.map?.getZoom() ?? 16)) : 1);
+                });
+                modelMesh.mesh.instanceMatrix.needsUpdate = true;
+                if (modelMesh.mesh.instanceColor) modelMesh.mesh.instanceColor.needsUpdate = true;
             }
-            instancedMesh.instanceMatrix.needsUpdate = true;
         });
     }
-    generateInstances(config) {
+    buildMapboxTransform(model) {
+        return new __rspack_external_three.Matrix4().makeTranslation(model.centerMercator.x, model.centerMercator.y, model.centerMercator.z).scale(new __rspack_external_three.Vector3(model.meterInMercator, -model.meterInMercator, model.meterInMercator));
+    }
+    toTileLngLat(lngLat) {
+        return this.mapless?.coordTrans('dataToTile', lngLat) ?? lngLat;
+    }
+    resolveConfig(config) {
+        const firstInstance = config.instances?.[0];
+        const center = config.center || firstInstance?.lngLat;
+        if (!center) throw new Error('InstancedModelConfig requires center or instances[0].lngLat');
+        return {
+            count: config.count ?? config.instances?.length ?? 0,
+            center,
+            spread: config.spread ?? 0
+        };
+    }
+    generateInstances(config, resolved) {
         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 = 200 + 100 * Math.random();
-            const rotation = Math.random() * Math.PI * 2;
-            const scaleVariation = 0.8 + 0.4 * Math.random();
+        for(let i = 0; i < resolved.count; i++){
+            const lngOffset = (Math.random() - 0.5) * resolved.spread * 2;
+            const latOffset = (Math.random() - 0.5) * resolved.spread * 2;
+            const externalInstance = config.instances?.[i];
             instances.push({
-                lngLat: [
-                    config.center[0] + lngOffset,
-                    config.center[1] + latOffset
+                lngLat: externalInstance?.lngLat || [
+                    resolved.center[0] + lngOffset,
+                    resolved.center[1] + latOffset
                 ],
-                altitude,
-                rotation,
-                scale: scaleVariation
+                type: externalInstance?.type ?? DEFAULT_MODEL_TYPE,
+                altitude: externalInstance?.altitude ?? 80,
+                rotation: externalInstance?.rotation || [
+                    0,
+                    0,
+                    0
+                ],
+                scale: externalInstance?.scale ?? 1,
+                color: externalInstance?.color
             });
         }
         return instances;
     }
     prepareGeometryForInstancing(geometry) {
-        const clonedGeometry = geometry.clone();
-        if (!(clonedGeometry instanceof __rspack_external_three.BufferGeometry)) {
-            console.error('几何体不是 BufferGeometry 类型');
-            return clonedGeometry;
-        }
-        if (!clonedGeometry.getAttribute('normal')) clonedGeometry.computeVertexNormals();
-        return clonedGeometry;
+        return geometry.clone();
     }
-    prepareMaterialForInstancing(originalMaterial) {
+    prepareMaterialForInstancing(originalMaterial, standardMaterialColor) {
+        if (void 0 !== standardMaterialColor) return new __rspack_external_three.MeshStandardMaterial({
+            color: new __rspack_external_three.Color(standardMaterialColor),
+            roughness: 0.6,
+            metalness: 0,
+            vertexColors: true
+        });
         if (Array.isArray(originalMaterial)) return originalMaterial.map((mat)=>this.cloneMaterialForInstancing(mat));
         return this.cloneMaterialForInstancing(originalMaterial);
     }
     cloneMaterialForInstancing(material) {
         const cloned = material.clone();
-        if (cloned instanceof __rspack_external_three.MeshStandardMaterial || cloned instanceof __rspack_external_three.MeshPhysicalMaterial || cloned instanceof __rspack_external_three.MeshPhongMaterial) {
-            cloned.toneMapped = false;
-            cloned.side = __rspack_external_three.DoubleSide;
-        }
+        const supportedTypes = [
+            __rspack_external_three.MeshStandardMaterial,
+            __rspack_external_three.MeshPhysicalMaterial,
+            __rspack_external_three.MeshPhongMaterial,
+            __rspack_external_three.MeshBasicMaterial,
+            __rspack_external_three.MeshLambertMaterial,
+            __rspack_external_three.MeshToonMaterial
+        ];
+        const isSupported = supportedTypes.some((Type)=>cloned instanceof Type);
+        if (isSupported) {
+            const mat = cloned;
+            mat.vertexColors = true;
+            if (mat.map) {
+                mat.emissive = new __rspack_external_three.Color(0xffffff);
+                mat.emissiveIntensity = 0.4;
+                mat.emissiveMap = mat.map;
+            }
+            cloned.needsUpdate = true;
+        } else console.warn(`InstancedModel: Unsupported material type "${cloned.type}" for vertex colors`);
         return cloned;
     }
+    resolveModelTypes(config) {
+        if (config.modelTypes) return config.modelTypes;
+        if (config.url) return {
+            [DEFAULT_MODEL_TYPE]: {
+                url: config.url,
+                scale: config.scale,
+                baseRotation: config.baseRotation,
+                standardMaterialColor: config.standardMaterialColor
+            }
+        };
+        throw new Error('InstancedModelConfig requires url or modelTypes');
+    }
+    groupInstanceIndexesByType(instances) {
+        const grouped = new Map();
+        instances.forEach((instance, index)=>{
+            const indexes = grouped.get(instance.type) || [];
+            indexes.push(index);
+            grouped.set(instance.type, indexes);
+        });
+        return grouped;
+    }
     async load(id, config) {
         this.initThree();
-        if (!this.scene || !this.map) throw new Error('Three.js scene not initialized');
+        const scene = this.scene;
+        if (!scene || !this.map) throw new Error('Three.js scene not initialized');
         this.remove(id);
         const loader = new GLTFLoader();
+        const dracoLoader = new DRACOLoader();
+        dracoLoader.setDecoderPath('/draco/gltf/');
+        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);
-            });
-            console.log('InstancedModel: Model loaded successfully');
-            let mesh;
-            gltf.scene.traverse((object)=>{
-                if (object instanceof __rspack_external_three.Mesh && !mesh) mesh = object;
-            });
-            if (!mesh) throw new Error('No mesh found in model');
-            const geometry = this.prepareGeometryForInstancing(mesh.geometry);
-            const material = this.prepareMaterialForInstancing(mesh.material);
-            const instances = this.generateInstances(config);
-            const angles = new Float32Array(config.count);
-            const centerMercator = mapbox_gl.MercatorCoordinate.fromLngLat(config.center, 0);
+            const resolved = this.resolveConfig(config);
+            const instances = this.generateInstances(config, resolved);
+            const modelTypes = this.resolveModelTypes(config);
+            const groupedInstanceIndexes = this.groupInstanceIndexesByType(instances);
+            const angles = new Float32Array(resolved.count);
+            const centerMercator = mapbox_gl.MercatorCoordinate.fromLngLat(this.toTileLngLat(resolved.center), 0);
             const meterInMercator = centerMercator.meterInMercatorCoordinateUnits();
-            const instancedMesh = new __rspack_external_three.InstancedMesh(geometry, material, config.count);
-            instancedMesh.instanceMatrix.setUsage(__rspack_external_three.DynamicDrawUsage);
-            instancedMesh.frustumCulled = false;
-            instancedMesh.position.set(centerMercator.x, centerMercator.y, centerMercator.z);
-            instancedMesh.updateMatrix();
+            const group = new __rspack_external_three.Group();
+            const instancedModelMeshes = [];
+            const typeScales = new Map();
+            const baseRotationMatrices = new Map();
+            const modelEntry = {
+                group,
+                meshes: instancedModelMeshes,
+                centerMercator,
+                meterInMercator,
+                typeScales,
+                baseRotationMatrices,
+                visible: true,
+                scaleFollowZoom: false,
+                referenceZoom: 16
+            };
             const dummy = new __rspack_external_three.Object3D();
-            for(let i = 0; i < config.count; i++){
-                const instance = instances[i];
-                const mercator = mapbox_gl.MercatorCoordinate.fromLngLat(instance.lngLat, instance.altitude);
-                const dx = mercator.x - centerMercator.x;
-                const dy = mercator.y - centerMercator.y;
-                const dz = mercator.z - centerMercator.z;
-                dummy.position.set(dx, dy, dz);
-                const s = meterInMercator * config.scale * instance.scale;
-                dummy.scale.set(s, -s, s);
-                dummy.updateMatrix();
-                instancedMesh.setMatrixAt(i, dummy.matrix);
-                angles[i] = instance.rotation;
-            }
-            instancedMesh.instanceMatrix.needsUpdate = true;
-            if (!instancedMesh.geometry.boundingSphere) instancedMesh.geometry.computeBoundingSphere();
-            instancedMesh.computeBoundingSphere();
-            this.scene.add(instancedMesh);
-            console.log(`InstancedModel "${id}" loaded: ${config.count} instances`, {
+            const instanceMatrix = new __rspack_external_three.Matrix4();
+            for (const [type, instanceIndexes] of groupedInstanceIndexes){
+                const typeConfig = modelTypes[type];
+                if (!typeConfig) throw new Error(`Missing modelTypes config for instance type "${type}"`);
+                console.log('InstancedModel: Loading model', type, typeConfig.url);
+                const gltf = await new Promise((resolve, reject)=>{
+                    loader.load(typeConfig.url, resolve, void 0, reject);
+                });
+                if (this.scene !== scene || !this.isInitialized) return;
+                console.log('InstancedModel: Model loaded successfully', type);
+                const sourceMeshes = [];
+                gltf.scene.updateMatrixWorld(true);
+                gltf.scene.traverse((object)=>{
+                    if (object instanceof __rspack_external_three.Mesh) {
+                        const mat = object.material;
+                        const matInfo = Array.isArray(mat) ? mat.map((m)=>m.type) : mat.type;
+                        console.log(`  Mesh found: ${object.name || 'unnamed'}, material:`, matInfo);
+                        sourceMeshes.push(object);
+                    }
+                });
+                if (0 === sourceMeshes.length) throw new Error(`No mesh found in model type "${type}"`);
+                typeScales.set(type, typeConfig.scale ?? config.scale);
+                baseRotationMatrices.set(type, new __rspack_external_three.Matrix4().makeRotationFromEuler(new __rspack_external_three.Euler(...typeConfig.baseRotation || config.baseRotation || [
+                    0,
+                    0,
+                    0
+                ], 'XYZ')));
+                for (const sourceMesh of sourceMeshes){
+                    sourceMesh.updateWorldMatrix(true, false);
+                    const geometry = this.prepareGeometryForInstancing(sourceMesh.geometry);
+                    const material = this.prepareMaterialForInstancing(sourceMesh.material, typeConfig.standardMaterialColor ?? config.standardMaterialColor);
+                    const instancedMesh = new __rspack_external_three.InstancedMesh(geometry, material, instanceIndexes.length);
+                    instancedMesh.instanceMatrix.setUsage(__rspack_external_three.DynamicDrawUsage);
+                    instancedMesh.frustumCulled = false;
+                    const modelMesh = {
+                        mesh: instancedMesh,
+                        baseMatrix: sourceMesh.matrixWorld.clone(),
+                        instanceIndexes
+                    };
+                    instanceIndexes.forEach((instanceIndex, localIndex)=>{
+                        const instance = instances[instanceIndex];
+                        this._setInstanceMatrixWithZoom(modelEntry, modelMesh, localIndex, instance, instance.rotation, dummy, instanceMatrix);
+                        angles[instanceIndex] = 0;
+                    });
+                    instancedMesh.instanceMatrix.needsUpdate = true;
+                    if (instancedMesh.instanceColor) instancedMesh.instanceColor.needsUpdate = true;
+                    if (!instancedMesh.geometry.boundingSphere) instancedMesh.geometry.computeBoundingSphere();
+                    instancedMesh.computeBoundingSphere();
+                    group.add(instancedMesh);
+                    instancedModelMeshes.push(modelMesh);
+                }
+            }
+            if (this.scene !== scene || !this.isInitialized) return;
+            scene.add(group);
+            console.log(`InstancedModel "${id}" loaded: ${resolved.count} instances`, {
                 center: {
                     x: centerMercator.x,
                     y: centerMercator.y,
                     z: centerMercator.z
                 },
+                meshCount: instancedModelMeshes.length,
+                typeCount: groupedInstanceIndexes.size,
                 meterInMercator,
                 firstInstanceOffset: {
-                    x: instances[0] ? mapbox_gl.MercatorCoordinate.fromLngLat(instances[0].lngLat, instances[0].altitude).x - centerMercator.x : 0
+                    x: instances[0] ? mapbox_gl.MercatorCoordinate.fromLngLat(this.toTileLngLat(instances[0].lngLat), instances[0].altitude).x - centerMercator.x : 0
                 }
             });
-            this.instancedMeshes.set(id, instancedMesh);
+            this.instancedModels.set(id, modelEntry);
             this.instanceDataMap.set(id, instances);
             this.rotationAngles.set(id, angles);
             this.autoRotateEnabled.set(id, config.autoRotate || false);
@@ -19336,6 +19550,8 @@ class InstancedModelManager extends manager_Manager {
         } catch (error) {
             console.error(`Failed to load instanced model "${id}":`, error);
             throw error;
+        } finally{
+            dracoLoader.dispose();
         }
     }
     enableAutoRotate(id, speed = 0.01) {
@@ -19345,74 +19561,230 @@ class InstancedModelManager extends manager_Manager {
     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);
+    setScaleFollowZoom(id, enabled, referenceZoom = 16) {
+        const model = this.instancedModels.get(id);
+        if (!model) return;
+        model.scaleFollowZoom = enabled;
+        model.referenceZoom = referenceZoom;
+        this._updateZoomListener();
+        if (enabled) this._updateModelScaleWithZoom(id);
+        else this._rebuildAllInstanceMatrices(id);
+    }
+    _updateZoomListener() {
+        const hasScaleFollowZoom = Array.from(this.instancedModels.values()).some((m)=>m.scaleFollowZoom);
+        if (hasScaleFollowZoom && !this.zoomCleanup) {
+            const handleZoom = ()=>{
+                this.instancedModels.forEach((model, id)=>{
+                    if (model.scaleFollowZoom) this._updateModelScaleWithZoom(id);
+                });
+            };
+            this.map?.on('zoom', handleZoom);
+            this.zoomCleanup = ()=>{
+                this.map?.off('zoom', handleZoom);
+            };
+        } else if (!hasScaleFollowZoom && this.zoomCleanup) {
+            this.zoomCleanup();
+            this.zoomCleanup = null;
+        }
+    }
+    _updateModelScaleWithZoom(id) {
+        const model = this.instancedModels.get(id);
+        if (!model || !this.map) return;
+        const currentZoom = this.map.getZoom();
+        const zoomScaleFactor = 2 ** (model.referenceZoom - currentZoom);
+        this._rebuildAllInstanceMatrices(id, zoomScaleFactor);
+    }
+    _rebuildAllInstanceMatrices(id, zoomScaleFactor = 1) {
+        const model = this.instancedModels.get(id);
+        const instances = this.instanceDataMap.get(id);
+        if (!model || !instances) return;
         const dummy = new __rspack_external_three.Object3D();
-        const pos = new __rspack_external_three.Vector3();
-        const quat = new __rspack_external_three.Quaternion();
-        const scl = new __rspack_external_three.Vector3();
-        instancedMesh.getMatrixAt(index, dummy.matrix);
-        dummy.matrix.decompose(pos, quat, scl);
-        dummy.position.set(mercator.x, mercator.y, mercator.z);
+        const instanceMatrix = new __rspack_external_three.Matrix4();
+        for (const modelMesh of model.meshes){
+            modelMesh.instanceIndexes.forEach((instanceIndex, localIndex)=>{
+                const instance = instances[instanceIndex];
+                if (!instance) return;
+                const rotationAngle = this.rotationAngles.get(id)?.[instanceIndex] ?? 0;
+                const rotation = [
+                    instance.rotation[0],
+                    instance.rotation[1],
+                    instance.rotation[2] + rotationAngle
+                ];
+                this._setInstanceMatrixWithZoom(model, modelMesh, localIndex, instance, rotation, dummy, instanceMatrix, zoomScaleFactor);
+            });
+            modelMesh.mesh.instanceMatrix.needsUpdate = true;
+        }
+    }
+    _setInstanceMatrixWithZoom(model, modelMesh, index, instance, rotation, dummy, instanceMatrix, zoomScaleFactor = 1) {
+        const mercator = mapbox_gl.MercatorCoordinate.fromLngLat(this.toTileLngLat(instance.lngLat), instance.altitude);
+        const dx = (mercator.x - model.centerMercator.x) / model.meterInMercator;
+        const dy = -(mercator.y - model.centerMercator.y) / model.meterInMercator;
+        const dz = (mercator.z - model.centerMercator.z) / model.meterInMercator;
+        const typeScale = model.typeScales.get(instance.type) ?? 1;
+        const baseRotationMatrix = model.baseRotationMatrices.get(instance.type) ?? new __rspack_external_three.Matrix4();
+        dummy.position.set(dx, dy, dz);
+        dummy.rotation.set(...rotation);
+        dummy.scale.setScalar(typeScale * instance.scale * zoomScaleFactor);
         dummy.updateMatrix();
-        instancedMesh.setMatrixAt(index, dummy.matrix);
-        instancedMesh.instanceMatrix.needsUpdate = true;
+        instanceMatrix.copy(dummy.matrix).multiply(baseRotationMatrix).multiply(modelMesh.baseMatrix);
+        modelMesh.mesh.setMatrixAt(index, instanceMatrix);
+        if (void 0 !== instance.color) modelMesh.mesh.setColorAt(index, new __rspack_external_three.Color(instance.color));
+    }
+    updateInstance(id, index, lngLat, altitude) {
+        const model = this.instancedModels.get(id);
+        if (!model) return;
+        const instances = this.instanceDataMap.get(id);
+        const instance = instances?.[index];
+        if (!instance) return;
+        instance.lngLat = lngLat;
+        instance.altitude = altitude;
+        const dummy = new __rspack_external_three.Object3D();
+        const instanceMatrix = new __rspack_external_three.Matrix4();
+        const rotationAngle = this.rotationAngles.get(id)?.[index] ?? 0;
+        const rotation = [
+            instance.rotation[0],
+            instance.rotation[1],
+            instance.rotation[2] + rotationAngle
+        ];
+        for (const modelMesh of model.meshes){
+            const localIndex = modelMesh.instanceIndexes.indexOf(index);
+            if (-1 !== localIndex) {
+                this._setInstanceMatrixWithZoom(model, modelMesh, localIndex, instance, rotation, dummy, instanceMatrix, model.scaleFollowZoom ? 2 ** (model.referenceZoom - (this.map?.getZoom() ?? 16)) : 1);
+                modelMesh.mesh.instanceMatrix.needsUpdate = true;
+            }
+        }
+    }
+    updateInstanceScale(id, index, scale) {
+        const model = this.instancedModels.get(id);
+        if (!model) return;
+        const instances = this.instanceDataMap.get(id);
+        const instance = instances?.[index];
+        if (!instance) return;
+        instance.scale = scale;
+        const dummy = new __rspack_external_three.Object3D();
+        const instanceMatrix = new __rspack_external_three.Matrix4();
+        const rotationAngle = this.rotationAngles.get(id)?.[index] ?? 0;
+        const rotation = [
+            instance.rotation[0],
+            instance.rotation[1],
+            instance.rotation[2] + rotationAngle
+        ];
+        for (const modelMesh of model.meshes){
+            const localIndex = modelMesh.instanceIndexes.indexOf(index);
+            if (-1 !== localIndex) {
+                this._setInstanceMatrixWithZoom(model, modelMesh, localIndex, instance, rotation, dummy, instanceMatrix, model.scaleFollowZoom ? 2 ** (model.referenceZoom - (this.map?.getZoom() ?? 16)) : 1);
+                modelMesh.mesh.instanceMatrix.needsUpdate = true;
+            }
+        }
+    }
+    updateInstanceColor(id, index, color) {
+        const model = this.instancedModels.get(id);
+        if (!model) return;
         const instances = this.instanceDataMap.get(id);
-        if (instances?.[index]) {
-            instances[index].lngLat = lngLat;
-            instances[index].altitude = altitude;
+        const instance = instances?.[index];
+        if (!instance) return;
+        instance.color = color;
+        const colorObj = new __rspack_external_three.Color(color);
+        for (const modelMesh of model.meshes){
+            const localIndex = modelMesh.instanceIndexes.indexOf(index);
+            if (-1 !== localIndex) modelMesh.mesh.setColorAt(localIndex, colorObj);
         }
+        for (const modelMesh of model.meshes)if (modelMesh.mesh.instanceColor) modelMesh.mesh.instanceColor.needsUpdate = true;
+    }
+    handleCoordSystemChange(_system) {
+        const dummy = new __rspack_external_three.Object3D();
+        const instanceMatrix = new __rspack_external_three.Matrix4();
+        this.instancedModels.forEach((model, id)=>{
+            const instances = this.instanceDataMap.get(id);
+            const config = this.originalConfigs.get(id);
+            const center = config?.center ?? instances?.[0]?.lngLat;
+            if (!instances || !center) return;
+            model.centerMercator = mapbox_gl.MercatorCoordinate.fromLngLat(this.toTileLngLat(center), 0);
+            model.meterInMercator = model.centerMercator.meterInMercatorCoordinateUnits();
+            for (const modelMesh of model.meshes){
+                modelMesh.instanceIndexes.forEach((instanceIndex, localIndex)=>{
+                    const instance = instances[instanceIndex];
+                    if (!instance) return;
+                    const rotationAngle = this.rotationAngles.get(id)?.[instanceIndex] ?? 0;
+                    const rotation = [
+                        instance.rotation[0],
+                        instance.rotation[1],
+                        instance.rotation[2] + rotationAngle
+                    ];
+                    this._setInstanceMatrixWithZoom(model, modelMesh, localIndex, instance, rotation, dummy, instanceMatrix, model.scaleFollowZoom ? 2 ** (model.referenceZoom - (this.map?.getZoom() ?? 16)) : 1);
+                });
+                modelMesh.mesh.instanceMatrix.needsUpdate = true;
+            }
+        });
     }
     setInstanceVisible(id, visible) {
-        const instancedMesh = this.instancedMeshes.get(id);
-        if (instancedMesh) instancedMesh.visible = visible;
+        const model = this.instancedModels.get(id);
+        if (model) {
+            model.visible = visible;
+            model.group.visible = visible;
+        }
     }
     setVisible(visible) {
         this.IsVisible = visible;
-        this.instancedMeshes.forEach((mesh)=>{
-            mesh.visible = visible;
+        this.instancedModels.forEach((model)=>{
+            model.visible = visible;
+            model.group.visible = visible;
         });
     }
     getInstanceCount(id) {
-        return this.instancedMeshes.get(id)?.count || 0;
+        return this.instanceDataMap.get(id)?.length || 0;
+    }
+    getMeshCount(id) {
+        return this.instancedModels.get(id)?.meshes.length || 0;
     }
     getIds() {
-        return Array.from(this.instancedMeshes.keys());
+        return Array.from(this.instancedModels.keys());
     }
     remove(id) {
-        const instancedMesh = this.instancedMeshes.get(id);
-        if (instancedMesh && this.scene) {
-            this.scene.remove(instancedMesh);
-            instancedMesh.geometry.dispose();
-            if (Array.isArray(instancedMesh.material)) for (const m of instancedMesh.material)m.dispose();
-            else instancedMesh.material.dispose();
-        }
-        this.instancedMeshes.delete(id);
+        const model = this.instancedModels.get(id);
+        if (model && this.scene) {
+            this.scene.remove(model.group);
+            for (const modelMesh of model.meshes){
+                modelMesh.mesh.geometry.dispose();
+                if (Array.isArray(modelMesh.mesh.material)) for (const m of modelMesh.mesh.material)m.dispose();
+                else modelMesh.mesh.material.dispose();
+            }
+        }
+        this.instancedModels.delete(id);
         this.instanceDataMap.delete(id);
         this.rotationAngles.delete(id);
         this.autoRotateEnabled.delete(id);
         this.rotationSpeeds.delete(id);
         this.originalConfigs.delete(id);
+        this._updateZoomListener();
     }
     clear() {
         const ids = this.getIds();
         for (const id of ids)this.remove(id);
     }
     setColor(id, color) {
-        const instancedMesh = this.instancedMeshes.get(id);
-        if (!instancedMesh) return;
+        const model = this.instancedModels.get(id);
+        if (!model) return;
         const meshColor = 'string' == typeof color ? new __rspack_external_three.Color(color) : color;
-        if (Array.isArray(instancedMesh.material)) {
-            for (const m of instancedMesh.material)if ('color' in m) m.color.set(meshColor);
-        } else if ('color' in instancedMesh.material) instancedMesh.material.color.set(meshColor);
+        for (const modelMesh of model.meshes)if (Array.isArray(modelMesh.mesh.material)) {
+            for (const m of modelMesh.mesh.material)if ('color' in m) m.color.set(meshColor);
+        } else if ('color' in modelMesh.mesh.material) modelMesh.mesh.material.color.set(meshColor);
     }
     destroy() {
         this.clear();
-        if (this.map && this.customLayerId) try {
-            this.map.removeLayer(this.customLayerId);
-        } catch  {}
+        if (this.zoomCleanup) {
+            this.zoomCleanup();
+            this.zoomCleanup = null;
+        }
+        if (this.map) {
+            if (this.canvasClickHandler) {
+                this.map.getCanvas().removeEventListener('click', this.canvasClickHandler);
+                this.canvasClickHandler = null;
+            }
+            if (this.customLayerId && this.map.getLayer(this.customLayerId)) try {
+                this.map.removeLayer(this.customLayerId);
+            } catch  {}
+        }
         if (this.renderer) {
             this.renderer.dispose();
             this.renderer = null;
@@ -19421,6 +19793,7 @@ class InstancedModelManager extends manager_Manager {
         this.camera = null;
         this.isInitialized = false;
         this.originalConfigs.clear();
+        super.destroy();
     }
 }
 const instancedModel = InstancedModelManager;
@@ -19658,6 +20031,14 @@ class Line2Manager extends manager_Manager {
         });
         this.lines.clear();
     }
+    setVisible(visible) {
+        super.setVisible(visible);
+        const mapThree = this.getMapThree();
+        if (!mapThree) return;
+        this.lines.forEach((lineData)=>{
+            mapThree.setRenderableObjectVisible(lineData.id, visible);
+        });
+    }
     getLineCount() {
         return this.lines.size;
     }
@@ -19815,6 +20196,7 @@ class Line2Manager extends manager_Manager {
             this.renderCallback = null;
         }
         this.clearLines();
+        super.destroy();
     }
 }
 const line2Manager = Line2Manager;
@@ -19923,6 +20305,7 @@ class ModelManager extends manager_Manager {
     actions = new Map();
     clock = new Timer();
     modelConfigs = new Map();
+    animationCallback = ()=>this.updateAnimations();
     constructor(mapless){
         super(mapless);
         this.map = mapless.map;
@@ -19936,9 +20319,7 @@ class ModelManager extends manager_Manager {
         if (!this.mapless) return;
         this.mapThree = this.mapless.getMapThree();
         if (!this.mapThree) return void console.warn('ModelManager: MapThree not initialized');
-        this.mapThree.addAnimationCallback(()=>{
-            this.updateAnimations();
-        });
+        this.mapThree.addAnimationCallback(this.animationCallback);
     }
     updateAnimations() {
         const delta = this.clock.getDelta();
@@ -20215,12 +20596,11 @@ class ModelManager extends manager_Manager {
         });
         this.mixers.clear();
         this.actions.clear();
-        if (this.mapThree) this.mapThree.removeAnimationCallback(()=>{
-            this.updateAnimations();
-        });
+        if (this.mapThree) this.mapThree.removeAnimationCallback(this.animationCallback);
     }
     destroy() {
         this.dispose();
+        super.destroy();
     }
 }
 const mana_three_model = ModelManager;
@@ -20262,6 +20642,7 @@ class ThreeManager extends manager_Manager {
     isSelected = false;
     clickCleanup = null;
     zoomCleanup = null;
+    animationCallback = ()=>this.updateAnimation();
     originalModelConfig = null;
     constructor(mapless){
         super(mapless);
@@ -20273,9 +20654,7 @@ class ThreeManager extends manager_Manager {
         if (!this.mapless) return;
         this.mapThree = this.mapless.getMapThree();
         if (!this.mapThree) return void console.warn('ThreeManager: MapThree not initialized');
-        this.mapThree.addAnimationCallback(()=>{
-            this.updateAnimation();
-        });
+        this.mapThree.addAnimationCallback(this.animationCallback);
     }
     updateAnimation() {
         const delta = this.clock.getDelta();
@@ -20575,6 +20954,11 @@ class ThreeManager extends manager_Manager {
         this.clickCleanup = cleanup;
         return cleanup;
     }
+    setVisible(visible) {
+        super.setVisible(visible);
+        const mapThree = this.getMapThree();
+        if (mapThree && this.modelId) mapThree.setRenderableObjectVisible(this.modelId, visible);
+    }
     unregisterClick() {
         if (this.clickCleanup) {
             this.clickCleanup();
@@ -20598,9 +20982,7 @@ class ThreeManager extends manager_Manager {
             this.mixer.stopAllAction();
             this.mixer = null;
         }
-        if (this.mapThree) this.mapThree.removeAnimationCallback(()=>{
-            this.updateAnimation();
-        });
+        if (this.mapThree) this.mapThree.removeAnimationCallback(this.animationCallback);
     }
     handleCoordSystemChange(_system) {
         if (!this.originalModelConfig) return;
@@ -20625,6 +21007,7 @@ class ThreeManager extends manager_Manager {
     };
     destroy() {
         this.dispose();
+        super.destroy();
     }
 }
 const three = ThreeManager;