OpenLayers鼠标位置控件

最新推荐文章于 2023-10-18 16:19:08 发布

冰雪为融

最新推荐文章于 2023-10-18 16:19:08 发布

阅读量1.2k

点赞数

分类专栏： OpenLayers

原文链接：https://blog.csdn.net/qq_35732147/article/details/84988943

版权

OpenLayers 专栏收录该内容

20 篇文章 8 订阅

订阅专栏

一、示例简介

使用鼠标位置控件（ol/control/MousePosition）来动态显示地图上鼠标光标的坐标

并且可以由用户调整投影和坐标精度。

示例图如下所示：

二、代码详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mouse Position</title>
    <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
</head>
<body>
    <div id="map"></div>
    <div id="mouse-position"></div>
    <form>
        <label>Projection</label>
        <select id="projection">
            <option value="EPSG:4326">EPSG:4326</option>
            <option value="EPSG:3857">EPSG:3857</option>
        </select>
        <label>Precision</label>
        <input id="precision" type="number" min="0" max="12" value="4" />
    </form>
 
    <script>
        // 创建MousePosition控件
        var mousePositionControl = new ol.control.MousePosition({   
            coordinateFormat: ol.coordinate.createStringXY(4),      // 将坐标保留4位小数位，并转换为字符串
            projection: 'EPSG:4326',                                // 定义投影
            className: 'custom-mouse-position',                     // 控件的CSS类名
            target: document.getElementById('mouse-position'),      // 将控件渲染在该DOM元素中
            undefinedHTML: '&nbsp;'                                 // 鼠标离开地图时，显示空格
        });
 
        var map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults().extend([mousePositionControl]),  // 将鼠标位置控件加入到地图默认控件中
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()     // 加入Open Street Map图层
                })
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
 
        var projectionSelect = document.getElementById("projection");   // 选取投影的控件
        projectionSelect.addEventListener('change', function(event){
            // 使mousePositionControl控件的投影与选取投影控件选取的投影一致
            mousePositionControl.setProjection(event.target.value);    
        });
        
        var precisionInput = document.getElementById('precision');
        precisionInput.addEventListener('change', function(event){
            // 设置mousePositionControl控件的坐标格式
            var format = ol.coordinate.createStringXY(event.target.valueAsNumber);
            mousePositionControl.setCoordinateFormat(format);
        });
    </script>
</body>
</html>

冰雪为融

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
OpenLayers鼠标位置控件

一、示例简介使用鼠标位置控件（ol/control/MousePosition）来动态显示地图上鼠标光标的坐标并且可以由用户调整投影和坐标精度。二、代码详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n...
复制链接

扫一扫

专栏目录