vue nginx离线地图

### 配置 Nginx 支持 Vue 项目加载高德离线地图瓦片 为了使 Vue 项目能够顺利加载高德离线地图瓦片，需正确配置 Nginx 来托管这些静态资源。以下是详细的配置方法： #### 修改 `nginx.conf` 文件 在 Nginx 的配置文件中添加一个新的 server 块用于处理地图瓦片请求: ```nginx server { listen 80; server_name localhost; location /tiles/ { alias /path/to/tiles/; try_files $uri =404; expires max; add_header Cache-Control "public"; } location / { root /path/to/vue/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } } ``` 此配置做了两件事：一是指定了 `/tiles/` URL 路径对应的实际磁盘位置；二是设置了缓存策略以提高性能[^1]。 #### 设置瓦片目录结构 确保瓦片按照标准 TMS 或 XYZ 方式存储于指定路径下，通常为三层嵌套文件夹形式 (zoom/x/y.png)，例如对于广州地区第15级缩放比例的地图片段可能位于如下路径： ``` /path/to/tiles/ ├── 15 │ ├── 0 │ │ └── ... │ ├── 1 │ │ └── ... │ └── ... └── ... ``` 这种布局便于浏览器快速定位并获取所需图像[^2]。 #### 更新 Vue 应用中的地图初始化脚本 最后一步是在前端代码里调整地图实例创建逻辑，使其指向本地服务提供的瓦片URL模板。假设已将上述 nginx 实例运行在 http://localhost 上，则可以这样设置： ```javascript var map = new AMap.Map('container', { zoom: 15, center: [113.2644, 23.1291], // 广州中心坐标 layers: [ new AMap.TileLayer({ getTileUrl: 'http://localhost/tiles/{z}/{x}/{y}.png' }) ] }); ``` 以上即完成了整个流程描述，现在应该可以在内网环境中正常显示基于高德API构建的离线地图应用了。

### 集成高德离线地图至 Vue3 项目 #### 准备工作 为了在 Vue3 中集成高德离线地图，需先获取并准备必要的文件。选择的地图层级为0-15级，并完成下载[^1]。 #### 设置 Nginx 内网服务器 所下载的地图数据应放置于 nginx 的内网服务器环境中，确保这些静态资源能够被正确访问。 #### 加载高德 API 和配置 对于 Vue3 应用来说，在 `main.js` 或者相应的入口文件中引入高德 JSAPI 是必需的操作。考虑到2025年1月10日提到的解决方案，可以采用如下方式来规避内网环境下首次无法加载离线地图的问题： ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 动态创建 script 标签以加载高德地图 API const amapScript = document.createElement('script'); amapScript.type = 'text/javascript'; amapScript.src = 'https://webapi.amap.com/maps?v=2.0&key=你的Key'; // 替换为你自己的 Key document.head.appendChild(amapScript); createApp(App).mount('#app'); ``` #### 处理图标和其他资源 除了核心的地图包外，还需要额外下载一些用于显示标记或其他图层所需的图片资源，例如不同样式的 POI 图标等。这部分可以通过直接请求指定 URL 来获得所需素材[^2]。 #### 实现示例代码片段 下面是一个简单的组件例子展示如何初始化一个 AMap 对象以及设置其属性以便支持离线模式下的渲染： ```html <template> <div id="container"></div> </template> <script setup> import { onMounted } from 'vue'; onMounted(() => { const map = new window.AMap.Map('container', { zoom: 10, layers: [ new window.AMap.TileLayer({ getTileUrl: function (tileCoord) { let url = '/path/to/offline/tiles/{z}/{x}/{y}.png'; // 修改此路径指向实际存储位置 return url.replace('{z}', tileCoord.z) .replace('{x}', tileCoord.x) .replace('{y}', Math.pow(2, tileCoord.z) - tileCoord.y - 1); } }) ] }); }); </script> <style scoped> #container { width: 100%; height: 400px; } </style> ``` 上述代码展示了如何通过自定义瓦片图层的方式让 AMap 使用本地缓存的地图切片图像来进行绘制。