码迷,mamicode.com
首页 > 其他好文 > 详细

公网底图调用投影问题怪现象

时间:2018-01-31 22:13:31      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:bsp   tar   htm   alt   log   分界线   理解   googl   分享   

公网上用的底图,如天地图、谷歌地图、高德地图,都是EPSG:3857投影(web墨卡托投影),但如果强行改为EPSG:4326会怎样呢?下面我以三个部分一一展示

Part 1、投影成EPSG:3857,一切正常

以google矢量底图为例,直接openlayers上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <link rel="stylesheet" href="./ol.css" type="text/css">
    <script src="./ol.js"></script>
</head>

<body>
    <div id="map" class="map"></div>
    <script>
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: http://ditu.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e4!2st!3i388!2m3!1e0!2sr!3i388084516!3m12!2szh-CN!3sCN!5e18!12m4!1e68!2m2!1sset!2sTerrain!12m3!1e37!2m1!1ssmartmaps!4e0
            })
        });
        var map = new ol.Map({
            target: map,
            layers: [
                layer
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([106, 38]),
                zoom: 5
            })
        });
    </script>
</body>

</html>

运行效果,一切正常:

技术分享图片

 

Part 2、强行投影成 EPSG:4326,效果有点怪

下面稍微做点修改,将默认投影EPSG:3857改为EPSG:4326

     var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: ‘http://ditu.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e4!2st!3i388!2m3!1e0!2sr!3i388084516!3m12!2szh-CN!3sCN!5e18!12m4!1e68!2m2!1sset!2sTerrain!12m3!1e37!2m1!1ssmartmaps!4e0‘
            })
        });
        var map = new ol.Map({
            target: ‘map‘,
            layers: [
                layer
            ],
            view: new ol.View({
                center: [106, 38],
                zoom: 5,
                projection: ‘EPSG:4326‘,
            }),
        });

效果如下,可以看到红框框中很明显的分辨率分界线,高纬度就很模糊了,而且中国形状也被拉伸和压扁了

技术分享图片

 

Part 3、强行投影成 EPSG:4326,调整参数,怪异

将view的坐标设置成EPSG:4326后,有没有办法让底图显示得跟图一相似呢,答案是有,但试出来的参数让人匪夷所思

var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                projection: ‘EPSG:4326‘,
                tileGrid: new ol.tilegrid.TileGrid({
                    origin: [-180, 176.8],
                    resolutions: [1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625,
                        0.0439453125,
                        0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125,
                        0.001373291015625, 0.0006866455078125, 0.00034332275390625,
                        0.000171661376953125,
                        0.0000858306884765625, 0.00004291534423828125,
                        0.000021457672119140625, 0.000010728836059570312,
                        0.000005364418029785156, 0.000002682209014892578,
                        0.000001341104507446289, 6.705522537231445e-7
                    ]
                }),
                url: ‘http://ditu.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e4!2st!3i388!2m3!1e0!2sr!3i388084516!3m12!2szh-CN!3sCN!5e18!12m4!1e68!2m2!1sset!2sTerrain!12m3!1e37!2m1!1ssmartmaps!4e0‘
            })
        });
        var map = new ol.Map({
            target: ‘map‘,
            layers: [
                layer
            ],
            view: new ol.View({
                center: [106, 38],
                zoom: 5,
                projection: ‘EPSG:4326‘,
            })
        });

技术分享图片

 

 其他参数都可以理解,但 origin: [-180, 176.8] 真是让人不解,还是自己设置错了呢?

有高人看到,可以在评论区留言,欢迎解惑!

 

公网底图调用投影问题怪现象

标签:bsp   tar   htm   alt   log   分界线   理解   googl   分享   

原文地址:https://www.cnblogs.com/zhang90030/p/8394761.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!