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中的投影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。