JSAPIThree 地图视野控制学习笔记：让地图动起来

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

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

// 地图管理器已经自动创建了！
console.log(engine.map); // 可以访问地图管理器

// 设置中心点为北京天安门
engine.map.setCenter([116.404, 39.915]);

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

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915], // 初始中心点
        range: 1000,
        pitch: 60,
    },
});

// 切换到上海
engine.map.setCenter([121.473, 31.230]);

// 获取当前中心点
const center = engine.map.getCenter();
console.log(center); // [116.404, 39.915]

// 设置视野距离为 1000 米（比较近）
engine.map.setRange(1000);

// 设置视野距离为 10000 米（比较远）
engine.map.setRange(10000);

// 拉近视野（1000 米）
engine.map.setRange(1000);

// 拉远视野（10000 米）
engine.map.setRange(10000);

// 设置缩放级别
engine.map.setZoom(14);

// 放大（级别 18）
engine.map.setZoom(18);

// 缩小（级别 10）
engine.map.setZoom(10);

// 放大
engine.map.zoomIn();

// 缩小
engine.map.zoomOut();

// 设置旋转角度（0 度是正北）
engine.map.setHeading(0);

// 设置旋转角度（90 度是正东）
engine.map.setHeading(90);

// 正北方向
engine.map.setHeading(0);

// 正东方向
engine.map.setHeading(90);

// 正南方向
engine.map.setHeading(180);

// 正西方向
engine.map.setHeading(270);

// 获取当前旋转角度
const heading = engine.map.getHeading();
console.log(heading); // 例如：45

// 设置俯仰角（0 度是垂直向下看）
engine.map.setPitch(0);

// 设置俯仰角（90 度是水平看）
engine.map.setPitch(90);

// 垂直向下看（俯视）
engine.map.setPitch(0);

// 45 度俯视
engine.map.setPitch(45);

// 水平看（平视）
engine.map.setPitch(90);

// 获取当前俯仰角
const pitch = engine.map.getPitch();
console.log(pitch); // 例如：60

engine.map.lookAt(
    [116.404, 39.915], // 中心点
    {
        heading: 0,    // 旋转角度
        pitch: 60,      // 俯仰角
        range: 1000,    // 视野距离
    }
);

// 飞到天安门，正北方向，60 度俯视，1000 米高度
engine.map.lookAt(
    [116.404, 39.915],
    {
        heading: 0,
        pitch: 60,
        range: 1000,
    }
);

engine.map.flyTo(
    [116.404, 39.915], // 目标位置
    {
        heading: 0,
        pitch: 60,
        range: 1000,
        duration: 2000, // 动画持续时间（毫秒）
    }
);

// 平滑飞到天安门
engine.map.flyTo(
    [116.404, 39.915],
    {
        heading: 0,
        pitch: 60,
        range: 1000,
        duration: 2000, // 2 秒动画
    }
);

engine.map.flyTo(
    [116.404, 39.915],
    {
        duration: 2000,
        complete: () => {
            console.log('动画完成！');
        },
        cancel: () => {
            console.log('动画取消！');
        },
    }
);

import * as THREE from 'three';

// 地理坐标（经纬度）
const geoCoord = new THREE.Vector3(116.404, 39.915, 0);

// 投影坐标（米）
const projCoord = new THREE.Vector3();
engine.map.projectCoordinate(geoCoord, projCoord);

console.log(projCoord); // 投影坐标

import * as THREE from 'three';

// 投影坐标（米）
const projCoord = new THREE.Vector3(12960000, 4850000, 0);

// 地理坐标（经纬度）
const geoCoord = new THREE.Vector3();
engine.map.unprojectCoordinate(projCoord, geoCoord);

console.log(geoCoord); // 地理坐标

// 地理坐标数组
const geoArray = [116.404, 39.915];

// 投影坐标数组
const projArray = engine.map.projectArrayCoordinate(geoArray, []);

console.log(projArray); // [x, y, z]

const engine = new mapvthree.Engine(container, {
    map: {
        projection: 'EPSG:3857', // Web 墨卡托投影（默认）
        center: [116.404, 39.915],
        range: 1000,
    },
});

// 设置视野范围（左下角和右上角坐标）
engine.map.setBounds([
    [116.0, 39.0], // 左下角
    [117.0, 40.0], // 右上角
]);

// 限制在北京范围内
engine.map.setBounds([
    [116.0, 39.5],  // 左下角
    [117.0, 40.5],  // 右上角
]);

// 获取当前视野范围
const bounds = engine.map.getBounds();
console.log(bounds); // Box3 对象

// 根据坐标数组设置视野
engine.map.setViewport(
    [
        [116.404, 39.915],
        [116.414, 39.925],
        [116.424, 39.935],
    ],
    {
        range: 5000, // 视野距离
    }
);

// 显示多个点的视野
const points = [
    [116.404, 39.915], // 点 1
    [116.414, 39.925], // 点 2
    [116.424, 39.935], // 点 3
];

engine.map.setViewport(points, {
    range: 5000,
});

import * as THREE from 'three';

// 创建一个 3D 对象
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
engine.add(mesh);

// 缩放到对象范围
engine.map.zoomTo(mesh, {
    range: 1000,
});

// 设置最大视野距离（不能拉得太远）
engine.map.setMaxRange(100000);

// 设置最小视野距离（不能拉得太近）
engine.map.setMinRange(100);

// 限制视野在 100 米到 10000 米之间
engine.map.setMinRange(100);
engine.map.setMaxRange(10000);

import * as THREE from 'three';

// 获取相机位置
const cameraPos = new THREE.Object3D();
const location = engine.map.getCameraLocation(cameraPos);

console.log(location); // 相机位置的经纬度和高度

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

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915],
        range: 1000,
        pitch: 60,
        heading: 0,
    },
});

// 创建按钮控制视野
document.getElementById('flyToBtn').addEventListener('click', () => {
    // 平滑飞到天安门
    engine.map.flyTo(
        [116.404, 39.915],
        {
            heading: 0,
            pitch: 60,
            range: 1000,
            duration: 2000,
            complete: () => {
                console.log('到达天安门！');
            },
        }
    );
});

document.getElementById('lookAtBtn').addEventListener('click', () => {
    // 立即切换到上海
    engine.map.lookAt(
        [121.473, 31.230],
        {
            heading: 0,
            pitch: 60,
            range: 2000,
        }
    );
});

document.getElementById('zoomInBtn').addEventListener('click', () => {
    // 放大
    engine.map.zoomIn();
});

document.getElementById('zoomOutBtn').addEventListener('click', () => {
    // 缩小
    engine.map.zoomOut();
});

// 获取当前视野信息
const center = engine.map.getCenter();
const range = engine.map.getRange();
const heading = engine.map.getHeading();
const pitch = engine.map.getPitch();

console.log('中心点：', center);
console.log('视野距离：', range);
console.log('旋转角度：', heading);
console.log('俯仰角：', pitch);