Ubuntu上vue3 vite使用MBTiles搭建地图服务器

1、首先从点击进入连接下载你所需要的地图.mbtiles,我选的是步骤如下:

点击Asia

然后再点击China

再点击experimental vector tle package

就可以下载下来china-shortbread-1.0.mbtiles 并将其修改为china.mbtiles

2、在桌面或者其他地方创建一个文件夹,这里取名为mbtiles-server,将china.mbtiles放入此文件夹中,此文件夹中的内容如下:

需要创建server.js, index.html 和 package.json这三个文件,其中server.js中的内容如下:

js 复制代码
const path = require('path');
const Koa = require('koa');
const Router = require('@koa/router');
const cors = require('koa2-cors');
const MBTiles = require('@mapbox/mbtiles');

const router = new Router();
let mbtiles = null;

// new MBTiles(path.resolve(__dirname, "taiwan.mbtiles"), (err, mb) => {
new MBTiles(path.resolve(__dirname, "china.mbtiles"), (err, mb) => {
  mbtiles = mb;
});

function getTile (x, y, z) {
  return new Promise((resolve, reject) => {
    mbtiles.getTile(z, x, y, (err, data, headers) => {
      if (err) {
        reject(err);
        return;
      }

      resolve(data);
    })
  })
}

router.get('/tile/:z/:x/:y.pbf', async (ctx, next) => {
  const { x, y, z } = ctx.params;
  const data = await getTile(x, y, z);

  ctx.body = data;

  ctx.set('content-encoding', 'gzip') // 注意响应头
  ctx.set('content-type', 'application/x-protobuf')

  return next();
});

const app = new Koa();

app.use( // 跨域
  cors({
    origin: function (ctx) { //设置允许来自指定域名请求
      // if (ctx.url === '/tile') {
      return '*'; // 允许来自所有域名请求
      // }
    },
    maxAge: 500000000000, //指定本次预检请求的有效期,单位为秒。
    credentials: true, //是否允许发送Cookie
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], //设置所允许的HTTP请求方法'
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'], //设置服务器支持的所有头信息字段
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] //设置获取其他自定义字段
  })
);

app.use(router.routes());

app.listen(3000);

index.html中的内容如下:

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <title>MBTiles 测试</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <style>
    #map { height: 100vh; }
  </style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.vectorgrid@1.3.0/dist/Leaflet.VectorGrid.bundled.js"></script>
<script>
  // 初始化地图
  const map = L.map('map').setView([39.9042, 116.4074], 5);

  // 添加矢量瓦片层(需要合适的矢量瓦片样式)
  const vectorTileLayer = L.vectorGrid.protobuf("http://localhost:3000/tile/{z}/{x}/{y}.pbf", {
    vectorTileLayerStyles: {
      // 定义样式,根据你的数据图层调整
      // water: {
      //   fill: true,
      //   fillColor: '#9bc2c4',
      //   fillOpacity: 0.6,
      //   color: '#9bc2c4',
      //   opacity: 0.6,
      //   weight: 1
      // },
      // transportation: {
      //   color: '#cccccc',
      //   weight: 1
      // }
    },
    maxZoom: 14,
    minZoom: 0
  }).addTo(map);

  // 添加一个底图以便参考
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
</script>
</body>
</html>

package.json中的内容如下:

json 复制代码
{
  "name": "mbtiles-server",
  "version": "1.0.0",
  "description": "MBTiles tile server",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "koa": "^2.14.0",
    "@koa/router": "^12.0.0",
    "koa2-cors": "^2.0.6",
    "@mapbox/mbtiles": "^0.12.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}

3、需要安装一下server.js依赖的包,即在 mbtiles-server这个文件夹下打开个终端,运行npm install即可安装package.json中所需要的包

4、3的终端中运行npm start 或者 node server.js即可启动node后端,当然肯定是需要安装node的,我的node版本为v18.20.6

5、然后直接在浏览器中打开index.html即可看到如下图所示:

问题就是服务器太卡,还有就是瓦片不全,响应速度过慢

参考文章如下:
https://zhuanlan.zhihu.com/p/390797186 写的不完整

相关推荐
至善迎风5 小时前
如何让 Ubuntu 服务器在你关机后继续执行命令
linux·服务器·ubuntu·进程
EndingCoder5 小时前
Node.js SQL数据库:MySQL/PostgreSQL集成
javascript·数据库·sql·mysql·postgresql·node.js
半夏知半秋6 小时前
游戏登录方案中常见的设计模式整理
服务器·开发语言·笔记·学习·游戏·设计模式·lua
lzc_a6 小时前
Android Studio模拟器无法联网(能打开IP网页,但不能打开域名,DNS解析错误)问题2025年10月22日
服务器·android studio·安卓
静听山水6 小时前
SQLite
数据库·sqlite
HIT_Weston7 小时前
13、【Ubuntu】【VSCode】VSCode 断联问题分析:hostname(一)
linux·vscode·ubuntu
chilavert3187 小时前
技术演进中的开发沉思-146 java-servlet:Servlet 在云原生时代的适配”
服务器·servlet·云原生
一匹电信狗7 小时前
【C++】手搓AVL树
服务器·c++·算法·leetcode·小程序·stl·visual studio
小安运维日记7 小时前
RHCA - DO374 | Day01:使用红帽Ansible自动化平台开发剧本
运维·服务器·云原生·自动化·云计算·ansible