vue-cli 开发高德地图之百万级别打点且不卡

由于公司需要需要对一百四十万个点进行分类打在高德地图上。对不同的百分比使用不同的颜色标记。 效果是这样滴！！

前两章以已经说了如何在vue开发高德地图，有需要的话看前两张。。。 ###一、由于数量太大我就直接axios并发请求csv 文件了。

 var r1 = that.axios.get("../../../static/data/huawei.csv");
      var r2 = that.axios.get("../../../static/data/ailixin.csv");
      that.axios.all([r1, r2]).then(
        this.axios.spread((res1, res2) => {})

数据格式要转成这种格式{lnglat:[114.21312312,22.23424245],count:66}

二、使用 Loca

在index.html的header头部加入

<script type="text/javascript" src="//a.amap.com/Loca/static/mock/heatmapData.js"></script>

然后在你的vue的webpack.base.conf的module.exports = {}文件里加入下面代码使用就可以了

<!--webpack.base.conf-->
 externals: {
    AMap: 'AMap',
    Loca:'Loca' // 高德地图配置
  },

 that.wglayer = new Loca.RoundPointLayer({
            map: that.map
            // fitView: true
          });
             
            if (i < 60) {
              color_arr.push("#FF3333");
            }

            // if (80 <= i < 90) {
            //   color_arr.push("#FFFF33");
            // }
            // if (90 <= i < 95) {
            //   color_arr.push("#0066FF");
            // }
            // if (95 <= i <= 100) {
            //   color_arr.push("#33FF33");
            // }
          }
          for (let i = 60; i < 80; i++) {
            color_arr.push("#FFFF33");
          }
          for (let i = 80; i < 90; i++) {
            color_arr.push("#FF00FF");
          }
          for (let i = 90; i < 95; i++) {
            color_arr.push("#0066FF");
          }
          for (let i = 95; i < 100; i++) {
            color_arr.push("#33FF33");
          }
            that.wglayer.setData(result, {
            lnglat: "lnglat"
            // value: "count"
          });
          that.wglayer.setOptions({
            // unit: "meter",
            // mode: "median",
            //          style: {
            //     // 默认半径单位为像素
            //     radius: 5,
            //     color: '#4FC2FF',
            //     borderWidth: 1,
            //     borderColor: '#FFFFFF',
            //     opacity: 0.9,
            // }
            style: {
              // 网格热力半径，单位：米
              color: function(data) {
                var item = data.value;
                var count = Number(item.count);
                // console.log(count);
                // return "#FFFF33";
                if (count < 60) {
                  return "#FF0000";
                  // console.log(1);
                }
                if (60 <= count&& count< 80) {
                  return "#FF66FF";
                  // console.log(2);
                }
                if (80 <= count &&count< 90) {
                  return "#FFFF33";
                  // console.log(3);
                }
                if (90 <= count&&count < 95) {
                  return "#66CCFF";
                  // console.log(4);
                }
                if (95 <= count &&count<= 100) {
                  return "#00EE00";
                  // console.log(5);
                }
              },
              radius: 1,
              opacity: 0.9
              // gap: 2,
              // height: [0, 0],
              // gap: 30
              // text: {
              //   content: function(v) {
              //     return v.value.count;
              //   }, // 文字内容
              //   direction: "center", // 文字方位
              //   //offset: [2, -5],  // 偏移大小
              //   fontSize: 12, // 文字大小
              //   fillColor: "#03101F",
              //   strokeColor: "rgba(255,255,255,0)", // 文字描边颜色
              //   strokeWidth: 0 // 文字描边宽度
              // }
            }
          });

          that.wglayer.render(); 渲染图层