当前位置：首页 > news >正文

OpenLayers 地图定位

news 来源：原创 2025/6/7 8:34:52

注：当前使用的是 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>