2021-10-09 openlayers 使用CGCS2000坐标系

1. 开发过程使用的地图服务是超图iserver发布的底图服务，前端使用VUE开发调用地图服务

安装使用到的包

npm install @supermap/iclient-ol
npm install proj4

2. 导入，注册

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

import proj4 from 'proj4';

import { fromLonLat, addProjection, Projection } from 'ol/proj';

import { getWidth, getCenter } from 'ol/extent';

import TileGrid from 'ol/tilegrid/TileGrid';

3. 开发

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

register(proj4);

const EPSG = 'EPSG:4490';

      const projection = new Projection({

        code: EPSG,//EPSG code

        extent: [-180, -90, 180, 90],

        worldExtent: [-180, -90, 180, 90],

        units: "degrees"//Projection units: `'degrees'`, `'ft'`, `'m'`, `'pixels'`, `'tile-pixels'` or `'us-ft'.

      });

      addProjection(projection);

      var projectionExtent = projection.getExtent();

      var size = getWidth(projectionExtent) / 256;

      var resolutions = new Array(18);

      for (var z = 1; z < 19; ++z) {

        resolutions[z] = size / Math.pow(2, z);

      }

      // console.log(resolutions);

      this.map = new Map({

        target: 'map',

        controls: defaults({ attribution: false, zoom: true, rotate: false, collapsed: false }),

        view: new View({

          zoom: 8,

          minZoom: 6,

          maxZoom: 18,

          multiWorld: true,

          projection: projection,

          // extent: [113, 36.1, 119, 42.5],//设置河北省的显示范围

          extent: [-180, -85.05, 180, 85.05],

          center: fromLonLat(centerid, projection) // 显示的中心位置

        })

      });

      const layers = new TileLayer({

        source: new TileSuperMapRest({

          url: url, // supermap iserver 上发布的地图服务，此为使用restful调用

          wrapX: true,

          tileGrid: new TileGrid({

            // extent: [113, 36.1, 119, 42.5],//设置显示范围

            extent: [-180, -85.05, 180, 85.05],

            resolutions: resolutions,

            tileSize: [256, 256]

          })

        }),

        projection: projection,

        opacity: 0.8

      });

      this.map.addLayer(layers);