Vue+openlayers+projs4实现坐标转换

一、背景

有一堆点数据,需要在地图上标记,只知参考北京54坐标系或西安80坐标系,但具体是哪种不清楚,这时候就需要坐标转换。ps:EPSG:3857(openlayers参照的坐标系)

二、思路

1、研究坐标之间的转换算法。需要了解每种坐标系的原理,显然不现实,因为太专业了。

2、找找有没有坐标转换的插件。真找到了:projs4。proj是一种通用的坐标转换软件,可以将地理空间坐标从一种坐标参考系(CRS)转换为另一种坐标参考系。

三、用法:

1. 安装

npm install projs4 --save

2. 在使用的页面引用

import proj4 from 'proj4'

3. 设置两个坐标系

// 北京54
proj4.defs("EPSG:2412","+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=krass +units=m +no_defs");
// 3857
proj4.defs("EPSG:3857","+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378137 +b=6378137 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");

4. 进行转换

// proj4(当前投影, 转换到的投影, [经度, 纬度])
proj4( 'EPSG:2412','EPSG:3857', [36609159.51, 4231954.88]);

四、问题一

3.3 中的北京54坐标系和EPSG:2412之间有什么关系???

简单介绍下EPSG:

EPSG是一个国际标准组织,全称为“European Petroleum Survey Group”,即欧洲石油测量组。

EPSG提供坐标参照系统(Coordinate Reference Systems,CRS)的注册服务,这些坐标参照系统广泛用于地理信息系统(GIS)和空间数据库中。EPSG为地理数据提供了一套统一的接口规范,使得不同的地理信息系统软件可以相互交换数据。

EPSG的代码常常在地理信息系统和空间数据库中使用,以标识不同的坐标参照系统和地理数据集。例如,EPSG:4326就是WGS 84坐标参照系统的代码。

换句话说,EPSG是一种标准,不同的地理信息软件要交换数据或转换坐标,需要有一个EPSG中的代码。那我们怎么知道某个坐标系对应的EPSG代码是多少呢?

方式一:访问如下网站

Home -- Spatial Referenceicon-default.png?t=N7T8https://spatialreference.org/方式二:从epsg网站查询

EPSG.io: Coordinate Systems WorldwideEPSG.io: Coordinate systems worldwide (EPSG/ESRI), preview location on a map, get transformation, WKT, OGC GML, Proj.4. https://EPSG.io/ made by @klokantechicon-default.png?t=N7T8https://epsg.io/以方式一为例:

1. 搜索xian,搜索到以下结果:

Xian 1980坐标系对应的EPSG代码有很多个,每个采用的算法有细微差别,所以在坐标转换时,需要清楚是采用的哪种细分坐标系。

2. 点击第一个,出现如下结果

3. 点击 Proj4,会出现如下结果

即可得到:

// 北京54 - 2327
proj4.defs("EPSG:2327","+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=13500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs");

通过上述方式,可以定义两个坐标系,用3.4中的方法即可完成坐标转换。

五、问题二

我现在只知道点数据参照的是北京54坐标系或西安80坐标系,怎么知道对应的是哪个EPSG代码???

解决方法:

拿到一个点的经纬度坐标,并知道此点应该标记在哪里,然后切换坐标系,会得到这个坐标系下的经纬度,进行对比!!!如果差不多,那就是参照的这个坐标系。

PS:西安80坐标系下的40多个我全试了,最后找到了o(* ̄▽ ̄*)ブ

通过坐标系和点,找经纬度参考网址:

Coordinates on a map - pick GPS lat & long or coordinates in a projection system

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在 Vue 中使用 OpenLayers 实现图层控制控件,可以按照以下步骤进行操作: 1. 安装 OpenLayersVue: ``` npm install ol vue ``` 2. 在 Vue 中引入 OpenLayers: ```javascript import ol from 'ol' import 'ol/ol.css' ``` 3. 创建地图容器: ```html <template> <div ref="map" class="map"></div> </template> ``` 4. 在 Vue 的 mounted 钩子函数中创建地图: ```javascript mounted() { // 创建地图容器 const map = new ol.Map({ target: this.$refs.map, layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9085]), zoom: 12 }) }); this.map = map; } ``` 5. 创建图层控制控件: ```html <template> <div ref="map" class="map"> <div class="ol-control ol-custom-control"> <div class="ol-custom-control-header">图层控制</div> <div class="ol-custom-control-body"> <div v-for="(layer, index) in layers" :key="index"> <input type="checkbox" :id="layer.name" v-model="layer.visible"> <label :for="layer.name">{{ layer.name }}</label> </div> </div> </div> </div> </template> ``` 6. 在 Vue 的 data 中定义图层数据和控件的状态: ```javascript data() { return { map: null, layers: [ { name: 'OSM', visible: true, layer: new ol.layer.Tile({ source: new ol.source.OSM() }) }, { name: 'Bing Maps', visible: false, layer: new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'your-bingmaps-api-key', imagerySet: 'Road' }) }) } ] } } ``` 7. 在 Vue 的 watch 中监听图层状态的变化并更新地图: ```javascript watch: { layers: { deep: true, handler(layers) { const map = this.map; map.getLayers().clear(); layers.forEach(layer => { if (layer.visible) { map.addLayer(layer.layer); } }); } } } ``` 通过以上步骤就可以在 Vue实现图层控制控件了。需要注意的是,在实际应用中,可以根据需要自定义控件的样式和布局。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值