OpenLayers3实现对地图的基本操作

网络编程 2024/11/17 佚名

3 1 2

本文实例为大家分享了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="/UploadFiles/2021-04-02/ol.js">

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,地图

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“OpenLayers3实现对地图的基本操作”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

OpenLayers3实现对地图的基本操作

OpenLayers实现图层切换控件

vue中实现弹出层动画效果的示例代码

评论“OpenLayers3实现对地图的基本操作”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接