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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
JSON stringify方法原理及实例解析
Oct 23 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
神族 Protoss 历史背景
2020/03/14 星际争霸
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
Python求解平方根的方法
2015/03/11 Python
Python pass详细介绍及实例代码
2016/11/24 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
微信营销策划方案
2014/02/24 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL