全国咨询热线:18720358503

轻松拥有小程序_OpenLayers3完成对地图的根本操作

类别:企业动态 发布时间:2021-01-06 浏览人次:

OpenLayers3实现对地图的基本操作       这篇文章主要为大家详细介绍了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" 单击缩小 /button 
 button id="zoom-in" 单击放大 /button 
 button id="panto" 移动地图 /button 
 button id="restore" 复位地图 /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: [, 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完成对地形图的操作过程 本文关键为大伙儿详尽详细介绍了OpenLayers3完成对地形图的操作过程,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣...

2021-01-06
付款宝发力小程序流程-为何企业会选择自适应网

互连网要我们获得新闻资讯的速率越来越越来越快,而响应式是这两年常常听见的词,也是现阶段比较时兴的网站风格。在诸多网站风格中,响应式能遥遥领先是由于有十分多的优势,...

2021-01-06
广州凡科互联网科技股份有限公司招聘速卖通运

招聘人数:1职位信息1. 运营策略: 会竞对分析,竞品分析,分析、统计、整理数据,制订运营策略;2. 工作计划与安排:将策略落实为工作方案,安排执行并定期检查;3. 店铺建设:店...

2021-01-06
广州凡科互联网科技股份有限公司招聘手表设计

招聘人数:15职位信息1、负责手表产品设计开发,合金手表2、具备潮流触角,创意构思.了解产品发展趋势和市场动态;3、并对品牌概念有一定理解;职位要求:1、大专以上文化,美术、平...

2021-01-06
广州凡科互联网科技股份有限公司招聘质培专员

招聘人数:11职位信息1、负责对质检管理流程的实施,监听司法行政业务录音,进行日常监控与反馈;2、负责制作质检年报/月报/周报/日报,整理年/月/周例会数据;3、负责对特殊时期...

2021-01-06
广州凡科互联网科技股份有限公司招聘业务员

招聘人数:10职位信息1、对销售工作有较高的热情,善于沟通,能快速了解客户心理,并且吃苦耐劳;2、善于学习,对工作认真负责,吃苦耐劳,良好的应变能力和团队协作能力;3、具...

2021-01-06
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信