# 视角控制

对地图视角的控制，除了常用的 flyTo，fitBounds 等，还可以使用下属的方法，来提升视角移动的灵活性。通过在 requestAnimationFrame 中组合不同的视角控制方法，可以达到更好的效果。

# 自定义某个视角

自定义某个视角可以将视角固定在任意一个位置上。这个方法提供的参数灵活度高于普通的 flyTo，fitBounds 等，可以直接指定视角的坐标，高度等。

# map.getFreeCameraOptions()

获取 FreeCameraOptions 对象，通过 FreeCameraOptions 才能对地图指定任意位置。

# 返回值

FreeCameraOptions(FreeCameraOptions)

# 示例

const camera = map.getFreeCameraOptions();
camera.lookAtPoint([138.73036, 35.36197]);

1
2

# map.setFreeCameraOptions(options, eventData)

FreeCameraOptions 提供了能够直接控制底层视角参数的方法。

# 参数

options(FreeCameraOptions)：FreeCameraOptions 对象。

eventData(Object?)：需要在视角移动时触发的事件中附带的额外参数。

# 返回值

map(Map)

# 示例

const camera = map.getFreeCameraOptions();
 
const position = [121.72649, 32.33974];
const altitude = 3000;
 
camera.position = mapboxgl.MercatorCoordinate.fromLngLat(position, altitude);
camera.lookAtPoint([121.73036, 32.36197]);
 
map.setFreeCameraOptions(camera);

1
2
3
4
5
6
7
8
9

# FreeCameraOptions

FreeCameraOptions 的相关属性。

# 指定相机位置

const camera = map.getFreeCameraOptions();

const position = [138.72649, 35.33974];
const altitude = 3000;
camera.position = mapboxgl.MercatorCoordinate.fromLngLat(position, altitude);

1
2
3
4
5

# 实例成员

lookAtPoint(location)

看向指定的位置，也就是将指定的位置置于屏幕中间。

参数

location([number, number])：经纬度表示的位置坐标。

示例

const camera = map.getFreeCameraOptions();
camera.lookAtPoint([138.73036, 35.36197]);

1
2

setPitchBearing(pitch, bearing)

指定视角的俯仰角以及朝向。

参数

pitch(number)：俯仰角。

bearing(number)：朝向。

示例

const camera = map.getFreeCameraOptions();
camera.setPitchBearing(80, 90);

1
2

# 路径跟随

路径跟随可以实现地图视角沿着某个固定线路移动，呈现出始终跟随某个移动对象的效果。

# RouteCamera

创建 RouteCamera 对象。

new RouteCamera(map: Map, coordinates: Array<[number, number]>, options: Object?)

# 参数

map(Map)：地图实例对象。

coordinates(Array<[number, number]>)：坐标数组。

options(Object?)：

名称	类型	类型
simplifyTolerance	`number`	对传入轨迹的简化程度，等同于`turf.simplify`，默认值：0.005。
smoothRadius	`number`	视角变化相对于轨迹的贴合程度，值越小越贴合，默认值：0.5。
onProgress	`Function`	跟随过程中的回调函数，回调函数中会返回0~1的数字表示进度。
onInterrupt	`Function`	跟随动画被鼠标点击打断的回调函数，回调函数中会返回0~1的数字表示被打断时的进度。
onEnd	`Function`	跟随完成后的回调函数。

# 示例

const routeCamera = new aimap.RouteCamera(map, [[121, 31], [122, 32], [122, 33]], {
    simplifyTolerance: 0.005,
    onProgress: (p) => {
        console.log('进行中', p);
    },
    onInterrupt: (p) => {
        console.log('在进度：', p, '处，被打断');
    },
    onEnd: () => {
        console.log('结束啦');
    }
});

1
2
3
4
5
6
7
8
9
10
11
12

# 实例成员

start(options)

开始路径跟随效果。

参数

options(Object?)

名称	类型	类型
duration	`number`	动画的过程时长，单位：秒，默认值：10。
easing	`string`	轨迹跟随的速度模式，默认值：'quad'，可选： - `quad`：先加速后减速； - `linear`：匀速。
cameraHeight	`number`	相机距离地面的高度，单位：米，默认值：1000。
cameraDistance	`number`	相机距离轨迹跟随点的水平距离，单位：米，默认值：5000。

示例

const routeCamera = new aimap.RouteCamera(map, [[121, 31], [122, 32], [122, 33]]);
routeCamera.start();

1
2

stop()

停止路径跟随效果。

# 定点旋转

定点旋转的实现实际上非常的简单，通过组合 rotateTo 与 requestAnimationFrame 即可实现。

# 示例

function rotateCamera(timestamp) {
    map.rotateTo((timestamp / 200) % 360, { duration: 0 });
    requestAnimationFrame(rotateCamera);
}

map.on('load', () => {
    rotateCamera(0);
});

1
2
3
4
5
6
7
8

← 投影坐标系样式概述 →