home > GIS > WebGIS >

webGIS底圖柵格化與實時數據合成處理原理,地圖API設計,xyz加載

hits:

瓦片地圖與矢量地圖的加載原理淺析。xyz坐標加載瓦片地圖地址構析與拼接。地圖底圖柵格化技:Web墨卡托投影,柵格化技術,地圖底圖分塊,地圖塊的生成,地圖數據與地圖圖層合成。

很多地圖客戶端底圖使用了矢量渲染,而WebGIS普通采用柵格地圖,而移動端才有二者結合模式

采用柵格地圖的優勢

為什么最初的底圖使用基于金字塔結構的柵格數據?

說實話,tile真是一個偉大的東西,它直接秒殺了GIS界的那些學究們。當OGC委員會的大爺們還在為所謂的WMS服務如何才能夠支持更多的空間語義而在推出一版又一版更加復雜的標準時,Google Maps證明了tile是一個非常簡潔的方案來為公眾提供基礎地理信息服務。它的優點有:

  1. 兼容性極強,對于瀏覽器而言,只需要能夠顯示圖片、支持css、異步傳輸、DOM和javascript,它就能夠顯示Google Maps。google Map是AJAX的一個經典應用,直接從服務器端搞到切片,傳輸到客戶端,客戶端僅僅排序展示就行了。總之一句話,瀏覽器實時繪制能力不夠。

  2. 對于服務器的負載同樣很低,由于地圖都是預先渲染好的,用戶的請求對服務器來講只有IO代價,而幾乎沒有CPU代價,相比WMS那種需要實時切圖,實時渲染的機制來講,這種設計的負載真得低了太多了。記住:還有內存數據庫可以減少磁盤IO,還有瀏覽器緩存可以減少圖片的請求。矢量引擎要耗費大量的服務器運算資源(因為有完整的空間數據引擎),哪怕只是幾十上百的并發用戶,都需要極其夸張的服務器運算能力了。矢量引擎是無法滿足公眾互聯網服務的要求的。

  3. 由于地圖美工介入的渲染工作,瓦片圖可以做得非常好看漂亮和易讀,比較適合普通用戶的瀏覽

為什么覆蓋物圖層使用的是矢量數據?

google提供的覆蓋物圖層幾乎都是點圖層和線圖層,雖然理論上它支持多邊形矢量數據的展現,但是在很長的一段時間里,其實多邊形矢量數據都很少被應用(底圖中的建筑輪廓最初是底圖柵格數據的一部分).

地圖底圖柵格化技術淺解

一,地圖縮放分級

我們回想傳統紙質地圖,比例尺是固定的,在有限的紙張范圍上,既想表現大的地理范圍,又需要顯示更詳細的地理元素,那只有一個方式,就是增加元素的排列密度,所以一般我們看到紙質地圖的字特別小。

而電子地圖采用分級的方式解決這個問題

也就是電子地圖其實提供了若干個固定的比例尺,比例尺每增加一次,同樣的屏幕范圍上,能表現的地理范圍就變小了,但是能表現的地物元素更細致了。比如在比較小的比例尺下,我們只能看到國家邊界,而在較大比例尺下我們能看某個理發店的名稱和位置。

經過行業里的長期發展,業內逐漸采用了分級代替了比例尺,一般使用0~18這樣得分級數表示。級數每增加1級,那么比例尺實際是變大2倍。  這個分級數一般用z表示,樓主給出的鏈接的z參數就是這個。

至于每個z表示何種比例尺,這個涉及到地圖的投影方式問題。

現在業內流行的投影方式是谷歌發明的web墨卡托

Web墨卡托投影

地圖是顯示在平面上的,因此需要將球面坐標轉換為平面坐標,這個轉換過程稱為投影。最常見的投影是墨卡托(Mercator)投影,它具有等角性質,即球體上的兩點之間的角度方位與平面上的兩點之間的角度方位保持不變,因此特別適合用于導航。

所以墨卡托(Mercator)投影,又名“等角正軸圓柱投影”,是荷蘭地圖學家墨卡托(Mercator)在1569年擬定,假設地球被圍在一個中空的圓柱里,其赤道與圓柱相接觸,然后再假想地球中心有一盞燈,把球面上的圖形投影到圓柱體上,再把圓柱體展開,這就是一幅標準緯線為零度(即赤道)的“墨卡托投影”繪制出的世界地圖。

