storm热力分布图项目（五）

最新推荐文章于 2024-03-13 23:23:00 发布

原创最新推荐文章于 2024-03-13 23:23:00 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

storm 专栏收录该内容

7 篇文章

订阅专栏

一、搭建springboot

目录结构如下：

在这里插入图片描述
中间有一个page标签可以解决jsp乱码情况

<!doctype html>
<!--解决中文乱码-->
<%@page language="java" contentType="text/html; ISO-8859-1" pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德热力图</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto;">
    <div class="input-item">
        <button class="btn" onclick="heatmap.show()">显示热力图</button>
    </div>
    <div class="input-item">
        <button class="btn" onclick="heatmap.hide()">关闭热力图</button>
    </div>
</div>
<script src="//webapi.amap.com/maps?v=1.4.14&key=33e61d4b80f8a5a6801ac30d19427caf"></script>
<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
<script>
    //设置地图的中心
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.39006,39.917854], //设置地图的中心
        zoom: 11//级别
    });

    //判断浏览区是否支持canvas
    function isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }

    if (!isSupportCanvas()) {
        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
    }

    //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
    //参数说明如下:
    /* visible 热力图是否显示,默认为true
     * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
     * radius 势力图的每个点的半径大小
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
     .2:'rgb(0, 255, 255)',
     .5:'rgb(0, 110, 255)',
     .8:'rgb(100, 0, 255)'
     }
     其中 key 表示插值的位置, 0-1
     value 为颜色值
     */
    var heatmap;
    var points =[
        {"lng":116.191031,"lat":39.988585,"count":2000},
        {"lng":116.389275,"lat":39.925818,"count":1100},
        {"lng":116.287444,"lat":39.810742,"count":1233},
        {"lng":116.481707,"lat":39.940089,"count":1323},
        {"lng":116.410588,"lat":39.880172,"count":1324},
        {"lng":116.394816,"lat":39.91181,"count":1532},
        {"lng":116.416002,"lat":39.952917,"count":1326}
    ];
    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: 100
        });
    });


    //鼠标点击测距离
    map.plugin(["AMap.MouseTool"],function(){
        var mousetool = new AMap.MouseTool(map);
        mousetool.marker(); //使用鼠标工具，在地图上画标记点
    });
</script>
</body>
</html>

访问hbase:目前还未实现

package com.example.storm.service;

import com.example.storm.domain.MapBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/*
* 从hbase中访问数据，并且将其格式化为MapBean
* */
@Service
public class MapService {

    //查询数据
    public List<MapBean> query(){


        return null;
    }
}

controller控制访问/map时就会进入map这个jsp页面

package com.example.storm.controller;

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;

@RestController
public class StateApp {

    @RequestMapping(value = "/map",method = RequestMethod.GET,produces="text/plain;charset=UTF-8")
    public ModelAndView map(){
        return new ModelAndView("map");
    }
}

pam.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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>storm</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>storm</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <!--springboot-->
        <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>

        <!--使用jsp-->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
    </dependencies>

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

</project>

mapbean

package com.example.storm.domain;

public class MapBean {
    private String local;
    private Double longitude;
    private Double latitude;
    private int times;

    public String getLocal() {
        return local;
    }

    public void setLocal(String local) {
        this.local = local;
    }

    public Double getLongitude() {
        return longitude;
    }

    public void setLongitude(Double longitude) {
        this.longitude = longitude;
    }

    public Double getLatitude() {
        return latitude;
    }

    public void setLatitude(Double latitude) {
        this.latitude = latitude;
    }

    public int getTimes() {
        return times;
    }

    public void setTimes(int times) {
        this.times = times;
    }
}

application.yml

spring:
    profiles:
        active: dev

application-dev.yml

spring:
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true

# 设置jsp的访问目录
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp

# 禁用thymeleaf静态模板
  thymeleaf:
    cache: false
    enabled: false

# 防止乱码
  http:
    encoding:
      charset: UTF-8
      force: true
      enabled: true

server:
  port: 8080
  tomcat:
    uri-encoding: UTF-8

测试是否打通服务器到/map.jsp的映射

在这里插入图片描述

二、json传值

pom.xml加入新的依赖

  <!--使用json：controer向jsp页面向跳转时的传值是一个json串-->
        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier>
        </dependency>

        <!-- Hadoop 依赖-->
        <dependency>
            <groupId>org.apache.hadoop</groupId>
            <artifactId>hadoop-client</artifactId>
            <version>${hadoop.version}</version>
        </dependency>

        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.5</version>
        </dependency>

        <!-- HBase 依赖-->
        <dependency>
            <groupId>org.apache.hbase</groupId>
            <artifactId>hbase-client</artifactId>
            <version>${hbase.version}</version>
        </dependency>

用如下方法将一个javabean转化为一个json串

		//得到查询数据的json串
        List<MapBean> mapBeans = mapService.query();
        JSONArray jsonArray = JSONArray.fromObject(mapBeans);