JSAPI Three（mapvthree）与百度其他地图引擎的区别

// JSAPI Three 的安装方式（唯一支持 npm 安装的百度地图引擎）
npm i -S @baidumap/mapv-three three

// JSAPI Three 可以直接添加 Three.js 原生对象
const engine = new mapvthree.Engine(container);
const mesh = new THREE.Mesh(geometry, material);
engine.add(mesh);  // 直接添加 Three.js 对象

// 点数据可视化
- SimplePoint（简单点）
- Circle（圆形点）
- BubblePoint（气泡点）
- Icon（图标点）
- Label（标签点）
- Heatmap（热力图）
- ClusterPoint（聚合点）

// 线数据可视化
- Polyline（折线）
- FatLine（粗线）
- SimpleLine（简单线）

// 面数据可视化
- Polygon（多边形）
- Grid（网格）
- Wall（墙体）

// 三维可视化
- SimpleModel（简单模型）
- InstancedMesh（实例化网格）
- Default3DTiles（3D Tiles）

// 渲染特效配置
engine.rendering.features = {
    antialias: {
        enabled: true,
        method: 'smaa',  // 抗锯齿
    },
    bloom: {
        enabled: true,
        strength: 0.1,   // 泛光效果
        threshold: 1,
        radius: 0,
    },
    colorAdjustment: {
        enabled: true,
        brightness: 0,   // 亮度调整
        contrast: 0,     // 对比度调整
        saturation: 0,  // 饱和度调整
    },
};

// 支持多种天空类型
- StaticSky（静态天空）
- DynamicSky（动态天空）
- DefaultSky（默认天空）
- EmptySky（空天空，用于叠加其他地图）

// 天气系统（需要配合 DynamicSky 使用）
const sky = engine.add(new mapvthree.DynamicSky());
const weather = engine.add(new mapvthree.DynamicWeather(sky));
weather.weather = 'rainy'; // clear | partlyCloudy | cloudy | overcast | foggy | rainy | snowy

// 时钟系统配置
engine.clock = {
    currentTime: new Date('2025-05-15 12:30:00'),
    tickMode: 1,
    speed: 1000,
};

// GeoJSON 数据源
const geoJsonSource = new mapvthree.GeoJSONDataSource.fromGeoJSON({
    type: 'FeatureCollection',
    features: [...]
});

// CSV 数据源
const csvSource = new mapvthree.CSVDataSource.fromCSV(csvData);

// JSON 数据源
const jsonSource = new mapvthree.JSONDataSource.fromJSON(jsonData);

// 数据源可以灵活切换
const point = engine.add(new mapvthree.SimplePoint());
point.dataSource = geoJsonSource;  // 可以随时更换数据源

// 通过 npm 安装后引入
import * as mapvthree from '@baidumap/mapv-three';

const container = document.getElementById('container');
const engine = new mapvthree.Engine(container);
engine.map.setPitch(75);

// 清理资源
// engine.dispose();

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

const container = document.getElementById('container');
const engine = new mapvthree.Engine(container, {
    map: {
        provider: new mapvthree.BaiduVectorTileProvider(),
        center: [116, 39],
        heading: 0,
        pitch: 60,
        range: 2000,
        projection: 'EPSG:3857',
    },
    rendering: {
        enableAnimationLoop: true,
        features: {
            bloom: { enabled: true },
            antialias: { enabled: true },
        },
    },
    clock: {
        currentTime: new Date(),
        speed: 1000,
    },
});

// 通过 script 标签引入（只能通过官方链接引入）
// <script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"></script>

const map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
map.setHeading(45);  // 设置旋转角度
map.setTilt(60);     // 设置倾斜角度

// JSAPI 2D 3.0 版（通过 script 标签引入）
// <script src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
const map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

// JSAPI 2D 2.0 版（通过 script 标签引入）
// <script src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
const map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

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

// 添加点数据
const dataSource = new mapvthree.GeoJSONDataSource.fromGeoJSON({
    type: 'FeatureCollection',
    features: [...]
});

const point = engine.add(new mapvthree.SimplePoint({
    size: 10,
}));
point.dataSource = dataSource;

// 添加三维模型
const model = engine.add(new mapvthree.SimpleModel({
    point: [116.414, 39.915],
    url: 'assets/models/building.glb',
    scale: new THREE.Vector3(10, 10, 10),
}));

// 添加 Three.js 原生对象
const mesh = new THREE.Mesh(geometry, material);
engine.add(mesh);

// JSAPI GL 和 JSAPI 2D 添加元素方式相同
// 添加标注点
const point = new BMap.Point(116.404, 39.915);  // JSAPI 2D
// 或
const point = new BMapGL.Point(116.404, 39.915); // JSAPI GL

const marker = new BMap.Marker(point);  // JSAPI 2D
// 或
const marker = new BMapGL.Marker(point); // JSAPI GL

map.addOverlay(marker);

// 添加信息窗口
const infoWindow = new BMap.InfoWindow("内容");  // JSAPI 2D
// 或
const infoWindow = new BMapGL.InfoWindow("内容"); // JSAPI GL
map.openInfoWindow(infoWindow, point);

// 通过 engine.map 控制视野
engine.map.lookAt([116, 39], {
    heading: 0,
    pitch: 60,
    range: 2000,
});

// 平滑过渡
engine.map.flyTo([116, 39], {
    heading: 0,
    pitch: 60,
    range: 2000,
});

// 直接访问相机对象（不推荐）
engine.camera.position.set(x, y, z);

// JSAPI 2D - 仅支持缩放和中心点
map.centerAndZoom(point, zoom);
// 不支持旋转和倾斜

// JSAPI GL - 支持 2.5D 视角
map.centerAndZoom(point, zoom);
map.setHeading(45);  // 旋转角度（0-360度）
map.setTilt(60);     // 倾斜角度（0-75度，有限制）

// 使用实例化渲染
const instancedMesh = engine.add(new mapvthree.InstancedMesh({
    // 可以高效渲染大量相同模型
}));

// 使用点聚合
const clusterPoint = engine.add(new mapvthree.ClusterPoint({
    // 自动聚合相近的点，减少渲染负担
}));