高德地图人流热力图在哪

Posted 2023-05-15

参考技术A 高德地图人流热力图通过如下查看
高德地图中热力图可以让我们清楚的知道这个城市中的人口流量多少，城市和区域流量的对比比较等，以及城市哪些地方在慢慢衰减的数据。高德地图的热力图只在部分城市的部分景区有，并不是全范围的。搜索想查看的热力地区，如果有热力地图，在右上角会显示一个热力图标，点击即可查看。

官方服务
官方网站官方网站

如何在vue项目中使用echarts和高德地图绘制折线和热力图

1.先下载相关的依赖，这里echarts和高德地图放到一起。（高德地图需要先去申请一个key）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store/index'
import VueResource from 'vue-resource'
import echarts from 'echarts'
import VueAMap from 'vue-amap'
import './assets/fonts/fonts.css'
import './assets/fonts/reset.css'
Vue.use(VueAMap)
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
Vue.use(Vuex)
Vue.use(VueResource)
VueAMap.initAMapApiLoader({
  key:'你申请的key',
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", //编辑 折线多，边形
    "AMap.CircleEditor", //圆形编辑器插件
    "AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置
    "AMap.Heatmap"//热力图插件
  ],
  v: '1.4.4',
  uiVersion: '1.0'
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

2.在需要使用echarts的页面引入

 <div
        ref="qiji"
        :data-title="allTitle.qiji"
        class="chart qiji"
        :style="{width:chartWidth,height:chartHeight}"
      ></div>

import echarts from "echarts";

 相应的options这里就不贴了 可以配合watch进行动态绘制

3.这里吧地图组件的完整代码贴过来

<template>
  <div class="containers">
    <template>
    <div class="amap-wrapper">
       <el-amap class="cont"
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="zoom"
        :center="center"
        :events="events"
      >
       <!-- <el-amap-polygon v-for="(polygon, index) in polygons" :vid="index" :path="polygon.path" :strokeWeight="polygon.strokeWeight" :fillColor="polygon.fillColor" :strokeColor="polygon.strokeColor" :fillOpacity="polygon.fillOpacity" :strokeOpacity="polygon.strokeOpacity" :draggable="polygon.draggable" :key="index"></el-amap-polygon> -->
     </el-amap>
     <div id="container"></div>
    </div>
  </template>
      <!--
        amap-manager： 地图管理对象
        vid：地图容器节点的ID
        zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
        center： 地图中心点坐标值
        plugin：地图使用的插件
        events： 事件
      -->
        <!-- 标记 -->

    </div>
</template>
<style lang="css">
.amap-wrapper {
  width: 1139px;
  height: 511px;
}
</style>

<script>
import {AMapManager,lazyAMapApiLoaderInstance} from 'vue-amap'
let amapManager = new AMapManager()
export default {
  name:'HMap',
  data () {
    return {
      address: null,
      amapManager,
      center: [121.496837,31.048251],
      zoom: 14,
      mapData:null,
      polygons:[
        {
          strokeWeight: 2, 
          strokeColor: "#19A4EB", 
          strokeOpacity: 0.8, 
          fillColor: "green", 
          fillOpacity:0.1,
          draggable: false,
          path: [
        [121.490164,31.058288], 
        [121.508102,31.063031],
        [121.510162,31.063692], 
        [121.511536,31.06428],
        [121.511793,31.059685], 
        [121.512609,31.045604], 
        [121.503425,31.046266], 
        [121.502953,31.048398], 
        [121.50218,31.057296],
        [121.49055,31.054465],
        [121.491237,31.053325], 
        [121.486602,31.052296], 
        [121.486945,31.050751], 
        [121.486988,31.049979], 
        [121.487374,31.049575], 
        [121.488833,31.047185], 
        [121.48922,31.047038], 
        [121.490336,31.041192], 
        [121.490507,31.040089], 
        [121.49085,31.039647], 
        [121.491323,31.03825], 
        [121.491451,31.036853], 
        [121.492138,31.035014], 
        [121.493039,31.033176], 
        [121.487804,31.031263], 
        [121.486774,31.033801], 
        [121.486087,31.03939], 
        [121.485701,31.039721], 
        [121.485872,31.041265], 
        [121.485486,31.042479], 
        [121.485357,31.045861], 
        [121.484413,31.048509], 
        [121.48407,31.051376], 
        [121.484113,31.051965], 
        [121.48334,31.052516], 
        [121.483169,31.053325], 
        [121.482739,31.05406], 
        [121.481581,31.057516], 
        [121.480722,31.060604], 
        [121.480894,31.061303], 
        [121.480594,31.062295], 
        [121.480207,31.062736], 
        [121.479735,31.06406], 
        [121.479778,31.064464], 
        [121.48201,31.065052], 
        [121.482225,31.065236], 
        [121.483512,31.065383], 
        [121.484027,31.065677], 
        [121.48849,31.066927], 
        [121.490207,31.058104], 
        [121.490207,31.058215]
        ],  
        },
      ],
      events: {
        init (o) {
         o.setMapStyle('amap://styles/31444436f4e6420ee2c6b4ecec90f75f');//自定义的高德地图的样式  
        },
      },
    }
  },
    watch: {
    //观察seriesData的变化
    mapData: {
      handler(newVal) {
        lazyAMapApiLoaderInstance.load().then(() => {
       this.initMap()
      });
      },
      deep: true //对象内部属性的监听，关键。
    },
  },
  created() {
    // this.getMapData()
  },
    mounted() {
    this.getMapData()
    lazyAMapApiLoaderInstance.load().then(() => {
       this.initMap()
      });
    this.yanTime()
  },
  methods: {
    getMapData(){
       this.$http.post("/api/home/heatMapData").then(data => {
        console.log(data)
        //这里是热力图数据
        this.mapData = data.body
      });
    },
    //延时执行测试
    yanTime(){
       setInterval(() => {
        this.getMapData()
      }, 600000);
    },
    initMap() {
      var that = this
      let map = new AMap.Map("amap-vue", {
        resizeEnable: false,
        center: [121.496837,31.048251],
        zoom: 14
      });
      map.setMapStyle('amap://styles/31444436f4e6420ee2c6b4ecec90f75f')
      //绘制折线
      var path = [
    new AMap.LngLat(121.490164,31.058288), 
    new AMap.LngLat(121.508102,31.063031),
    new AMap.LngLat(121.510162,31.063692), 
    new AMap.LngLat(121.511536,31.06428),
    new AMap.LngLat(121.511793,31.059685), 
    new AMap.LngLat(121.512609,31.045604), 
    new AMap.LngLat(121.503425,31.046266), 
    new AMap.LngLat(121.502953,31.048398), 
    new AMap.LngLat(121.50218,31.057296),
    new AMap.LngLat(121.49055,31.054465),
    new AMap.LngLat(121.491237,31.053325), 
    new AMap.LngLat(121.486602,31.052296), 
    new AMap.LngLat(121.486945,31.050751), 
    new AMap.LngLat(121.486988,31.049979), 
    new AMap.LngLat(121.487374,31.049575), 
    new AMap.LngLat(121.488833,31.047185), 
    new AMap.LngLat(121.48922,31.047038), 
    new AMap.LngLat(121.490336,31.041192), 
    new AMap.LngLat(121.490507,31.040089), 
    new AMap.LngLat(121.49085,31.039647), 
    new AMap.LngLat(121.491323,31.03825), 
    new AMap.LngLat(121.491451,31.036853), 
    new AMap.LngLat(121.492138,31.035014), 
    new AMap.LngLat(121.493039,31.033176), 
    new AMap.LngLat(121.487804,31.031263), 
    new AMap.LngLat(121.486774,31.033801), 
    new AMap.LngLat(121.486087,31.03939), 
    new AMap.LngLat(121.485701,31.039721), 
    new AMap.LngLat(121.485872,31.041265), 
    new AMap.LngLat(121.485486,31.042479), 
    new AMap.LngLat(121.485357,31.045861), 
    new AMap.LngLat(121.484413,31.048509), 
    new AMap.LngLat(121.48407,31.051376), 
    new AMap.LngLat(121.484113,31.051965), 
    new AMap.LngLat(121.48334,31.052516), 
    new AMap.LngLat(121.483169,31.053325), 
    new AMap.LngLat(121.482739,31.05406), 
    new AMap.LngLat(121.481581,31.057516), 
    new AMap.LngLat(121.480722,31.060604), 
    new AMap.LngLat(121.480894,31.061303), 
    new AMap.LngLat(121.480594,31.062295), 
    new AMap.LngLat(121.480207,31.062736), 
    new AMap.LngLat(121.479735,31.06406), 
    new AMap.LngLat(121.479778,31.064464), 
    new AMap.LngLat(121.48201,31.065052), 
    new AMap.LngLat(121.482225,31.065236), 
    new AMap.LngLat(121.483512,31.065383), 
    new AMap.LngLat(121.484027,31.065677), 
    new AMap.LngLat(121.48849,31.066927), 
    new AMap.LngLat(121.490207,31.058104), 
    new AMap.LngLat(121.490207,31.058215)
      ]
      var polygon = new AMap.Polygon({
      path: path,  
          strokeWeight: 2, 
          strokeColor: "#19A4EB", 
          strokeOpacity: 0.8, 
          fillColor: "green", 
          fillOpacity:0.1,
          draggable: false,
    });
    map.add(polygon);

      let heatmap;
      let heatmapData = [
        { lng: 121.490164, lat: 31.058288, count: 1555 },
        { lng: 121.508102, lat: 31.063031, count: 2000 },
      ];
      map.plugin(["AMap.Heatmap"], function() {
        //初始化heatmap对象
        heatmap = new AMap.Heatmap(map, {
          radius: 25, //给定半径
          opacity: [0, 0.8],
          gradient: {
            0.3: "#96fa57",
            0.9: "#f0ef5e",
            1.0: "#f6784e"
          }
        });
        //设置数据集
        heatmap.setDataSet({
          data: that.mapData,
          max: 100
        });
      });
    },
  }
}
</script>

上面有好多无用的代码，懒得删了