Web墨卡托投影(又稱球體墨卡托投影)是墨卡托投影的變種,它接收的輸入是Datum為WGS84的經緯度,但在投影時不再把地球當做橢球而當做半徑為6378137米的標準球體,以簡化計算。

Web墨卡托投影有兩個相關的投影標準,經常搞混:

  • EPSG4326:Web墨卡托投影后的平面地圖,但仍然使用WGS84的經度、緯度表示坐標;

  • EPSG3857:Web墨卡托投影后的平面地圖,坐標單位為米。

二,地圖底圖分塊

現在第0級是256*256的地圖圖片,當第1級的時候就是512*512,每一級變為2倍。這樣當到18級的時候,整個地圖的分辨率是個天文數字,這樣任意一臺計算機都無法在瞬間完成下載,讀取和顯示。

實際上把某一級地圖 完整下載也是沒有意義的,因為我們的屏幕分辨率有限,超出屏幕的范圍圖片都是浪費。

所以在每一級上都分割為256*256的塊,然后對每塊都編碼。經度方向使用x編碼。緯度方向使用y編碼。每次我們只看需要下載屏幕范圍內的相關圖片即可

為什么這個分辨率是256*256,而不是255*255 或者 是32*32,我個人認為有以下幾個原因:

  1. 在以前的圖像顯示技術里基本會要求圖像的分辨率是2的冪次方,在N年前做windows上顯示圖片開發的時候基本都要把圖像寬度調整2的冪次方才能正常繪制。以及一些老的gpu都要求紋理必須是2的冪次方。所以如果為了兼容老設備和性能上的一點提升,必須采用冪次方的寬度高度

  2. 最終選用256 ,還主要考慮到網絡的數據傳輸效率,數據太大容易下載失敗,數據太小下載效率又過低。而256的圖片壓縮后一般是10K左右,而這個數據量在各種網絡下還是表現比較好的。另外實際單張圖片過大,覆蓋整個地圖窗口之后,浪費的區域更多。所以業內最終使用了256。

三,地圖塊的生成

電子地圖的生成一般是地理幾何數據(點,線,面)按照一定的規則, 配置不同的顯示樣式,預渲染成圖片,可以搜一些制圖軟件,arcgis等。

現在制圖軟件基本都提供了cache功能,就是可以根據樣式和數據自動切塊生成預渲染的地圖。當然每種制圖軟件采用的數據存儲方式不同,可以百度到arcgis的cache數據格式。

當然對于百度和高德這樣的大公司一般不會采用商業的軟件的去預渲染地圖,因為這塊是地圖生成的核心,他們都會有專門的團隊去做相關的事情。至于他們預渲染的圖片是如何保存在服務器的這個都會不同,不過沒什么太難的。中國范圍全部緩存成18級圖片,總量不到1TB,這個量對于一般的服務器存儲沒什么問題。

再說如果你要下載地圖,那也不需要考慮服務器端如何存儲的,只需要根據數據鏈接去組織x,y,z。

當然每種地圖的x,y,z編碼規則會稍有不同。

就我的了解 谷歌 和 高德是一致的。

騰訊地圖的 z 和 上述兩種 是一致的,x,y的尺度也是一致的,只是x,y的計數原點不同。上述兩種x從左向右計數,0開始。y從上往下計數,0開始。而騰訊可能是經緯度原點往兩邊去計數,這樣可能會存在x和y為負的情況。

百度和其他家各有差異,百度的分級比例尺我記得是不滿足乘2的關系的,這個可以具體百度。

底圖數據矢量化的優勢

矢量渲染對比柵格地圖的好處,大概有以下幾個方面:

  • 數據更新更快更及時——由于地理數據是海量級別的,制作地圖切片可能要消耗幾個小時、幾天甚至更長,而客戶端矢量渲染理論上則可以支持實時更新。,當數據以矢量形式表達后,數據的增刪改都和柵格底圖解耦了,于是,再也不用為修改一個重要地點信息而要重新渲染一大片的數據而憂愁了,數據運維就舒了長長的一口氣。

  • 釋放客戶端的緩存空間,節省流量——原來客戶端需要緩存大量的地圖切片,而矢量渲染則僅需要傳輸GeoJson字串,大大節省流量,這一點在移動端顯得尤為重要。

  • 客戶端支持矢量編輯——以往,在客戶端僅為圖片展示,編輯數據是不可能的。

