基于SpringBoot+WebSocket实现地图上绘制车辆实时运动轨迹图

实现基于北斗卫星的车辆定位和轨迹图的Maven工程（使用模拟数据），我们将使用以下技术：

• Spring Boot：作为后端框架，用来提供数据接口。
• Thymeleaf：作为前端模板引擎，呈现网页。
• Leaflet.js：一个开源的JavaScript库，用于显示交互式地图。
• Simulated Data：使用随机生成的模拟GPS数据来模拟北斗卫星车辆位置。
• WebSocket：用于实现实时数据推送，确保地图位置每秒更新。

目录

1. 项目结构

2. Maven依赖配置 (pom.xml)

3. 实现后端服务

3.1 BeidouApplication.java

4. 配置文件 (application.properties)

5. 启动项目

6. 访问页面

---

1. 项目结构

创建一个Maven项目，基本结构如下：

项目结构图： 

2. Maven依赖配置 (pom.xml)

首先在pom.xml中添加必要的依赖，确保使用Spring Boot、WebSocket和Thymeleaf：

<dependencies><!-- Spring Boot --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- Thymeleaf for rendering HTML --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- WebSocket for real-time communication --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><!-- Lombok (Optional, for cleaner code) --><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><scope>provided</scope></dependency>
</dependencies>

3. 实现后端服务

3.1 BeidouApplication.java

这是Spring Boot的启动类：

package com.example.beidou;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class BeidouApplication {public static void main(String[] args) {SpringApplication.run(BeidouApplication.class, args);}
}

4. 配置文件 (application.properties)

server.port=8080

5. 启动项目

确保你有Java和Maven环境，在项目根目录执行以下命令启动应用：

mvn spring-boot:run

6. 访问页面

在浏览器中访问 http://localhost:8080，你应该可以看到一个地图，显示车辆的实时位置和轨迹更新。

效果图：

 Controller：

package com.example.beidou.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.HashMap;
import java.util.Map;
import java.util.Random;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;@RestController
public class VehicleController {private ScheduledExecutorService executorService = Executors.newScheduledThreadPool(1);@Autowiredprivate SimpMessagingTemplate messagingTemplate;private Map<String, Map<String, Double>> vehiclePositions = new HashMap<String, Map<String, Double>>() {{put("Vehicle 1", new HashMap<String, Double>() {{put("latitude", 39.9042);//北京put("longitude", 116.4074);}});put("Vehicle 2", new HashMap<String, Double>() {{put("latitude", 31.2304);//上海put("longitude", 121.4737);}});put("Vehicle 3", new HashMap<String, Double>() {{put("latitude", 22.3964);// 香港put("longitude", 114.1095);}});put("Vehicle 4", new HashMap<String, Double>() {{put("latitude", 30.5728);//成都put("longitude", 104.0668);}});put("Vehicle 5", new HashMap<String, Double>() {{put("latitude", 34.3416);// 西安put("longitude", 108.9398);}});}};private Map<String, Map<String, Double>> vehicleTargets = new HashMap<String, Map<String, Double>>() {{put("Vehicle 1", new HashMap<String, Double>() {{put("latitude", 31.2304);//上海put("longitude", 121.4737);}});put("Vehicle 2", new HashMap<String, Double>() {{put("latitude", 39.9042);//北京put("longitude", 116.4074);}});put("Vehicle 3", new HashMap<String, Double>() {{put("latitude", 34.3416);// 西安put("longitude", 108.9398);}});put("Vehicle 4", new HashMap<String, Double>() {{put("latitude", 22.3964);// 香港put("longitude", 114.1095);}});put("Vehicle 5", new HashMap<String, Double>() {{put("latitude", 30.5728);//成都put("longitude", 104.0668);}});}};@GetMapping("/startSimulation")public String startSimulation() {executorService.scheduleAtFixedRate(this::sendVehicleUpdates, 0, 500, TimeUnit.MILLISECONDS);return "Simulation started!";}@GetMapping("/stopSimulation")public String stopSimulation() {executorService.shutdownNow();return "Simulation stopped!";}private void sendVehicleUpdates() {Map<String, Map<String, Double>> updatedPositions = new HashMap<>();for (Map.Entry<String, Map<String, Double>> entry : vehiclePositions.entrySet()) {String vehicleId = entry.getKey();Map<String, Double> position = entry.getValue();Map<String, Double> target = vehicleTargets.get(vehicleId);// 按一定速度向目标移动double latDiff = target.get("latitude") - position.get("latitude");double lonDiff = target.get("longitude") - position.get("longitude");// 每次移动经纬度的 1/100double newLatitude = position.get("latitude") + latDiff * 0.02;double newLongitude = position.get("longitude") + lonDiff * 0.02;position.put("latitude", newLatitude);position.put("longitude", newLongitude);updatedPositions.put(vehicleId, new HashMap<>(position));}messagingTemplate.convertAndSend("/topic/vehicleLocation", updatedPositions);}
}

WebSocketConfig：

package com.example.beidou.config;import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/topic");config.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/vehicle-location").setAllowedOriginPatterns("*").withSockJS();}
}

前端页面代码有需要的，请私信我，有偿提供代码，白嫖党勿扰！