简述
在之前的章节中，我简单介绍了图层几个常用的方法以及实现的对应功能，接下里我会介绍一些我们常用的地图属性和相关方法，本文是根据API文档做了简化总结，底子好一点的同学也可以去官网直查阅。
属性
在地图开发过程中，我们需要获取一些地图属性，以便完成代码逻辑，比如，我们想在地图缩放至某一级别时，进行一些操作，在相机倾斜到一定角度后，进行另外的操作，等等。
在一般的js开发中，我们喜欢用 . 的形式去获取我们想要的属性值，在地图开发中，我们同样可以这么做，但map对像属性很多，不容易找到我们想要的参数，所以官方设定了一些get set 方法方便我们使用
bearing
当前相机（视角）所朝向的方向，如果是正北，那就是 0 ，其范围在正负180之间，其意义也可以理解为，当前相机朝向方向与正北在水平面上的夹角。顺时针为正方向
// 获取
const bearing = map.getBearing();
// 设置朝向为90度，这么设置没有动画
map.setBearing(90);
// 旋转到90度, 期间有两秒的过渡动画，方法第二个参数duration为过渡时间，单位为毫秒
map.rotateTo(90, {duration: 2000});
// 旋转到正北方向，也就是0度，同样是有两秒的过渡时间
map.resetNorth({duration: 2000});
pitch
当前相机的俯仰角，当相机直接向下看地图时，pitch为0，在mapbox2.x中，pitch最大角度为85
const pitch = map.getPitch();
map.setPitch(30)
倾斜角不同于相机朝向，塔允许设置最大最小范围，在mapbox1.x时，mapbox还没有天空盒的功能，为了保证地图美观，同时保证加载瓦片的性能，倾斜角最大为60度，而在2.x中，最大角度变成了85度，所以，如果我们要设置倾斜的范围，不能超过85，
// 设置最大倾斜角
map.setMaxPitch(70);
// 设置最小倾斜角
map.setMinPitch(5);
// 获取最大倾斜角
const maxPitch = map.getMaxPitch();
// 获取最小倾斜角
const minPitch = map.getMinPitch();
zoom
地图缩放级别
// 获取当前缩放级别
const zoom = map.getZoom();
// 设置层级
map.setZoom(5);
// 缩放到该级别，并有一个过渡动画
map.zoomTo(8, {
duration: 2000,
});
// 放大一个级别，并有一个过渡动画
map.zoomIn({duration: 1000});
// 缩小一个级别，并有一个孤独动画
map.zoomOut({offset: [80, 60]});
center
地图的地理中心
// 获取地图的地理中心，返回值格式为 {lng: 0, lat: 0}.
const center = map.getCenter();
// 设置地图的地理中心，作用等同于 jumpTo({center: center})
map.setCenter([-74, 38]);
flyTo jumpTo
上面我们所了解的几个属性，实际上都和相机有关，我们最常用的便是从某地视角变成另外一个地方的视角，flyTo 与jumpTo 相似 区别在于前者有过度动画，后者没有。
这两者都可以传center zoom pitch bearing
map.jumpTo({
center: [0, 0],
zoom: 8,
pitch: 45,
bearing: 90
});
map.flyTo({
center: [0, 0],
zoom: 9,
speed: 0.2,
curve: 1,
easing(t) {
return t;
}
});
bounds
地图范围，这里指的范围，是相机能够活动的范围，整个活动范围为一个矩形，可由经纬度设置。常用于限制用户飞出可视范围，例如，当前地图上只加载了一个城市的数据，其他数据都是空的，如果用户随便查看地图，这会让人感觉不够美观，因为，可以使用这个方法去限制用户相机行为。
// 西南 东北 左下，右上
const bounds = [
[-74.04728, 40.68392],
[-73.91058, 40.87764]
];
// 设置
map.setMaxBounds(bounds);
// 获取最大范围
const maxBounds = map.getMaxBounds();
// 获取当前范围
const bounds = map.getBounds();
image
在mapbox中，提供图片功能的有两种方式,一种是在初始化地图时，我们在style样式里引入的sprite,另一种则是通过直接加载图片去使用image。
在mapbox中使用图片，就像图层那样，首先将图片加载“数据源”中，之后再去使用。
// 加载图片
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => {
// 回调中获取图片资源
if (error) throw error;
// 判断地图资源中，是否有叫 cat 的图片
// 如果没有，那么则将此图片加到地图资源中，并命名为cat
if (!map.hasImage('cat')) map.addImage('cat', image);
});
上面整个流程用了三个方法，从加载-检索-添加 ,之后是作为材质或者图标去使用，除是哪个面这三个方法以外，还有几个方法需要了解
// 更新已有图片
if (map.hasImage('cat')) map.updateImage('cat', './other-cat-icon.png');
// 移除已有图片
if (map.hasImage('cat')) map.removeImage('cat');
图片的增删改查已经完整，但还有一个查的功能，对于入门者来说只需要知道即可。
// 获取所有的地图资源中所有的图片资源
const allImages = map.listImages();
listImages所获取的所有图片资源，包括style.sprite中的图片资源，也包括后面addImage增加的图片。
总结
以上所归纳的这些方法，是我们日常开发中关于地图经常使用的，也是入门需要理解的属性与方法，当然，这些方法我没有全部展开去讲，比如flyTo的其他参数，set 方法的第二个参数，等读者熟悉了入门的这些东西，我们再去详解。
接下来将讲解添加地图控件的方法。
