OpenLayers 获取地图状态

注：当前使用的是 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文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

    
    
    
    
    
    
    



    

    

        
地图状态
    
    

        

            缩放级别：
            
        
        

            经度：
            
            纬度：
            
        
        

            比例尺：
            
        
    
    

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注 哦 ！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !