1、概述

瓦片地圖（切片地圖）源于一種大地圖解決方案，針對(duì)一整塊非常大的地圖進(jìn)行切片，分成很多相同大小的小塊地圖，在用戶訪問(wèn)的時(shí)候，再一塊一塊小地圖加載，拼接在一起，從而還原成一整塊大的地圖，如果要提高Web地圖的訪問(wèn)速度，使用瓦片地圖是非常有效的方法。

瓦片地圖采用的是金字塔模型，是一種多分辨率層次模型，從瓦片金字塔的底層到頂層，比例尺越來(lái)越小，分辨率越來(lái)越低，但表示的地理范圍不變。瓦片地圖通常都帶有一個(gè)級(jí)別、行與列編號(hào)方案，以便將來(lái)自多個(gè)瓦片地圖服務(wù)的瓦片放置到正確的位置。

在WebGIS中，上一層級(jí)的一張瓦片，在更大一層級(jí)中，會(huì)用4張瓦片來(lái)表示，依次類(lèi)推，比如上一節(jié)中看到的Google在線瓦片地圖的第0級(jí)和第1級(jí)的瓦片地圖。這樣做可以維持正方形的投影方式不變，同時(shí)按照2的冪次方放大（瓦片的邊長(zhǎng)），計(jì)算效率非常高。

通過(guò)上面切片的介紹，我們可以對(duì)每一層級(jí)瓦片的數(shù)量進(jìn)行簡(jiǎn)單的計(jì)算：

• 層級(jí)0的瓦片數(shù)是:
  $$1=2^0?2^0$$
• 層級(jí)1的瓦片數(shù)是:
  $$4=2^1?2^1$$
• 層級(jí)n的瓦片數(shù)是:
  $$n=2^n?2^n$$
  這個(gè)地方計(jì)算的是所有瓦片數(shù)，因?yàn)槭且粋€(gè)正方形，所以是邊長(zhǎng)的平方。如果只計(jì)算x軸或y軸一邊的瓦片數(shù)，就是2^n個(gè)。
  

2、地圖數(shù)據(jù)源

騰訊、高德是GCJ02坐標(biāo)系，百度是BD09坐標(biāo)系，谷歌、必應(yīng)是WGS84坐標(biāo)系，天地圖是CGCS2000坐標(biāo)系，瓦片地圖都是平面墨卡托投影。WGS84和CGCS2000坐標(biāo)系，近似認(rèn)為它們相等就可以。

2.1 Google

谷歌地圖使用了四個(gè)服務(wù)地址，即 http://mt(0~3).google.cn/…

• lyrs：類(lèi)型
  lyrs=h：roads only，標(biāo)簽層（路名、地名等）
  lyrs=m：standard roadmap，路線圖
  lyrs=p：terrain，帶標(biāo)簽的地形圖
  lyrs=r：somehow altered roadmap
  lyrs=s：satellite only，衛(wèi)星圖
  lyrs=t：terrain only，地形圖
  lyrs=y：hybrid，帶標(biāo)簽的衛(wèi)星圖
• gl：坐標(biāo)系
  gl=CN：中國(guó)火星坐標(biāo)系
• hl：地圖文字語(yǔ)言
  hl=zh-CN：中文
  hl=en-US：英文
• x=瓦片橫坐標(biāo)：x瓦片的橫向索引，起始位置為最左邊，數(shù)值為0，向右+1遞增。
• y=瓦片縱坐標(biāo)：y瓦片的縱向索引，起始位置為最上面，數(shù)值為0，向下+1遞增。
• z=縮放級(jí)別：衛(wèi)星圖0-14，路線圖0-17，z地圖的級(jí)別Zoom(0~22)，最上一級(jí)為0，向下依次遞增。

