OpenLayers 创建坐标系统

关注我,带你一起学GIS ^

注:当前使用的是 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表示定义坐标信息。

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

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

2. 定义坐标系统

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

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代码来表示坐标系。例如地理坐标系WGS84EPGG代码为43262000国家大地坐标系的EPGG代码为4490。而在ArcGIS API for JS中用wkid(well-known ID)表示,如wkid:4326

4. 使用坐标系

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

// 默认坐标系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. 完整代码

/**
 * @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

https://epsg.io/#google_vignette

Spatial Reference List

https://spatialreference.org/ref/

**WKID参考:**

坐标系

地址

Geographic coordinate systems

https://developers.arcgis.com/rest/services-reference/enterprise/35635b7d4d5d1d067e9c5a81171e9d04/gcs_PDF_11.3.pdf

Projected coordinate systems

https://developers.arcgis.com/rest/services-reference/enterprise/bb671c02b392638ef66fab209ee9c711/pcs_PDF_11.3.pdf

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之路公众号已经接入了智能助手,欢迎大家前来提问。

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

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

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

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部