openlayers6【五】自定义坐标系

1. 前言

openlayer默认只提供了EPSG:4326和EPSG:3857这两种坐标系，在实际的生产环境中我们往往需要自定义坐标系。

2. EPSG查找坐标系信息

目前坐标系基本都是有EPSG来维护的,点击epsg.io进入官网,查找需要定的坐标系,以下以EPSG:3395(极地坐标系-南极)为例

进入链接: epsg.io,输入查询的坐标系,如图所示

进入详情页,找到坐标系Projected bounds、Proj4js、WGS84 bounds选项对应的信息(推荐 turf.js 地图操作的类库,相交 包含等操作)

3. 定义作坐标系

openlayer6版本以下

已经拿到坐标系数据,下面创建坐标系实例,代码如下:

// 自定义坐标系
var projection_3395 = new ol.proj.Projection({
    code: 'EPSG:3395',
    extent:[-20026376.39,-15496570.74,20026376.39,18764656.23],
    units: 'm',
    axisOrientation: 'neu'
    getPointResolution(r) {//这个函数非常关键，如果不提供将会导致地图显示比例尺非常大 return r; }
});

proj4.defs("EPSG:3395","+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs");

注意 如果自定义坐标系统无getPointResolution函数，比例尺显示可能会如下：

自定义坐标系统中加入getPointResolution函数，比例尺显示正常：

openlayer6版本及以上

proj4.defs("EPSG:3395","+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs");

4. 添加proj4 转换方法

openlayer6版本以下

// 引入
npm i proj4
// 结合proj4在ol3中自定义坐标系,以4326为例(3857同理)
ol.proj.addProjection(projection_3395);
ol.proj.addCoordinateTransforms("EPSG:4326", "EPSG:3395",
    function(coordinate) {
        return proj4("EPSG:4326","EPSG:3395",coordinate);
    },
    function(coordinate) {
        return proj4("EPSG:3395","EPSG:4326",coordinate);;
    }
);
ol.proj.addCoordinateTransforms("EPSG:3857", "EPSG:3395",
    function(coordinate) {
        return proj4("EPSG:3857","EPSG:3395",coordinate);
    },
    function(coordinate) {
        return proj4("EPSG:3395","EPSG:3857",coordinate);;
    }
);

验证转换一个坐标,如果输出正常,祝贺你自定义坐标系成功

ol.proj.transform([118,32],'EPSG:4326','EPSG:3031');

openlayer6版本及以上

import { fromLonLat, transform } from 'ol/proj';
import { register } from 'ol/proj/proj4';

proj4.defs("EPSG:3395","+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs");

register(proj4);

验证转换一个坐标,如果输出正常,祝贺你自定义坐标系成功

ol.proj.transform([118,32],'EPSG:4326','EPSG:3395');

也可设置当前投影下的显示范围

const proj3395 = getProjection("EPSG:3395"); 
proj4526.setExtent([-50000, 50000, -1910, 1910]);

在view中引入

view: new View({ 
    projection: "EPSG:3395", 
    center: [],//中心点 
    zoom: 1, 
}),

注意事项

1.map实例设定对应的坐标系后,moveend 返回的coordinate做了转换,不必进行二次转换;