通过SpringBoot+百度地图+Mysql实现中国地图可视化

一、申请百度地图的ak值

        进入百度开发者平台

编辑以下内容

然后申请成功

二、Springboot写一个接口

确保数据库里有数据

文件目录如下

1、配置application.properties文件

#访问端口号
server.port=9090
# 数据库连接信息
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/JobData?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=1234
# 连接池配置
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.druid.initial-size=20
spring.datasource.druid.min-idle=10
spring.datasource.druid.max-active=100
# 实体类使用驼峰命名。数据库使用下划线
mybatis.configuration.map-underscore-to-camel-case=true

2、配置pom.xml文件

   
        spring-boot-test
        org.springframework.boot
        2.1.3.RELEASE
    

        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
        
            org.projectlombok
            lombok
            1.18.22
        
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.1.1
        
        
            mysql
            mysql-connector-java
            runtime
        
        
            com.alibaba
            druid-spring-boot-starter
            1.1.10
        
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.2.0
        
        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.1.2
        

3、编写com/App.java启动类

package com;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class App {
    // 调用SpringApplication的run方法来启动Spring Boot应用程序。
    // 传入的App.class参数指定了应用程序的启动类。
    public static void main(String[] args) {
        SpringApplication.run(App.class);
    }
}

4、编写controller/CityController.java

package com.controller;
import com.entity.CityEntity;
import com.service.CityService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("city")
public class CityController {
    @Autowired
    private CityService cityService;
    @RequestMapping("list")
    public List list() {
        return cityService.list();
    }
}

5、编写

5、编写dao/CityDao.java

package com.dao;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.entity.CityEntity;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface CityDao extends BaseMapper {
}

6、编写entity/CityEntity.java

 封装数据库字段信息

package com.entity;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.*;
@NoArgsConstructor
@AllArgsConstructor
@Getter
@Setter
@Data
@TableName("t_city_count")  //数据库表名
public class CityEntity {
    private String city;
    private int count;
}

7、编写service/CityService.java

package com.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.entity.CityEntity;
public interface CityService extends IService {
}

8、编写service/impl/CityServiceImpl.java

package com.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.dao.CityDao;
import com.entity.CityEntity;
import com.service.CityService;
import org.springframework.stereotype.Service;
@Service("CityService")
public class CityServiceImpl extends ServiceImpl implements CityService {
}

9、启动App类

结果：

访问端口

http://localhost:9090/city/list

得到数据

三、可视化

1、选择Echarts中地图示例

        选择Echarts中地图示例，我选择的是这个

2、创建html文件

        在resources/templates创建html文件

在html文件中引用 js 文件

通过jQuery获取接口数据，完整代码如下：

3、结果

访问端口

http://localhost:9090/