百度地图MapvTHREE Rendering渲染管理器的核心API

准备阶段(Prepare) → 更新阶段(Update) → 渲染阶段(Render)

// 添加监听器
engine.addPrepareRenderListener((engine, renderState) => {
    // 在这里执行准备工作
    // 比如根据相机状态更新数据、计算可见性等
    console.log('准备渲染，当前帧数：', renderState.frameCount);
});

// 移除监听器
engine.removePrepareRenderListener(myCallback);

// 添加监听器
engine.addBeforeRenderListener((engine, renderState) => {
    // 在这里执行渲染前的最后准备
    // 此时场景物体已经完成了位置更新
    console.log('即将渲染...');
});

// 移除监听器
engine.removeBeforeRenderListener(myCallback);

// 修改了一些数据后...
myPoint.color = '#ff0000';

// 请求渲染更新
engine.requestRender();

// 开启循环渲染（适合动态场景）
engine.rendering.enableAnimationLoop = true;

// 关闭循环渲染（适合静态场景，节省性能）
engine.rendering.enableAnimationLoop = false;

// 设置渲染间隔为40ms（约25fps）
engine.rendering.animationLoopFrameTime = 40;

// 设置为16ms（约60fps）
engine.rendering.animationLoopFrameTime = 16;

// 暂停渲染
engine.rendering.freezeUpdate = true;

// 恢复渲染
engine.rendering.freezeUpdate = false;

// 获取当前像素比
console.log(engine.rendering.pixelRatio);

// 设置像素比（影响清晰度和性能）
engine.rendering.pixelRatio = 2;  // 高清
engine.rendering.pixelRatio = 1;  // 标准（更好的性能）

// 获取当前分辨率
const res = engine.rendering.resolution;
console.log(`宽度: ${res.x}, 高度: ${res.y}`);

// 获取天空实例
const sky = engine.rendering.sky;
if (sky) {
    sky.time = 3600 * 15;  // 设置为下午3点
}

// 获取天气实例
const weather = engine.rendering.weather;
if (weather) {
    weather.weather = 'rainy';  // 设置为下雨
}

// 获取Three.js渲染器
const renderer = engine.rendering.renderer;

// 获取相机
const camera = engine.rendering.camera;

// 获取场景
const scene = engine.rendering.scene;

// 获取渲染状态（包含视图矩阵、帧数等信息）
const renderState = engine.rendering.renderState;

import * as mapvthree from '@baidu/mapv-three';

// 创建引擎（使用地球投影）
const engine = new mapvthree.Engine(document.getElementById('map_container'), {
    map: {
        projection: 'ecef',
    },
});

// 添加天空
const sky = engine.add(new mapvthree.DynamicSky());

// 创建地图视图（初始不带矢量图层）
const mapView = window.mapview = engine.add(new mapvthree.MapView({
    terrainProvider: null,
    vectorSurfaceOptions: {
        restrictViewportLevel: true,
    },
}));

// 用于跟踪当前 vectorProvider 的状态
let currentVectorProvider = null;
let lastZoomState = null;  // 记录上一次的状态，避免重复操作

// 使用 PrepareRenderListener 实现层级控制
engine.addPrepareRenderListener(() => {
    const currentZoom = engine.map.getZoom();
    const shouldShowVector = currentZoom > 15;

    // 只在状态变化时才操作，避免每帧都执行
    if (lastZoomState !== shouldShowVector) {
        if (shouldShowVector && !currentVectorProvider) {
            // zoom > 15 且当前没有 vectorProvider，添加它
            console.log('添加 BaiduVectorTileProvider，zoom:', currentZoom);
            
            currentVectorProvider = new mapvthree.BaiduVectorTileProvider({
                // 配置选项
            });
            mapView.setVectorProvider(currentVectorProvider);

        }
        else if (!shouldShowVector && currentVectorProvider) {
            // zoom <= 15 且当前有 vectorProvider，删除它
            console.log('删除 BaiduVectorTileProvider，zoom:', currentZoom);
            
            mapView.setVectorProvider(null);
            currentVectorProvider = null;
        }
        
        lastZoomState = shouldShowVector;
    }
});