们曾为你分享了按区县购买卫星影像并在线调用的方法。

于是就有朋友问，卫星影像瓦片可以离线调用吗？

当然可以，这里就来分享一下卫星影像瓦片离线调用的方法。

卫星影像离线瓦片如何调用？

这里以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级数据。

你可以请通过私信回复回复"免费数据"，领取一个省的高清卫星影像数据，然后更新到对应的数据目录即可！