OpenLayers 地图定位

OpenLayers, WebGIS | 作者： |
阅读 6

^ 关注我，带你一起学GIS ^

❝

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

地图定位功能很常见，在移动端和PC端都需要经常用到，像百度、高德、谷歌都提供了方便快捷的定位功能。OpenLayers中也提供了定位的接口，通过ol.Geolocation即可实现地图定位功能。虽然OpenaLayers提供了定位类，但是在PC上的定位效果并不是很完善。本节主要介绍加载地图地图定位。

1. 创建定位导航对象

在导航定位类中设置最终参数。

// 创建定位导航对象
const geolocation = new ol.Geolocation({
    projection: map.getView().getProjection(),
    tracking: true,  // 开启定位追踪
    trackingOptions: {
        maximumAge: 10000,
        enableHighAccuracy: true, // 是否开启高精度
        timeout: 600000 // 最大等待时间，微秒
    }
})

2. 监听位置事件

当位置信息改变时，更新导航数据。在定位过程中，监听定位错误事件，输出错误信息。

// 添加定位change事件
geolocation.on('change', evt => {
    $('#accuracy').text(geolocation.getAccuracy() + ' [m]');
    $('#altitude').text(geolocation.getAltitude() + ' [m]');
    $('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');
    $('#heading').text(geolocation.getHeading() + ' [rad]');
    $('#speed').text(geolocation.getSpeed() + ' [m/s]');
})

// 定位错误处理事件
geolocation.on('error', error => {
    console.error("定位错误：", error.message)
})

// 定位导航事件位置变更处理
geolocation.on('change:position', () => {
    const coordinates = geolocation.getPosition()
    positionPoint.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null)
})

3. 地图定位

通过获取地图中心点进行定位，并更新中心点坐标。

const lonInput = document.querySelector(".lon-input")
const latInput = document.querySelector(".lat-input")
document.querySelector(".map-center").addEventListener('click', evt => {
    const center = map.getView().getCenter()
    lonInput.value = center[0]
    latInput.value = center[1]
})

根据地图中心点坐标跳转到定位位置。

