热力图echarts的实现

判断一个点是否在多边形二维数组内部

    /**
     * @description: 判断点是否在多边形内部
     * @Author: wangxiaomiao
     * @param {Polygon} [[100,150],[110,112],...]
     * @param {Point} [240, 240]
     * @return {*} true 在多边形内部 false 不在多边形内部
     */
    isPointInPolygon(Polygon, Point) {
      let CrossNum = 0;
      for (let i = 0; i < Polygon.length; i++) {
        let p1 = Polygon[i],
          p2 = Polygon[(i + 1) % Polygon.length];
        if (
          p1[1] == p2[1] ||
          Point[1] < Math.min(p1[1], p2[1]) ||
          Point[1] >= Math.max(p1[1], p2[1])
        ) {
          continue;
        }
        let x =
          ((Point[1] - p1[1]) * (p2[0] - p1[0])) / (p2[1] - p1[1]) + p1[0];
        if (x > Point[0]) {
          CrossNum++;
        }
      }
      return CrossNum % 2 == 1;
    },

echarts渲染方法 

 initEchart(mHeatMapArr) {
      // 热力图渲染位置
      let mEchartInstance = echarts.init(document.getElementById("container"));
      let arry = [];
      let arrx = [];
      for (let i = 0; i <= this.imgHeight; i++) {
        arry.push(i);
      }
      for (let i = 0; i <= this.imgWidth; i++) {
        arrx.push(i);
      }

      // 热力图渲染数据
      let mEchartOption = {
        grid: {
          height: "100%",
          top: "0%",
          width: "100%",
          left: "0%",
          bottom: "0",
        },
        xAxis: {
          type: "category",
          position: "top",
          show: false,
          data: arrx,
        },
        yAxis: {
          type: "category",
          show: false,
          inverse: true,
          data: arry,
        },
        visualMap: {
          min: 0,//最小权重值
          max: 100,//最大权重值
          show: false,
          shadowBlur: 10000,
          //从上到下=》颜色从内到外（红=》黄）
          // pieces: [
          //     {min: 90,max: 100, color: 'rgba(245,63,32,0.7)',blur:10},
          //     {min: 80, max: 90, color: 'rgba(242,116,35,0.9)'},
          //     {min: 70, max: 80, color: 'rgba(242,116,35,0.7)'},
          //     {min: 60, max: 70, color: 'rgba(242,116,35,0.5)'},
          //     {min: 50, max: 60, color: 'rgba(242,116,35,0.3)'},
          //     {min: 40, max: 50, color: 'rgba(242,116,35,0.1)'},
          //     {min: 30, max: 40, color: 'rgba(242,116,35,0.7)'},
          //     {min: 25, max: 30, color: 'rgba(248,242,55,0.7)'},
          //     {min: 20, max: 25, color: 'rgba(248,242,55,0.7)'},
          //     {min: 15, max: 20, color: 'rgba(248,242,55,0.7)'},
          //     {min: 10, max: 15, color: 'rgba(248,242,55,0.7)'},
          //     {min: 5, max: 10, color: 'rgba(248,242,55,0.7)'},
          //     {min: 0, max: 5, color: 'rgba(134,244,127,0.5)'},
          // ],
          inRange: {
            color: [
              //从上到下=》颜色从外到内（黄=》红）
              "rgba(248,242,55,0.5)",
              "rgba(134,244,127,0.4)",
              "rgba(253,174,97,0.65)",
              "rgba(244,109,67,0.65)",
              "rgba(215,48,39,0.65)",
            ],
          },
        },
        series: [
          {
            type: "heatmap",
            data: mHeatMapArr,//[x,y,权重值]  [[0, 0, 5], [0, 1, 1],...]
            progressive: 1000,//渐进式渲染
            animation: false,
          },
        ],
      };

      mEchartOption && mEchartInstance.setOption(mEchartOption);
    },