^ 关注我，带你一起学GIS ^
❝
注：当前使用的是 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>
❝
OpenLayers示例数据下载，请在公众号后台回复：ol数据
全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试
❝
GIS之路公众号已经接入了智能助手，欢迎大家前来提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏+关注 哦！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 
