Vue+Openlayers 访问geoserver坐标系转换

Openlayers帮我们定义的投影坐标系projection只有EPSG:4326、EPSG:3857这两种参数,加入要引用其他的参数，则会报错。

newMap() {
      var container = this.$refs.map;
      this.layer = new Image({
        source: new ImageWMS({
          ratio: 1, //设置为 1
          url: "http://localhost:8080/geoserver/test/wms",
          params: {
            LAYERS: "test:demo",
            STYLES: "",
            VERSION: "1.1.1",
            FORMAT: "image/png",
            CRS: "EPSG:4490", //原数据是EPSG:4527的，通过openlayers转换为4490
          },
          serverType: "geoserver",
        }),
      });
      this.map = new Map({
        target: container,
        layers: [this.layer],
        view: new View({
          center: [39666666.0044, 3716666.444499994],
          zoom: 10,
          projection:'EPSG:4490' //采用 4490 坐标系显示
        }),
      });
    }

如果使用 EPSG:4490 这个openlayers未定义的参数，会报错:

报null值错误，也就是说明 openlayers并没有给我们定义 EPSG:4490 这个参数值。接下来我们自己定义这个参数,使用 proj4.js，我们通过proj4.defs()方法定义一个参数，然后使用register(proj4)就能够向其注册，但是自定义的投影坐标系必须在EPSG.io: Coordinate Systems Worldwide可以找到的才有效。

 按照他给参数进行定义:

proj4要先下载：npm i proj4。然后才能导入

proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs');
register(proj4);

 还要记得改center 。转换坐标

center: [104.19500000,35.13000000],

最后完整代码

<template>
  <div id="map" style="height: 500px; width: 500px" ref="map"></div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import ImageWMS from "ol/source/ImageWMS";
import Image from "ol/layer/Image";
import proj4 from 'proj4'
import {register} from 'ol/proj/proj4';
export default {
  name: "showMap",
  data() {
    return {
      map: null,
      layer: null,
    };
  },
  mounted() {
    this.newMap();
  },
  methods: {
    //创建地图
    newMap() {
      proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs');
      register(proj4);
      var container = this.$refs.map;
      this.layer = new Image({
        source: new ImageWMS({
          ratio: 1, //设置为 1
          url: "http://localhost:8080/geoserver/test/wms",
          params: {
            LAYERS: "test:demo",
            STYLES: "",
            VERSION: "1.1.1",
            FORMAT: "image/png",
            CRS: "EPSG:4490", //原数据是EPSG:4527的，通过openlayers转换为4490
          },
          serverType: "geoserver",
        }),
      });
      this.map = new Map({
        target: container,
        layers: [this.layer],
        view: new View({
          center: [104.19500000,35.13000000],
          zoom: 10,
          projection:'EPSG:4490' //采用 4490 坐标系显示
        }),
      });
    }

    
  },
};
</script>
<style>
</style>

然后就能出图了。

最后介绍一下EPSG:4527、EPSG:4490。这是我自己的理解，如果有兴趣可以去查看中国大地坐标系2000。4527名称：高斯大地坐标系_中国2000_39带3_北2，将中国划分为很多块 ，他是其中一块，之所以坐标x、y那么大，是因为单位时米。而4490则是经纬度。