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

OpenLayers 地图投影转换

backend 2025/6/28 2:17:05

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

在OpenLayers中默认具有两种坐标系，一种是经纬度坐标系EPSG:4326,另一种是投影坐标系EPSG:3857。创建Web地图时，需要确定所使用的坐标系，以便统一加载。在地图中加载图层时，对于具有不同坐标系的图层需要进行坐标转换，不然无法叠加到一起。本节主要介绍加载地图投影转换。

1. 转换介绍

OpenLayers中提供了Projection类设置地图地图坐标系，此类可以结合Proj4地图投影库进行使用。其中，ol.proj.transform用于对坐标进行转换。

2. 定义投影

使用proj4.defs定义投影，其中投影参数可以在[https://epsg.io/](https://epsg.io/)查看。第一个参数为EPSG CODE，如WGS84坐标系为"EPSG:4326"，第二个参数从网站上查看。

// 定义投影
proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' +'+b=6371000 +units=m +no_defs');

注册投影参数并实现Projection类。

// 注册投影参数
ol.proj.proj4.register(proj4)const sphereMollweideProjection = new ol.proj.Projection({code: 'ESRI:53009', //编号extent: [-9009954.605703328, -9009954.605703328, 9009954.605703328, 9009954.605703328], //范围worldExtent: [-179, -90, 179, 90] //世界经纬度范围
});

3. 创建参考线

通过ol.Graticule类创建椭球参考线。

// 参考系标线
const graticule = new ol.Graticule({map: transformMap
})

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><script src="../libs/proj4.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%;}#map1 {position: absolute;left: 0;width: 48%;height: 100%;}#map2 {position: absolute;left: 50%;width: 48%;height: 100%;}.crs-tip {position: absolute;top: 20px;background-color: #000000ab;padding: 5px;border-radius: 5px;color: #fff;}.map-left {left: 25%;transform: translateX(-25%);}.map-right {left: 75%;transform: translateX(-25%);}</style>
</head><body><div id="map1" title="地图显示"></div><div id="map2" title="地图显示"></div><div class="crs-tip map-left">投影坐标系【EPSG:3857】</div><div class="crs-tip map-right">投影坐标系【ESRI:53009】</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 map1 = new ol.Map({target: "map1",loadTilesWhileInteracting: true,view: new ol.View({center: [11421771, 4288300],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,projection: projection})})map1.addLayer(TDTImgLayer)map1.addLayer(TDTImgCvaLayer)const vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({url: '../data/geojson/countries.geojson',format: new ol.format.GeoJSON()})})map1.addLayer(vectorLayer)// 定义投影proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' +'+b=6371000 +units=m +no_defs');ol.proj.proj4.register(proj4)const sphereMollweideProjection = new ol.proj.Projection({code: 'ESRI:53009', //编号extent: [-9009954.605703328, -9009954.605703328, 9009954.605703328, 9009954.605703328], //范围worldExtent: [-179, -90, 179, 90] //世界经纬度范围});// 投影转换const transformMap = new ol.Map({target: 'map2',layers: [TDTImgLayer,new ol.layer.Vector({source: new ol.source.Vector({url: "../data/geojson/countries.geojson",format: new ol.format.GeoJSON()})})],view: new ol.View({center: [11421771, 4288300],zoom: 5,projection: sphereMollweideProjection})})// 参考系标线const graticule = new ol.Graticule({map: transformMap})
</script>