编程 Javascript

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显示瓦片网格信息的方法

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

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

- Author -

桃李不言_下自成蹊

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

国外大牛IE版本检测！现在IE都到9了，IE检测代码

Jan 04 Javascript

jquery中选择块并改变属性值的方法

Jul 31 Javascript

触屏中的JavaScript事件分析

Feb 06 Javascript

JS实现仿中关村论坛评分后弹出提示效果的方法

Feb 23 Javascript

javascript模拟php函数in_array

Apr 27 Javascript

javascript事件冒泡实例分析

May 13 Javascript

JS实现仿QQ效果的三级竖向菜单

Sep 25 Javascript

socket.io学习教程之深入学习篇（三）

Apr 29 Javascript

JavaScript定义函数_动力节点Java学院整理

Jun 27 Javascript

Vue.js自定义事件的表单输入组件方法

Mar 08 Javascript

基于node搭建服务器,写接口,调接口,跨域的实例

May 13 Javascript

uni-app微信小程序登录授权的实现

May 22 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