【可视化大屏开发】18. 加餐-ECharts+百度地图API实现热力图

最新推荐文章于 2024-07-04 10:44:31 发布

pblh123

最新推荐文章于 2024-07-04 10:44:31 发布

阅读量1.1k

点赞数 17

分类专栏：可视化大屏文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/pblh123/article/details/137675684

版权

可视化大屏专栏收录该内容

18 篇文章 23 订阅

订阅专栏

ECharts结合百度地图API能获得更好的使用体验。

效果展示

放大后的效果

切换卫星地图模式

实现步骤

1. 通过Python实现GPS数据模拟

2. 通过IDEA开发地图

通过Python实现GPS数据模拟

import random
from math import cos, sin, radians, sqrt
import json

  

def generate_random_coordinates(center_lat, center_lon, radius, num_points):

    """

    该方法生成的结果是，以中心点为中心，半径为 radius 的圆形区域内，num_points 个随机点的经纬度坐标。

    其中，中心点的经纬度坐标为 center_lat, center_lon，半径为 radius 米。

    该方法使用了球面坐标系，将经纬度转换为球面坐标，然后在球面坐标系中生成随机点。

    """

    points = []

    # 将经纬度转换为弧度

    center_lat_rad = radians(center_lat)

    center_lon_rad = radians(center_lon)

  

    # 循环生成 num_points 个随机点

    for _ in range(num_points):

        # 生成随机的极径和方位角

        r = radius * sqrt(random.random())

        theta = random.uniform(0, 2 * 3.141592653589793)  # 方位角范围在 [0, 2π) 内

  

        # 计算偏移的直角坐标

        delta_x = r * cos(theta)

        delta_y = r * sin(theta)

  

        # 将直角坐标转换为经纬度

        new_lat = center_lat + (delta_y / 111111)

        new_lon = center_lon + (delta_x / (111111 * cos(center_lat_rad)))

  

        # 添加新的经纬度坐标到列表中

        points.append((new_lat, new_lon))

  

    return points

  
  
  

# 给定的经纬度坐标和半径,

center_latitude = 26.389193
center_longitude = 106.642337
radius_meters = 10000   # 10000 米

  

# 生成 50 个随机经纬度坐标点

random_coordinates = generate_random_coordinates(center_latitude, center_longitude, radius_meters, 30000)

  
  
  

# # 打印生成的坐标点

# for idx, coord in enumerate(random_coordinates, start=1):

#     print(f"Point {idx}: Latitude={coord[0]}, Longitude={coord[1]}")

    # print(f"{coord[1]},{coord[0]}")

  

f = []

for idx, coord in enumerate(random_coordinates, start=1):

    adir = {}

    adir["elevation"] = 3000 * random.random()  # 随机给定海拔高度

    adir["coord"] = [coord[1], coord[0]]  # 坐标点

    f.append(adir)

  

resoult = [f]

  

# 将随机生成的数据保存到json文件中

with open('Guiyangrandom_coordinates.json', 'w') as f:

    json.dump(resoult, f)

样例数据展示

通过IDEA开发地图

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
	<title>贵阳市热力图-与百度地图API结合</title>
  <!-- 引入 ECharts -->  <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>  
  <script src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>  
  <script src="https://api.map.baidu.com/api?v=3.0&ak=这里换成你的百度地图key"></script>  
  <script src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/bmap.min.js"></script>  
</head>  
<body>  
<!-- 为ECharts准备一个具备大小（宽高）的DOM -->  
<div id="main" style="width: 100%;height:600px;"></div>  
<script type="text/javascript">  
  // 获取图表容器元素，并初始化ECharts实例  
  var chartDom = document.getElementById('main');  
  var myChart = echarts.init(chartDom);  
  var option;  
  
  // 从JSON文件中异步加载数据  
  $.get('jsons/Guiyangrandom_coordinates.json', function (data) {  
    // 处理数据，转换为ECharts要求的格式  
    var points = [].concat.apply(  
            [],  
            data.map(function (track) {  
              // 对每条轨迹进行处理，将坐标点转换为ECharts可识别的格式  
              return track.map(function (seg) {  
                // 每个坐标点加上一个维度值1  
                return seg.coord.concat([1]);  
              });  
            })  
    );  
  
  
    // 定制配置项  
    // 配置项对象，用于设置地图可视化效果  
    option = {  
      animation: true, // 是否开启动画效果  
      bmap: { // 地图配置项  
        center: [106.642337,26.389193],  // 设置地图中心点坐标为贵州师范大学的位置  
        zoom: 14, // 地图缩放级别  
        roam: true // 是否开启地图漫游功能  
      },  
      visualMap: { // 可视化映射配置项  
        show: true, // 是否显示可视化控件  
        top: 'top', // 控件位置，置顶  
        min: 0, // 映射范围最小值  
        max: 5, // 映射范围最大值  
        seriesIndex: 0, // 关联的系列索引  
        calculable: true, // 是否支持计算  
        inRange: { // 映射范围内颜色设置  
          color: ['blue', 'blue', 'green', 'yellow', 'red'] // 设置不同范围的颜色  
        }  
      },  
      series: [ // 系列配置，用于设置热力图  
        {  
          type: 'heatmap', // 热力图类型  
          coordinateSystem: 'bmap', // 使用bmap坐标系  
          data: points, // 热力图数据点  
          pointSize: 5, // 点大小  
          blurSize: 6 // 模糊半径  
        }  
      ]  
    };  
  
    myChart.setOption(option);  
    // 添加百度地图插件  
    var bmap = myChart.getModel().getComponent('bmap').getBMap();  
    bmap.addControl(new BMap.MapTypeControl());  
  });  
  
  // 如果option存在，则再次设置图表选项  
  option && myChart.setOption(option);  
  
</script>  
</body>  
</html>