^ 关注我，带你一起学GIS ^
注：当前使用的是 ol [9.2.4] 版本，天地图使用的key请到天地图官网申请，并替换为自己的key
前言
❝在GIS投影中，Sphere Mollweide 是一种等面积伪圆柱投影（Equal-area Pseudocylindrical Projection），通常用于全球地图的展示，能够保持面积比例的正确性。要创建与 Sphere Mollweide 坐标系相同的球面格网效果，可以使用 OpenLayers 支持的 EPSG:53008（Sinusoidal投影）或通过自定义投影实现。
1. 投影介绍
Sphere Mollweide投影类型为等面积伪圆柱投影，椭球体编号EPSG为：53009，可以直接在 OpenLayers 中使用。Sinusoidal投影类型为等面积伪圆柱投影，椭球体编号EPSG为：53008，可以直接在 OpenLayers 中使用。
这两种投影方式的特点为纬线为相互平行的直线，经线为凹向中间经线的曲线。适用于全球地图展示，尤其是赤道附近等面积需求较高的场景。
2. 创建投影
使用proj4.defs定义投影类型，之后使用ol.proj.proj4.register(proj4)注册投影信息。在GIS开发中，如何自定义投影可参考之前的文章：OpenLayers 创建投影系统
// Sinusoidal 投影
// proj4.defs("ESRI:53008", "+proj=sinu +lon_0=0 +x_0=0 +y_0=0 +R=6371000 +units=m +no_defs +type=crs");
// ol.proj.proj4.register(proj4)
// const sphereMollweideProjection = new ol.proj.Projection({
// code: "ESRI:53008",
// extent: [
// -20015086.8, -10007543.4,
// 20015086.8, 10007543.4
// ],
// worldExtent: [-180, -90, 180, 90],
// })
// Sphere Mollweide 投影
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: [
-18019909.21177587, -9009954.605703328, 18019909.21177587,
9009954.605703328,
],
worldExtent: [-179, -89.99, 179, 89.99],
});
3. 添加经纬网图层
在添加经纬网图层前，视图投影必须同时定义范围和世界范围。使用strokeStyle属性设置经纬线的颜色和宽度，showLabels属性设置为true可以开启经度和纬度标注。
new ol.layer.Graticule({
strokeStyle: new ol.style.Stroke({
color: 'rgba(255,255,0,1)',
width: 1.5
}),
wrapX: false,
showLabels: true
})
4. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OpenLayers 创建 Sphere Mollweide 地图与经纬网图层</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../libs/css/ol9.2.4.css">
<script src="../../libs/js/proj4.js"></script>
<script src="../../js/config.js"></script>
<script src="../../libs/js/ol9.2.4.js"></script>
<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%;
}
#top-content {
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
color: #fff;
text-align: center;
font-size: 32px;
}
#top-content span {
font-size: 32px;
}
</style>
</head>
<body>
<div id="top-content">
<span>OpenLayers 创建 Sphere Mollweide 地图与经纬网图层</span>
</div>
<div id="map" title=""></div>
</body>
</html>
<script>
// Sinusoidal Projection
// proj4.defs("ESRI:53008", "+proj=sinu +lon_0=0 +x_0=0 +y_0=0 +R=6371000 +units=m +no_defs +type=crs");
// ol.proj.proj4.register(proj4)
// const sphereMollweideProjection = new ol.proj.Projection({
// code: "ESRI:53008",
// extent: [
// -20015086.8, -10007543.4,
// 20015086.8, 10007543.4
// ],
// worldExtent: [-180, -90, 180, 90],
// })
// Sphere Mollweide Projection
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: [
-18019909.21177587, -9009954.605703328, 18019909.21177587,
9009954.605703328,
],
worldExtent: [-180, -90, 180, 90],
});
//==============================================================================//
//============================天地图服务参数简单介绍==============================//
//================================vec：矢量图层==================================//
//================================img：影像图层==================================//
//================================cva：注记图层==================================//
//======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//
//==============================================================================//
const TDTVecLayer = new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
attibutions: "天地图矢量描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const map = new ol.Map({
target: "map",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [0, 0],
zoom: 2,
worldsWrap: false,
minZoom: 1,
maxZoom: 20,
projection: sphereMollweideProjection,
}),
layers: [
TDTVecLayer,
new ol.layer.Graticule({
strokeStyle: new ol.style.Stroke({
color: 'rgba(255,255,0,1)',
width: 1.5
}),
wrapX: false,
showLabels: true,
})
],
// 地图默认控件
controls: ol.control.defaults.defaults({
zoom: false,
attribution: false,
rotate: false
})
})
</script>
❝
OpenLayers示例数据下载，请在公众号后台回复：ol数据
全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试
❝
GIS之路公众号已经接入了智能助手，欢迎大家前来提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏+关注 哦！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 
