Openlayers显示瓦片网格信息的方法


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了Openlayers显示瓦片网格信息的具体代码,供大家参考,具体内容如下

1、新建一个html页面,引入ol.js文件,然后在body中创建一个div标签,用来作为地图加载的容器;

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>
 <script type="text/javascript">
 window.onload = function () {
  //实例化OSM图层数据源对象
  var osmSource = new ol.source.OSM();
  //实例化地图对象
  var map = new ol.Map({
  //目标容器
  target: 'map',
  //图层
  layers: [
   //加载OSM瓦片图层
   new ol.layer.Tile({
   //OSM数据源
   source:osmSource
   }),
   //加载瓦片网格图层
   new ol.layer.Tile({
   //瓦片网格数据源
   source: new ol.source.TileDebug({
    //投影
    projection: 'EPSG:3857',
    //获取瓦片网格信息
    tileGrid:osmSource.getTileGrid()
   })
   })
  ],
  //实例化视图对象
  view: new ol.View({
   //视图中心
   center: [12000000, 3000000],
   //视图缩放等级
   zoom:10
  })
  });
 };
 </script>
</head>
<body>
 <div id="map"></div>
</body>
</html>

3、结果展示

地图加载完毕后会在页面中看见每张瓦片的网格信息,每张瓦片上都有三个参数,这三个参数分别表示地图的缩放级别、行号和列号

Openlayers显示瓦片网格信息的方法

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

Javascript 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
javascript中new关键字详解
Dec 14 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
Openlayers实现地图全屏显示
Sep 28 #Javascript
Openlayers学习之加载鹰眼控件
Sep 28 #Javascript
Openlayers显示地理位置坐标的方法
Sep 28 #Javascript
Openlayers学习之地图比例尺控件
Sep 28 #Javascript
Openlayers实现地图的基本操作
Sep 28 #Javascript
TypeScript 运行时类型检查补充工具
Sep 28 #Javascript
基于openlayers实现角度测量功能
Sep 28 #Javascript
You might like
PHP IE中下载附件问题解决方法
2014/01/07 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
php查询ip所在地的方法
2014/12/05 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
Django验证码的生成与使用示例
2017/05/20 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
Python 多进程和数据传递的理解
2017/10/09 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Python实现微信好友的数据分析
2019/12/16 Python
python3下pygame如何实现显示中文
2020/01/11 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
印尼网上商店:Alfacart.com
2019/03/11 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
酒店总经理工作职责
2013/12/13 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
新年联欢会主持词
2014/03/27 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python