地图导航
在深入学习之前，还是先来个开胃菜，见识一下View所承载的功能。下面将演示地图导航功能，关于导航相关功能，在前面操作地图的时候，已经有了充分的理解和认识。为什么我们还要再讨论它呢？因为这次的导航功能，需要自己来实现，而且只使用ol.View提供的方法就可以做到。
点击地图下方的几个按钮试试响应的功能，用它们就可以完整的实现地图导航了。按照惯例，下面我们会给出对应的源码，但我希望你能先学习一下ol.View的API文档，从中找出我们可能使用了的方法。
好了，下面就来揭晓答案：
<body>
<div id="map" style="width: 100%, height: 400px"></div>
<div id="navigate-container">
<input type="button" onClick="moveToLeft();" value="左移" />
<input type="button" onClick="moveToRight();" value="右移" />
<input type="button" onClick="moveToUp();" value="上移" />
<input type="button" onClick="moveToDown();" value="下移" />
<input type="button" onClick="moveToChengDu();" value="移到成都" />
<input type="button" onClick="zoomIn();" value="放大" />
<input type="button" onClick="zoomOut();" value="缩小" />
</div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 设置成都为地图中心，此处进行坐标转换， 把EPSG:4326的坐标，转换为EPSG:3857坐标，因为ol默认使用的是EPSG:3857坐标
center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
}),
target: 'map'
});
// 向左移动地图
function moveToLeft() {
var view = map.getView();
var mapCenter = view.getCenter();
// 让地图中心的x值增加，即可使得地图向左移动，增加的值根据效果可自由设定
mapCenter[0] += 50000;
view.setCenter(mapCenter);
map.render();
}
// 向右移动地图
function moveToRight() {
var view = map.getView();
var mapCenter = view.getCenter();
// 让地图中心的x值减少，即可使得地图向右移动，减少的值根据效果可自由设定
mapCenter[0] -= 50000;
view.setCenter(mapCenter);
map.render();
}
// 向上移动地图
function moveToUp() {
var view = map.getView();
var mapCenter = view.getCenter();
// 让地图中心的y值减少，即可使得地图向上移动，减少的值根据效果可自由设定
mapCenter[1] -= 50000;
view.setCenter(mapCenter);
map.render();
}
// 向下移动地图
function moveToDown() {
var view = map.getView();
var mapCenter = view.getCenter();
// 让地图中心的y值增加，即可使得地图向下移动，增加的值根据效果可自由设定
mapCenter[1] += 50000;
view.setCenter(mapCenter);
map.render();
}
// 移动到成都
function moveToChengDu() {
var view = map.getView();
// 设置地图中心为成都的坐标，即可让地图移动到成都
view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));
map.render();
}
// 放大地图
function zoomIn() {
var view = map.getView();
// 让地图的zoom增加1，从而实现地图放大
view.setZoom(view.getZoom() + 1);
}
// 缩小地图
function zoomOut() {
var view = map.getView();
// 让地图的zoom减小1，从而实现地图缩小
view.setZoom(view.getZoom() - 1);
}
</script>
</body>
使用input标签增加了几个按钮，每个按钮都绑定了对应的点击事件监听，对应的监听函数实现了某一种导航的功能，都很简单，并且代码都有注释，容易理解。创建地图的代码几乎没有任何改变，也不过多说明，请结合代码和上面的地图进行理解。
在功能上，目前尚有两个方面的欠缺，一是按钮没有集成在地图上；二是移动并不平滑。这两部分功能缺失将在我们学习了Control和动画之后，一步一步再补充完善，此处暂时不深入下去。现在需要考虑的是我们在代码中使用了ol.proj.transform这个方法，它有什么作用？