一、搭建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);

storm热力分布图项目（五）

一、搭建springboot

二、json传值