OpenLayers 创建坐标系统

❝

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

在WebGIS系统开发中，坐标系统是重中之重，对于创建的地图，加载的图层，首先要确定的就是坐标系。在OpenLayers或者其他地图开发库中，一般默认支持EPSG:4326地理坐标系和EPSG:3857投影坐标系，而在生产实践中，要求使用EPSG:4490（CGCS2000），也就是2000国家大地坐标系，所以我们需要借助投影库自定义2000坐标系。

1. Proj4投影库介绍

下载地址：[http://proj4js.org/](http://proj4js.org/)在系统中调用**proj4.defs**方法定义坐标信息，proj4具有两种定义方式，可以传入一个简单对象，也可以传入一个数组对象，对于坐标信息需要传入两个参数，sysName表示坐标系名称，如"EPSG:4490"，sysDef表示定义坐标信息。

csharp 复制代码

// 方式1
proj4.defs(sysName, sysDef)

// 方式2
proj4.defs([
  [sysName, sysDef],
  [sysName, sysDef]
])

2. 定义坐标系统

在定义坐标系统之前需要知道坐标信息，从[https://epsg.io/](https://epsg.io/)可以查看对应坐标系统定义信息。下面以定义4490坐标系为例。在OpenLayers中使用proj4定义坐标系后，需要调用register方法注册坐标系，然后使用投影类Projection声明坐标系。

php 复制代码

const def = '+proj=longlat +ellps=GRS80 +no_defs'
proj4.defs('EPSG:4490', def)
register(proj4)
return new Projection({
  code: "EPSG:4490",
  units: 'degrees'
})

**register**说明大意就是要使proj4中定义的投影（使用proj4.def()）在OpenLayers中可用。需要proj4的版本大于等于2.8.0。并且每当对proj4注册表进行更改时，如在调用proj4.def()之后，都应该调用register函数。此函数不会修改现有变换。具体信息见官网：[https://openlayers.org/en/v9.2.4/apidoc/module-ol_proj_proj4.html](https://openlayers.org/en/v9.2.4/apidoc/module-ol_proj_proj4.html)

3. EPSG代码

在坐标系统中，每一个坐标系都有一个编号，就和名字用来标识人一样，在坐标系统中用EPSG代码来表示坐标系。例如地理坐标系WGS84的EPGG代码为4326，2000国家大地坐标系的EPGG代码为4490。而在ArcGIS API for JS中用wkid(well-known ID)表示，如wkid:4326。

4. 使用坐标系

在OpenLayers中，使用View类定义整个视图的坐标系，对于默认坐标系，只需要使用"EPSG:EPSG_CODE"即可，对于自定义坐标系，设置Projection对象。

php 复制代码

// 默认坐标系3857
view: new ol.View({
  center: [116.403414, 39.904091],
  zoom: 5,
  worldsWrap: false,
  minZoom: 1,
  maxZoom: 20,
  projection: 'EPSG:3857',
}),

// 自定义坐标系4490
const EPSG4490 = new Projection({
  code: "EPSG:4490",
  units: 'degrees'
})  
view: new ol.View({
  center: [116.403414, 39.904091],
  zoom: 5,
  worldsWrap: false,
  minZoom: 1,
  maxZoom: 20,
  projection: EPSG4490,
}),

5. 完整代码

javascript 复制代码

/**
 * @description:坐标应用系统
 * @author: noone
 * @time: 
 **/

import { register } from 'ol/proj/proj4';
import proj4 from 'proj4';
import Projection from 'ol/proj/Projection';

const EPSG4326 = new Projection({
  code: "EPSG:4326",
  units: 'degrees'
})

const getEPSG4490 = () => {
  const def = '+proj=longlat +ellps=GRS80 +no_defs'
  proj4.defs('EPSG:4490', def)
  register(proj4)
  return new Projection({
    code: "EPSG:4490",
    units: 'degrees'
  })
}

const getEPSG3857 = () => {
  const def = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'
  proj4.defs('EPSG:3857', def)
  register(proj4)
  return new Projection({
    code: "EPSG:3857",
    units: 'm'
  })
}
const getEPSG4522 = () => {
  const def = '+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs'
  proj4.defs('EPSG:4522', def)
  register(proj4)
  return new Projection({
    code: "EPSG:4522",
    units: 'm'
  })
}
const EPSG3857 = getEPSG3857()
const EPSG4490 = getEPSG4490()
const EPSG4522 = getEPSG4522()
export default {
  EPSG4326,
  EPSG4490,
  EPSG3857,
  EPSG4522
}

6. 参考资料

投影库： http://proj4js.org/坐标信息参考：

名称	地址
EPSG	epsg.io/#google_vig...
Spatial Reference List	spatialreference.org/ref/

WKID参考：

坐标系	地址
Geographic coordinate systems	developers.arcgis.com/rest/servic...
Projected coordinate systems	developers.arcgis.com/rest/servic...

javascript 复制代码

import { register } from 'ol/proj/proj4';
import proj4 from 'proj4';
import Projection from 'ol/proj/Projection';
/**
 * @description:坐标应用系统
 * @author: zyc
 * @time: 2022-09-01
 **/

const EPSG4326 = new Projection({
  code: "EPSG:4326",
  units: 'degrees',
  extent: [], // 投影坐标范围
  worldExtent: [] // 世界经纬度范围
})

const getEPSG4490 = () => {
  const def = '+proj=longlat +ellps=GRS80 +no_defs'
  proj4.defs('EPSG:4490', def)
  register(proj4)
  return new Projection({
    code: "EPSG:4490",
    units: 'degrees',
    extent: [73.62,16.7,134.77,53.56], // 投影坐标范围
    worldExtent: [-180,-90,180,90] // 世界经纬度范围
  })
}

const getEPSG3857 = () => {
  const def = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'
  proj4.defs('EPSG:3857', def)
  register(proj4)
  return new Projection({
    code: "EPSG:3857",
    units: 'm',
    extent: [], // 投影坐标范围
    worldExtent: [] // 世界经纬度范围
  })
}
const getEPSG4522 = () => {
  const def = '+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs'
  proj4.defs('EPSG:4522', def)
  register(proj4)
  return new Projection({
    code: "EPSG:4522",
    units: 'm',
    extent: [34344166.57,2337470.19,34655833.43,4729373.22], // 投影坐标范围
    worldExtent: [100.5,21.13,103.5,42.69] // 世界经纬度范围
  })
}
const EPSG3857 = getEPSG3857()
const EPSG4490 = getEPSG4490()
const EPSG4522 = getEPSG4522()
export default {
  4326: EPSG4326,
  4490: EPSG4490,
  3857: EPSG3857,
  4522: EPSG4522
}

❝

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
❝

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS ：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注哦！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !