們曾為你分享了按區縣購買衛星影像并在線調用的方法。

于是就有朋友問，衛星影像瓦片可以離線調用嗎？

當然可以，這里就來分享一下衛星影像瓦片離線調用的方法。

衛星影像離線瓦片如何調用？

這里以OpenLayers、Mapbox和Cesium等多個開源GIS平臺為例，為你分享衛星影像瓦片離線調用的方法，并附上相應的源代碼示例。

OpenLayers中調用離線地圖瓦片

OpenLayers是一個用于顯示地圖的JavaScript庫，它支持多種地圖數據源，并提供了靈活的地圖渲染和交互功能。

以下是一個簡單的OpenLayers示例，演示如何調用離線地圖瓦片。

在這個例子中，我們使用了OpenLayers的TileLayer和XYZ源來加載離線地圖瓦片。

確保將url屬性替換為實際的離線瓦片路徑。

Mapbox中調用離線地圖瓦片

Mapbox提供了豐富的地圖服務和開發工具，其中包括Mapbox GL JS，一個基于WebGL的JavaScript庫，用于渲染交互式地圖。

以下是一個使用Mapbox GL JS的示例。

在這個例子中，我們通過map.addSource和map.addLayer方法添加了一個離線地圖瓦片源和圖層。

Cesium中調用離線地圖瓦片

Cesium是一個基于WebGL的JavaScript庫，用于創建三維地球和地圖應用。

以下是一個使用Cesium的示例。

在這個例子中，我們創建了一個Cesium地球實例，并使用SingleTileImageryProvider加載了離線地圖瓦片。

GIS多平臺集成

在實際應用中，你可能需要同時支持多個GIS平臺，以便更好地滿足用戶需求。

以下是一個簡單的示例，演示如何在一個應用中集成OpenLayers、Mapbox和Cesium。

在這個例子中，我們分別創建了OpenLayers、Mapbox和Cesium的地圖實例，并通過在HTML文件中引入相應的庫和樣式，以及在JavaScript文件中調用它們，實現了多平臺集成。

如何獲取衛星影像離線瓦片

前面分享了在各GIS平臺中調用衛星影像離線瓦片的方法，這里再為你分享如何獲取衛星影像離線瓦片數據。

這里講的離線衛星影像瓦片，是指吉林一號的衛星影像瓦片。

然后在“我的套件”中，可以在線查看全國一張圖的衛星影像效果。

如果你對地圖質量滿意，可以按區域進行購買，但區域范圍需要大于100平方公里。

購買的離線衛星影像瓦片無“吉林一號”水印，交付實體瓦片，適合在各平臺中進行離線加載顯示。

寫在最后

通過使用開源GIS平臺，如OpenLayers、Mapbox和Cesium，你可以靈活地實現離線地圖瓦片的調用。

每個平臺都有其獨特的特性和優勢，根據你的應用需求選擇最適合的平臺或結合多個平臺以提供更豐富的地圖體驗。

著大數據時代的來臨，社會對大數據人才的需求也日益旺盛，自然少不了我們前端工程師，我們前端工程師能做什么呢？這個自然就是做大數據可視化了，數據再多，沒有很直觀的呈現那也是白搭。現在好多政府企事業單位對大屏可視化的項目需求日益旺盛，這無疑給我們前端工程更多的機會，那我們如何入手做一款漂亮絢麗的大數據看板呢。

首先展示下我這個項目案例的效果圖

這個案例是不是直觀呢：

• 以中國地圖的形式展示設備網絡分布
• 各種餅狀圖、柱狀圖、折線圖數據刷新的效果圖
• 以及各種數據匯總的列表效果

是不是很高科技上檔次呢，在來看一段視頻的動態效果：

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

這款項目是基于echarts實現的

echarts正如官網所說，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

具有以下特點：

• 豐富的可視化類型，提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖等
• 多種數據格式無需轉換直接使用
• 千萬數據的前端展現
• 移動端優化
• 多渲染方案，跨平臺使用！
• 深度的交互式數據探索
• 多維數據的支持以及豐富的視覺編碼手段
• 動態數據
• 絢麗的特效
• 通過 GL 實現更多更強大絢麗的三維可視化

更多介紹請查看官網 https://www.echartsjs.com/zh/index.html

這個項目你需要用到的技術

其實用到的技術很簡單，掌握基礎的前端就行