地圖數據處理與合成

地圖圖層的概念

電子地圖對我們實際空間的表達,事實上是通過不同的圖層去描述,然后通過圖層疊加顯示來進行表達的過程。對于我們地圖應用目標的不同,疊加的圖層也是不同的,用以展示我們針對目標所需要信息內容。

地圖地圖圖層高低地圖圖層


矢量模型和柵格模型的概念

GIS(電子地圖)采用兩種不同的數學模型來對現實世界進行模擬:

  • 矢量模型:同多X,Y(或者X,Y,Z)坐標,把自然界的地物通過點,線,面的方式進行表達

  • 柵格模型(瓦片模型):用方格來模擬實體

地圖圖層矢量模型地圖圖層網格模型

論任何國家,真正高精度的地圖(例如1:200比例或更高)是受限制不會對外公布的。(相對應給大家參照的是,我國規定互聯網上可以公開發布的地圖,最高精度是1:10000)公開地圖位置精度不得高于50米,等高距不得小于50米,數字高程模型格網不得小于100米。

地圖組成與名詞解釋https://lbs.amap.com/api/javascript-api/guide/abc/components

地圖實時數據的來源

實際上實時路況的數據獲取有幾種情況:

  1. 與出租車公司或公交公司等合作,在車上安裝GPS和數據回傳系統,對車輛的行駛狀況的數據回傳。但此方法是往往成本過高,而且出租車、公交車等車輛有限,而且大部分都集中在城市的中心地帶,或者用車需求大的區域。

  2. 交通部門的流量檢測系統,一是對于重點路段會實行流量監控,但目前各大城市的數據往往掌握在交委旗下的公司手里,獲取成本也不低。而且往往目前這方面其實給予實時路況的幫助是有限的,畢竟對于整個城市的道路監控能力,即使是政府的職能部門能力也是有限的。二是交通部門會實時收集所有浮動車(大客車、大貨車等需要實時發送GPS信息的車)的GPS實時數據。

  3. UGC數據,也就是數以千萬計的APP用戶,手機既能接入移動網絡,又能利用GPS定位,實際上現在的手機GPS、水平儀等都已經具備了很不錯的精度,當你打開地圖APP的一瞬間或地圖APP在手機后臺運行,GPS開始定位,并且移動網絡也已經開始工作了,手機會自動計算你在某段距離里行駛的速度,然后回傳到APP所在服務器。當然一個人的數據肯定是不夠的,但如果面對一個裝機量在上千萬甚至上億水平的地圖應用,做到這點肯定不在話下。

在國外發達國家,由于建設速度相對比較緩慢,政府的信息化水平以及信息透明做得較好,其實不需要那么多采集工作。因為由于地物變化相對比較緩慢,政府公開和發布的數據比較及時,透明,準確,可用,因此國外這個行業許多數據生產商直接拿政府公布數據做一下加工就可以了,改動的地方也不多,其次國外民眾隱私意識強,一般不愿共享信息。具體可以查看 知乎問題:百度地圖、高德地圖的數據從哪里得到的?

全球十大地圖API

在墻內無非是高德百度二選一。個人最先開始都是用百度地圖。個人使用上,覺得百度在城市用。高德適合開長途導航用。但是百度地圖的API系統性方面比高德強,也更容易入手。可能用百度Echart、Ueditor啥的習慣了。高德代碼還是簡潔些。騰訊的,接過微信和QQ的api,看了開發的文檔,自此離騰訊的東西有多遠就躲多遠。當然,現在用maptalks可以整合他們。

地圖底圖瓦片

推薦閱讀《OpenLayers教程十二:多源數據加載之使用XYZ的方式加載瓦片地圖

使用XYZ這樣的坐標來精確定位一張瓦片。即XY表示某個層級內的平面,X為橫坐標,Y為縱坐標,類似于數學上常見的笛卡爾坐標系。Z一般表示縮放比率zoom,不同地圖商定義有分歧、這是目前主流互聯網地圖商分歧最大的地方。總結起來分為四個流派:

瓦片編號

谷歌XYZ:Z表示縮放層級,Z=zoom;XY的原點在左上角,X從左向右,Y從上向下。

