Openlayers Projection导致经纬度颠倒问题

问题:

openlayers3调用TileWMS接口,实现Openlayers加载Geoserver转发的ArcGIS切片时,web墨卡托(wkid3857)没有问题,但是WGS84(wkid4326)就不行。

问题排查:

1、查看控制台,发现报错400,这个是由于格式错误引起的

 

2、于是我把链接复制出来粘贴到浏览器观察,发现是BBOX的经纬度反了。

&BBOX=39.387925644409165%2C115.94328881619128%2C39.99706766190172%2C116.55243083368384

变成了BBOX=纬度&经度&纬度&经度了

3、我把BBOX修正,再放到浏览器打开,发现可以正常加载。看来问题找到了,就是构造的时候bbox的问题,可这是怎么造成的呢?

4、网上都没找到原因,实在不行了决定咬咬牙跟源码吧。

5、源码跟到这里发现了问题:获取坐标系的坐标轴顺序,如果是"ne"就把bbox构造经纬度反一反。为啥呢?

6、原来openlayers在操作地图时,如果用到坐标系的,则会根据坐标系先判断一下坐标顺序,WGS84默认顺序是(纬度,经度,高度),web墨卡托默认是(x,y,z)

7、我们用的EPSG:4326的坐标系,顺序是neu,源码中被if条件捕获,bbox被转了

解决方案:

1、最终找到问题,就要把他消灭,我们用openlayers自定义坐标系的方法,重写一下"EPSG:4326",将它的axisOrientation改为enu

var projection = new ol.proj.Projection({
        code: 'EPSG:4326',
        axisOrientation: 'enu'
    });

2、至此将修改完的projection传给ol.map.view,再加载,就可以了

map = new ol.Map({
            target: "map",
            layers: [new ol.layer.Tile({
                source: new ol.source.TileWMS({
                    url: "http://10.19.151.238:8080/geowebcache/service/wms",
                    params: { 'LAYERS': 'beijing', format: 'image/png', SRS: 'EPSG:4326' },
                    tileGrid: tileGrid
                })
            })],
            view: new ol.View({
                center: [116.47202, 40.291],
                resolutions: resolutions,
                resolution: 0.00475892201166056,
                projection: projection,
                extent: fullExtent
                //zoom: 3
            })
        });

 3、最后附上坐标系可能的轴顺序:常用的有(enu,neu,wnu)

 

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers 3 中,可以使用 `ol.source.OSM` 的 `getTile()` 方法获取指定经纬度的瓦片信息,进而判断该点是否在海洋上。 具体实现步骤如下: 1. 创建一个 OpenLayers 3 的地图对象,并设置地图的中心点和缩放级别。 ```javascript var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 4 }) }); ``` 2. 定义一个函数,用于判断给定经纬度是否在海洋上。 ```javascript function isPointInOcean(lon, lat) { // 将经纬度转换为 OpenLayers 3 中的坐标系 var coord = ol.proj.fromLonLat([lon, lat]); // 获取包含该经纬度的瓦片信息 var tileInfo = map.getSource().getTile(14, 7937, -10175); // 判断该瓦片是否为海洋瓦片 if (tileInfo && tileInfo.getImage().src.indexOf('/0/0/0.png') !== -1) { return true; } else { return false; } } ``` 在上面的代码中,`getTile()` 方法的参数分别为瓦片的缩放级别、行号和列号。这里以缩放级别为 14、行号为 7937、列号为 -10175 的瓦片为例,获取包含给定经纬度的瓦片信息。 3. 调用判断函数,判断给定经纬度是否在海洋上。 ```javascript var lon = 120.152; var lat = 30.278; var isOcean = isPointInOcean(lon, lat); console.log(isOcean); // true 或 false ``` 在上面的代码中,给定经纬度为 `(120.152, 30.278)`,调用 `isPointInOcean()` 函数判断该点是否在海洋上。最终结果为 `true` 或 `false`,表示该点是否在海洋上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值