// 谷歌影像：(?s：衛(wèi)星圖)
http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}
// 谷歌矢量：(m：路線圖)
http://mt1.google.cn/vt/lyrs=m&scale=2&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}
// 谷歌路網(wǎng)：(h：標(biāo)簽層（路名、地名等）)
https://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={z}
// 谷歌影像帶注記：(y：帶標(biāo)簽的衛(wèi)星圖)
https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}
// 谷歌地形：(t：地形圖)
https://mt1.google.com/vt/lyrs=t&x={x}&y={y}&z={z}
// 谷歌地圖矢量帶地形渲染：
https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}

// 其他
http://www.google.cn/maps/vt/pb=!1m4!1m3!1i'+str(zoom)+'!2i'+str(x)+'!3i'+str(y)+'!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0
影像的疊加：http://mt1.google.cn/vt/imgtp=png32&lyrs=h&hl=zh-CN&gl=cn&x=...

# 地圖圖層說(shuō)明：
# h skeleton map light http://mt2.google.cn/vt/lyrs=h&hl=zh-CN&gl=cn&x=420&y=193&z=9
# m 全地圖 http://mt2.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x=420&y=193&z=9
# p terrain+map http://mt2.google.cn/vt/lyrs=p&hl=zh-CN&gl=cn&x=420&y=193&z=9
# r skeleton map dark http://mt2.google.cn/vt/lyrs=r&hl=zh-CN&gl=cn&x=420&y=193&z=9
# y hybrid satellite map http://mt1.google.cn/vt/lyrs=y&hl=zh-CN&gl=cn&x=420&y=193&z=9
# t 地形圖 http://mt0.google.cn/vt/lyrs=t&hl=zh-CN&gl=cn&x=420&y=193&z=9
# s 衛(wèi)星地圖 http://mt3.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=420&y=193&z=9
# 也可以進(jìn)行組合，例如：s,r 或者 t,h http://mt3.google.cn/vt/lyrs=t,h&hl=zh-CN&gl=cn&x=420&y=193&z=9

private static String Google_Satellite_Url = "http://mt0.google.cn/vt/lyrs=y&hl=zh-CN&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}&s=Gali";
private static String Google_Image_Url = "http://mt0.google.cn/vt/lyrs=m&hl=zh-CN&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}&s=Gali";
private static String Google_Terrain_Url = "http://mt0.google.cn/vt/lyrs=p&hl=zh-CN&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}&s=Gali";

var tileUrl = 'http://{s}.google.com/vt/lyrs=m@159000000&'+ 'hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Gali',
var tileSubdomains = ['mt0', 'mt1', 'mt2', 'mt3'];

2.2 OpenStreetMap

https://www.openstreetmap.org/

OpenStreetMap（簡(jiǎn)稱(chēng)OSM）是一個(gè)網(wǎng)上地圖協(xié)作計(jì)劃，目標(biāo)是創(chuàng)造一個(gè)內(nèi)容自由且能讓所有人編輯的世界地圖。該平臺(tái)的數(shù)據(jù)可以自由下載。OpenStreetMap（簡(jiǎn)稱(chēng)OSM）不僅可以免費(fèi)在線使用，還可以免費(fèi)下載原始數(shù)據(jù)，數(shù)據(jù)格式有.osm.pbf和shp。

// OSM瓦片網(wǎng)頁(yè)地址：
https://tile.openstreetmap.org/{z}/{x}/{y}.png
https://c.tile.openstreetmap.org/{z}/{x}/{y}.png
https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png

// OSM經(jīng)緯度網(wǎng)頁(yè)地址：
https://www.openstreetmap.org/#map=18/39.99476/116.30986&layers=O

//OSM Cycle Map 
http://tile.thunderforest.com/cycle/{z}/{x}/{y}.png
//OSM Black and White 
http://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png
//Stamen Terrain 
http://a.tile.stamen.com/terrain/{z}/{x}/{y}.png
//Carto Positron 
https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png
//cartocdn light nolabels 
https://basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png

2.3 Thunderforest

https://www.thunderforest.com/maps/opencyclemap/

2.4 Mapbox

https://www.mapbox.com/
https://docs.mapbox.com/api/maps/static-tiles/

