如何使用OpenLayer發佈離線地圖

如何使用OpenLayer發佈離線地圖

發佈時間:2018-01-17 版權:

 

一. 說明:

    本實例中使用的Openlayer 版本爲最新的 Openlayer3,地圖下載器使用的是Bigemap 地圖下載器。

    Openlayer 下載地址:https://github.com/openlayers/ol3/releases/download/v3.20.1/v3.20.1-dist.zip

二. 下載地圖瓦片

1.打開Biemap地圖下載器,框選要發佈的地圖範圍,雙擊彈出下載選項框,瓦片類型選擇谷歌,文件類型建議使用png 格式,以獲得最佳清晰度。

QQ截圖20161221170942.png

三.配置Openlayer:

地圖瓦片下載完成之後 ,將瓦片放置在網站目錄下的tile文件夾中。

新建一個index.html文件,放在網站目錄下。

引入下載的Openlayer文件,這兩個文件都需要引入

    css.png

最後文件結構如下圖:

    sss.png

index.html的HTML部分如下圖:

html.png

   

JS部分如下圖:

 

QQ截圖20161221170634.png

    

這樣就配置好了,在瀏覽器中輸入網站地址,可以正常瀏覽了,如下圖:


QQ截圖20161221170848.png

點我下載源碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章