• html 和 css 布局相關的知識
• jQuery相關基礎內容
• 掌握echarts的基本內容

代碼部分

Echart引用代碼示例

1、引用 echarts.min.js 文件2、準備div容器

<div id="main"></div>

3、初始化 echart 實例

var myChart=echarts.init(document.getElementById('main'));

4、初始化圖表數據，示例代碼如下

var option={
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

5、顯示圖表

myChart.setOption(option);

適配說明（rem）

本案例設計稿寬度是1920px，rem 初始基準是24px。

1、如何做適配呢？

保持設備寬度與rem基準值比例為 80 即可

2、這里用JS進行初始化基準，窗口大小改變，就會進行調整，示例代碼如下：

(function () {
    // 1、頁面一加載就要知道頁面寬度計算
    var setFont=function () {
        // 因為要定義變量可能和別的變量相互沖突，污染，所有用自調用函數
        var html=document.documentElement;// 獲取html
        // 獲取寬度
        var width=html.clientWidth;

        // 判斷
        if (width < 1024) width=1024
        if (width > 1920) width=1920
        // 設置html的基準值
        var fontSize=width / 80 + 'px';
        // 設置給html
        html.style.fontSize=fontSize;
    }
    setFont();
    // 2、頁面改變的時候也需要設置
    // 尺寸改變事件
    window.onresize=function () {
        setFont();
    }
})();

注：計算式可能有小數，很多位，保留3為有效小數，不去除0

基于 flex 布局 和 原生CSS動畫

這個頁面局基于flex彈性盒子布局，其他的內容都是基于原生的JS寫的，動畫效果基于CSS3。

如何獲取本案例

由于代碼比較多，就不在這一一列舉了，由于文章不太方便貼下載鏈接，那怎么獲取本案例的代碼呢？

1. 首先關注“前端達人”頭條號
2. 私信回復“大數據案例” 進行索取

. 概述

我們之前為大家分享過在三維地球開源平臺離線加載衛星影像的方法，主要包括基于桌面端的OsgEarth開源三維地球和基于Web端的Cesium開源三維地球等平臺的局域網離線加載。

另外，也為大家分享過在二維開源平臺離線加載衛星影像的方法，主要包括基于OpenLayers的內網WebGIS離線部署和基于MapBox的內網WebGIS離線部署等具體操作方法。

今天，我們再為大家分享如何基于GoogleMap離線API在內網中加載衛星地圖的方法。

2. 準備工作

在開始之前，需要先準備離線數據發布軟件、離線衛星影像示例數據、GoogleMap離線API開發源碼和本機IP地址等。

地圖發布軟件：需要在內網發布離線衛星影像，請確保地圖發布服務中間件版本為4.0.6以上，如果低于該版本，請通過私信回復"中間件"免費獲取最新版本安裝包，也可以直接在水經注官方網站下載。

離線示例數據：本文提供的離線示例數據包括墨卡托投影和WGS84投影的衛星影像與地名標簽數據，由于這里主要是為了進行功能性演示，因此只提示前10級影像數據。

通過私信回復并回復"示例數據"即可獲取示例數據。

GoogleMap離線API源碼：GoogleMap離線API與OpenLayers和MapBox不同，谷歌官方網站并未提供可以直接下載的GoogleMap源碼開發工具包。

因此，這里提供的GoogleMapAPI開發工具包源碼文件，是通過技術人員從官方網站分析下載的。

現在，你只需要請通過私信回復并回復"GoogleMapAPI"即可獲取GoogleMap的離線API源碼文件。

本機IP地址：由于會用到本機IP作為訪問地址，可以通過在DOS窗口中運行"IPConfig"命令或其它方式獲取本機IP地址以備用，如下圖所示。

3. 墨卡托投影衛星影像離線發布

軟件的安裝與離線衛星影像的發布方法，請參閱"全球衛星影像離線發布神器《水經注地圖發布服務中間件4.0》正式發布"一文。

由于GoogleMapAPI是二維應用，因此這里不需要發布高程DEM數據。

但需要注意的是發布的衛星影像和設置的投影務必要保證統一，且端口號沒有被其它程序占用，如下圖所示。

安裝完成后，會顯示如下圖所示信息。

打開Windows任務管理器，如果WeServer服務的狀態顯示"正在運行"，則說明中間件服務安裝成功并已經正常運行，如下圖所示。

確保服務運行正確后，可以在瀏覽器中打開"Z=7/Y=48/X=105"的標簽瓦片地址檢驗發布成果，示例地址如下所示：

http://192.168.0.10:8519/WeServer/wmts/1.0.0/acimage/default/mercator/7/48/105.jpg

注：上述URL地址中的IP和端口號需要與WeServer中的配置保持一致。

如果無異常，則將會顯示北京位置北京區域的衛星影像瓦片，如下圖所示。

同樣地，也可以通過在本機瀏覽器中打開"Z=7/Y=48/X=105"的地名標簽瓦片地址檢驗發布成果，示例地址如下所示：

http://192.168.0.10:8519/WeServer/wmts/1.0.0/aclabel/default/mercator/7/48/105.png

注：上述URL地址中的IP和端口號需要與WeServer中的配置保持一致。

如果無異常，則將會顯示地名標簽結果，如下圖所示。

在微圖中打開瓦片網格顯示功能，我們可以看到上文中的瓦片"Z=7/Y=48/X=105"，在微圖中對應的是"Z=8/X=49/Y=106"瓦片。

也就是說，微圖軟件中的瓦片編號是從1開始的，因此行列號都會比WeServer大1，且它的編號顯示順序為ZXY，而WeServer發布時的順序為ZYX，如果你了解它們的區別，會有助于你在調用WeServer發布的瓦片時進行調試。

4. 部署GoogleMap離線API源碼網站

上文已經說明了如何通過WeServer在內網發布離線的衛星影像與檢測發布結果的方法，現在我們來講一下部署GoogleMap離線API源碼的方法。

如果你還沒有獲取到GoogleMap離線API源碼，只需要請通過私信回復回復"GoogleMapAPI"即可獲取GoogleMap的離線API源碼文件。

GoogleMap源碼解壓之后，如下圖所示。

在源碼文件中，需要將"GoogleMapSample.html"文件中的IP地址與端口號修改為本機的IP地址和在WeServer中發布離線衛星影像時設置的端口號，如下圖所示。

接下來，需要通過IIS將GoogleMap離線API源碼發布成一個網站。

在Windows控制面板中打開"管理工具"，如下圖所示。

打開IIS網站管理器，如下圖所示。

在"網站"樹節點單擊鼠標右鍵，然后選擇"添加網站"菜單，如下圖所示。

網站名稱可以任意取，這里我們取名為"GoogleMap"，物理路徑為GoogleMap離線API源碼所在路徑，并將端口號設置為默認值"80"，如下圖所示。

配置完成之后點擊"確定"按鈕之后完成網站配置，如下圖所示。

現在，只需要在瀏覽器中訪問發布后的網站頁面，就可以離線瀏覽衛星影像了，網址如下所示：

http://192.168.0.10/GoogleMapSample.html

注：需要將上述地址中的IP修改為本機IP，如果發布網站時不是80端口，則還需要加上端口號。

如果一切正常，則可以看到局域網內離線發布的衛星影像地圖，如下圖所示。

離線影像加載效果

至此，一個基于 GoogleMap 離線 API 源碼在內網中加載衛星地圖的WebGIS基礎系統完成了，你可以根據自己的需求再進行二次開發，添加自己的業務功能。

5. 如何查閱GoogleMapAPI開發文檔

GoogleMap的功能非常多，我們可以通過以下網址打開官方網站進行查閱。

https://developers.google.cn/maps/documentation

在打開的頁面中點擊"Maps JavaScript API"，可以查閱相關的API文檔，如下圖所示。

官網網站提供了很多樣例與API詳細文檔，如下圖所示。

作為一名開發人員，查詢英文文檔應該是基本功，但如果覺得純英文有點費勁的話，可以通過Google瀏覽打開，然后點擊"中文（簡體）"將頁面內容自動翻譯成中文，如下圖所示。

6. 總結

以上就是基于 GoogleMap 離線 API 源碼在內網中加載衛星地圖的全部說明，包括了離線衛星影像的內網發布、Google離線API源碼的發布以及幫助文檔的查閱等內容。

最后再次申明，由于本文中提供的數據為示例數據，旨在說明地圖發布服務中間件的內網離線發布功能，因此衛星影像數據和地名標簽都僅僅提供全球前10級數據。

你可以請通過私信回復回復"免費數據"，領取一個省的高清衛星影像數據，然后更新到對應的數據目錄即可！