document.querySelector(".navigator-location").addEventListener('click', evt => {
    if (lonInput.value && latInput.value) {
        removeLayerByName("centerPoint")
        const center = [+lonInput.value, +latInput.value]
        map.getView().animate({ center: center, zoom: 15 })
        const point = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point(center)
                    })
                ]
            }),
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 5,
                    fill: new ol.style.Fill({
                        color: 'red'
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'red'
                    })
                })
            })
        })
        point.setProperties({ layerName: 'centerPoint' })
        map.addLayer(point)
    }
})

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%;
        }

        #lcoation {
            position: absolute;
            width: 100%;
            height: 50px;
            background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
            color: #fff;
        }

        .map-location {
            position: absolute;
            top: 50%;
            left: 63%;
            transform: translateY(-50%);
            border-radius: 5px;
            border: 1px solid #50505040;
            padding: 5px 20px;
            color: #fff;
            margin: 0 10px;
            background: #377d466e;
        }

        .map-location:hover {
            cursor: pointer;
            filter: brightness(120%);
            background: linear-gradient(135deg, #c850c0, #4158d0);
            transition-delay: .25s;
        }

        .active {
            background: linear-gradient(135deg, #c850c0, #4158d0);
        }

        .navigator {
            position: absolute;
            line-height: 50px;
            left: 55%;
        }

        .navigator-location {
            border-radius: 5px;
            border: 1px solid #50505040;
            padding: 5px 20px;
            color: #fff;
            margin: 0 10px;
            background: #377d466e;
        }

        .navigator-location:hover {
            cursor: pointer;
            filter: brightness(120%);
            background: linear-gradient(135deg, #c850c0, #4158d0);
            transition-delay: .25s;
        }

        .view-center {
            position: absolute;
            line-height: 50px;
            left: 20%;
        }

        .view-center span {
            border-radius: 5px;
            border: 1px solid #50505040;
            padding: 5px 20px;
            color: #fff;
            margin: 0 10px;
            background: #377d466e;
        }

        .view-center span:hover {
            cursor: pointer;
            filter: brightness(120%);
            background: linear-gradient(135deg, #c850c0, #4158d0);
            transition-delay: .25s;
        }

        input[type='text'] {
            padding: 0 10px;
            height: 25px;
            border: none;
            border-radius: 2.5px;
        }

        input[type='text']:focus-visible {
            outline: 2px solid #8BC34A;
        }

        #location-info {
            position: absolute;
            padding: 10px;
            right: 20px;
            top: 70px;
            background-color: #0028657a;
            border-radius: 2.5px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="map" title="地图显示"></div>
    <div id="lcoation">
        <button type="button" class="map-location">地图定位</button>
    </div>
    <div class="view-center">
        <span class="map-center">获取地图中心点</span>
        <input type="text" value="" class="lon-input">
        <input type="text" value="" class="lat-input">
    </div>
    <div class="navigator">
        <button type="button" class="navigator-location">导航定位</button>
    </div>
    <div id="location-info">
        <div id="container">
            <p>位置精度: <code id="accuracy"></code></p>
            <p>海拔高度: <code id="altitude"></code></p>
            <p>海拔精度: <code id="altitudeAccuracy"></code></p>
            <p>航向: <code id="heading"></code></p>
            <p>速度: <code id="speed"></code></p>
        </div>
    </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: [11421771, 4288300],
            // center: [102.6914059817791, 25.10595662891865],
            center: [104.0635986160487, 30.660919181071225],
            zoom: 10,
            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 geolocation = new ol.Geolocation({
        projection: map.getView().getProjection(),
        tracking: true,  // 开启定位追踪
        trackingOptions: {
            maximumAge: 10000,
            enableHighAccuracy: true, // 是否开启高精度
            timeout: 600000 // 最大等待时间，微秒
        }
    })

    // 添加定位change事件
    geolocation.on('change', evt => {
        $('#accuracy').text(geolocation.getAccuracy() + ' [m]');
        $('#altitude').text(geolocation.getAltitude() + ' [m]');
        $('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');
        $('#heading').text(geolocation.getHeading() + ' [rad]');
        $('#speed').text(geolocation.getSpeed() + ' [m/s]');
    })

    // 定位错误处理事件
    geolocation.on('error', error => {
        console.error("定位错误：", error.message)
    })

    // 精确模式定位
    const accuracyFeature = new ol.Feature()
    geolocation.on("change:accuracyGeometry", () => {
        accuracyFeature.setGeometry(geolocation.getAccuracyGeometry())
    })

    // 定位点要素
    const positionPoint = new ol.Feature({
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: "yellow"
                }),
                stroke: new ol.style.Stroke({
                    color: "#blue",
                    width: 2
                })
            })
        })
    })
    // 定位导航事件位置变更处理
    geolocation.on('change:position', () => {
        const coordinates = geolocation.getPosition()
        positionPoint.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null)
    })

    //创建定位点矢量图层（featuresOverlay）
    const features = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [accuracyFeature, positionPoint]
        })
    });
    features.setProperties({ layerName: "locationLayer" })
    map.addLayer(features)

    // 定位按钮事件
    document.querySelector('.map-location').addEventListener('click', evt => {
        // 若添加了图层，则移除
        // removeLayerByName("locationLayer")
        // 启动位置跟踪
        geolocation.setTracking(true)
        navigator.geolocation.getCurrentPosition(function (position) {
            console.log(position)
            const coordinate = [position.coords.longitude, position.coords.latitude]

            map.getView().animate({ center: coordinate, zoom: 15 })
        })

    })

    const lonInput = document.querySelector(".lon-input")
    const latInput = document.querySelector(".lat-input")
    document.querySelector(".map-center").addEventListener('click', evt => {
        const center = map.getView().getCenter()
        lonInput.value = center[0]
        latInput.value = center[1]
    })

    document.querySelector(".navigator-location").addEventListener('click', evt => {
        if (lonInput.value && latInput.value) {
            removeLayerByName("centerPoint")
            const center = [+lonInput.value, +latInput.value]
            map.getView().animate({ center: center, zoom: 15 })
            const point = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [
                        new ol.Feature({
                            geometry: new ol.geom.Point(center)
                        })
                    ]
                }),
                style: new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 5,
                        fill: new ol.style.Fill({
                            color: 'red'
                        }),
                        stroke: new ol.style.Stroke({
                            color: 'red'
                        })
                    })
                })
            })
            point.setProperties({ layerName: 'centerPoint' })
            map.addLayer(point)
        }
    })

    function removeLayerByName(layerName) {
        const layers = map.getLayers().getArray()
        layers.forEach(layer => {
            if (layer.get('layerName') === layerName) map.removeLayer(layer)
        });
    }

</script>

❝

OpenLayers示例数据下载，请在公众号后台回复：ol数据

全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试

❝

GIS之路公众号已经接入了智能助手，欢迎大家前来提问。

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

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

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

相关文章

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部