https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/{tilesize}/{z}/{x}/{y}{@2x}

# Returns a default 512×512 pixel tile as a JPEG
$ curl "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/1/1/0?access_token=your key"

# Returns a 1024×1024 pixel tile as a JPEG
$ curl "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/512/1/1/0@2x?access_token=your key"

2.5 ArcGIS

http://map.geoq.cn/ArcGIS/rest/services

ChinaOnlineCommunity_Mobile (MapServer)
ChinaOnlineCommunityENG (MapServer)
ChinaOnlineCommunity (MapServer)
ChinaOnlineStreetGray (MapServer)
ChinaOnlineStreetPurplishBlue (MapServer)
ChinaOnlineStreetWarm (MapServer)

// 街道圖：
https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}
// 灰色圖：
https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}
// 深藍(lán)夜色：
https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}

// 其他,Esri World Image瓦片地址
https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}
https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}

//Esri Imagery/Satellite 
https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}

//Esri Streets 
https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}

//Esri Topo 
https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}

//World Light Gray Base 
https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}

舉例1（北大未名湖）：

https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/18/99247/215766
http://wprd02.is.autonavi.com/appmaptile?x=215766&y=99247&z=18&style=7

舉例2（北大未名湖）：

https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/18/99247/215766
https://a.tile.openstreetmap.org/18/215766/99247.png

舉例3（紐約旁的小島）：

https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/18/98434/77343
https://a.tile.openstreetmap.org/18/77343/98434.png

2.6 Bing地圖

Bing Maps Tile System，https://docs.microsoft.com/en-us/bingmaps/articles/bing-maps-tile-system?redirectedfrom=MSDN

https://r1.tiles.ditu.live.com/tiles/r1321001.png?g=1001&mkt=zh-cn
http://dynamic.t2.tiles.ditu.live.com/comp/ch/{quadkey}?it=G,OS,L&mkt=en-us&cstl=w4c&ur=cn

Bing Maps的瓦片地圖圖片的URL的格式為:

http://ecn.t{0}.tiles.virtualearth.net/tiles/{1}{2}.png? g={4}
http://ecn.t3.tiles.virtualearth.net/tiles/a{q}.jpeg?g=1

• quadkey和TileXY之間的映射

根據(jù)官方文檔：在給定level下，把行號(hào)Y和列號(hào)X轉(zhuǎn)換為2進(jìn)制，然后行列交叉存儲(chǔ)，再轉(zhuǎn)換為4進(jìn)制，即得到了相應(yīng)的quadkey。譬如Level 3的第6行第4列的Tile計(jì)算：tileY = 5 = 101 ，tileX = 3 = 011；quadkey = 100111 = 213（4進(jìn)制） = “213”。反過(guò)來(lái)計(jì)算就是quadkey到TileXY的轉(zhuǎn)換。根據(jù)此方法，就很容易寫(xiě)quadkey到TileXY之間的轉(zhuǎn)換代碼。

2.7 高德地圖

高德地圖瓦片坐標(biāo)與 Google Map、Open Street Map 相同。高德地圖的墨卡托投影截取了緯度（約85.05oS, 約85.05oN）之間部分的地球，使得投影后的平面地圖水平方向和垂直方向長(zhǎng)度相等。將墨卡托投影地圖的左上角作為瓦片坐標(biāo)系起點(diǎn)，往左方向?yàn)閄軸，X軸與北緯85.05o重合且方向向左；往下方向?yàn)閅軸，Y軸與東經(jīng)180o（亦為西經(jīng)180o）重合且方向向下。瓦片坐標(biāo)最小等級(jí)為0級(jí)，此時(shí)平面地圖是一個(gè)像素為256*256的瓦片。

高德地圖的坐標(biāo)是GCJ-02坐標(biāo)（國(guó)內(nèi)的所有地圖都是，有的還進(jìn)行了二次加偏）,高德的瓦片分割方式和谷歌的一樣,style=7是路線圖，6的話是衛(wèi)星圖。
高德的z取值范圍是[1,19]。不過(guò)衛(wèi)星圖實(shí)測(cè)只能取到18。

