Linux下使用docker+nginx+vue+echarts部署百度离线地图瓦片网站首页 技术教程

Linux下使用docker+nginx+vue+echarts部署百度离线地图瓦片

Lsj1 2025-07-10 00:01:03

简介Linux下使用docker+nginx+vue+echarts部署百度离线地图瓦片

前景提要

首先先学习了该博客确保在windows系统内能稳定访问地图，链接：vue-内网，离线使用百度地图（地图瓦片图下载静态资源展示定位）_vue 百度离线地图-CSDN博客

上面链接未使用到echarts部署百度地图，使用之前先引入echart和bmap：

import echarts from "echarts";
require("echarts/extension/bmap/bmap");

ehcarts关键代码就是将initMap方法替换：

center是中心点刚开始中心点的位置，可以自行调整。zoom是层级大小

let myChart = echarts.init(document.getElementById("container"));
let option;
myChart.setOption(
(option = {
bmap: {
center: [100.9668, 22.8252],
zoom: 11,
roam: true,
},
// ... 其他配置项
// series: [
// {
// type: "scatter",
// coordinateSystem: "bmap",
// data: pointsData,
// symbolSize: 20, // 设置标记点的大小
// label: {
// show: true,
// formatter: "{b}",
// position: "right"
// },
// itemStyle: {
// color: "#FF5733" // 设置标记点的颜色为透明
// }
// }
// ]
})
);
var bmap = myChart.getModel().getComponent("bmap").getBMap();
// 设置最小缩放值
bmap.setMinZoom(11);
// 设置最大缩放值
bmap.setMaxZoom(12);

Linux部署

nginx配置

首先linux下载docker和docker内拉取nginx，这一步网上搜一下有很多教学这里不复述。

nginx的nginx.conf文件配置：

root /map/baidumaps是我这里和nginx.conf的相对路径，如需要请自行修改。这里只展示了3000端口的监听，其他服务可以自己添加监听。

user root;
worker_processes 1;

events {
worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;

   server{
       listen 3000;
server_name maps;
       charset utf-8;

       location / {
           root /map/baidumaps;
           try_files $uri =404;
           add_header 'Access-Control-Allow-Origin' '*';
           add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
           add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-            Modified-Since,Cache-Control,Content-Type,Range';
       }
   }


}

修改后重启docker中的nginx，确保docker启动nginx容器时挂载了本地nginx.conf文件这样重启nginx时，会更新nginx容器内的nginx.conf，不然修改了容器外的配置文件无效

重启docker中的nginx：

docker stop nginx

docker start nginx

瓦片数据

我的linux文件结构是nginx.conf存储在/home/scada/docker/nginx/nginx.conf，瓦片数据在/home/scada/data/map/baidumaps/路径下。瓦片的数据通过文章开始的链接中有一个全能电子地图下载器将需要的层级地图下载好然后通过xftp将图片传输到linux具体的文件中，一定要确保路径是对的。传输之后测试以下，例如访问localhost:3000/roadmap/5/3/1.png图片，是否能够成功访问到，如果可以访问到就没问题，如果单独链接能访问到但是程序中地图加载不出可能是代码问题和配置无关。