OpenLayers3实现对地图的基本操作
本文实例为大家分享了OpenLayers3实现对地图的基本操作代码，供大家参考，具体内容如下
1. 前言
对地图的基本操作就是对地图的放大、缩小、移动、复位和更新等，通过使用OpenLayers 3 框架中操作地图视图（View）的相应方法。
2. 实现思路
（1）新建一个网页，参照前面的文章加载OSM瓦片地图，通过视图设置地图的最大、最小缩放级别以及初试旋转角度，通过使用jQuery以及bootstrap来实现在缩放控件以及旋转控件鼠标悬停提示的效果。
（2）在地图容器中新建4个按钮（button），设置按钮的id，通过css控制按钮的样式
（3）为每个按钮添加 onclick 事件，在函数中调用 OpenLayer 3 中操作地图视图的相应方法，来实现单击放大、单击缩小、移动到某一位置以及复位功能。
（4）为缩放控件以及旋转控件添加tooltip提示信息，设置tooltip的冒泡位置。
3. 代码如下
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对地图的基本操作</title>
<link rel="stylesheet" href="css/bootstrap.min.css" >
<link rel="stylesheet" href="css/ol.css" >
<link rel="stylesheet" href="css/ZoomSlider.css" >
<script src="js/ol.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/Operation.js"></script>
<style>
#map {
width: 100%;
height: 570px;
}
#menu {
float: left;
position: absolute;
bottom: 10px;
z-index: 2000;
}
.tooltip-inner {
white-space: nowrap;
}
</style>
</head>
<body onload="init()">
<div id="map">
<div id="menu">
<button id="zoom-out" class="btn btn-info">单击缩小</button>
<button id="zoom-in" class="btn btn-info">单击放大</button>
<button id="panto" class="btn btn-info">移动地图</button>
<button id="restore" class="btn btn-info">复位地图</button>
</div>
</div>
</body>
</html>
js代码：
function init() {
//实例化Map对象，用于加载地图
var map = new ol.Map({
target: 'map', //地图容器的div
// 在地图容器中加载图层
layers: [
// 加载瓦片图层数据OSM
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
// 地图视图设置
view: new ol.View({
center: [12950000, 4860000], //地图显示中心设置
zoom: 8, //地图初始显示级别
minZoom: 6, //最小级别
maxZoom: 12, //最大级别
rotation: Math.PI / 6 //设置旋转角度
})
});
// 地图视图的初始参数
var view = map.getView();
var zoom = view.getZoom();
var center = view.getCenter();
var rotation = view.getRotation();
// 实现单击缩小按钮的功能
document.getElementById('zoom-out').onclick = function() {
var view = map.getView(); //获取当前地图视图
var zoom = view.getZoom(); //获得当前缩放级别
view.setZoom(zoom - 1); //地图缩小一级
}
// 实现单击放大的功能按钮
document.getElementById('zoom-in').onclick = function() {
var view = map.getView(); //获取当前地图视图
var zoom = view.getZoom(); //获得当前缩放级别
view.setZoom(zoom + 1); //地图放大一级
}
// 平移功能
document.getElementById('panto').onclick = function() {
var view = map.getView(); //获取当前地图视图
var lz = ol.proj.fromLonLat([103.73333, 36.03333]);
view.setCenter(lz); //平移地图
}
// 复位功能（复位到初始复位）
document.getElementById('restore').onclick = function() {
view.setCenter(center); //初始中心点
view.setRotation(rotation); //初始旋转角度
view.setZoom(zoom); //平移地图
}
// 为内置的缩放控件与旋转控件添加tooltip提示信息
$('.ol-zoom-in,.ol-zoom-out').tooltip({
placement: 'right' //tooltip在右侧显示
});
$('.ol-rotate-reset,.ol-attribution button[title]').tooltip({
placement: 'left' //tooltip在右侧显示
});
}
显示效果如下：
4. 代码解析
对地图的缩放、平移、旋转等基本操作都是通过地图视图 View 进行控制，通过地图视图相应的 set 方法实现，首先需要通过Map的getView()获取当前地图时视图对象，然后根据视图对象调用其 get 方法来获取当前的缩放级别（Zoom）、中心点（center）、旋转角度（rotation）等参数。
（1）缩放地图
通过 View 的setZoom方法实现的，缩放级别由setZoom方法的参数进行设置。首先通过 view.getZoom() 获取当前地图的级别，然后调用 setZoom 方法进行缩放（view.setZoom(zoom - 1)），可将地图缩小一级，通过 view.setZoom(zoom +1); 可将地图放大一级。
（2）移动地图
移动地图就是通过改变地图当前地图的中心，通过地图视图的 setCenter 方法实现。首先通过Map对象获取地图的视图对象，然后调用 setCenter 方法进行设置。函数传的参数就是地图中心的坐标点。
（3）旋转地图
它是通过地图默认加载的旋转控件（ol.control.Rotate）来实现的，Rotate 控件的 autoHide 参数默认设置为 true，在旋转角度为0时自动隐藏旋转功能。在这个例子中，我们设置了地图的初始旋转角为60°（ rotation: Math.PI / 6 //设置旋转角度），所以当我们点击旋转按钮时，旋转60°回到0°，按钮影藏。
（4）复位地图
它的功能就是将地图恢复当我们刚开始加载地图的状态，它涉及到 View 的设置，我们首先获取到地图加载时的缩放级别、中心点、旋转角度，然后通过 setZoom 、setCenter 、setRotation 方法进行设置，实现地图的复位功能。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
OpenLayers3实现地图鹰眼以及地图比例尺的添加
本文实例为大家分享了OpenLayers3实现地图鹰眼以及地图比例尺的添加的具体代码,供大家参考,具体内容如下 1. 前言 地图鹰眼就是地图的鸟瞰图,就是通常所说的小地图,我们可以通过鹰眼得到当前地图的显示位置,也可以在鹰眼上单击.拖动或移动到想要查看的位置,鹰眼的可见区域比我们所看的主视区的范围要大,鹰眼的中心框就是主视区的可视范围, Openlayers 3 封装的鹰眼控件为 ol.control.OverviewMap ,可以自定义其显示的样式. 2. 实现思路 (1)新建一个网页,并参考
-
OpenLayers3实现地图显示功能
本文实例为大家分享了OpenLayers3实现地图显示的具体代码,供大家参考,具体内容如下 1.配置开发环境 使用OpenLayers 3开发WebGIS应用,我们首先需要配置开发环境,首先我们需要在openlayers官网获取OpenLayers 3的开发库.下载链接:官网.打开后如图所示: 需要注意的是这里下载有两个版本,①:仅包括开发库(开发与调试的JS库以及CSS文件),②:包括开发库.开发库源码.示例.API等所有开发资源. 在这里我下载了第一个版本,下载后如图所示: 2. 显示一个O
-
使用OpenLayers3 添加地图鼠标右键菜单
添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用
-
OpenLayers3实现对地图的基本操作
本文实例为大家分享了OpenLayers3实现对地图的基本操作代码,供大家参考,具体内容如下 1. 前言 对地图的基本操作就是对地图的放大.缩小.移动.复位和更新等,通过使用OpenLayers 3 框架中操作地图视图(View)的相应方法. 2. 实现思路 (1)新建一个网页,参照前面的文章加载OSM瓦片地图,通过视图设置地图的最大.最小缩放级别以及初试旋转角度,通过使用jQuery以及bootstrap来实现在缩放控件以及旋转控件鼠标悬停提示的效果. (2)在地图容器中新建4个按钮(butt
-
Openlayers实现地图的基本操作
本文实例为大家分享了Openlayers实现地图基本操作的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个Div标签和4个Button按钮,用来实现地图的放大.缩小.平移等功能: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C
-
点击地图div上的按钮实现对地图数据的入库操作
在地图div上添加一个按钮,单击按钮后弹出一个弹出层,在弹出层的输入框内输入数据后点击提交按钮将数据提交至数据库. mytest_map.jsp的代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html lang='
-
OpenLayers3加载常用控件使用方法详解
本文实例为大家分享了OpenLayers3加载常用控件使用的具体代码,供大家参考,具体内容如下 1. 前言 地图控件就是对地图的缩放.全屏.坐标显示控件等,方便我们对地图进行操作.OpenLayers 3 封装了很多常用的地图控件,例如地图导航.比例尺.鹰眼.测量工具等,这些控件都是基于ol.control.Control虚基类进行封装,ol.control.Control的子类为各类常用的地图控件,可以通过Map对象的Control参数进行设置或者通过addControl方法将控件添加到地图窗
-
OpenLayers3实现图层控件功能
本文实例为大家分享了OpenLayers3实现图层控件的具体代码,供大家参考,具体内容如下 1. 前言 在实际应用中,我们将加载到地图容器中的图层通过图层显示的控件功能,来显示加载的图层,便于用户查看与操作,OpenLayers 3 中并没有提供类似的图层控件,但是他的 API 却提供了该功能的相关接口,我们可以通过调用相关的接口,实现该功能. 2. 实现思路 (1)新建一个网页,参考前面的文章加载OSM瓦片图层的方法,加载OSM瓦片.MapQuest 影像.JSON 与KML 格式的矢量图.
-
OpenLayers3实现测量功能
本文实例为大家分享了OpenLayers3实现测量功能的具体代码,供大家参考,具体内容如下 1. 前言 测量功能实现面积的测量以及长度的测量.通过鼠标绘制区域以及长度来进行测量.OpenLayers 3 框架没有提供测量控件,但提供了相应的接口,需要需要基于几何对象的相应接口,结合图形绘制功能实现. 2. 实现思路 (1)新建一个网页,引用 openlayers 3 开发库.jQuery 库与 bootstrap 库,并参照前面显示地图的文章,加载 OSM 瓦片图层. (2)在地图容器中,创建一
-
OpenLayers3实现鼠标移动显示坐标
本文实例为大家分享了OpenLayers3实现鼠标移动显示坐标的具体代码,供大家参考,具体内容如下 1. 前言 鼠标移动显示坐标,OpenLayers 3 框架提供了鼠标移动显示坐标的控件(ol.control.MousePosition),默认显示在地图的右上角,其样式可以自定义.在这个例子中,我们通过前面的加载 OSM 加载瓦片图层,实现在地图容器的左下角显示坐标点的信息. 2. 实现思路 (1)新建一个网页,参考前面的加载 OSM 瓦片地图,实现加载瓦片地图. (2)在地图容器中新建一个