❝
注：当前使用的是 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>
❝
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
❝
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !
