这个问题看起来是在询问如何使用提到的技术栈来构建一个应用程序，该应用程序可以爬取数据，并在Vue3和Leaflet地图上显示。这里提供一个简化的解决方案，假设我们只需要实现数据爬取和简单的数据展示。
- 使用爬虫（如Python的Scrapy）来爬取数据，并将数据存储到SQL Server数据库中。
- 使用Node.js（可能是Express框架）来创建一个API服务，该服务可以与SQL Server数据库交互，从而允许前端应用程序获取数据。
- 使用Vue3来构建前端应用程序，并使用Leaflet来展示地图，可能还会使用SuperMap iClient库来集成一些地图功能。
以下是一个非常简单的示例，展示如何使用Node.js和Express创建一个API服务器，以及如何使用Vue3和Leaflet创建一个简单的前端应用程序。
Node.js (Express) 后端代码示例:
const express = require('express');
const sql = require('mssql');
const app = express();
const port = 3000;
app.get('/hospitals', async (req, res) => {
try {
const pool = new sql.ConnectionPool({
server: 'your_server',
database: 'your_database',
user: 'your_username',
password: 'your_password',
});
await pool.connect();
const result = await pool.request().query('SELECT * FROM Hospital');
res.json(result.recordset);
} catch (err) {
res.status(500).send({ message: err.message });
}
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
Vue3 前端代码示例:
<template>
<div id="app">
<div id="map" style="height: 400px;"></div>
</div>
</template>
<script>
import { onMounted } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
export default {
name: 'App',
setup() {
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
onMounted(() => {
fetch('/hospitals')
.then(response => response.json())
.then(hospitals => {
hospitals.forEach(hospital => {
L.marker([hospital.latitude, hospital.longitude]).addTo(map);
});
});
});
}
};
</script>
<style>
/* Leaflet styles */
#map {
width: 100%;
}
</style>
请注意，这只是一个非常简单的示例，实际应用中你需要处理更多的细节，例如数据库连接、错误处理、数据加载、地图初始化等。此外，这里没有包含爬虫的实现细节，只是假设数据已经通过某种方式被存储到了SQL Server数据库中。