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="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../lib/ol/ol.js"></script>
<link href="../css/ol.css" rel="external nofollow" rel="stylesheet" />
<style type="text/css">
#menu
{
float : left;
position : absolute;
bottom : 10px;
font-size : 20px;
z-index : 2000;
}
</style>
<script type="text/javascript">
window.onload = function () {
//实例化map对象并加载地图
var map = new ol.Map({
//存放地图目标容器
target: 'map',
//加载图层
layers: [
//新建一个瓦片地图图层
new ol.layer.Tile({
//瓦片地图数据源
source: new ol.source.OSM()
})
],
//初始化视图
view: new ol.View({
//视图中心点坐标
center: [12550000, 3680000],
//缩放等级
zoom: 8,
//最小缩放等级
minZoom: 6,
//最大缩放等级
maxZoom: 12,
//地图旋转30度
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 position = ol.proj.fromLonLat([115.2341, 32.4652]);
//重设地图中心点，实现平移
view.setCenter(position);
};
//地图重置
document.getElementById("restore").onclick = function () {
//重置中心点位置为初始化位置
view.setCenter(center);
//重置旋转角度为初始化角度
view.setRotation(rotation);
//重置缩放等级为初始化缩放等级
view.setZoom(zoom);
};
}
</script>
</head>
<body>
<div id="map">
<div id="menu">
<button id="zoom-out">缩小</button>
<button id="zoom-in">放大</button>
<button id="panto">平移至...</button>
<button id="restore">重置</button>
</div>
</div>
</body>
</html>
3、运行结果
初始化界面
单击缩小按钮，实现地图缩小
单击放大按钮，实现地图放大
单击平移至按钮，地图平移到指定的位置（阜阳附近）
单击地图右上角的箭头按钮，使地图无旋转
单击重置按钮，地图回到初始状态
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
OpenLayers3实现地图鹰眼以及地图比例尺的添加
本文实例为大家分享了OpenLayers3实现地图鹰眼以及地图比例尺的添加的具体代码,供大家参考,具体内容如下 1. 前言 地图鹰眼就是地图的鸟瞰图,就是通常所说的小地图,我们可以通过鹰眼得到当前地图的显示位置,也可以在鹰眼上单击.拖动或移动到想要查看的位置,鹰眼的可见区域比我们所看的主视区的范围要大,鹰眼的中心框就是主视区的可视范围, Openlayers 3 封装的鹰眼控件为 ol.control.OverviewMap ,可以自定义其显示的样式. 2. 实现思路 (1)新建一个网页,并参考
-
使用OpenLayers3 添加地图鼠标右键菜单
添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用
-
openlayers实现地图测距测面
本文实例为大家分享了openlayers实现地图测距测面的具体代码,供大家参考,具体内容如下 项目背景vue-cli3.0 public下html需要引入文件 <link rel="stylesheet" href="<%= BASE_URL %>./css/gr-ol.css" type="text/css"> <script src="<%= BASE_URL %>./js/ol.js&qu
-
vue-openlayers实现地图坐标弹框效果
本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma
-
openlayers实现地图弹窗
本文实例为大家分享了openlayers实现地图弹窗的具体代码,供大家参考,具体内容如下 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href=
-
OpenLayers3实现对地图的基本操作
本文实例为大家分享了OpenLayers3实现对地图的基本操作代码,供大家参考,具体内容如下 1. 前言 对地图的基本操作就是对地图的放大.缩小.移动.复位和更新等,通过使用OpenLayers 3 框架中操作地图视图(View)的相应方法. 2. 实现思路 (1)新建一个网页,参照前面的文章加载OSM瓦片地图,通过视图设置地图的最大.最小缩放级别以及初试旋转角度,通过使用jQuery以及bootstrap来实现在缩放控件以及旋转控件鼠标悬停提示的效果. (2)在地图容器中新建4个按钮(butt
-
OpenLayers3实现地图显示功能
本文实例为大家分享了OpenLayers3实现地图显示的具体代码,供大家参考,具体内容如下 1.配置开发环境 使用OpenLayers 3开发WebGIS应用,我们首先需要配置开发环境,首先我们需要在openlayers官网获取OpenLayers 3的开发库.下载链接:官网.打开后如图所示: 需要注意的是这里下载有两个版本,①:仅包括开发库(开发与调试的JS库以及CSS文件),②:包括开发库.开发库源码.示例.API等所有开发资源. 在这里我下载了第一个版本,下载后如图所示: 2. 显示一个O
-
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
-
Openlayers实现地图全屏显示
本文实例为大家分享了Openlayers实现地图全屏显示的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个div标签,用来作为地图加载的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"
-
Openlayers绘制地图标注
本文实例为大家分享了Openlayers绘制地图标注的具体代码,供大家参考,具体内容如下 1.标注的简介 标注简单点说就是通过图标.文字等方式将我们想展示的内容显示在地图上,着重突出人们所关注的专题内容,从而为用户提供个性化的地图服务: 2.标注方式 在Openlayers3里面,有两种对地理位置点进行标注的方法,一种是通过创建矢量图层然后设置其样式的方法,还有一种就是创建Overlay覆盖层的方法:对于第一种方式,本质上创建的还是一个矢量对象,只是将其表现形式更换了一下,用Style样式进行包
-
vue使用openlayers创建地图
vue项目中使用openlayers创建地图,供大家参考,具体内容如下 前期准备 安装node环境 安装cnpm 安装vue-cli 以上步骤网上都有很多教程 搭建vue项目 vue create vue-ol 按照提示一步步搭建vue项目 cd vue-ol npm run serve 浏览器打开 http://localhost:8080/ 就可以看到初始化的vue项目页面 vue项目安装openlayers cnpm i ol --s main.js中引入ol.css import 'ol
-
openlayers 3实现车辆轨迹回放
本文实例为大家分享了openlayers 3实现车辆轨迹回放的具体代码,供大家参考,具体内容如下 先上效果: 利用 openlayers 3地图的 postcompose 事件监听地图的重绘 注意:此代码是我在Vue 的methods 里面写的测试方法,并不能直接运行,请在理解的基础上测试. vm 为vue的this对象 注释已经很丰富了,先做个备份,后期会编辑加入一点详解. 实现代码: html: <div id="menu"> <label for="s
-
Vue + OpenLayers 快速入门学习教程
Openlayers 是一个模块化.高性能并且功能丰富的WebGIS客户端的JavaScript包,用于显示地图及空间数据,并与之进行交互,具有灵活的扩展机制. 简单来说,使用 Openlayers(后面简称ol) 可以很灵活自由的做出各种地图和空间数据的展示.而且这个框架是完全免费和开源的. 前言 本文记录 Vue 使用 OpenLayers 入门,使用 OpenLayers 创建地图组件,分别使用 OpenLayers 提供的地图和本地图片做为地图. Overview OpenLayers