内网离线地图
1.第一種瓦片數據源
MapDownloader：
鏈接：https://pan.baidu.com/s/1Hz__HcA5QhtGmjLNezC_pQ
提取碼：6lek
GISMysqlToLocalFile：
鏈接：https://pan.baidu.com/s/1rzVsj_DJxKr6OyvRwve4dg
提取碼：pp6f
自測可以使用
教程來自：https://www.cnblogs.com/kanyun/p/8571711.html
使用 Leaflet 加載地圖瓦片：
leaflet更多復雜操作可以查看中文文檔：
https://blog.csdn.net/YXWik/article/details/103389800
2.第二種瓦片數據源
全能電子地圖下載器（破解版）
鏈接：https://pan.baidu.com/s/1EBa0Ck8UGiFK0G7DCUhw1w
提取碼：i8yc
自測可以使用
教程來自：https://blog.csdn.net/qq_41619796/article/details/90241491
3.第三種來源網上，需要自測
來源：https://www.jianshu.com/p/ad9ce1b3c442
內容：
Web GIS離線解決方案:
在CS系統中可以基于GMap.Net來做，參考《百度谷歌離線地圖解決方案》
下面介紹下Web系統如何使用GIS切片數據，開發web GIS系統。
首先開發web GIS 主要是采用一些前端框架，目前主流的gis前端框架是 openlayers 和 Leaflet 至于兩者優劣，讀者可自行百度，我在項目中使用的是 Leaflet
打開地圖下載器（工具在底部的github項目里，可自行下載）
找到 MapDownloader.exe.config 文件 進行修改
具體的就是修改我紅框中的內容：該數據庫地址，用戶名密碼等扽，改成自己的就行
修改保存，雙擊
然后做一些設置
首先選擇mysql數據庫，其次選擇你要下載地圖的地方，我這里選擇的是北京，根據自己的需求進行選擇，選擇的位置過大，下載的時間就會很長
接下來選擇地圖，這一步操作十分重要我在這一步耽誤了很長時間，一開始的時候沒有選擇地圖，結果出現地圖不顯示的情況，后臺換百度，谷歌都不行，換了高德就沒問題了，個人可以依情況選擇
就是這個菜單，選擇需要下載的地圖提供方，選擇完畢之后，雙擊彈出提示框
這是讓你選擇下載的級別，通俗來說就是地圖的精細程度，級別越大地圖就能顯示的越精準，需要注意的是，當級別超過15，地圖的數據量會特別大，這里給出級別為15的地圖的樣子，個人可以根據情況來判定
級別選到15大概就是這個樣子
等待下載完成之后，進入你的mysql 數據庫 發現新建了一張數據表
接下來要做的就是把這張數據庫表的數據，導出成瓦片地圖（其實就是一張張有規律的256*256圖片）
打開 GISMysqlToLocal.exe（后面會給出下載地址）
該填寫的填寫完整，然后點擊導出就可以導出圖片了，導出完成后，進入你導出的文件夾內 ，可以看到導出的內容是這樣的
都是文件夾套文件夾的形式，然后會到導出的文件夾下，使用Ngix啟動服務，也就是把這里圖片都放到web服務器里面，你可以使用Nginx,也可以使用Apache,甚至于tomcat
這里我只介紹一下用tomcat配置靜態資源訪問
我們都知道tomcat可以配置靜態資源和動態資源，但是實際工作過程中，我們都是把靜態資源跟動態資源放到一個項目的源代碼里，進行打包部署，那么對于我們的離線地圖，靜態資源是十分大的，
把離線地圖跟我們的代碼放到一個項目里面顯然不現實，所以我們需要把靜態資源放到其他路徑
如：
/data/googlemaps那我們把文件放到這個目錄，瀏覽器如何訪問呢，使用tomcat的話，在此處配置
?<Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true"> <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" prefix="localhost_access_log." suffix=".txt" pattern="%h %l %u %t "%r" %s %b" /> <!--在Host標簽下加入Context標簽，path指的是服務器url請求地址（例如127.0.0.1/data）， docBase指的是服務器文件的路徑，reloadable指的是在omcat不重啟的情況下實時同步本地目錄,一個虛擬主機下可以配置多個Comtext標簽--> <Context path="/" docBase="//usr/local/tomcat/webapps/officeMap" reloadable="true" debug="0" crossContext="true"/><Context path="/googleMap" docBase="/data/googleMap" reloadable="true" debug="0" crossContext="true"/> </Host>注意標注顏色的地方，一般我們都只是在Host標簽下配置一個Context標簽(你的應用)，其實是可以配置兩個標簽，表示同一個端口的不同地址，重啟tomcat之后，這樣當你訪問 http://localhost:8080/googleMap/hello.png，就可以訪問靜態資源了
當然你直接訪問你的應用 localhost:8080 也是沒有問題的
當然你習慣哪個都行(生產環境推薦Nginx，測試環境推薦使用tomcat，因為可以省的配置Nginx)，只要我之后可以通過瀏覽器去訪問就可以（我這里使用了一個http-server的一個工具，不過需要先安裝Node，具體看個人需求了），啟動完成之后，測試使用瀏覽器訪問 具體就是 “ip+端口+路徑” 能訪問到圖片說明服務已經啟動成功， 暫且先不用管他
接下來編寫html頁面
第一步引入js css
標箭頭的是必須要引入的
接下來
#定義一個DIV作為地圖的容器，一定要為它設置wdith,height <div id="map"></div>接下來寫js
var map#這個地址就是你剛才啟動服務器的地址 788865972 代表你導出圖片的最上層文件夾，這個文件夾也是自動生成的var osmUrl = 'http://localhost/788865972/{z}/{x}/{y}.png';var osmAttrib = '<b style="color:#dddddd">高德地圖</b>';var osm;$(function () {osm = L.tileLayer(osmUrl, {minZoom: 5,maxZoom: 15,attribution: osmAttrib});map = L.map('map').setView([39.908419, 116.397743], 10).addLayer(osm);以上就是地圖的初始化方法：
寫完之后，保存雙擊html 就應該可以看到地圖了
紅框是我后加的內容，至此離線地圖基本已經創建完成了，要想實現更多的功能，比如地圖搜索，地圖標記可以看我的源碼，以及官網的API
特別需要提一點的是關于離線地圖的搜索，是需要你內網的數據庫里面有位置信息，然后把第三方的位置信息抓取過來，放到自己的數據庫里進行搜索等等，并非leafletjs所自有的
不過Leaflet的功能還是非常豐富的
可以自行到官網查看：http://leafletjs.com/
關于搜索的擴展功能，我的后臺源碼里已經寫了，首先自己需要創建一張數據庫表，此表需要有你抓取坐標的經緯度，名稱，位置信息等字段，坐標抓取方法，可自行百度，單需要記住一點，你用地圖下載器下載的什么地圖，抓取坐標信息
就抓取哪個地圖的坐標信息，我測試的數據是在網上下載的，如果你需要最新的數據，那么需要自己去抓取。我后臺使用springboot寫的，建表sql，已經下載地圖工具都包含在里面了，直接下載源碼，打開地圖下載器，下載地圖，然后導出瓦片圖片
再抓取一些坐標信息，就可以看到地圖，并且實現搜索功能了
源碼連接：https://github.com/chenwuwen/OffineMap
總結
- 上一篇： VSCode怎么修改主题颜色? VSCo
- 下一篇： idea2020配置springboot