html百度地图之热力图

洋小驼

已于 2023-09-19 13:37:23 修改

阅读量748

点赞数

文章标签：前端 javascript vue.js

于 2023-03-13 16:51:51 首次发布

本文链接：https://blog.csdn.net/qq_34925033/article/details/129498303

版权

ak=是自己的百度地图申请的秘钥

<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=''"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.141/dist/mapvgl.min.js"></script>

var hotMapData = {
	"data": [{
		"date": "",
		"cityId": "",
		"bound": [
			[
				120.86088445,
				32.01127804
			],
			[
				120.86421251,
				32.00973875
			],
			[
				120.86481761,
				32.0066601
			],
		]
	}]
}

var view = null;//热力图
function createMap() {
      map = new BMapGL.Map("mapMain"); // 创建Map实例

      view = new mapvgl.View({
        map: map
      });

      map.centerAndZoom(new BMapGL.Point(120, 32), 14); // 初始化地图,设置中心点坐标和地图级别
      map.setMapStyleV2({
        // styleId: ''
      });
      // map.setHeading(64.5);  // 设置地图旋转角度
      // map.setMapType(BMAP_EARTH_MAP);  // 设置地图类型为地球模式
      map.setTilt(10);
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.addEventListener("zoomend", function (e) { //放大缩小
        // getMapZoom();
      });
    }
    
//地图热力图
function createHotMark() {
  let changData = hotMapData.data[0].bound
  let hotData = [];
  // console.log(changData)
  changData.forEach((item, i) => {
    let random = Math.random()*20//随机得分
    // console.log(Math.floor(random))
    hotData.push({
      geometry: {
          type: 'Point',
          coordinates: [item[0], item[1]]
      },
      properties: {
          count: Math.floor(random)
      }
    });
  })

  var heatmap = new mapvgl.HeatmapLayer({
      size: 600, // 单个点绘制大小
      max: 40, // 最大阈值
      height: 0, // 最大高度，默认为0
      unit: 'm', // 单位，m:米，px: 像素
      gradient: { // 对应比例渐变色
          0.25: 'rgba(17,165,241, 1)',
          0.55: 'rgba(184,243,68, 1)',
          0.85: 'rgba(232,177,18, 1)',
          1: 'rgba(246,141,40, 1)'
      }
  });
  view.addLayer(heatmap);
  heatmap.setData(hotData);
};