react加载高德热力图

高德官网api https://lbs.amap.com/demo/javascript-api/example/selflayer/heatmap

yarn add amap-js

引入

import AMapJS from 'amap-js/dist/amap-js'

初始化加载

 aMapJSAPILoader.load().then((AMap) => {
      aMapUILoader.load().then((initAMapUI) => {
        // 其他逻辑
        console.log(this.props.currentPlant.acc_point);//你要加载的数据 
        let bound = [];
        if (props.currentPlant.acc_point) {
          bound = props.currentPlant.acc_point && JSON.parse(JSON.stringify(props.currentPlant.acc_point)).split(",");
        }
        const map = new AMap.AMap.Map("map", {
          center: bound,
          zoom: 15,
          resizeEnable: true,
          layers: [new AMap.AMap.TileLayer.Satellite()],
        });
        this.viewer = map;
        var tilerLayer = new AMap.AMap.TileLayer({
          zIndex: 10,
          getTileUrl: function (x, y, z) {
            var imgurl = `file://${getMapPath(props.currentPlant.id)}/${z}/${y}/${x}.png`;
            return imgurl;
          },//加载图层
        });

        // 同时引入工具条插件，比例尺插件和鹰眼插件
        AMap.AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.MapType"], function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(
            new AMap.AMap.ToolBar({
              locate: false,
            }),
          );
          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.AMap.Scale());
          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(
            new AMap.AMap.MapType({
              defaultType: 1,
            }),
          );
        });
        tilerLayer.setMap(map);

        loadHeatPlugin(map, AMap)//加载热力图
      });
    });
`

加载热力图

  map.plugin(["AMap.Heatmap"], function (e) {
    // 初始化heatmap对象
    const heatMap = new AMap.AMap.Heatmap(map, {
      resizeEnable: true,
      radius: 30, //给定半径
      opacity: [0, 1],
      gradient: {
        0.1: "blue",
        0.5: "green",
        0.75: "yellow",
        1: "red",
      },
      blur: 0.1,
    });

    initHeatMapLiveApp(heatMap);//渲染热力图

    //监听页面加载完毕
    map.on("complete", function (e) {
      props.getShowImageHeatMap();
    });
  });
}

function initHeatMapLiveApp(heatMap) {
  return new Promise((res, rej) => {
    let pointList = [];
    props.points &&
      props.points.map((item, index) => {
        let position = transform(item.longitude * 1, item.latitude * 1);
        item.defects.length >= 1 &&
          pointList.push({ lng: position[0], lat: position[1], value: item.defects.length });
      });
    if (!pointList.length) {
      message.error("当前没有缺陷可以呈现出热力图");
    }
    try {
      heatMap.setDataSet({
        data: pointList,
        max: 10,
      });
      res("");
    } catch (error) {
      rej("");
    }
  });
}

整体代码



import { AimOutlined } from "@ant-design/icons";
import AMapJS from "amap-js/dist/amap-js";
import { message, Tooltip } from "antd";
import React, { Component, RefObject } from "react";
import { getMapPath } from "../../../../../assets/js/getPaths"; 
import { transform } from "../../../../../assets/js/methods";
import "./heatMap.scss";
interface Props {
  points: any;
  currentPlant: any;
  getShowImageHeatMap: any;
  mapNormalLatitude: any;
  mapNormalLongitude: any;
}

class ShowHeatMap extends Component<Props> {
  props: Props;
  viewer: any;
  public mapRef: RefObject<HTMLDivElement>;

  constructor(props: Props) {
    super(props);
    this.props = props;
    this.mapRef = React.createRef();
    this.viewer = null;
  }

  componentDidMount() {
    const props = this.props;
    const aMapJSAPILoader = new AMapJS.AMapLoader({
      v: "1.4.12",
      key: "4611f58483d79aa58bf6d2b508078f9c&plugin=AMap.Autocomplete,AMap.PlaceSearch",
    });

    const aMapUILoader = new AMapJS.AMapUILoader({
      v: "1.0", // UI组件库版本号
    });

    aMapJSAPILoader.load().then((AMap) => {
      aMapUILoader.load().then((initAMapUI) => {
        // 其他逻辑
        console.log(this.props.currentPlant.acc_point);
        let bound = [];
        if (props.currentPlant.acc_point) {
          bound = props.currentPlant.acc_point && JSON.parse(JSON.stringify(props.currentPlant.acc_point)).split(",");
        }
        const map = new AMap.AMap.Map("map", {
          center: bound,
          zoom: 15,
          resizeEnable: true,
          layers: [new AMap.AMap.TileLayer.Satellite()],
        });
        this.viewer = map;
        var tilerLayer = new AMap.AMap.TileLayer({
          zIndex: 10,
          getTileUrl: function (x, y, z) {
            var imgurl = `file://${getMapPath(props.currentPlant.id)}/${z}/${y}/${x}.png`;
            return imgurl;
          },
        });

        // 同时引入工具条插件，比例尺插件和鹰眼插件
        AMap.AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.MapType"], function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(
            new AMap.AMap.ToolBar({
              locate: false,
            }),
          );
          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.AMap.Scale());
          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(
            new AMap.AMap.MapType({
              defaultType: 1,
            }),
          );
        });
        tilerLayer.setMap(map);

        loadHeatPlugin(map, AMap);
      });
    });
    function loadHeatPlugin(map, AMap) {
      map.plugin(["AMap.Heatmap"], function (e) {
        // 初始化heatmap对象
        const heatMap = new AMap.AMap.Heatmap(map, {
          resizeEnable: true,
          radius: 30, //给定半径
          opacity: [0, 1],
          gradient: {
            0.1: "blue",
            0.5: "green",
            0.75: "yellow",
            1: "red",
          },
          blur: 0.1,
        });

        initHeatMapLiveApp(heatMap);

        //监听页面加载完毕
        map.on("complete", function (e) {
          props.getShowImageHeatMap();
        });
      });
    }
    function initHeatMapLiveApp(heatMap) {
      return new Promise((res, rej) => {
        let pointList = [];
        props.points &&
          props.points.map((item, index) => {
            let position = transform(item.longitude * 1, item.latitude * 1);
            item.defects.length >= 1 &&
              pointList.push({ lng: position[0], lat: position[1], value: item.defects.length });
          });
        if (!pointList.length) {
          message.error("当前没有缺陷可以呈现出热力图");
        }
        try {
          heatMap.setDataSet({
            data: pointList,
            max: 10,
          });
          res("");
        } catch (error) {
          rej("");
        }
      });
    }
  }

  setCenter(position) {
    return new Promise((res, rej) => {
      if (!this.viewer) {
        rej("");
      } else {
        try {
          this.viewer.setZoomAndCenter(15, position);
          res(true);
        } catch (error) {
          rej(error);
        }
      }
    });
  }

  render() {
    return (
      <div className="appMap" style={{ height: "100%" }}>
        <div ref={this.mapRef} id="map" style={{ height: "100%" }}></div>
        <div className="heat-map-controls">
          <Tooltip placement="right" title="返回">
            <AimOutlined
              onClick={() => this.setCenter([this.props.mapNormalLongitude, this.props.mapNormalLatitude])}
            />
          </Tooltip>
        </div>
      </div>
    );
  }
}

export default ShowHeatMap;
`

coleava / me

react加载高德热力图 #27