Spring Boot+高德地图热力图动态数据展示+MySQL

最新推荐文章于 2024-02-05 17:46:52 发布

jy02268879

最新推荐文章于 2024-02-05 17:46:52 发布

阅读量4.6k

点赞数 2

本文链接：https://blog.csdn.net/jy02268879/article/details/81350176

版权

spring boot 同时被 3 个专栏收录

26 篇文章 7 订阅

订阅专栏

mysql

24 篇文章 1 订阅

订阅专栏

storm

15 篇文章 0 订阅

订阅专栏

项目目录

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.bigdata</groupId>
	<artifactId>sid-web</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>sid-web</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.3.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
<!--
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
-->

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<!--<scope>provided</scope>-->
		</dependency>

		<dependency>
			<groupId>org.apache.hbase</groupId>
			<artifactId>hbase-client</artifactId>
			<version>1.4.4</version>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>

		<dependency>
			<groupId>net.sf.json-lib</groupId>
			<artifactId>json-lib</artifactId>
			<version>2.4</version>
			<classifier>jdk15</classifier>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>


</project>

mapstat.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于Storm的实时区域游客量热力图统计</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            border:0;
        }
        select{
            style:none;
            background-color: transparent;
        }
        .sel-btn {
            width:60px;
            line-height:30px;
            height:22px;
            border:1px solid #ccc;
            vertical-align:middle;
        }
        h1,h3{
            text-align:center;
            line-height: 50px;
        }
        h3 {
            line-height: 30px;
        }
        #container {
            position: absolute;
            top: 80px;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=b1365b4141cebc6ab90e7d1ddd3f257f"></script>
</head>
<body>
<!-- <h1>整合高德地图完成实时热力图展示</h1> -->
<h1>基于Storm的实时区域游客量热力图统计</h1>
<h3 >刷新频率：
    <select class="sel-btn">
        <option>30秒</option>
        <option>60秒</option>
        <option>90秒</option>
    </select>
</h3>

<div id="container" ></div>
<script type="text/javascript">
    var map = new AMap.Map('container',{
        zoom: 7,
        resizeEnable: true,
        center: [106.55,29.57]
    });

    map.setFeatures(['road','point'])//多个种类要素显示

    map.plugin(["AMap.ToolBar"],function () {
        map.addControl(new AMap.ToolBar()); // 工具条控件
    });


    // 坐标点
    var points = ${data_json}

    var heatmap;
    map.plugin(["AMap.Heatmap"], function() {
        //初始化heatmap对象
        heatmap = new AMap.Heatmap(map, {
            radius: 25, //给定半径
            opacity: [0, 0.8]
            /*,gradient:{
             0.5: 'blue',
             0.65: 'rgb(117,211,248)',
             0.7: 'rgb(0, 255, 0)',
             0.9: '#ffea00',
             1.0: 'red'
             }*/
        });
        //设置数据集：该数据为重庆景区数据
        heatmap.setDataSet({
            data: points,
            max: 10
        });
    });
</script>
</body>
</html>

StatApp.java

package com.bigdata.controller;


import com.bigdata.domain.ResultBean;
import com.bigdata.service.ResultBeanService;
import net.sf.json.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import java.util.List;

@RestController
public class StatApp {


    @Autowired
    ResultBeanService resultBeanService;


    @RequestMapping(value = "/map_stat", method = RequestMethod.GET)
    public ModelAndView map_stat() {

        ModelAndView view = new ModelAndView("mapstat");
        List<ResultBean> results = resultBeanService.query();

        JSONArray jsonArray = JSONArray.fromObject(results);

        System.out.println(jsonArray);


        // 如何把我们从后台查询到的数据以json的方式返回给前台页面
        view.addObject("data_json", jsonArray);

        return view;
    }

}

ResultBeanService.java

package com.bigdata.service;

import com.bigdata.domain.ResultBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Service;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

@Service
public class ResultBeanService {


    @Autowired
    JdbcTemplate jdbcTemplate;


    public List<ResultBean> query(){

        String sql = "select longitude,latitude ,count(1) as c from stat where time > unix_timestamp(date_sub(current_timestamp(), interval 60 minute))*1000 group by longitude,latitude";

        return (List<ResultBean>) jdbcTemplate.query(sql, new RowMapper<ResultBean>() {

            @Override
            public ResultBean mapRow(ResultSet resultSet, int i) throws SQLException {
                ResultBean bean = new ResultBean();

                bean.setLng(resultSet.getDouble("longitude"));
                bean.setLat(resultSet.getDouble("latitude"));
                bean.setCount(resultSet.getLong("c"));

                return bean;
            }
        });
    }


}

ResultBean.java

package com.bigdata.domain;

public class ResultBean {

    private double lng;

    private double lat;

    private long count;

    public double getLng() {
        return lng;
    }

    public void setLng(double lng) {
        this.lng = lng;
    }

    public double getLat() {
        return lat;
    }

    public void setLat(double lat) {
        this.lat = lat;
    }

    public long getCount() {
        return count;
    }

    public void setCount(long count) {
        this.count = count;
    }
}

application.yml

spring:
  profiles:
    active: dev

application-dev.yml

server:
  port: 9998
  servlet:
    context-path: /map
spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/sid?useSSL=false
    username: root
    password: 密码
  jpa:
    hibernate:
      ddl-auto: update
      show-sql: true
  thymeleaf:
    cache: false
    enabled: false

运行

访问 localhost:9998/map/map_stat

jy02268879

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
Spring Boot+高德地图热力图动态数据展示+MySQL

项目目录pom.xml&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://
复制链接

扫一扫