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、运行结果

初始化界面

单击缩小按钮，实现地图缩小

单击放大按钮，实现地图放大

单击平移至按钮，地图平移到指定的位置（阜阳附近）

单击地图右上角的箭头按钮，使地图无旋转

单击重置按钮，地图回到初始状态

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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

  • OpenLayers3实现地图显示功能

    本文实例为大家分享了OpenLayers3实现地图显示的具体代码,供大家参考,具体内容如下 1.配置开发环境 使用OpenLayers 3开发WebGIS应用,我们首先需要配置开发环境,首先我们需要在openlayers官网获取OpenLayers 3的开发库.下载链接:官网.打开后如图所示: 需要注意的是这里下载有两个版本,①:仅包括开发库(开发与调试的JS库以及CSS文件),②:包括开发库.开发库源码.示例.API等所有开发资源. 在这里我下载了第一个版本,下载后如图所示: 2. 显示一个O

  • vue-openlayers实现地图坐标弹框效果

    本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

  • OpenLayers3实现地图鹰眼以及地图比例尺的添加

    本文实例为大家分享了OpenLayers3实现地图鹰眼以及地图比例尺的添加的具体代码,供大家参考,具体内容如下 1. 前言 地图鹰眼就是地图的鸟瞰图,就是通常所说的小地图,我们可以通过鹰眼得到当前地图的显示位置,也可以在鹰眼上单击.拖动或移动到想要查看的位置,鹰眼的可见区域比我们所看的主视区的范围要大,鹰眼的中心框就是主视区的可视范围, Openlayers 3 封装的鹰眼控件为 ol.control.OverviewMap ,可以自定义其显示的样式. 2. 实现思路 (1)新建一个网页,并参考

  • OpenLayers3实现对地图的基本操作

    本文实例为大家分享了OpenLayers3实现对地图的基本操作代码,供大家参考,具体内容如下 1. 前言 对地图的基本操作就是对地图的放大.缩小.移动.复位和更新等,通过使用OpenLayers 3 框架中操作地图视图(View)的相应方法. 2. 实现思路 (1)新建一个网页,参照前面的文章加载OSM瓦片地图,通过视图设置地图的最大.最小缩放级别以及初试旋转角度,通过使用jQuery以及bootstrap来实现在缩放控件以及旋转控件鼠标悬停提示的效果. (2)在地图容器中新建4个按钮(butt

  • 使用OpenLayers3 添加地图鼠标右键菜单

    使用OpenLayers3 添加地图鼠标右键菜单

    添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用

  • 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=

  • 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创建地图

    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 快速入门学习教程

    Vue + OpenLayers 快速入门学习教程

    Openlayers 是一个模块化.高性能并且功能丰富的WebGIS客户端的JavaScript包,用于显示地图及空间数据,并与之进行交互,具有灵活的扩展机制. 简单来说,使用 Openlayers(后面简称ol) 可以很灵活自由的做出各种地图和空间数据的展示.而且这个框架是完全免费和开源的. 前言 本文记录 Vue 使用 OpenLayers 入门,使用 OpenLayers 创建地图组件,分别使用 OpenLayers 提供的地图和本地图片做为地图. Overview OpenLayers

随机推荐