OpenLayers 地图投影转换

❝

注：当前使用的是 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"，第二个参数从网站上查看。

arduino 复制代码

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

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

arduino 复制代码

// 注册投影参数
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类创建椭球参考线。

arduino 复制代码

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

4. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

xml 复制代码

<!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开发 相关内容，欢迎关注 !