Openlayers实现地图的基本操作


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了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="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、运行结果

初始化界面

Openlayers实现地图的基本操作

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

Openlayers实现地图的基本操作

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

Openlayers实现地图的基本操作

单击平移至按钮,地图平移到指定的位置(阜阳附近)

Openlayers实现地图的基本操作

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

Openlayers实现地图的基本操作

Openlayers实现地图的基本操作

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

Openlayers实现地图的基本操作

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
javascript xml为数据源的下拉框控件
Jul 07 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 #Javascript
基于openlayers实现角度测量功能
Sep 28 #Javascript
OpenLayer学习之自定义测量控件
Sep 28 #Javascript
Vue中父子组件的值传递与方法传递
Sep 28 #Javascript
JSONObject与JSONArray使用方法解析
Sep 28 #Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 #Javascript
Openlayers实现距离面积测量
Sep 28 #Javascript
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
详解Vue.js分发之作用域槽
2017/06/13 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
Python 3中的yield from语法详解
2017/01/18 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
在python中bool函数的取值方法
2018/11/01 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
史上最全面的Java面试题汇总!
2015/02/03 面试题
师范毕业生个人求职信
2013/12/09 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
中学运动会广播稿
2014/01/19 职场文书
学生会干部自荐信
2014/02/04 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
Redis入门教程详解
2021/08/30 Redis
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS