项目部署在内网，无法上互联网，客户又不提供地图资源，咋办？只能使用离线地图了。

一、下载离线地图

离线地图从哪里来？AI推荐了好几种方式，亲测发现Mobile Atlas Creator勉强可用。

1、Mobile Atlas Creator的版本问题

Mobile Atlas Creator官网有多个版本。最新的好像是多少不记得了，但需要比较高版本的java虚拟机支持。我还在用古老的JDK8，找来找去，只有Mobile Atlas Creator2.0.0合适。

也许是版本比较低吧，Mobile Atlas Creator上的绝大部分地图源都无法使用，只有一个波兰的矢量地图可以用，但十分简约。

后来发现可以自己添加地图源。方法是编辑一个XML文件，放在Mobile Atlas Creator根目录下的mapsources文件夹。XML名字自定义，但XML的内容格式什么苛刻，应该与官方的文档说明严格保持一致，否则地图资源列表里连名字都出不来，更遑论加载地图资源了。

2、一个可用的地图资源

什么google也，bing也，高德也，地图全部不能在Mobile Atlas Creator下载。但是ESRI却可以。以下是一个亲测可用的for Mobile Atlas Creator的地图资源XML：

esri.xml

<customMapSource>
  <name>ESRI Imagery</name>
  <url>https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{$z}/{$y}/{$x}</url>
  <minZoom>0</minZoom>
  <maxZoom>18</maxZoom>
  <tileType>png</tileType>
</customMapSource>

扔到mapsources文件夹下

效果下：

3、下载离线地图

新建地图册，选第一个类型AFTrack（OSZ)，在地图上用鼠标框选要下载的范围，添加选择区域，设置好缩放级别，即可下载。

下载后得到一个osz后缀的文件。这是一个压缩包，用压缩软件，比如rar就能解开。里面为按照级别（z/y/x.png）存放的图片。

解开后

4、Mobile Atlas Creator下载离线地图的机制与浏览器不同

我刚开始时，想的是仿照WEBA加载天地图的办法，将天地图的WMS地址赋给Mobile Atlas Creator，但实际上行不通，地图出不来。原因应该是该天地图资源只放行浏览器的请求吗，而Mobile Atlas Creator的请求机制可能不一样，就被拒了。

5、何处望神洲

我的Mobile Atlas Creator是2025年9月份下载的，当时用了163.com邮箱注册的账号，现在已经无法登录了。

二、使用离线地图

我的前端是vue3，使用openlayers来操作地图。代码如下：

假设底图图层定义如下

"layers": [
    {
      "title": "矢量底图",
      "url": "/sz/{z}/{x}/{y}.png",
      "type": "base",
      "visible": true
    },
    {
      "title": "影像底图",
      "url": "/sz-img/{z}/{x}/{y}.png",
      "type": "base",
      "visible": true
    }
  ],

则地图加载底图代码：

		import Map from 'ol/Map';
		import View from 'ol/View';
		import TileLayer from 'ol/layer/Tile';
		import XYZ from 'ol/source/XYZ';
		import LayerSwitcher from 'ol-layerswitcher';
		import Zoom from 'ol/control/Zoom' // 引入缩放控件
		//import { OverviewMap } from 'ol/control';
		import MousePosition from 'ol/control/MousePosition'
		import ScaleLine from 'ol/control/ScaleLine' // 引入比例尺控件
		import { fromLonLat } from 'ol/proj';

    const map = new Map({
        target: mapContainer.value,
        layers: createLayers(config.layers),//加载底图
        view: new View({
            center: fromLonLat(config.center), // 使用 fromLonLat 转换为 EPSG:3857 坐标
            zoom: config.zoom,
            projection: config.projection, // 使用WGS84坐标系
        }),
        controls: [
            new Zoom(), // 添加缩放控件
            //overviewMapControl, // 添加鹰眼控件
            mousePositionControl,
            new ScaleLine({
                target: document.getElementById('scale-line-container'),
                units: 'metric',
            }), // 添加比例尺控件
            new LayerSwitcher() //图层切换
        ],
    });

    function createLayers(layerInfos) {//加载底图方法
        const layers = [];

        layerInfos.forEach(item => {
            const layer = new TileLayer({
                source: new XYZ({
                    url: item.url,
                }),
                type: item.type, // 表示是底图
                visible: item.visible
            });
            layer.set('title', item.title);
            layers.push(layer);
        });

        return layers;
    }