openlayer默認(rèn)是3857投影坐標(biāo)系?

?3857平面坐標(biāo)轉(zhuǎn)4326經(jīng)緯度：toLonLat([471983.45,?3490990.75])

4326經(jīng)緯度轉(zhuǎn)3857平面坐標(biāo)：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", //使用這個(gè)坐標(biāo)系center: [471983.45, 3490990.75], //西南科技大學(xué)//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", //使用這個(gè)坐標(biāo)系center: [104.704968, 31.540962], //西南科技大學(xué)//center: toLonLat([471983.45, 3490990.75])zoom: 3})});} }; </script><style> #map {height: 90vh;width: 100vw; } </style>

wgs84經(jīng)緯度坐標(biāo)（4326）轉(zhuǎn)為偽墨卡托投影平面坐標(biāo)（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", //使用這個(gè)坐標(biāo)系center: transform([104.704968, 31.540962], "EPSG:4326", "EPSG:3857"), //西南科技大學(xué)zoom: 3})});} }; </script><style> #map {height: 90vh;width: 100vw; } </style>

自定義投影為4544，proj4?

由于openlayer中默認(rèn)只有4326和3857兩種投影，其他的投影不能直接用，需要自己定義

首先要用下載proj4。（當(dāng)然也可以直接在線引入：<script type="text/javascript" src="https://cdn.bootcss.com/proj4js/2.5.0/proj4.js"></script>）

下載：

cnpm i -S proj4

然后在頁(yè)面中引入：

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

接著定義投影，并注冊(cè)

至于4544投影信息的查看，可見(jiàn)：CGCS2000 / 3-degree Gauss-Kruger CM 105E - EPSG:4544，想要那個(gè)投影，就把鏈接最后的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函數(shù)轉(zhuǎn)換即可

最終代碼如下：

<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", //使用這個(gè)坐標(biāo)系center: transform([104.704968, 31.540962], "EPSG:4326", "EPSG:4544"), //西南科技大學(xué)zoom: 3})});} }; </script><style> #map {height: 90vh;width: 100vw; } </style>

效果圖

transformExtent（）

主要是將extent屬性（是一個(gè)數(shù)組）中的所有值轉(zhuǎn)換

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

這個(gè)表示將4326轉(zhuǎn)為3857

總結(jié)

以上是生活随笔為你收集整理的openlayer中的投影的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。