當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

百度离线地图下载和叠加层瓦片切割(工具下载链接已更新)

發布時間：2023/12/20 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了百度离线地图下载和叠加层瓦片切割(工具下载链接已更新) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

注：如有侵權行為，請聯系我刪除。

注：如需轉載請聯系本人，并注明出處。

注：工具下載鏈接已更新? 時間：20201109

前言

工具

切片方法

離線地圖瓦片下載

?離線瓦片和疊加層結合

結語

前言

萬惡的百度，只要你所有一下百度離線地圖，就會出現一堆有用沒用，似曾相識的網站和博客，直接讓你摸不著頭腦。雖然csdn上已經有了很多類似該標題的博客來寫瓦片的切片過程，但是我覺得很多都只講了其一，要是想通過一個博客就把整個疊加層做下來很難。

工具

工具已過期，網上自行尋找

PS：百度自行下載一個PS工具，用來對需要疊加的圖片進行旋轉，放大縮小

以上工具都是大神們在GitHub上開源的項目，有興趣可以去搜一下

接下來我結合我自己的需求來說一下具體的切片方法

1、縮放地圖到任意級別直至你可以在一張瓦片或者4張/9張瓦片上面看清楚你要疊加的地圖，然后將這幾塊瓦片截圖保存

由于我需要的區域比較大，這里在13級別的時候能完整的展示，所以就截取了4張瓦片，存為13-4.png

2、在ps中新建一個2048*2048像素的背景透明圖層，然后將13-4.png放到該圖層上，由于一張瓦片大小是256*256像素，所以放進去之后會發現13-4.png很小，選擇13-4.png然后按下shift-T可以自由變換，按住shift等比例放大13-4.png直至填充滿整個圖層。按回車保存

------>

3、新建一個圖層，將疊層圖片13-4-over.png縮放、旋轉直至與目標區域完全重合。

4、記錄下當前位置的13-4-over.png，然后可以使用套索工具和魔棒把13-4-over.png中不需要的、多余的部分內容刪掉，為了美觀只保留需要的部分。

---->

5、將修改好的13-4-over.png存儲為web所用格式名稱為13-4-over-web.png，這樣可以使得該圖層的周圍部分從白色變成透明

6、開始切片

切片有兩個關鍵點： 1、疊加層圖片的中心位置? 2、疊加層圖片的像素大小

7、把13-4-over-web.png圖片拖拽到ps中，就可以找到圖片的中心點，當然也可以用標尺工具找到圖片的中心點，注意這里是整張圖層的中心，不要忽略透明部分。打開??拾取坐標系統?在地圖上找到該中心點的坐標經緯度。

8、打開切片工具，

8.1 選擇疊加層圖片： 13-4-over-web.png

8.2 選擇輸出路徑： C:\Users\Administrator\Desktop\圖層測試\test1

8.3 選擇輸出類型：圖片以及代碼

8.4 坐標設置? ：把剛才選擇的經緯度填入

8.5 級別設置：? 自定義，這里要提示兩點，

1、原圖所在級別表示疊加層圖片13-4-over-web.png在當前層級既不放大也不縮小，這也就說明18級以上它會放大，以下它會縮小，具體怎么縮放不需要管，只要在原圖所在級別的的圖片對準了，那其他級別基本準確。

2、如果想讓疊加層圖片的清晰度越高，就需要分辨了越高的圖片，因此原圖所在級別就也需要更高。

8.6 圖層設置：做為圖層

8.7 確認信息不誤后開始切面，然后就可以去泡杯茶回來看結果了；

9、打開test1文件夾下面的index.html網頁，查看疊加層的位置

顯然我的疊加層小了，而且小了很多，出現這種情況的原因有：

疊加層在地圖上太小	方法
疊加層圖片的像素太小	更改圖片大小
原圖所在級別在高	更改8.5中原圖所在級別為更低

疊加層在地圖上太大	方法
疊加層圖片的像素太小	更改圖片大小
原圖所在級別在低	更改8.5中原圖所在級別為更高

10、現在我們完善一下怎么讓圖片疊加更加準確

10.1 首先查看13.4-over.png的分辨率

10.2 根據你要縮放的層級設置新建圖層的像素大小，長寬公式為：256*2^(最大級別-最小級別)，但是我覺得這個也不是死標準，具體還得看你需要覆蓋的疊加層圖片的像素大小。要是疊加層圖片像素大于理論圖片大小，將理論圖片大小再放大多倍。

10.3 將10.2中13.4-over.png圖片進行旋轉縮放，并找到中心位置后保存。

10.4 這里最好先將13.4-over.png（疊加層原圖）的多余部分、空白區域刪除后再進行縮放操作。

10.5 重復 6-9 步，可以先確定中心位置的經緯度坐標，然后確定原圖所在的級別，最后確定圖片的分辨率，在確定的分辨率下對13.4-over.png圖片進行縮放。

像我的疊加層原圖大小是7466*5812，我就設置新建的圖層大小為8192*8192來保存我的疊加層圖片，但是我發現依舊不夠大，所以我又用了10240*10240的圖層來存放我的原圖

---->----->

這個效果就出來了。

雖然看起來挺流暢，實際制作過程也需要進行多次實驗才能達到準確的效果

================================================end1===================================================

接下來說一下離線地圖瓦片下載

1、打開百度地圖瓦片下載——無水印工具

2、輸入百度地圖的ak，沒有的可以去百度地圖官網申請一個密鑰，

3.選擇需要的區域進行下載，有兩種下載方式? ? 1：可視區域2：行政區域

4、點擊下載瓦片后會彈出一個窗口，選擇要下載的瓦片級別，要是電腦性能比較好的，可以修改線程數，層級越大，下載需要的時間就越多，這里具體可以百度一下該瓦片工具的使用方法。

5、下載完成之后就可以開始使用了。

========================================================end2===========================================

?接下來就是把離線瓦片和疊加層結合

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 name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:100%}</style></head><body><div id="container"></div></body> </html><script type="text/javascript">var map = new BMap.Map("container"); //創建地圖實例var point = new BMap.Point(117.42625,38.843485); // 創建點坐標map.centerAndZoom(point, 13); // 初始化地圖,設置中心點坐標和地圖級別。//map.addControl(new BMap.MapTypeControl());map.addControl(new BMap.NavigationControl());map.enableScrollWheelZoom(); // 啟用滾輪放大縮小。map.enableKeyboard(); // 啟用鍵盤操作。 map.setCurrentCity("天津"); // 設置地圖顯示的城市此項是必須設置的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===================================================

結語

? ? ? ?以上就是我在制作百度離線地圖和疊加層的時候所總結的一些工具和方法，希望能幫上正在做離線地圖的小伙伴，如有不正確的地方，還請大家指正，如有更好的方法，也歡迎大家給我留言。

總結

以上是生活随笔為你收集整理的百度离线地图下载和叠加层瓦片切割(工具下载链接已更新)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。