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

OpenLayers 获取地图状态

backend 2025/6/22 18:33:36

注：当前使用的是 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.coordinatelngEle.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.coordinatelngEle.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>