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、结果展示

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

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

赞 (0)

相关推荐

  • Openlayers学习之地图比例尺控件

    本文实例为大家分享了Openlayers地图比例尺控件的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建两个div标签,分别用来作为地图和比例尺控件的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&q

  • Openlayers实现地图全屏显示

    本文实例为大家分享了Openlayers实现地图全屏显示的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个div标签,用来作为地图加载的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

  • Openlayers显示地理位置坐标的方法

    本文实例为大家分享了Openlayers显示地理位置坐标的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建两个div标签,分别用来作为地图和鼠标位置控件的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type

  • Openlayers实现地图的基本操作

    本文实例为大家分享了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="C

  • OpenLayers3实现地图鹰眼以及地图比例尺的添加

    本文实例为大家分享了OpenLayers3实现地图鹰眼以及地图比例尺的添加的具体代码,供大家参考,具体内容如下 1. 前言 地图鹰眼就是地图的鸟瞰图,就是通常所说的小地图,我们可以通过鹰眼得到当前地图的显示位置,也可以在鹰眼上单击.拖动或移动到想要查看的位置,鹰眼的可见区域比我们所看的主视区的范围要大,鹰眼的中心框就是主视区的可视范围, Openlayers 3 封装的鹰眼控件为 ol.control.OverviewMap ,可以自定义其显示的样式. 2. 实现思路 (1)新建一个网页,并参考

  • 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

  • JSP实现简单的用户登录并显示出用户信息的方法

    本文实例讲述了JSP实现简单的用户登录并显示出用户信息的方法.分享给大家供大家参考.具体实现方法如下: login.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  <%  String path = request.getContextPath();  String basePath = request.

  • C++实现显示MP3文件信息的方法

    本文实例讲述了C++实现显示MP3文件信息的方法.分享给大家供大家参考.具体实现方法如下: /** * This is small example how to use libZPlay library to play files. * This example is using OpenFile functions to open disk files and play. */ #define WIN32_LEAN_AND_MEAN #include <windows.h> #include

  • IIS7.5 显示详细错误信息的方法

    IIS7.5 显示详细错误信息的方法

    使用Win7/Win2008/R2操作系统的用户在不断增加,Win7下测试程序时,如果程序出 错,IIS7会提示HTTP Error 500 - Internal Server Error (500 - 内部服务器错误) 的简单错误信息.这些简单信息对应用户来说比较友好,但是却使开发测试人员不清楚具体明确的错误信息.该如何让Win7下显示详细的错误信息呢?可以通过 配置IIS7 以输出详细错误信息. 通过 IIS 配置 1.打开IIS管理器,或按住 WIN + R 打开命令行输入 inetmgr

  • ecshop 订单确认中显示省市地址信息的方法

    先添加显示这些信息: 1.修改lib_order.php文件的get_consignee函数(1798行) 添加如下代码在return前面: 复制代码 代码如下: $sql = "select region_name from ".$GLOBALS['ecs']->table('region') . " where region_id in(".$arr['country'].",".$arr['province'].",&quo

  • Android开发之使用通知栏显示提醒信息的方法

    本文实例讲述了Android开发之使用通知栏显示提醒信息的方法.分享给大家供大家参考,具体如下: 用通知栏来提醒 public void notifyKJ() { //获得通知管理器,通知是一项系统服务 NotificationManager manager = (NotificationManager) context.getSystemService(context.NOTIFICATION_SERVICE); //初始化通知对象 p1:通知的图标 p2:通知的状态栏显示的提示 p3:通知显

  • PyQt4编程之让状态栏显示信息的方法

    赶快记录一下,只是懂皮毛,或许多积累就好了 import sys from PyQt4 import QtGui class MainWindow(QtGui.QMainWindow): def __init__(self): QtGui.QMainWindow.__init__(self) self.resize(250,150) self.setWindowTitle('statusbar') self.statusBar().showMessage('Ready',) #调用statusB

  • element-ui循环显示radio控件信息的方法

    如下所示: <el-form-item label="线路类型:" prop="isGive"> <el-radio-group v-model="currentLine.isGive"> <el-radio :label="item.id" :key="item.id" v-for="item in isGive" >{{item.name}}<

  • Vue利用openlayers实现点击弹窗的方法详解

    目录 解释 编写弹窗 引入 openlayer使用弹窗组件 点击事件 这个写的稍微简单一点就行了,其实呢,这个不是很难,主要是知道原理就可以了. 我想实现的内容是什么意思呢?就是说页面上有很多坐标点,点击坐标点的时候在相应的位置弹出一个框,然后框里显示出这个坐标点的相关数据. 解释 这个内容的其实就是添加一个弹窗图层,然后在点击的时候让他显示出来罢了. 编写弹窗 首先一点,我们这个弹窗需要自己写一下,具体的样式,展示的内容之类的,所以说写一个弹窗组件,然后在openlayer文件中引用加载. 比

随机推荐