查阅网上的资料以及做了些微调研之后，总结了一下目前离线地图大致上有两种解决方案。
一、修改离线包源码
以高德地图为例，在使用时，地图内部会发起部分网络请求，离线环境下肯定是请求不到数据的，会发生白屏。
解决：
- 从官方下载js包，修改源码，把请求都改为内网服务器请求。
- 将高德地图js包存储在前端static目录下，使用相对路径引入。
- 需要注意断网测试时，是否有插件加载不出来。（如AMap.Scale、AMap.MarkerCluste等）
适用：这是需求已经开发完，但是需要部署到内网上的应对方案。源码修改较为麻烦，可能踩到的坑太多，是不常规的做法，因此不予采用。
二、使用地图瓦片+openlayer(2d)/cesium(3d)
地图瓦片
下载地图瓦片，我使用的是网上随便找的全能电子地图下载器，瓦片准确性、完整性有待考究，仅做练手、学习使用。
了解到客户方有自己的地图服务器，本地我只下载了一个层级的瓦片制作了一个小demo,并且成功展示出来，接下来的练习直接采用加载互联网瓦片的形式（高德地图）。
制作的demo如下，可以直接使用，引入的瓦片需自行下载，并存放在html同级tiles文件夹下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
</head>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="map"></div>
<script type="text/javascript">
// 创建地图
var map = new ol.Map({
view: new ol.View({
center: [113.26904, 23.12899], // 中心点, 填的是经纬度
projection: 'EPSG:4326', // EPSG:4326格式的经纬度
zoom: 10, // 地图默认缩放级别
// maxZoom: 4, // 地图最大缩放级别
minZoom: 6, // 地图最小缩放级别
}),
target: 'map', // 地图容器id
})
// 创建一个使用离线地图瓦片的层
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: './tiles/{z}/{x}/{y}.png'
})
});
// 将层添加进地图
map.addLayer(offlineMapLayer);
</script>
</body>
</html>
地图框架
查阅了各类资料和博客，目前市面上常见的地图开发框架有四个，Cesium、Mapbox、Openlayer、Leaflet。
以下是查阅的各类框架的差异和特点：
- Cesium: 主流三维地图框架，支持桌面端、web端、移动端等多平台。
- Mapbox：高清经纬度矢量瓦片，个性化前端表达，前端矢量绘制，支持海量地名地址。
- Openlayer：稳定可靠的集成式地图开发脚本，兼容老旧版本的IE浏览器，适合传统webGIS开发。
- Leaflet：轻量级的地图脚本，丰富插件，优秀拓展性，适合轻应用及移动端webGIS开发。
当前三维地图框架，仍以Cesium为主，Mapbox中国地区无法注册账号获取token，因此三维gis框架选择Cesium。
二维gis框架，Openlayer和Leaflet主要差异点在于，Leaflet专注小而美，只提供基本的地图调用和交互，复杂功能需要额外插件支持，插件丰富。Openlayer是将所有的功能做到一起，且保留了扩展类的功能，引入会造成项目过于臃肿。根据实际业务场景的复杂度选择框架即可。由于个人想学习Openlayer，因此接下来二维地图将使用该框架。
参考：
