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

最新推荐文章于 2024-05-24 09:50:34 发布

jy02268879

最新推荐文章于 2024-05-24 09:50:34 发布

阅读量4.3k

点赞数

分类专栏： storm spring boot 高德地图文章标签：高德地图热力图静态数据展示

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

版权

spring boot 同时被 3 个专栏收录

26 篇文章 7 订阅

订阅专栏

storm

15 篇文章 0 订阅

订阅专栏

高德地图

2 篇文章 0 订阅

订阅专栏

高端开放平台

控制台----》应用管理----》我的应用----》创建新应用

开发者支持----》示例与体验----》jsAPI示例中心

项目目录创建的Spring Boot项目

map.jsp

注意，key是刚才申请的那个key

<%@ 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: 10,
        zoom: 7,
        resizeEnable: true,
        //center: [116.39,39.9]
        center: [106.55,29.57]
    });

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

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


    // 坐标点
    var points =[
        // longitude 经度

        {"lng":105.795545,"lat":29.74814,"count":10},
        {"lng":109.887206,"lat":31.236759,"count":10},
        {"lng":107.767851,"lat":29.417501,"count":10},
        {"lng":108.750152,"lat":28.851412,"count":10},
        {"lng":106.996368,"lat":28.885217,"count":10},
        {"lng":107.127392,"lat":29.049247,"count":10},
        {"lng":106.409199,"lat":28.606263,"count":10},
        {"lng":108.993301,"lat":30.656046,"count":10},

    ];

    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 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 {


    @RequestMapping(value = "/map", method = RequestMethod.GET)
    public ModelAndView map() {
        //这里的参数map要和返回的jsp页面的名字一样，如map.jsp
        return new ModelAndView("map");
    }




}

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
  thymeleaf:
    cache: false
    enabled: false

运行，访问这个界面

http://localhost:9998/map/map

jy02268879

关注

0
点赞
踩
7

收藏

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

高端开放平台控制台----》应用管理----》我的应用----》创建新应用开发者支持----》示例与体验----》jsAPI示例中心项目目录创建的Spring Boot项目map.jsp注意，key是刚才申请的那个key&lt;%@ page language="java" contentType="text/html; charset=UTF-8"...
复制链接

扫一扫