脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Openlayers显示瓦片网格信息

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

 更新时间：2020年09月28日 11:50:14   作者：桃李不言_下自成蹊  
这篇文章主要为大家详细介绍了Openlayers显示瓦片网格信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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、结果展示

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS获取网页图片name属性的方法

    JS获取网页图片name属性的方法

    这篇文章主要介绍了JS获取网页图片name属性的方法,涉及javascript操作图片属性的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • javascript中 try catch用法

    javascript中 try catch用法

    JS try catch语句一般在什么情况下使用？是必须使用的吗？下面就让小编来给大家介绍一下试用心得。
    2015-08-08
  • js 学习笔记（三）

    js 学习笔记（三）

    JavaScript的对象基础 本篇主要讲解本地对象Array的各种方法。
    2009-12-12
  • 简单实现JS对dom操作封装

    简单实现JS对dom操作封装

    这篇文章主要介绍了简单实现JS对dom操作封装，需要的朋友可以参考下
    2015-12-12
  • babel插件去除console示例详解

    babel插件去除console示例详解

    这篇文章主要为大家介绍了babel插件去除console示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • javascript页面渲染速度测试脚本分享

    javascript页面渲染速度测试脚本分享

    这篇文章主要介绍了javascript页面渲染速度测试脚本,计算浏览器渲染HTML页面所需要的时间,需要的朋友可以参考下
    2014-04-04
  • 详解Javascript动态操作CSS

    详解Javascript动态操作CSS

    本文我们会讨论如何通过 JavaScript 在运行时操作 CSS，从而动态地更新应用到我们的元素上的式样。本文所用的技术是我们已经看到过的，但在利用 CSS DOM 来进行操作的时候还需要注意几个特殊点。
    2014-12-12
  • HTML长文本截取含有HTML代码同样适用的两种方法

    HTML长文本截取含有HTML代码同样适用的两种方法

    正如标题所言我们可以使用CSS截断字符串：IE,FireFox，Opera ，Safari都兼容也可以使用js截取，具体实现如下，希望对大家有所帮助
    2013-07-07
  • JavaScript正则表达式小结(test|match|search|replace|split|exec)

    JavaScript正则表达式小结(test|match|search|replace|split|exec)

    这篇文章主要介绍了JavaScript正则表达式小结(test|match|search|replace|split|exec)的相关资料，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2016-12-12
  • 在JavaScript中获取请求的URL参数[正则]

    在JavaScript中获取请求的URL参数[正则]

    在ASP.NET后台代码中，对于这样的URL请求地址：http://www.abc.com?id=001,我们可以通过Request.QueryString["id"]的方法很容易的获取到URL中请求的参数的值，但是要在前台js代码中获取请求的参数的值，应该怎么做呢？
    2010-12-12

最新评论