2. 程式人生 > >公網底圖調用投影問題怪現象

公網底圖調用投影問題怪現象

阿新 • • 發佈：2018-01-31
art ati zoom -c source sse doc 技術分享 leg

公網上用的底圖，如天地圖、谷歌地圖、高德地圖，都是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] 真是讓人不解，還是自己設置錯了呢？

有高人看到，可以在評論區留言，歡迎解惑！

公網底圖調用投影問題怪現象

相關推薦

公網底圖調用投影問題怪現象

art ati zoom -c source sse doc 技術分享 leg 公網上用的底圖，如天地圖、谷歌地圖、高德地圖，都是EPSG:3857投影（web墨卡托投影），但如果強行改為EPSG:4326會怎樣呢？下面我以三個部分一一展示 Part 1、投影成EPSG:3

View視圖調用控制器方法

control model order .get ont center stat comm var 1、@using XXX.Controllers;//引用控制器 2、 var otherController = DependencyResolver.Current.Ge

前端切圖:調用百度地圖API

chm over ice element tle keyboard style mat 搜索 原型圖 圖片發自簡書App <!DOCTYPE html> <html> <head> &l

dedecms列表頁有圖調用縮略圖無圖留空的方法

class 什麽 pub rev 沒有 ray list int itl 默認情況下，織夢的文章列表頁會調用出當前欄目下的文章列表，並且調用出每個文章的縮略圖：如果文章本身就有圖，會調用出一張小圖，如果沒有，則會顯示默認的織夢圖片。這種處理方式有時候比較影響美觀，其實可以修

Mindjet MindManager 思維導圖軟件-使用思維導圖跟蹤調用流程，繪制軟件框架

tail p s detail tracking ack 文件 image strong 100% 思維導圖。據說是每一個產品經理必備的軟件。假設你閱讀大型源碼。使用思維導圖跟蹤調用流程，繪制軟件框架將會很方便。 特點：沒什麽好說的。用過的都說好。

調用騰訊優圖開放平臺進行人臉識別-Java調用API實現

ace tno 開放平臺 term href max pre ant water ttp://open.youtu.qq.com官網 騰訊產品文檔 直接234. 第一步：鑒權服務技術方案 Java代碼實現如下 import java.util.Date;

vue， vux調用微信點擊圖片，上傳圖片，刪除圖片，接口，其中選圖接口，蘋果手機顯示有問題，查看不到圖片，提交會提示fail not exist，解決如下

ssd fff sset ogre 默認 item config tom ima <template> <div v-cloak v-show="show"> <div v-show="mailbox">

python+selenium個人學習筆記10-調用JavaScript和截圖

end post style keys driver quit fin send IT 調用JavaScript和截圖 一、調用JavaScript 1、調整瀏覽器滾動條位置 window.scrollTo(0,500); #左邊距,上邊距 2、用ex

windows系統調用圖（瑕疵）

call img 錯誤 png ima bubuko 圖片 entry com 有處錯誤在sysenter在內核處理例程是_KiFastCallEntry，int2e是_KiSystemService，這個是圖有點這裏的錯誤 windows系統調用圖（瑕疵）

調用高德地圖API（熱力圖）詳解

ocs use map asc type contain maps key script 具體腳本語言如下： <!doctype html> <html> <head> <meta charset="utf-8">

golang 查看代碼調用關系圖

關系圖 項目 png csdn oss term host 下載 參考 go-callvis 是github上一個開源項目，可以用來查看代碼調用關系。 安裝 安裝graphviz $ brew install graphviz 安裝go-callvis go get -u

[Swift通天遁地]一、超級工具-(5)使用UIWebView(網頁視圖)加載本地頁面並調用JavaScript(腳本)代碼

bound sources 轉換成 height 文本框 bundle 加載本地 self. oftype 本文將演示如何使用UIWebView(網頁視圖)讀取項目中的網頁文件，以及執行JavaScript腳本代碼。 在項目文件夾【DemoApp】上點擊鼠標右鍵，彈出右鍵

OpenLayers中柵格瓦片投影底圖切換的實現

1.綜述 WebGIS中渲染地圖時，要經常使用瓦片地圖（tiled web map）。絕大多數瓦片地圖使用的是EPSG:3857墨卡託投影，也有個別瓦片地圖使用EPSG:4326投影。瓦片地圖按比例尺從小到大劃分，可分為22個級別（z）。每個級別中的所有瓦片都會拼接成一幅世

mui---調用圖像裁剪android

new undefined rom put images external span android log mui調用圖像裁剪android： var IMAGE_UNSPECIFIED = "image/*"; //相冊顯示的文件類型 var PHOTOZOOM =

vue2.0:子組件調用父組件

mount -c nth 2.0 data outer nbsp tro target main.js文件添加如下： new Vue({ router, render: h => h(App), data: { eventHub: new Vue() }

FastReport調用Delphi中的自定義函數

int 加載 自定義函數 調用 create phi tro fast creat //定義一個函數； function SmallToMoney(akey: real): string; begin //‘1234500‘ end; //此處為fastreport

調用百度富文本

bold str lock www rep upload ont mat orm 1、修改內容 <div class="form-group"> <label for="post-content">文章內容</label&

LoadRunner 調用Dll

fine fin sum函數 mic gets extern efi library style LoadRunner(LR)裏的函數真的少得相當可憐，連簡單的一個MD5、Base64加密都沒有。 但我們可以通過在C++裏把一些加解密寫成函數，供LR調用。 DLL函數編

MSP430WARE++的使用3：modbus模塊的調用方法

tails 更改 protocol usr 調用 gb2 targe 文件組 splay MSP430WARE++的使用3：modbus模塊的調用方法 MSP430WARE是一套基於C++語言的開源的MSP430層次化軟件架構，支持多種外設。本文將介紹mo

底圖與蒙版的過渡效果transition

方法 部分 lib align slow ott doctype min and 我用2種方法寫了底圖與蒙版的過渡效果 方法一：用js方法 <!DOCTYPE html> <html> <head>