OpenLayers鼠标位置控件

太过爱你忘了你带给我的痛 2023-07-17 15:56 16阅读 0赞

### **一、示例简介** ###

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

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

示例图如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

### 二、代码详解 ###

<!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: ' '                                 // 鼠标离开地图时，显示空格
            });
     
            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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20230528/252d814857e84ffcb4635585806f4772.png