Amap地图折线的简单实现

上代码：

import React, { Component } from "react";
import { loadMapScript } from "./utils";
import { message } from "antd";
import "./app.less";
import { getProjectPointList } from "./api/asset";

let rectangles = [];
class App extends Component {
  state = {
    dataId: null,
  };
  map = null;
  mapContainer = null;

  async componentDidMount() {
    const { customConfig } = this.props;
    await loadMapScript();
    await this.getData();
  }
  getData = async () => {
    const { customConfig } = this.props;
    const { dataId } = this.state;
    const {
      任务子表AssetID: roadAssetId,
      任务子表关联字段: roadCorrelationColName,
      路段详情关联字段: pointCorrelationColName,
      点位资产ID: pointAssetId,
      点位资产主键的字段名: pointAssetPrimaryKey,
    } = customConfig || {};

    try {
      let { data } = await getProjectPointList(
        dataId,
        roadAssetId,
        roadCorrelationColName,
        pointCorrelationColName,
        pointAssetId,
        pointAssetPrimaryKey
      );
      this.loadMap(data);
    } catch (err) {
      console.log("err", err);
      message.error("请求接口错误！");
    }
  };

  loadMap = (assetData = []) => {
    try {
      const { AMap } = window;
      this.map = new AMap.Map(this.mapContainer, {
        resizeEnable: true,
        zoom: 15,
        center: [123.43, 41.8],
        zooms: [10, 19],
      });

      this.map.on("click", this.refreshRectangles());
      this.map.on("click", () => this.map.clearInfoWindow());

      AMap.plugin(["AMap.ToolBar"], () => {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        this.map.addControl(
          new AMap.ToolBar({
            // 简易缩放模式，默认为 false
            liteStyle: true,
          })
        );
      });

      assetData?.forEach((item) => {
        let southWest = new AMap.LngLat(item.ldqd_jd, item.ldqd_wd);
        let northEast = new AMap.LngLat(item.ldzd_jd, item.ldzd_wd);
        const polyline = new AMap.Polyline({
          path: [southWest, northEast],
          strokeColor: "#00A7EC",
          strokeWeight: 16,
          strokeStyle: "solid",
          cursor: "pointer",
          zIndex: 50,
        });
        polyline.setMap(this.map);
        this.map.setFitView([polyline]);
        let infoWindow = new AMap.InfoWindow({
          isCustom: true,
          offset: new AMap.Pixel(0, -50),
        });
        let mapList = {
          路段编号: "ldbh",
          路段名称: "ldmc",
          路段起点: "ldqd_yxdz",
          路段终点: "ldzd_yxdz",
          所在区域: "szqy",
          审批级别: "spjb",
        };
        polyline.content = Object.keys(mapList)
          .map(
            (key) =>
              `<span class="info-title">${key}：</span><span>${
                item[mapList[key]]
              }</span>`
          )
          .join("<br />");
        polyline.on("click", (e) => this.markerClick(e, infoWindow, polyline));
        rectangles.push(polyline);
      });
    } catch (e) {
      console.log(e);
    }
  };
  
  markerClick = (e, infoWindow, polyline) => {
    this.refreshRectangles();
    polyline.setOptions({ fillColor: "#d54137", strokeColor: "#d54137" });
    infoWindow.setContent(e.target.content);
    infoWindow.open(this.map, e.lnglat);
  };

  refreshRectangles = () => {
    rectangles.forEach((rectangle) => {
      rectangle.setOptions({ fillColor: "#00A7EC", strokeColor: "#00A7EC" });
    });
  };

  render() {
    return (
      <div className="szzt-app" style={{ width: "100%", height: "700px" }}>
        <div
          style={{ width: "100%", height: "100%" }}
          className="szzt-app-map"
          id="szzt-app-map"
          ref={(e) => (this.mapContainer = e)}
        />
      </div>
    );
  }
}

export default App;

第一次写高德地图，还不太熟悉文档，不过还好需求比较简单， 参考文档地址：
https://lbs.amap.com/demo/javascript-api/example/overlayers/polyline-draw-and-edit
图片展示：