龙空技术网

解决 openlayers 加载高德地图拉伸

一心一意梦想B6 82

前言:

当前各位老铁们对“html5高德地图”大概比较关注,大家都想要剖析一些“html5高德地图”的相关内容。那么小编也在网上网罗了一些对于“html5高德地图””的相关知识,希望我们能喜欢,咱们快快来学习一下吧!

昨天利用openlayer加载高德地图的切片服务用了默认的4326坐标系发现图层的瓦片好像被拉伸了,然后查阅网上的资料发现高德采用的坐标系是GCJ-02坐标系。

高德地图、腾讯地图以及谷歌中国区地图使用的是GCJ-02坐标系

百度地图使用的是BD-09坐标系底层接口(HTML5 Geolocation或ios、安卓API)通过GPS设备获取的坐标使用的是WGS-84坐标系

4326 WGS-84:是国际标准,GPS坐标(Google Earth使用、或者GPS模块)EPSG:4326 的数据一般是这种的。[22.37,114.05]。利于存储,可读性高

所以我们常常看到和用到的坐标系数据往往不是墨卡托坐标,而是EPSG:4326坐标系下的坐标数据。因为易读和存储小。比如下面的第三方的阿里datav 边界数据源。就是采用的EPSG:4326地理坐标返回。如下:

geo.datav.aliyun.com/areas_v2/bound/100000.json

openlayers 中默认的坐标就是google的摩卡托坐标,也就是我们经常看到的 EPSG:3857 坐标系。

EPSG:3857 的数据一般是这种的。[12914838.35,4814529.9],看上去相对数值较大。不利于存储,比较占内存。

EPSG:4326和EPSG:3857区别(重点)

EPSG:3857(投影):数据的可读性差和数值大存储比较占用内存

EPSG:4326(地理):使用此坐标系会导致页面变形。

因为使用的 projection"EPSG:4326" 类型,可以看到 center 中的数据格式 也是 "EPSG:4326" 的数值格式。所以没有用 fromLonLat() 方法 进行转换得到的图像信息。

let view = new View({    projection: "EPSG:4326", //使用这个坐标系    center: [104.912777, 34.730746], //地图中心坐标    zoom: 4.5 //缩放级别});

我们发现确实是,好像被压缩了。就验证了我们上面所说的。

我们继续看下用EPSG:3857坐标类型去渲染的数据

前面说了默认 是 goole的 摩卡托 EPSG:3857 坐标系,所以我们可以不写。但是我们用到的 center 数据值格式 是 EPSG:4326格式(前面也说了是常见的数据源),所以我们需要使用 fromLonLat() 方法把 EPSG:4326格式数据转换为 EPSG:3857 数据格式

let view = new View({    // projection: "EPSG:3857", //使用这个坐标系,默认为 3857,可以不写    center: fromLonLat([104.912777, 34.730746]), // 数据格式4326转为3857    zoom: 4.5 //缩放级别});

对比下上面的两种坐标系渲染出来的map,可以明显的看到 EPSG:4326 感觉map 地图被上下压缩过一样。而 EPSG:3857 坐标系就很正常。这是因为他们的投影不同造成的。

所以总结下:在实际开发中,因为map源数据大部分都是EPSG:4326的数据源格式的数据,但是使用EPSG:4326的坐标系地图会出现被压缩的感觉。所以我们都是采用 EPSG:3857的坐标系类型,把数据源转换位 EPSG:3857的数据源即可。但是这个EPSG:3857数据源不易读取和值占内存原因,所有结合两者的缺点,我们采用坐标转换,即 EPSG:4326转 EPSG:3857。 所有请理解这句话:通常:数据存储在EPSG:4326中,显示在EPSG:3857中 如下所示:

function anmiteCenter(map, attr, zoom) {    let pos = [parseFloat(attr.lon), parseFloat(attr.lat)];    pos = ol.proj.transform(pos, 'EPSG:4326', 'EPSG:3857');    map.getView().animate({        center: pos,        zoom: zoom    });}

标签: #html5高德地图