参考文献
1.OpenLayers自定义坐标系
2.openlayers官网示例:Single Image WMS with Proj4js
openlayers中默认支持的坐标系为
EPSG:4326
和EPSG:3857
,除此外的坐标需自定义,如常见的CGCS2000
坐标系中的EPSG:4490
,本文以EPSG:4490
为例,进行自定义坐标,主要用到proj4.defs
方法。
查找坐标系定义 http://epsg.io/
1.查找4490
,如图所示:
2.点击查询的结果
3.下拉界面,找到proj4js,将结果复制
方式一:引入js
- 在
index.html
中引入proj4js
引入proj4.js文件 在线资源地址
<script src="https://cdn.bootcss.com/proj4js/2.6.0/proj4-src.js"></script>
- 自定义坐标系
将上述查询到的坐标系结果复制使用
let proj4490 = proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
var map = new Map({
target: 'map',
view: new View({
//minZoom: 7,
maxZoom: 15,
center: this.center,
zoom: this.zoom,
projection: proj4490
})
});
方式二:import的形式
- 下载proj4js
npm install proj4
- 引入proj4
import { register } from 'ol/proj/proj4';
import proj4 from 'proj4';
import Projection from 'ol/proj/Projection';
- 自定义坐标
definedProjection() {
proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
register(proj4);
var projection = new Projection({
code: 'EPSG:4490',
extent: [107.66615218883604, 16.780085439091835, 113.39113536886373, 20.948901121306612]
});
return projection;
}
- map中使用
let proj4490 = this.definedProjection();
var map = new Map({
target: 'map',
view: new View({
//minZoom: 7,
maxZoom: 15,
center: this.center,
zoom: this.zoom,
projection: proj4490
})
});