openlayer中的投影

openlayer默认是3857投影坐标系 

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

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

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

总结

以上是生活随笔为你收集整理的openlayer中的投影的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。