保存点击鼠标之后获取的经纬度数据

原创已于 2023-01-19 18:52:57 修改 · 316 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

于 2019-12-25 18:05:09 首次发布

openlayers相关操作专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用OpenLayers库实现地图上鼠标经纬度显示及绘图功能的HTML页面。通过JavaScript实现了鼠标点击绘制点并显示坐标，同时提供了地图基本控制，如缩放和平移等。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>鼠标经纬度</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css"
          type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <style>
        .map {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
<div>
    <table>
        <tr>
            <td>经度：</td>
            <td><input type="text" id="longitude" name="longitude" value="106.62802894"/></td>
            <td>纬度：</td>
            <td> <input type="text" id="latitude" name="latitude" value="26.62201124"/></td>
        </tr>
    </table>
</div>
<div style="background-color: #999;"><span>当前绘制线的坐标：</span><span id='points'></span></div>
<input type="hidden" id="textValue">
<div id="map" class="map"></div>
<div id="mouse-position"></div>
<button id="ButtonOK" type="button">确 定</button>
<script type="text/javascript">
    var longitude = document.getElementById('longitude').value;
    var latitude = document.getElementById('latitude').value;
    document.getElementById('ButtonOK').onclick=function () {
        alert(document.getElementById('points').innerHTML)
    }
    var map = new ol.Map({
        controls: ol.control.defaults().extend([
            new ol.control.FullScreen(),
            new ol.control.OverviewMap(),
            new ol.control.ScaleLine(),
            new ol.control.ZoomSlider(),
            new ol.control.ZoomToExtent()
        ]),
        layers:[
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        view: new ol.View({
            center: new ol.proj.transform(
                [longitude, latitude], 'EPSG:4326', 'EPSG:3857'),
            zoom: 10
        })
    });

    // 添加一个绘制的线使用的layer
    var lineLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                size: 1
            })
        })
    })
    map.addLayer(lineLayer);
    var lineDraw = new ol.interaction.Draw({
        type: 'Point',
        source: lineLayer.getSource(),    // 注意设置source，这样绘制好的线，就会添加到这个source里
        style: new ol.style.Style({            // 设置绘制时的样式
            stroke: new ol.style.Stroke({
                color: '#009933',
                size: 4
            })
        }),
        maxPoints: 1    // 限制不超过2个点
    });

    // 监听线绘制结束事件，获取坐标
    lineDraw.on('drawend', function(event){
        // event.feature 就是当前绘制完成的线的Feature

        document.getElementById('points').innerHTML = JSON.stringify(event.feature.getGeometry().getCoordinates());
        document.getElementById('textValue').innerText = JSON.stringify(event.feature.getGeometry().getCoordinates());
    });
    map.addInteraction(lineDraw);
    map.addControl(new ol.control.MousePosition({coordinateFormat: ol.coordinate.createStringXY(8),projection: 'EPSG:4326'}));

</script>
</body>
</html>