1. 前言
对地图的基本操作就是对地图的放大、缩小、移动、复位和更新等,通过使用OpenLayers 3 框架中操作地图视图(View)的相应方法。
2. 实现思路
(1)新建一个网页,参照前面的文章加载OSM瓦片地图,通过视图设置地图的最大、最小缩放级别以及初试旋转角度,通过使用jQuery以及bootstrap来实现在缩放控件以及旋转控件鼠标悬停提示的效果。
(2)在地图容器中新建4个按钮(button),设置按钮的id,通过css控制按钮的样式
(3)为每个按钮添加 onclick 事件,在函数中调用 OpenLayer 3 中操作地图视图的相应方法,来实现单击放大、单击缩小、移动到某一位置以及复位功能。
(4)为缩放控件以及旋转控件添加tooltip提示信息,设置tooltip的冒泡位置。
3. 代码如下
html代码:
<!DOCTY