echarts实现GIS可视化——热力图

最新推荐文章于 2026-04-16 16:55:56 发布

原创

最新推荐文章于 2026-04-16 16:55:56 发布 · 8.3k 阅读

热力图介绍

echarts的热力图有两种，一种时按照点元素的权重，还有一种是按照点元素的密度（官网api害死人，一直搞不清为什么要用.concat([1]))

点元素密度案例

看一下热力图实现的案例：

效果图：

在这里插入图片描述

示例代码&注释：

$.get(ROOT_PATH + '/data/asset/data/hangzhou-tracks.json', function (data) {
   
   
    var points = [].concat.apply([], data.map(function (track) {
   
   
        return track.map(function (seg) {
   
   
            return seg.coord.concat([1]);
        });
    }));
    myChart.setOption(option = {
   
   
    	//是否使用动画
        animation: false,
        //背景地图中心点等基础值
        bmap: {
   
   
            center: [120.13066322374, 30.240018034923],
            zoom: 14,
            roam: true
        },
        //视觉映射组件
        visualMap: {
   
   
            show: false,
            top: 'top',
            min: 0,
            max: 5,
            seriesIndex: 0,
            calculable: true,
            //定义在选中范围中的视觉元素
            inRange: {
   
   
                color: ['blue', 'blue', 'green', 'yellow', 'red']
            }
        },
        series: [{
   
   
            type: 'heatmap',
            //该系列使用的坐标系，可选'cartesian2d'和'geo'
            coordinateSystem: 'bmap',
            data: points,
            //每个点的大小
            pointSize: 5,
            //每个点模糊的大小
            blurSize: 6
        }]
    });
    // 添加百度地图插件
    var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.addControl(new BMap.MapTypeControl());
});

我们打印一下接口的数据：
在这里插入图片描述
visualMap 线性映射：
线性映射表示 series.data 中的每一个值（dataValue）会经过线性映射计算，从 [visualMap.min, visualMap.max] 映射到设定的 [visual value 1, visual value 2] 区间中的某一个视觉的值（下称 visual value）。
我们设置了 [visualMap.min, visualMap.max] 为 [0, 100]，并且我们有 series.data: [50, 10, 100]。我们想将其映射到范围为 [0.4, 1] 的 opacity 上，从而达到用透明度表达数值大小的目的。那么 visualMap 组件会对 series.data 中的每一个 dataValue 做线性映射计算，得到一个 opacityValue。最终得到的 opacityValues 为 [0.7, 0.46, 1]
0.7 = 0.4 + 50 * 0.6 /100
0.46 = 0.4 + 10 * 0.6 / 100
对于颜色（color），使用数组表示例如：[’#333’, ‘#78ab23’, ‘blue’]。意思就是以这三个点作为基准，形成一种『渐变』的色带，数据映射到这个色带上。也就是说，与 visualMap.min 相等的值会映射到 ‘#333’，与 visualMap.max 相等的值会映射到 ‘blue’。对于 visualMap.min 和 visualMap.max 中间的其他点，以所给定的 ‘#333’, ‘#78ab23’, ‘blue’ 这三个颜色作为基准点进行分段线性插值，得到映射结果。

所以在调用上述接口时，我们会在inRange里面配置不同程度下的颜色去做映射，point的格式为：经度、纬度、1

Vue上实现

框架：vue-cli和webpack
ak申请地址：http://lbsyun.baidu.com/index.php?title=jspopular
安装包：

npm install echarts -S

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <!--引入百度地图-->
    <script  type="text/javascript" 
              src="http://api.map.baidu.com/api?v=2.0&ak=" ></script>
    <!--引入百度热力图-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

    <script type="text/javascript" src=""></script>
    <title>official</title>

  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

webpack.config.js

module.exports = {
   
   
    entry: './src/main.js', 
    externals: {
   
   
        "BMap": "BMap",
    },
}

新建map.js

export function MP(ak) {
   
     
    return new Promise(function (resolve, reject) {
   
     
      window.onload = function () {
   
     
        resolve(BMap)  
      }  
      var script = document.createElement("script");  
      script.type = "text/javascript";  
      script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";  
      script.onerror = reject;  
      document.head.appendChild(script);  
    })  
  }

ChartTest.vue

<template>
  <!--一定要给宽高，不然会报错，container没有高度-->
  <div id="chart">echarts百度地图</div>
</template>

<script>
//引入json数据
import baiduJSON from "./datas/baiduData.json";
import "echarts/extension/bmap/bmap";
import {
    
     MP } from "../api/map.js";

export default {
    
    
  data() {
    
    
    return {
    
    
      ak: '7G4utppO09SpqFPHlhzGRUideunFgY0W'
    };
  },
  mounted() {
    
    
    this.$nextTick(function () {
    
    
      var _this = this;
      MP(_this.ak).then((BMap) => {
    
    
        let myChart = _this.$echarts.init(document.getElementById("chart"))<