当前位置：首页 > ai >正文

OpenLayers 加载网格信息

ai 2025/7/22 1:17:19

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

为了解决地图数据加载慢，特别是在加载大数据影像图层时，通常会选择创建影像金字塔，也就是分层分级模式。对于瓦片地图，也是按照金字塔模式，由行列号、级数组成，每一层都包含对应级数的切片。为了在瓦片地图中显示切片信息，可以使用TileDebug网格类实现。

本节主要介绍加载网格数据。

1. 实现方式

ol.layer.Tile类创建切片图层
ol.source.TileDebuge类创建网格数据源

const tileGridLayer = new ol.layer.Tile({source: new ol.source.TileDebug({projection: projection,// 定义EPSG:3857坐标系tileGrid: TDTImgLayer.getSource().getTileGrid() // 获取切片网格信息})
})
map.addLayer(tileGridLayer)

2. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>显示网格信息</title><meta charset="utf-8" /><script src="../libs/js/ol-5.3.3.js"></script><script src="../libs/js/jquery-2.1.1.min.js"></script><script src="../libs/js/mapbox-streets-v6-style.js"></script><link rel="stylesheet" href="../libs/css//ol.css"><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;width: 100%;height: 100%;}.ol-mouse-position {padding: 5px;top: 10px;height: 40px;line-height: 40px;background: #060505ba;text-align: center;color: #fff;border-radius: 5px;}</style>
</head><body><div id="map" title="地图显示"></div>
</body></html><script>//地图投影坐标系const projection = ol.proj.get('EPSG:3857');//==============================================================================////============================天地图服务参数简单介绍==============================////================================vec：矢量图层==================================////================================img：影像图层==================================////================================cva：注记图层==================================////======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================////==============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地图影像图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const TDTImgCvaLayer = new ol.layer.Tile({title: "天地图影像注记图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [11444274, 12707441],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,projection: projection}),// 鼠标控件：鼠标在地图上移动时显示坐标信息。controls: ol.control.defaults().extend([// 加载鼠标控件new ol.control.MousePosition()])})map.addLayer(TDTImgLayer)map.addLayer(TDTImgCvaLayer)const tileGridLayer = new ol.layer.Tile({source: new ol.source.TileDebug({projection:projection,tileGrid:TDTImgLayer.getSource().getTileGrid()})})map.addLayer(tileGridLayer)
</script>