Web GIS 離線地圖

時間 2019-11-07

標籤 web gis 離線地圖欄目 HTML 简体版

原文原文鏈接

Web GIS 離線地圖

1，基於瓦片的離線地圖下載

博客園阿凡盧提供了離線地圖的下載工具，下載地址：http://pan.baidu.com/s/1cxGpXW 具體使用見 參考資料2javascript

阿凡盧 提供的地圖下載軟件，對於導出的瓦片圖片的目錄是基於ArcGIS切片目錄，我編寫了將導出到Mysql數據庫中的瓦片數據導出爲{type}/{z}/{x}/{y}.png 格式。具體步驟以下:css

A 使用 阿凡盧 提供的地圖下載軟件將地圖導出到Mysql數據庫html

B 使用我開發的軟件把Mysql數據庫中的瓦片數據導出到本地文件點擊這裏下載前端

導出的圖片目錄以下：java

這二步作好了之後，在IIS上新建一個空的網站，把咱們的地圖切片拷貝過去便可。sql

2，前端JS 用來加載地圖的瓦片數據

前端推薦使用 Leaflet ，這裏我已經把相關的 css,js 下載到了本地。具體代碼以下:數據庫

<html>
    <head>
        <title>離線地圖</title>
        <link rel="stylesheet" href="dist/leaflet.css" />
        <!--[if lte IE 8]>
        <link rel="stylesheet" href="dist/leaflet-ie.css" />
        <link rel="stylesheet" href="dist/locate-ie.css"/>
        <![endif]-->
        <link rel="stylesheet" href="dist/mobile.css" />
        <link rel="stylesheet" href="dist/locate.css" />
    
        <script src="dist/leaflet.js"></script>
        <script src="dist/proj4js-compressed.js"></script>
        <script src="dist/proj4leaflet.js"></script>
        <script src="dist/locate.js" ></script>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <script type="text/javascript">
        var map = L.map('map').setView([31.2269, 121.4648], 12);

        L.tileLayer('http://localhost:8080/1818940751/{z}/{x}/{y}.png', {
            attribution: '&copy; Google China'
        }).addTo(map);
        
        L.marker([31.229243, 121.479950]).addTo(map)
            .bindPopup('DTS 1<br>31° 38° 49°')
            .openPopup();
    </script>