Cenas
Use Openlayers em Vue para carregar o TileWMS publicado pela Geoserver:
Use Openlayers no Vue para carregar o TileWMS lançado pela Geoserver - programador procurado
Com base no acima, a conversão de dados de coordenadas em diferentes sistemas de coordenadas é realizada.
O sistema de coordenadas padrão no Openlayers é EPSG:900913
EPSG:900913 é equivalente a EPSG:3857
Pode ser verificado no site oficial da EPSG
Se os dados de coordenadas forem obtidos de outros sistemas de sistema de coordenadas, a conversão do sistema de coordenadas é necessária no Openlayers.
Observação:
Blog:
https://blog.csdn.net/badao_liumang_qizhi
concluir
1. Converta entre EPSG:4326 e EPSG:3857 em openlayers
openlayer suporta a conversão entre as coordenadas 3857 e 4326 por padrão
módulo de importação
import {transform} from 'ol/proj'alcançar a conversão
//EPSG:90013转换成EPSG:4326
var coorTo4326 = transform([987777.93778,213834.81024], 'EPSG:3857', 'EPSG:4326')
console.log("EPSG:90013转换成EPSG:4326为");
console.log(coorTo4326);
var coorTo3857 = transform(coorTo4326, 'EPSG:4326', 'EPSG:3857')
console.log("EPSG:4326转换成EPSG:3857为");
console.log(coorTo3857);Tome uma coordenada EPSG:900913/EPSG:3857. Realize a conversão mútua com EPSG:4326.
O resultado da conversão pode ser comparado e verificado em epsg.io
Transformar coordenadas - Conversor GPS online
2. Mas se você precisar converter outros sistemas de coordenadas, como converter para 2334, receberá um erro se usá-lo diretamente
//EPSG:90013转换成EPSG:4326
var coorTo4326 = transform([987777.93778,213834.81024], 'EPSG:3857', 'EPSG:4326')
console.log("EPSG:90013转换成EPSG:4326为");
console.log(coorTo4326);
var coorTo3857 = transform(coorTo4326, 'EPSG:4326', 'EPSG:3857')
console.log("EPSG:4326转换成EPSG:3857为");
console.log(coorTo3857);
//无法用ol直接转换
// var coorTo2334 = transform(coorTo4326, 'EPSG:4326', 'EPSG:2334')
// console.log("EPSG:4326转换成EPSG:2334为");
// console.log(coorTo2334);
Neste momento, você precisa usar proj4.js
3. Use proj4 no Vue para realizar a conversão de coordenadas
proj4
O PROJ é um software de transformação de coordenadas de uso geral que converte coordenadas geoespaciais de um sistema de referência de coordenadas (CRS) para outro.
Isso inclui projeções cartográficas e transformações geodésicas. PROJ é lançado sob a licença de código aberto X/MIT
O PROJ inclui aplicativos de linha de comando para converter facilmente coordenadas de arquivos de texto ou diretamente da entrada do usuário. Além dos utilitários de linha de comando,
O PROJ também expõe uma interface de programação de aplicativos, ou API, para abreviar. Esta API permite aos desenvolvedores utilizar as funções do PROJ em seu próprio software,
Em vez de ter que implementar uma funcionalidade semelhante você mesmo.
O PROJ era originalmente um aplicativo puramente cartográfico, permitindo aos usuários converter coordenadas geodésicas em coordenadas projetadas usando muitas projeções cartográficas diferentes.
Com o passar dos anos, à medida que a necessidade se tornou mais aparente, o suporte para a conversão de dados também foi lentamente incorporado ao PROJ.
Hoje, o PROJ suporta mais de cem projeções de mapas diferentes e pode usar transformações de coordenadas entre todas, exceto as técnicas geodésicas mais obscuras.
projeto
PROJ — PROJ 9.2.0 documentação
GitHub - OSGeo/PROJ: PROJ - Biblioteca de Projeções Cartográficas e Transformações de Coordenadas
proj4js
Proj4js é uma biblioteca JavaScript para converter coordenadas de ponto de um sistema de coordenadas para outro,
Inclui conversão de dados. Originalmente uma porta de PROJ (então chamada de PROJ.4) e GTCCP C (Arquivo), que faz parte do grupo de projetos MetaCRS.
npm instalar proj4
npm install proj4 --savemódulo de importação
import proj4 from 'proj4'
import {register} from 'ol/proj/proj4';Registre-se e use
proj4.defs("EPSG:2334","+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=20500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs ");
register(proj4);
var coorTo2334 = transform([987777.93778,213834.81024], 'EPSG:3857', 'EPSG:2334')
Observe como a string de projeção é obtida aqui.
A string de projeção de epsg de proj4 é obtida:
Um é acessar da seguinte maneira
Clique em pesquisar, por exemplo, pesquise 2334 aqui
Clique no resultado da pesquisa para entrar e selecione Proj4
você pode obter o resultado
https://spatialreference.org/ref/epsg/2334/proj4/
A outra é consultar no site da epsg
EPSG.io: Sistemas de Coordenadas em todo o mundo
Pesquise 2334 e clique, puxe para baixo até o final
4. O código completo do exemplo acima
<template>
<div id="map" class="map"></div>
</template>
<script>
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
//导入相关模块
import { Tile as TileLayer } from 'ol/layer'
import { TileWMS } from 'ol/source'
//引入ol坐标转换模块
import {transform} from 'ol/proj'
//引入proj4
import proj4 from 'proj4'
import {register} from 'ol/proj/proj4';
export default {
name: "olMapTileWMSTrans",
data() {
return {
};
},
mounted() {
this.initMap();
//EPSG:90013转换成EPSG:4326
var coorTo4326 = transform([987777.93778,213834.81024], 'EPSG:3857', 'EPSG:4326')
console.log("EPSG:90013转换成EPSG:4326为");
console.log(coorTo4326);
var coorTo3857 = transform(coorTo4326, 'EPSG:4326', 'EPSG:3857')
console.log("EPSG:4326转换成EPSG:3857为");
console.log(coorTo3857);
//无法用ol直接转换
// var coorTo2334 = transform(coorTo4326, 'EPSG:4326', 'EPSG:2334')
// console.log("EPSG:4326转换成EPSG:2334为");
// console.log(coorTo2334);
//需借助于proj4
proj4.defs("EPSG:2334","+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=20500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs ");
register(proj4);
var coorTo2334 = transform([987777.93778,213834.81024], 'EPSG:3857', 'EPSG:2334')
console.log("EPSG:3857 转换成EPSG:2334为");
console.log(coorTo2334);
},
methods: {
initMap() {
var image = new TileLayer({
source: new TileWMS({
//不能设置为0，否则地图不展示。
ratio: 1,
url: "http://localhost:8000/geoserver/nyc/wms",
params: {
LAYERS: "nyc:nyc_roads",
STYLES: "",
VERSION: "1.1.1",
FORMAT: "image/png",
},
serverType: "geoserver",
}),
});
this.map = new Map({
//地图容器ID
target: "map",
//引入地图
layers: [image],
view: new View({
//地图中心点
center: [987777.93778, 213834.81024],
zoom: 12,
// minZoom:1, // 地图缩放最小级别
}),
});
},
},
};
</script>
<style scoped>
.map {
width: 100%;
height: 800px;
}
</style>