vue百度热力图

vue百度热力图

1. html

   	<script 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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <style type="text/css">
           ul, li {
               list-style: none;
               margin: 0;
               padding: 0;
               float: left;
           }
   
           html {
               height: 100%
           }
   
           body {
               height: 100%;
               margin: 0px;
               padding: 0px;
               font-family: "微软雅黑";
           }
   
           #container {
               height: 100%;
               width: 100%;
           }
   
           #r-result {
               width: 100%;
           }
       </style>
   //地图容器
   <div id="container">
   </div>
   

2. javascript

   let baiMap = new Vue({
           el: '#container',
           data() {
               return {
                   points: [
                       {"lng": 116.418261, "lat": 39.921984, "count": 50},
                       {"lng": 116.423332, "lat": 39.916532, "count": 51},
                       {"lng": 116.419787, "lat": 39.930658, "count": 15},
                       {"lng": 116.418455, "lat": 39.920921, "count": 40},
                       {"lng": 116.418843, "lat": 39.915516, "count": 100},
                       {"lng": 116.42546, "lat": 39.918503, "count": 6},
                       {"lng": 116.423289, "lat": 39.919989, "count": 18},
                       {"lng": 116.418162, "lat": 39.915051, "count": 80},
                       {"lng": 116.422039, "lat": 39.91782, "count": 11},
                       {"lng": 116.41387, "lat": 39.917253, "count": 7}],
                   centerLng: '116.418261',//经度121.48789949,31.24916171
                   centerLat: '39.921984',//维度
                   map: '',//保存地图实例
                   heatmapOverlay: {},//热力图覆盖物
               };
   
           },
           mounted() {
               this.initBaiMap();
           },
           methods: {
               //init 创建和初始化地图
               initBaiMap() {
                   this.createMap();
                   this.initHeatMap();
               },
               //创建地图
               createMap() {
                   // 创建地图实例
                   let map = new BMap.Map("container");
                   //将map变量存储全局
                   this.map = map;
                   //设定地图的中心点
                   let point = new BMap.Point(this.centerLng, this.centerLat);
                   //设置中心点坐标和级别
                   this.map.centerAndZoom(point, 15);
                   //允许滚轮缩放
                   this.map.enableScrollWheelZoom();
                   // 添加左上角缩放比例尺(offset: new BMap.Size(0, 0)为比例尺的坐标位置)
                   //let opts = {offset: new BMap.size(10, 10)}
                   //this.map.addControl(new BMap.NavigationControl(opts));
                   // 设置地图默认缩放比例
                   this.map.setZoom(15);
                   if (!this.isSupportCanvas()) {
                       alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
                   }
                   /*
                   <option value="normal">默认地图样式</option> //系统默认
                   <option value="light">清新蓝风格</option> //不需要第三方库
                   <option value="dark">黑夜风格</option>    //不需要第三方库
                   <option value="redalert">红色警戒风格</option>
                   <option value="googlelite">精简风格</option>
                   <option value="grassgreen">自然绿风格</option>
                   <option value="midnight">午夜蓝风格</option>
                   <option value="pink">浪漫粉风格</option>
                   <option value="darkgreen">青春绿风格</option>
                   <option value="bluish">清新蓝绿风格</option>
                   <option value="grayscale">高端灰风格</option>
                   <option value="hardedge">强边界风格</option>
                   let  mapStyle ={
                       features: ["road","building","water","land"],//隐藏地图上的"poi",
                       style : "grayscale",
                   };
                   this.map.setMapStyle(mapStyle);*/
               },
               // 方法 - 添加热力图覆盖物
               initHeatMap () {
                   this.heatmapOverlay = new BMapLib.HeatmapOverlay({
                       // 热力图的每个点的半径大小
                       'radius': BMAP_POINT_SIZE_SMALL * 4,
                       // 热力的透明度0~1
                       'opacity': 0.8,
                       // 其中 key 表示插值的位置0~1，value 为颜色值
                       'gradient': {
                           0:'rgb(102, 255, 0)',
                           .5:'rgb(255, 170, 0)',
                           1:'rgb(255, 0, 0)'
                       }
                   })
                   // 清除图层(每次重新调用需要清除上一个覆盖物图层)
                   this.map.clearOverlays();
                   // 添加热力覆盖物
                   this.map.addOverlay(this.heatmapOverlay);
                   this.heatmapOverlay.setDataSet({data: this.points, max: 100});
                   // 显示热力图，隐藏为this.heatmapOverlay.hide();
                   this.heatmapOverlay.show();
               },
               //判断浏览区是否支持canvas
               isSupportCanvas() {
                   let elem = document.createElement('canvas');
                   return !!(elem.getContext && elem.getContext('2d'));
               },
               showMap() {
                   heatmapOverlay.show();
               },
               hideMap() {
                   heatmapOverlay.hide();
               }
           }
       });
   

3. 使用 VueBaidu Map https://dafrok.github.io/vue-baidu-map/#/zh/bmaplib/heatmap