OpenLayers加载高德瓦片与GCJ02坐标转换实战（08）

OpenLayers加载高德瓦片高德坐标最简单的地图集成方案如果你的数据来自高德地图API底图也用高德瓦片那恭喜你——这是所有地图集成方案里最简单的一种。坐标不用偏移、瓦片不用封装只需要做一次投影转换。这篇文章把完整实现和正反转换公式都整理清楚了。先说结论高德坐标GCJ02 高德瓦片只需要一步转换GCJ02经纬度 → EPSG:3857墨卡托手写公式10行搞定不需要任何第三方库。一、为什么这是最简单的场景要素坐标系说明数据GCJ02高德API返回的坐标底图GCJ02高德瓦片OpenLayersEPSG:3857需要投影转换数据和底图都是GCJ02不需要处理坐标偏移只做一次投影。对比其他方案场景转换步骤复杂度高德高德1步简单百度高德2步手写中等百度百度1步中等瓦片特殊百度天地图2步简单二、正反转换公式正向GCJ02 → EPSG:3857constgcj02ToMercator(coord){constR6378137constlngcoord[0]*Math.PI/180constlatcoord[1]*Math.PI/180constxR*lngconstyR*Math.log(Math.tan(Math.PI/4lat/2))return[x,y]}反向EPSG:3857 → GCJ02点击地图获取坐标时用constmercatorToGCJ02(coord){constR6378137constxcoord[0]constycoord[1]constlng(x/R)*180/Math.PIconstlat(2*Math.atan(Math.exp(y/R))-Math.PI/2)*180/Math.PIreturn[lng,lat]}验证constoriginal[116.411299,39.908054]constmercatorgcj02ToMercator(original)constbackmercatorToGCJ02(mercator)console.log(original[0].toFixed(6)back[0].toFixed(6))// trueconsole.log(original[1].toFixed(6)back[1].toFixed(6))// true精度说明手写公式是球体墨卡托和OpenLayers内置的fromLonLat椭球体有几米偏差。北京地区约3-5米瓦片地图场景完全够用。三、完整Vue3组件template div classwh100 refolMapRef/div /template script setup import {ref, onMounted} from vue import Map from ol/Map import View from ol/View import TileLayer from ol/layer/Tile import VectorLayer from ol/layer/Vector; import VectorSource from ol/source/Vector; import {GeoJSON} from ol/format; import {Circle as CircleStyle, Fill, Stroke, Style} from ol/style; import XYZ from ol/source/XYZ; // GCJ02经纬度 → WebMercator(EPSG:3857) const gcj02ToMercator (coord) { const R 6378137 const lng coord[0] * Math.PI / 180 const lat coord[1] * Math.PI / 180 const x R * lng const y R * Math.log(Math.tan(Math.PI / 4 lat / 2)) return [x, y] } // WebMercator(EPSG:3857) → GCJ02经纬度 const mercatorToGCJ02 (coord) { const R 6378137 const x coord[0] const y coord[1] const lng (x / R) * 180 / Math.PI const lat (2 * Math.atan(Math.exp(y / R)) - Math.PI / 2) * 180 / Math.PI return [lng, lat] } const olMapRef ref(null) onMounted(() { const center gcj02ToMercator([116.411299, 39.908054]) const map new Map({ target: olMapRef.value, layers: [ new TileLayer({ source: new XYZ({ url: http://webrd0{1-4}.is.autonavi.com/appmaptile?langzh_cnsize1scale1style8x{x}y{y}z{z}, tileSize: 256, crossOrigin: anonymous }) }) ], view: new View({ center: center, zoom: 10, projection: EPSG:3857 }) }) // 添加点验证 let geoJsonData { type: FeatureCollection, features: [{ type: Feature, id: 1, properties: { name: , level: 10, zIndex: 200 }, geometry: { type: Point, coordinates: center } }] } const layer new VectorLayer({ source: new VectorSource({ features: new GeoJSON({}).readFeatures(geoJsonData) }) }) layer.setStyle(new Style({ image: new CircleStyle({ radius: 5, fill: new Fill({ color: #ff0000 }), stroke: new Stroke({ color: #ff0000, width: 3 }) }), })) map.addLayer(layer) }) /script四、点击获取高德坐标在实际项目中经常需要点击地图获取高德坐标用于业务map.on(click,(e){// e.coordinate 是 EPSG:3857 墨卡托坐标constgcj02mercatorToGCJ02(e.coordinate)console.log(高德坐标经度${gcj02[0].toFixed(6)}, 纬度${gcj02[1].toFixed(6)})})五、全场景转换速查表源坐标底图转换方式GCJ02高德gcj02ToMercator1步BD09高德BD09 → GCJ02gcj02ToMercator2步BD09百度BD09 → BD09MCgcoord直接转BD09天地图BD09 → EPSG:4326 → EPSG:3857更新日期2026年8月调试版本OpenLayers 10.9.0