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

OpenLayers 加载格网和经纬网

news 来源：原创 2025/6/13 10:28:58

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

网格信息用于显示切片级数、行列号，在加载大数据量切片地图时非常有用，可以用于标识切片位置。经纬网在地图制图中经常出现，通过经度和纬度标识地理范围。

1. 加载格网

加载格网相对简单，之前的文章中介绍过。主要由TileDebug和Tile类实现。其中TileDebug类为数据源，可以设置投影、切片网格和显示结构等参数，Tile切片类主要用装载TileDebug数据源。

const TileSource = new ol.source.TileDebug({projection: map.getView().getProjection(),// tileGrid: new ol.tilegrid.TileGrid({// }),wrapX: false,template: '(x,y,z)({x},{y},{z})' // 显示结构
})
const gridLayer = new ol.layer.Tile({source: TileSource
})

2. 加载经纬网

在OpenLayers中加载经纬网也不困难，主要由Graticule类实现。可以设置最大线条数量、经纬线样式和文字标注样式等，参数很多，就不一一列举了。

const graticule = new ol.layer.Graticule({maxLines: 200, // 设置最大线条数量strokeStyle: new ol.style.Stroke({lineDash: [5], // 设置虚线间隔width: 1.5, // 设置线段宽度color: 'rgba(255,204,102, 0.85)' // 设置线段颜色}),showLabels: true,wrapX: false,
})

3. 完整代码

其中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/jquery-2.1.1.min.js"></script><script src="../../js/ol9.2.4.js"></script><link rel="stylesheet" href="../../css/ol9.2.4.css"><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;top: 50px;bottom: 0;width: 100%;}#top-content {position: absolute;width: 100%;height: 50px;line-height: 50px;background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);color: #fff;text-align: center;}.grid-btn {border-radius: 5px;border: 1px solid #50505040;padding: 5px 20px;color: #fff;margin: 0 10px;background: #377d466e;transition: background-color 10s ease-in-out 10s;text-align: center;font-size: 16px;font-weight: bold;}.grid-btn:hover {cursor: pointer;filter: brightness(120%);background: linear-gradient(135deg, #c850c0, #4158d0);}.active {background: linear-gradient(135deg, #c850c0, #4158d0);}</style>
</head><body><div id="map" title="地图显示"></div><div id="top-content"><button class="grid-btn grid-line">添加格网</button><button class="grid-btn lnglat-line">添加经纬网</button></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_w&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_w&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: [104.0635986160487, 30.660919181071225],// center: [11444274, 12707441],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,projection: "EPSG:4326"}),layers: [TDTImgLayer, TDTImgCvaLayer],// 地图默认控件controls: ol.control.defaults.defaults({zoom: true,attribution: true,rotate: true})})map.on('click', evt => {console.log(evt.coordinate)})const TileSource = new ol.source.TileDebug({projection: map.getView().getProjection(),// tileGrid: new ol.tilegrid.TileGrid({// }),wrapX: false,template: '(x,y,z)({x},{y},{z})' // 显示结构})const gridLayer = new ol.layer.Tile({source: TileSource})const graticule = new ol.layer.Graticule({maxLines: 200, // 设置最大线条数量strokeStyle: new ol.style.Stroke({lineDash: [5], // 设置虚线间隔width: 1.5, // 设置线段宽度color: 'rgba(255,204,102, 0.85)' // 设置线段颜色}),showLabels: true,wrapX: false,})/*** 添加格网*/document.querySelector('.grid-line').addEventListener('click', evt => {toogleAciveClass(evt.target)removeLayer()map.addLayer(gridLayer)})/*** 添加经纬网*/document.querySelector('.lnglat-line').addEventListener('click', evt => {toogleAciveClass(evt.target)removeLayer()map.addLayer(graticule)})/*** 移除图层*/function removeLayer() {map.removeLayer(gridLayer)map.removeLayer(graticule)}/*** 切换激活样式*/function toogleAciveClass(target) {// 判断top-content子元素是否激活，并切换激活样式const swipeBtnLike = document.querySelector('#top-content')for (let element of swipeBtnLike.children) {if (target === element) {target.classList.add('active')} else {element.classList.remove('active')}}}</script>