openlayer中的投影，坐标转换

openlayer默认是3857投影坐标系 

 3857平面坐标转4326经纬度：toLonLat([471983.45, 3490990.75])

4326经纬度转3857平面坐标：fromLonLat([104.704968, 31.540962])

 

在线预览：

WebGIS之家WebGIS之家,openlayers示例源码，cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生https://www.webgishome.com/preview?id=52&example_name=coordinateTransform&title=%E5%9D%90%E6%A0%87%E8%BD%AC%E6%8D%A2

3857 、fromLonLat（）

<template>
  <div id="map"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

import { transformExtent, fromLonLat ,toLonLat} from "ol/proj";

export default {
  data() {
    return {};
  },
  mounted() {
    new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:3857", //使用这个坐标系
        center: [471983.45, 3490990.75], //西南科技大学
        //center: fromLonLat([104.704968, 31.540962])
        zoom: 3
      })
    });
  }
};
</script>
 
<style>
#map {
  height: 90vh;
  width: 100vw;
}
</style>

4326、toLonLat()

<template>
  <div id="map"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

import { transformExtent, fromLonLat ,toLonLat} from "ol/proj";

export default {
  data() {
    return {};
  },
  mounted() {
    new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326", //使用这个坐标系
        center: [104.704968, 31.540962], //西南科技大学
        //center: toLonLat([471983.45, 3490990.75])
        zoom: 3
      })
    });
  }
};
</script>
 
<style>
#map {
  height: 90vh;
  width: 100vw;
}
</style>

wgs84经纬度坐标（4326）转为伪墨卡托投影平面坐标（3857）、 transform（）

<template>
  <div id="map"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

import { transformExtent, fromLonLat ,toLonLat,transform} from "ol/proj";

export default {
  data() {
    return {};
  },
  mounted() {
    new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:3857", //使用这个坐标系
        center: transform([104.704968, 31.540962], "EPSG:4326", "EPSG:3857"), //西南科技大学

        zoom: 3
      })
    });
  }
};
</script>
 
<style>
#map {
  height: 90vh;
  width: 100vw;
}
</style>

自定义投影为4544，proj4 

由于openlayer中默认只有4326和3857两种投影，其他的投影不能直接用，需要自己定义

首先要用下载proj4。（当然也可以直接在线引入：<script type="text/javascript" src="https://cdn.bootcss.com/proj4js/2.5.0/proj4.js"></script>）

下载：

cnpm i -S proj4

然后在页面中引入：

import { register } from "ol/proj/proj4";
import proj4 from "proj4";
import { transform } from "ol/proj";

接着定义投影，并注册

至于4544投影信息的查看，可见：CGCS2000 / 3-degree Gauss-Kruger CM 105E - EPSG:4544，想要那个投影，就把链接最后的epsg代码替换即可

proj4.defs(
      "EPSG:4544",
      "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"
    );
    register(proj4);

最后使用transform函数转换即可

最终代码如下：

<template>
  <div id="map"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

import { register } from "ol/proj/proj4";
import proj4 from "proj4";
import { transform } from "ol/proj";

export default {
  data() {
    return {};
  },
  mounted() {
    proj4.defs(
      "EPSG:4544",
      "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"
    );
    register(proj4);

    new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4544", //使用这个坐标系
        center: transform([104.704968, 31.540962], "EPSG:4326", "EPSG:4544"), //西南科技大学
        zoom: 3
      })
    });
  }
};
</script>
 
<style>
#map {
  height: 90vh;
  width: 100vw;
}
</style>

效果图

transformExtent（）

主要是将extent属性（是一个数组）中的所有值转换

 extent: transformExtent(
            [
              73.4412841796875,
              18.159912109375,
              135.0869140625,
              53.5618896484375
            ],
            "EPSG:4326",
            "EPSG:3857"
          ),

这个表示将4326转为3857