瓦片請(qǐng)求地址參數(shù)說(shuō)明如下：

// 高德影像
https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
// 高德路網(wǎng)
https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8&ltype=3
// 高德矢量
http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}

// 高德道路純圖
https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x=215766&y=99247&z=18&scl=1&ltype=2
// 高德道路簡(jiǎn)圖
http://webrd01.is.autonavi.com/appmaptile?x=215766&y=99247&z=18&size=1&scale=1&style=7
// 高德道路詳圖
http://webrd01.is.autonavi.com/appmaptile?x=215766&y=99247&z=18&lang=zh_cn&size=1&scale=1&style=8

• 其他

url:"https://webst{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&style=6", // 添加高德影像
subdomains:["01","02","03","04"] //多域名請(qǐng)求

private static String AMap_Satellite_Url = "http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}";
private static String AMap_Cover_Url = "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8";
private static String AMap_Image_Url = "http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}";

2.8 百度地圖

百度圖片瓦片的層級(jí)是[3~18]。

http://online1.map.bdimg.com/onlinelabel/?qt=tile&x=49310&y=10242&z=18

2.9 搜狗地圖

http://p2.go2map.com/seamless1/0/174/717/3/1/744_212.png

2.10 騰訊地圖

顯示邊界信息：可以查看區(qū)域的經(jīng)緯度的范圍。
疊加自定義網(wǎng)格：可以查看區(qū)域的瓦片的坐標(biāo)。
限定最大最小縮放級(jí)別：查看當(dāng)前地圖的縮放級(jí)別

• 騰訊地圖瓦片的坐標(biāo)原點(diǎn)在左下角【-85.05112877980659,-180】
  Google 地圖瓦片的坐標(biāo)原點(diǎn)在左上角【85.05112877980659,-180】
• 騰訊地圖瓦片與Google的地圖瓦片切割方法相同，只不過(guò)騰訊地圖瓦片完全遵循TMS標(biāo)準(zhǔn)，Google地圖瓦片則是TMS的一種變種。
• 地圖投影坐標(biāo)系均采用Web Mercator投影，地圖瓦片分辨率也完全一致。
• 騰訊瓦片的最小縮放級(jí)別為4級(jí)（經(jīng)過(guò)本人測(cè)試是3級(jí)）。

### roadmap:普通街道；satellite:衛(wèi)星地圖；hybrid:衛(wèi)星地圖(路網(wǎng))
http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0
https://rt1.map.gtimg.com/tile?z=3&x=7&y=5&styleid=1&version=117

• OpenLayers6:

new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: "http://rt{0-3}.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0"
    })
}),

2.11 天地圖

https://www.tianditu.gov.cn/
http://lbs.tianditu.gov.cn/server/MapService.html

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=18&TILEROW=99247&TILECOL=215766&tk=您的密鑰
https://t0.tianditu.gov.cn/DataServer?T=cia_w&x=16&y=24&l=6&tk=您的密鑰

3、ol.source.Tile

https://openlayers.org/en/latest/apidoc/module-ol_source.html

結(jié)語(yǔ)

如果您覺(jué)得該方法或代碼有一點(diǎn)點(diǎn)用處，可以給作者點(diǎn)個(gè)贊，或打賞杯咖啡；╮(￣▽?zhuān)?╭
如果您感覺(jué)方法或代碼不咋地//(ㄒoㄒ)//，就在評(píng)論處留言，作者繼續(xù)改進(jìn)；o_O???
如果您需要相關(guān)功能的代碼定制化開(kāi)發(fā)，可以留言私信作者；(????)
感謝各位大佬童鞋們的支持！( ′ ▽′ )? ( ′ ▽′)っ?。?！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-423985.html

到了這里，關(guān)于【GIS開(kāi)發(fā)】OpenLayers在線瓦片數(shù)據(jù)源匯總的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！