❝
注：当前使用的是 ol 5.3.0 版本，天地图使用的
key请到天地图官网申请，并替换为自己的key
地图状态信息包括中心点、当前缩放级别、比例尺以及当前鼠标移动位置信息等，在WebGIS开发中，地图状态可以方便快捷的向用户展示基本地图信息，有利于增强与用户的交互。本节主要介绍地图状态。
1. 获取地图缩放级别
通过监听地图渲染完成事件postrender获取地图缩放级别。
const zoomEle = document.querySelector(".zoomValue")
map.on('postrender', evt => {
const view = map.getView()
zoomEle.textContent = parseInt(view.getZoom())
})
2. 获取地图坐标
通过监听地图鼠标移动事件pointermove获取经纬度坐标，保留六位小数精度。
const lngEle = document.querySelector(".lngValue")
const latEle = document.querySelector(".latValue")
map.on('pointermove', evt => {
const coords = evt.coordinate
lngEle.textContent = coords[0].toFixed(6)
latEle.textContent = coords[1].toFixed(6)
})
3. 获取地图比例尺
在地图中记载比例尺控件获取当前地图比例尺。
const scaleControl = new ol.control.ScaleLine({
units: 'metric', // 'degrees-度', 'imperial-英制单位', 'nautical-海里', 'metric-米', 'us',默认值'metric'
className: 'custome-scale-line',// 自定义css类样式名
// minWidth: 200,// 最小宽度
target: document.querySelector(".custome-scale-line"),// 放置比例尺控件的目标容器
})
map.addControl(scaleControl)
4. 完整代码
其中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>
<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;
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); */
background: linear-gradient(225.55deg, #5f006f 0%, #5b0085 100%);
color: #fff;
}
h2 {
text-align: center;
font-size: 20px;
}
h2 span {
margin: 0 20px;
font-size: 20px;
}
.state {
position: absolute;
bottom: 10px;
line-height: 30px;
background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
color: #fff;
display: flex;
justify-content: space-between;
justify-items: center;
height: 30px;
left: 10%;
right: 10%;
border-radius: 5px;
}
.state-item {
width: 100%;
text-align: center;
font-size: 16px;
font-weight: bold;
}
#custome-scale-line {
position: absolute;
margin: 0 auto;
bottom: 13px;
right: 120px;
width: 200px;
text-align: center;
color: #fff;
border-radius: 5px;
}
.custome-scale-line-inner {
margin: 1px;
color: #eee;
font-size: 14px;
text-align: center;
will-change: contents, width;
}
</style>
</head>
<body>
<div id="map" title="地图显示"></div>
<div id="top-content">
<h2><span>地</span><span>图</span><span>状</span><span>态</span></h2>
</div>
<div class="state">
<div class="state-item zoom-state">
<label for="">缩放级别：</label>
<span class="zoomValue"></span>
</div>
<div class="state-item lnglat-state">
<label for="">经度：</label>
<span class="lngValue"></span>
<label for="">纬度：</label>
<span class="latValue"></span>
</div>
<div class="state-item scale-state">
<label for="">比例尺：</label>
<span class="scaleValue"></span>
</div>
</div>
<div class="custome-scale-line" id="custome-scale-line"></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],
zoom: 5,
worldsWrap: true,
minZoom: 1,
maxZoom: 20,
projection: "EPSG:4326"
}),
layers: [TDTImgLayer, TDTImgCvaLayer],
// 鼠标控件：鼠标在地图上移动时显示坐标信息。
controls: ol.control.defaults().extend([
// 加载鼠标控件
// new ol.control.MousePosition()
])
})
map.on('click', evt => {
console.log(evt.coordinate)
})
const scaleControl = new ol.control.ScaleLine({
units: 'metric', // 'degrees-度', 'imperial-英制单位', 'nautical-海里', 'metric-米', 'us',默认值'metric'
className: 'custome-scale-line',// 自定义css类样式名
// minWidth: 200,// 最小宽度
target: document.querySelector(".custome-scale-line"),// 放置比例尺控件的目标容器
})
map.addControl(scaleControl)
const lngEle = document.querySelector(".lngValue")
const latEle = document.querySelector(".latValue")
map.on('pointermove', evt => {
const coords = evt.coordinate
lngEle.textContent = coords[0].toFixed(6)
latEle.textContent = coords[1].toFixed(6)
})
const zoomEle = document.querySelector(".zoomValue")
map.on('postrender', evt => {
const view = map.getView()
zoomEle.textContent = parseInt(view.getZoom())
})
</script>
❝
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
❝
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !
