开源

基于openlayers6实现自定义坐标系图层加载

2020-03-06  本文已影响0人  初见_JS

参考文献
1.OpenLayers自定义坐标系
2.openlayers官网示例:Single Image WMS with Proj4js

openlayers中默认支持的坐标系为EPSG:4326EPSG:3857,除此外的坐标需自定义,如常见的CGCS2000坐标系中的EPSG:4490,本文以EPSG:4490为例,进行自定义坐标,主要用到proj4.defs方法。

查找坐标系定义 http://epsg.io/

1.查找4490,如图所示:

1.png
2.点击查询的结果
2.png
3.下拉界面,找到proj4js,将结果复制
3.png

方式一:引入js

引入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的形式

npm install 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;
    }
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
        })
    });
上一篇下一篇

猜你喜欢

热点阅读