百度离线地图下载和叠加层瓦片切割(工具下载链接已更新)
注：如有侵權(quán)行為，請聯(lián)系我刪除。
注：如需轉(zhuǎn)載請聯(lián)系本人，并注明出處。
注：工具下載鏈接已更新? 時間：20201109
目錄
前言
工具
切片方法
離線地圖瓦片下載
?離線瓦片和疊加層結(jié)合
結(jié)語
前言
萬惡的百度，只要你所有一下百度離線地圖，就會出現(xiàn)一堆有用沒用，似曾相識的網(wǎng)站和博客，直接讓你摸不著頭腦。雖然csdn上已經(jīng)有了很多類似該標(biāo)題的博客來寫瓦片的切片過程，但是我覺得很多都只講了其一，要是想通過一個博客就把整個疊加層做下來很難。
工具
工具已過期，網(wǎng)上自行尋找
PS：百度自行下載一個PS工具，用來對需要疊加的圖片進(jìn)行旋轉(zhuǎn)，放大縮小
以上工具都是大神們在GitHub上開源的項(xiàng)目，有興趣可以去搜一下
接下來我結(jié)合我自己的需求來說一下具體的切片方法
1、縮放地圖到任意級別直至你可以在一張瓦片或者4張/9張瓦片上面看清楚你要疊加的地圖，然后將這幾塊瓦片截圖保存
由于我需要的區(qū)域比較大，這里在13級別的時候能完整的展示，所以就截取了4張瓦片，存為13-4.png
2、在ps中新建一個2048*2048像素的背景透明圖層，然后將13-4.png放到該圖層上，由于一張瓦片大小是256*256像素，所以放進(jìn)去之后會發(fā)現(xiàn)13-4.png很小，選擇13-4.png然后按下shift-T可以自由變換，按住shift等比例放大13-4.png直至填充滿整個圖層。按回車保存
------>
3、新建一個圖層，將疊層圖片13-4-over.png縮放、旋轉(zhuǎn)直至與目標(biāo)區(qū)域完全重合。
4、記錄下當(dāng)前位置的13-4-over.png，然后可以使用套索工具和魔棒把13-4-over.png中不需要的、多余的部分內(nèi)容刪掉，為了美觀只保留需要的部分。
---->
5、將修改好的13-4-over.png存儲為web所用格式名稱為13-4-over-web.png，這樣可以使得該圖層的周圍部分從白色變成透明
6、開始切片
切片有兩個關(guān)鍵點(diǎn)： 1、疊加層圖片的中心位置? 2、疊加層圖片的像素大小
7、把13-4-over-web.png圖片拖拽到ps中，就可以找到圖片的中心點(diǎn)，當(dāng)然也可以用標(biāo)尺工具找到圖片的中心點(diǎn)，注意這里是整張圖層的中心，不要忽略透明部分。 打開??拾取坐標(biāo)系統(tǒng)?在地圖上找到該中心點(diǎn)的坐標(biāo)經(jīng)緯度。
8、打開切片工具，
8.1 選擇疊加層圖片： 13-4-over-web.png
8.2 選擇輸出路徑： C:\Users\Administrator\Desktop\圖層測試\test1
8.3 選擇輸出類型 ：圖片以及代碼
8.4 坐標(biāo)設(shè)置? ：把剛才選擇的經(jīng)緯度填入
8.5 級別設(shè)置 ：? 自定義，這里要提示兩點(diǎn)，
1、原圖所在級別表示疊加層圖片13-4-over-web.png在當(dāng)前層級既不放大也不縮小，這也就說明18級以上它會放大，以下它會縮小，具體怎么縮放不需要管，只要在原圖所在級別的的圖片對準(zhǔn)了，那其他級別基本準(zhǔn)確。
2、如果想讓疊加層圖片的清晰度越高，就需要分辨了越高的圖片，因此原圖所在級別就也需要更高。
8.6 圖層設(shè)置：做為圖層
8.7 確認(rèn)信息不誤后開始切面，然后就可以去泡杯茶回來看結(jié)果了；
9、打開test1文件夾下面的index.html網(wǎng)頁，查看疊加層的位置
顯然我的疊加層小了，而且小了很多，出現(xiàn)這種情況的原因有：
| 疊加層在地圖上太小 | 方法 |
| 疊加層圖片的像素太小 | 更改圖片大小 |
| 原圖所在級別在高 | 更改8.5中原圖所在級別為更低 |
| 疊加層在地圖上太大 | 方法 |
| 疊加層圖片的像素太小 | 更改圖片大小 |
| 原圖所在級別在低 | 更改8.5中原圖所在級別為更高 |
?
?
?
?
?
?
?
10、現(xiàn)在我們完善一下怎么讓圖片疊加更加準(zhǔn)確
10.1 首先查看13.4-over.png的分辨率
10.2 根據(jù)你要縮放的層級設(shè)置新建圖層的像素大小，長寬公式為：256*2^(最大級別-最小級別)，但是我覺得這個也不是死標(biāo)準(zhǔn)，具體還得看你需要覆蓋的疊加層圖片的像素大小。要是疊加層圖片像素大于理論圖片大小，將理論圖片大小再放大多倍。
10.3 將10.2中13.4-over.png圖片進(jìn)行旋轉(zhuǎn)縮放，并找到中心位置后保存。
10.4 這里最好先將13.4-over.png（疊加層原圖）的多余部分、空白區(qū)域刪除后再進(jìn)行縮放操作。
10.5 重復(fù) 6-9 步，可以先確定中心位置的經(jīng)緯度坐標(biāo)，然后確定原圖所在的級別，最后確定圖片的分辨率，在確定的分辨率下對13.4-over.png圖片進(jìn)行縮放。
像我的疊加層原圖大小是7466*5812，我就設(shè)置新建的圖層大小為8192*8192來保存我的疊加層圖片，但是我發(fā)現(xiàn)依舊不夠大，所以我又用了10240*10240的圖層來存放我的原圖
---->----->
這個效果就出來了。
雖然看起來挺流暢，實(shí)際制作過程也需要進(jìn)行多次實(shí)驗(yàn)才能達(dá)到準(zhǔn)確的效果
================================================end1===================================================
接下來說一下離線地圖瓦片下載
1、打開百度地圖瓦片下載——無水印工具
2、輸入百度地圖的ak，沒有的可以去百度地圖官網(wǎng)申請一個密鑰，
3.選擇需要的區(qū)域進(jìn)行下載，有兩種下載方式? ? 1：可視區(qū)域2：行政區(qū)域
4、點(diǎn)擊下載瓦片后會彈出一個窗口，選擇要下載的瓦片級別，要是電腦性能比較好的，可以修改線程數(shù)，層級越大，下載需要的時間就越多，這里具體可以百度一下該瓦片工具的使用方法。
5、下載完成之后就可以開始使用了。
========================================================end2===========================================
?接下來就是把離線瓦片和疊加層結(jié)合
1、將疊加層文件夾放到離線地圖文件夾下，命名為14-19-over
2.修改demo.html為
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>百度離線版2.0 DEMO</title><script type="text/javascript" src="js/apiv2.0.min.js"></script><link rel="stylesheet" type="text/css" href="css/bmap.css"/><!-- 添加一個meta標(biāo)簽, 使頁面更好的在移動平臺上展示 --><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><!-- 解決中文亂碼問題 --><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- 設(shè)置樣式, 使地圖充滿整個瀏覽器窗口 --><style type="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:100%}</style></head><body><!-- 創(chuàng)建地圖容器元素 地圖需要一個HTML元素作為容器，這樣才能展現(xiàn)到頁面上。這里我們創(chuàng)建了一個div元素 --><div id="container"></div></body> </html><script type="text/javascript">var map = new BMap.Map("container"); //創(chuàng)建地圖實(shí)例var point = new BMap.Point(117.42625,38.843485); // 創(chuàng)建點(diǎn)坐標(biāo)map.centerAndZoom(point, 13); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別。//map.addControl(new BMap.MapTypeControl());map.addControl(new BMap.NavigationControl());map.enableScrollWheelZoom(); // 啟用滾輪放大縮小。map.enableKeyboard(); // 啟用鍵盤操作。 map.setCurrentCity("天津"); // 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的map.enableScrollWheelZoom(); //啟用滾輪放大縮小var tileLayer = new BMap.TileLayer({isTransparentPng: true});tileLayer.getTilesUrl = function(tileCoord, zoom) {var x = tileCoord.x;var y = tileCoord.y;return "http://lbsyun.baidu.com/jsdemo/img/border.png";}tileLayer.getTilesUrl = function(tileCoord, zoom) {var x = tileCoord.x;var y = tileCoord.y;return '14-19-over/'+'tiles/' + zoom + '/tile-' + x + '_' + y + '.png';} map.addTileLayer(tileLayer);var marker = new BMap.Marker(point);map.addOverlay(marker); </script>3、保存后打開demo.html
=================================================end===================================================
結(jié)語
? ? ? ?以上就是我在制作百度離線地圖和疊加層的時候所總結(jié)的一些工具和方法，希望能幫上正在做離線地圖的小伙伴，如有不正確的地方，還請大家指正，如有更好的方法，也歡迎大家給我留言。
?
總結(jié)
以上是生活随笔為你收集整理的百度离线地图下载和叠加层瓦片切割(工具下载链接已更新)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： pandas读写各种类型数据
- 下一篇： 异常检测算法之IForest