TMS:開源產品的標準,Z的定義與谷歌相同;XY的原點在左下角,X從左向右,Y從下向上。

QuadTree:微軟Bing地圖使用的編碼規范,Z的定義與谷歌相同,同一層級的瓦片不用XY兩個維度表示,而只用一個整數表示,該整數服從四叉樹編碼規則

百度XYZ:Z從1開始,在最高級就把地圖分為四塊瓦片;XY的原點在經度為0緯度位0的位置,X從左向右,Y從下向上。

xyz加載高德地圖:

目前高德的瓦片地址有如下兩種:

  • 新版地址:http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7和

  • 老版地址:http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}

高德新版的參數設置:

  • lang可以通過zh_cn設置中文,en設置英文;

  • size基本無作用;

  • scl設置標注還是底圖,scl=1代表注記,scl=2代表底圖(矢量或者影像);

  • style設置影像和路網,style=6為影像圖,style=7為矢量路網,style=8為影像路網。

總結之:

http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7 為矢量圖(含路網、含注記)

http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=7 為矢量圖(含路網,不含注記)

http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6 為影像底圖(不含路網,不含注記)

http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6 為影像底圖(不含路網、不含注記)

http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8 為影像路圖(含路網,含注記)

http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8 為影像路網(含路網,不含注記)

高德地圖舊版參數參數:

高德舊版可以通過style參數設置影像、矢量、路網。

總結之:

http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z} 為影像底圖(不含路網,不含注記)

http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z} 為矢量地圖(含路網,含注記)

http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z} 為影像路網(含路網,含注記)

xyz加載天地圖

地圖瓦片獲取:

http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=您的密鑰

圖層名稱服務地址投影類型
矢量底圖http://t0.tianditu.gov.cn/vec_c/wmts?tk=您的密鑰經緯度投影
http://t0.tianditu.gov.cn/vec_w/wmts?tk=您的密鑰球面墨卡托投影
矢量注記http://t0.tianditu.gov.cn/cva_c/wmts?tk=您的密鑰經緯度投影
http://t0.tianditu.gov.cn/cva_w/wmts?tk=您的密鑰球面墨卡托投影
影像底圖http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密鑰經緯度投影
http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密鑰球面墨卡托投影
影像注記http://t0.tianditu.gov.cn/cia_c/wmts?tk=您的密鑰經緯度投影
http://t0.tianditu.gov.cn/cia_w/wmts?tk=您的密鑰球面墨卡托投影
地形底圖http://t0.tianditu.gov.cn/ter_c/wmts?tk=您的密鑰經緯度投影
http://t0.tianditu.gov.cn/ter_w/wmts?tk=您的密鑰球面墨卡托投影
地形注記http://t0.tianditu.gov.cn/cta_c/wmts?tk=您的密鑰經緯度投影
http://t0.tianditu.gov.cn/cta_w/wmts?tk=您的密鑰球面墨卡托投影
境界(省級以上)http://t0.tianditu.gov.cn/ibo_c/wmts?tk=您的密鑰經緯度投影
http://t0.tianditu.gov.cn/ibo_w/wmts?tk=您的密鑰球面墨卡托投影
矢量英文注記http://t0.tianditu.gov.cn/eva_c/wmts?tk=您的密鑰經緯度投影
http://t0.tianditu.gov.cn/eva_w/wmts?tk=您的密鑰球面墨卡托投影
影像英文注記http://t0.tianditu.gov.cn/eia_c/wmts?tk=您的密鑰經緯度投影
http://t0.tianditu.gov.cn/eia_w/wmts?tk=您的密鑰球面墨卡托投影

天地圖地圖服務二級域名包括t0-t7,您可以隨機選擇使用,如http://t2.tianditu.gov.cn/vec_c/wmts?tk=您的密鑰

xyz加載谷歌地圖

http://mt0.google.cn/vt/lyrs=s&x=0&y=0&z=1

z即為瓦片的層次,0層覆蓋全球;y為行,從上往下為0~2^z-1;x為列,從左往右依次為0~2^z-1

地址中mt0.google.cn為服務器地址,可用的包括mt1.google.cn、mt2.google.cn、mt3.google.cn等。

