当前位置：首页 > news >正文

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

news 2025/10/23 8:41:55

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中的内容如下：

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, //是否允许发送CookieallowMethods: ['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中的内容如下：

<!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中的内容如下：

{"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"}
}