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

最新推荐文章于 2025-01-21 09:36:24 发布

pblh123

最新推荐文章于 2025-01-21 09:36:24 发布

阅读量1.4k

点赞数 18

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

本文链接：https://blog.youkuaiyun.com/pblh123/article/details/137675684

版权

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

18 篇文章

订阅专栏

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>