整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們曾為你分享了按區(qū)縣購買衛(wèi)星影像并在線調用的方法。
于是就有朋友問，衛(wèi)星影像瓦片可以離線調用嗎？
當然可以，這里就來分享一下衛(wèi)星影像瓦片離線調用的方法。
這里以OpenLayers、Mapbox和Cesium等多個開源GIS平臺為例，為你分享衛(wèi)星影像瓦片離線調用的方法，并附上相應的源代碼示例。
OpenLayers中調用離線地圖瓦片
OpenLayers是一個用于顯示地圖的JavaScript庫，它支持多種地圖數據源，并提供了靈活的地圖渲染和交互功能。
以下是一個簡單的OpenLayers示例，演示如何調用離線地圖瓦片。
OpenLayers源碼
在這個例子中，我們使用了OpenLayers的TileLayer和XYZ源來加載離線地圖瓦片。
確保將url屬性替換為實際的離線瓦片路徑。
Mapbox中調用離線地圖瓦片
Mapbox提供了豐富的地圖服務和開發(fā)工具，其中包括Mapbox GL JS，一個基于WebGL的JavaScript庫，用于渲染交互式地圖。
以下是一個使用Mapbox GL JS的示例。
MapBox源碼
在這個例子中，我們通過map.addSource和map.addLayer方法添加了一個離線地圖瓦片源和圖層。
Cesium中調用離線地圖瓦片
Cesium是一個基于WebGL的JavaScript庫，用于創(chuàng)建三維地球和地圖應用。
以下是一個使用Cesium的示例。
Cesium源碼
在這個例子中，我們創(chuàng)建了一個Cesium地球實例，并使用SingleTileImageryProvider加載了離線地圖瓦片。
GIS多平臺集成
在實際應用中，你可能需要同時支持多個GIS平臺，以便更好地滿足用戶需求。
以下是一個簡單的示例，演示如何在一個應用中集成OpenLayers、Mapbox和Cesium。
多平臺集成源碼
在這個例子中，我們分別創(chuàng)建了OpenLayers、Mapbox和Cesium的地圖實例，并通過在HTML文件中引入相應的庫和樣式，以及在JavaScript文件中調用它們，實現了多平臺集成。
前面分享了在各GIS平臺中調用衛(wèi)星影像離線瓦片的方法，這里再為你分享如何獲取衛(wèi)星影像離線瓦片數據。
這里講的離線衛(wèi)星影像瓦片，是指吉林一號的衛(wèi)星影像瓦片。
然后在“我的套件”中，可以在線查看全國一張圖的衛(wèi)星影像效果。
衛(wèi)星影像全國一張圖
如果你對地圖質量滿意，可以按區(qū)域進行購買，但區(qū)域范圍需要大于100平方公里。
購買的離線衛(wèi)星影像瓦片無“吉林一號”水印，交付實體瓦片，適合在各平臺中進行離線加載顯示。
通過使用開源GIS平臺，如OpenLayers、Mapbox和Cesium，你可以靈活地實現離線地圖瓦片的調用。
每個平臺都有其獨特的特性和優(yōu)勢，根據你的應用需求選擇最適合的平臺或結合多個平臺以提供更豐富的地圖體驗。
著大數據時代的來臨，社會對大數據人才的需求也日益旺盛，自然少不了我們前端工程師，我們前端工程師能做什么呢？這個自然就是做大數據可視化了，數據再多，沒有很直觀的呈現那也是白搭?，F在好多政府企事業(yè)單位對大屏可視化的項目需求日益旺盛，這無疑給我們前端工程更多的機會，那我們如何入手做一款漂亮絢麗的大數據看板呢。
這個案例是不是直觀呢：
是不是很高科技上檔次呢，在來看一段視頻的動態(tài)效果：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
echarts正如官網所說，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
具有以下特點：
更多介紹請查看官網 https://www.echartsjs.com/zh/index.html
其實用到的技術很簡單，掌握基礎的前端就行
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);
本案例設計稿寬度是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彈性盒子布局，其他的內容都是基于原生的JS寫的，動畫效果基于CSS3。
由于代碼比較多，就不在這一一列舉了，由于文章不太方便貼下載鏈接，那怎么獲取本案例的代碼呢？
我們之前為大家分享過在三維地球開源平臺離線加載衛(wèi)星影像的方法，主要包括基于桌面端的OsgEarth開源三維地球和基于Web端的Cesium開源三維地球等平臺的局域網離線加載。
另外，也為大家分享過在二維開源平臺離線加載衛(wèi)星影像的方法，主要包括基于OpenLayers的內網WebGIS離線部署和基于MapBox的內網WebGIS離線部署等具體操作方法。
今天，我們再為大家分享如何基于GoogleMap離線API在內網中加載衛(wèi)星地圖的方法。
在開始之前，需要先準備離線數據發(fā)布軟件、離線衛(wèi)星影像示例數據、GoogleMap離線API開發(fā)源碼和本機IP地址等。
地圖發(fā)布軟件：需要在內網發(fā)布離線衛(wèi)星影像，請確保地圖發(fā)布服務中間件版本為4.0.6以上，如果低于該版本，請通過私信回復"中間件"免費獲取最新版本安裝包，也可以直接在水經注官方網站下載。
離線示例數據：本文提供的離線示例數據包括墨卡托投影和WGS84投影的衛(wèi)星影像與地名標簽數據，由于這里主要是為了進行功能性演示，因此只提示前10級影像數據。
衛(wèi)星影像示例數據
通過私信回復并回復"示例數據"即可獲取示例數據。
GoogleMap離線API源碼：GoogleMap離線API與OpenLayers和MapBox不同，谷歌官方網站并未提供可以直接下載的GoogleMap源碼開發(fā)工具包。
因此，這里提供的GoogleMapAPI開發(fā)工具包源碼文件，是通過技術人員從官方網站分析下載的。
現在，你只需要請通過私信回復并回復"GoogleMapAPI"即可獲取GoogleMap的離線API源碼文件。
本機IP地址：由于會用到本機IP作為訪問地址，可以通過在DOS窗口中運行"IPConfig"命令或其它方式獲取本機IP地址以備用，如下圖所示。
獲取本機IP地址
軟件的安裝與離線衛(wèi)星影像的發(fā)布方法，請參閱"全球衛(wèi)星影像離線發(fā)布神器《水經注地圖發(fā)布服務中間件4.0》正式發(fā)布"一文。
由于GoogleMapAPI是二維應用，因此這里不需要發(fā)布高程DEM數據。
但需要注意的是發(fā)布的衛(wèi)星影像和設置的投影務必要保證統(tǒng)一，且端口號沒有被其它程序占用，如下圖所示。
安裝配置
安裝完成后，會顯示如下圖所示信息。
安裝完成
打開Windows任務管理器，如果WeServer服務的狀態(tài)顯示"正在運行"，則說明中間件服務安裝成功并已經正常運行，如下圖所示。
服務運行正常
確保服務運行正確后，可以在瀏覽器中打開"Z=7/Y=48/X=105"的標簽瓦片地址檢驗發(fā)布成果，示例地址如下所示：
http://192.168.0.10:8519/WeServer/wmts/1.0.0/acimage/default/mercator/7/48/105.jpg
注：上述URL地址中的IP和端口號需要與WeServer中的配置保持一致。
如果無異常，則將會顯示北京位置北京區(qū)域的衛(wèi)星影像瓦片，如下圖所示。
衛(wèi)星影像瓦片
同樣地，也可以通過在本機瀏覽器中打開"Z=7/Y=48/X=105"的地名標簽瓦片地址檢驗發(fā)布成果，示例地址如下所示：
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發(fā)布時的順序為ZYX，如果你了解它們的區(qū)別，會有助于你在調用WeServer發(fā)布的瓦片時進行調試。
微圖中的瓦片編號
上文已經說明了如何通過WeServer在內網發(fā)布離線的衛(wèi)星影像與檢測發(fā)布結果的方法，現在我們來講一下部署GoogleMap離線API源碼的方法。
如果你還沒有獲取到GoogleMap離線API源碼，只需要請通過私信回復回復"GoogleMapAPI"即可獲取GoogleMap的離線API源碼文件。
GoogleMap源碼解壓之后，如下圖所示。
GoogleMap離線API源碼目錄
在源碼文件中，需要將"GoogleMapSample.html"文件中的IP地址與端口號修改為本機的IP地址和在WeServer中發(fā)布離線衛(wèi)星影像時設置的端口號，如下圖所示。
修改IP與端口號
接下來，需要通過IIS將GoogleMap離線API源碼發(fā)布成一個網站。
在Windows控制面板中打開"管理工具"，如下圖所示。
管理工具
打開IIS網站管理器，如下圖所示。
打開IIS
在"網站"樹節(jié)點單擊鼠標右鍵，然后選擇"添加網站"菜單，如下圖所示。
添加網站
網站名稱可以任意取，這里我們取名為"GoogleMap"，物理路徑為GoogleMap離線API源碼所在路徑，并將端口號設置為默認值"80"，如下圖所示。
配置網站參數
配置完成之后點擊"確定"按鈕之后完成網站配置，如下圖所示。
完成配置
現在，只需要在瀏覽器中訪問發(fā)布后的網站頁面，就可以離線瀏覽衛(wèi)星影像了，網址如下所示：
http://192.168.0.10/GoogleMapSample.html
注：需要將上述地址中的IP修改為本機IP，如果發(fā)布網站時不是80端口，則還需要加上端口號。
如果一切正常，則可以看到局域網內離線發(fā)布的衛(wèi)星影像地圖，如下圖所示。
離線影像加載效果
至此，一個基于 GoogleMap 離線 API 源碼在內網中加載衛(wèi)星地圖的WebGIS基礎系統(tǒng)完成了，你可以根據自己的需求再進行二次開發(fā)，添加自己的業(yè)務功能。
GoogleMap的功能非常多，我們可以通過以下網址打開官方網站進行查閱。
https://developers.google.cn/maps/documentation
在打開的頁面中點擊"Maps JavaScript API"，可以查閱相關的API文檔，如下圖所示。
GoogleMap官方文檔
官網網站提供了很多樣例與API詳細文檔，如下圖所示。
GoogleMap官方API
作為一名開發(fā)人員，查詢英文文檔應該是基本功，但如果覺得純英文有點費勁的話，可以通過Google瀏覽打開，然后點擊"中文（簡體）"將頁面內容自動翻譯成中文，如下圖所示。
查閱中文文檔
以上就是基于 GoogleMap 離線 API 源碼在內網中加載衛(wèi)星地圖的全部說明，包括了離線衛(wèi)星影像的內網發(fā)布、Google離線API源碼的發(fā)布以及幫助文檔的查閱等內容。
最后再次申明，由于本文中提供的數據為示例數據，旨在說明地圖發(fā)布服務中間件的內網離線發(fā)布功能，因此衛(wèi)星影像數據和地名標簽都僅僅提供全球前10級數據。
你可以請通過私信回復回復"免費數據"，領取一個省的高清衛(wèi)星影像數據，然后更新到對應的數據目錄即可！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