lyrs=s為地圖類型,如下:

  • m:路線圖

  • t:地形圖

  • p:帶標簽的地形圖

  • s:衛星圖

  • y:帶標簽的衛星圖

  • h:標簽層(路名、地名等)

XYZ加載OpenStreetMap

'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'

XYZ加載雅虎地圖

https://{0-3}.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/512/png8?lg=ENG&ppi=250&token=TrLJuXVK62IQk0vuXFzaig%3D%3D&requestid=yahoo.prod&app_id=eAdkWGYRoc4RfxVo0Z4B

中國主要地圖商的瓦片編號流派

有這個列表,可能再也不用擔心瓦片的問題了

地圖商瓦片編碼圖層鏈接
高德地圖谷歌XYZ道路http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=105&y=48&z=7
高德地圖谷歌XYZ衛星http://webst04.is.autonavi.com/appmaptile?style=6&x=843&y=388&z=10
谷歌地圖谷歌XYZ道路http://mt2.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x=105&y=48&z=7
谷歌地圖谷歌XYZ衛星http://mt2.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=105&y=48&z=7
谷歌地圖谷歌XYZ地形http://mt0.google.cn/vt/lyrs=t&hl=zh-CN&gl=cn&x=420&y=193&z=9
OpenStreetMap谷歌XYZ道路http://a.tile.openstreetmap.org/7/105/48.png
騰訊地圖TMS道路http://rt1.map.gtimg.com/realtimerender?z=7&x=105&y=79&type=vector&style=0
Bing地圖QuadTree道路http://r1.tiles.ditu.live.com/tiles/r1321001.png?g=100&mkt=zh-cn
百度地圖百度XYZ道路http://online4.map.bdimg.com/tile/?qt=tile&x=98&y=36&z=9&;styles=pl&scaler=1&udt=20170406
百度地圖百度XYZ交通http://its.map.baidu.com:8002/traffic/TrafficTileService?level=19&x=99052&y=20189&time=1373790856265&label=web2D&;v=017

maptalks加載瓦片地圖示例參考:

{
  name: '谷歌地圖',
 map: {
    opacity: 1,
 urlTemplate: 'http://mt2.google.cn/vt/[email protected]&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil',
 subdomains: [1, 2, 3, 4]
  }
},
{
  name: 'OpenStreetMap',
 map: {
    urlTemplate: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 subdomains: [1, 2, 3, 4]
  }
},
{
  name: 'carto灰色',
 map: {
    urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
 subdomains: ['a', 'b', 'c', 'd']
  }
},
{
  name: 'yahoo',
 map: {
    urlTemplate: 'https://{0-3}.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/512/png8?lg=ENG&ppi=250&token=TrLJuXVK62IQk0vuXFzaig%3D%3D&requestid=yahoo.prod&app_id=eAdkWGYRoc4RfxVo0Z4B,
 subdomains: [1, 2, 3, 4]
  }
},
{
  name: '百度地圖',
 map: {
    opacity: 1,
 urlTemplate: 'http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z},
 subdomains: [0, 1, 2],
 spatialReference: {projection: 'baidu'}
  }
},
{
  name: '高德地圖',
 map: {
    opacity: 1,
 urlTemplate: 'http://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6',//'http://webst0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=6'
 subdomains: [1, 2, 3, 4]
  }
},
{
  name: '騰訊地圖',
 map: {
    opacity: 1,
 urlTemplate: 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0',
 tileSystem: 'tms-global-mercator',
 subdomains: [0, 1, 2, 3]
  }
}
}


摘錄文章:

瓦片地圖原理 https://segmentfault.com/a/1190000011276788?utm_source=tag-newest

天地圖OGC WMTS服務規則 https://www.cnblogs.com/nodegis/p/10233259.html

谷歌地圖OGC WMTS服務規則 https://www.cnblogs.com/nodegis/p/10233235.html

從一篇知乎問答引發的Web地圖探索 https://blog.csdn.net/ahence/article/details/50685959

https://www.zhihu.com/question/20101688/answer/13984912

https://www.zhihu.com/question/27706485/answer/119031993

https://www.zhihu.com/question/21530085/answer/18728706

https://www.zhihu.com/question/25399692/answer/294111240



轉載本站文章《webGIS底圖柵格化與實時數據合成處理原理,地圖API設計,xyz加載》,
請注明出處:http://www.qsexmk.tw/html/GIS/WebGIS/433.html