machinery-admin/src/pages/MonitoringScreen2/components/map/map.jsx

import React from 'react';
import loader from '@/components/AMap/loader';
import geoData from './geoData';

const dzData = geoData.features[0].geometry.coordinates[0][0];

const plugins = ['AMap.ToolBar'];
export default (props) => {
  const { style, className, onReady } = props;
  const containerRef = React.useRef();

  React.useEffect(() => {
    loader(plugins)
      .then((AMap) => {
        const map = new AMap.Map(containerRef.current, {
          mapStyle: 'amap://styles/d8278c296329ee0867aa26718e23bb80',
          layers: [
            // 卫星
            new AMap.TileLayer.Satellite(),
            // 路网
            new AMap.TileLayer.RoadNet(),
          ],
          zoom: 10,
          resizeEnable: true,
          center: [112.092716, 32.681642],
        });

        // 缩放按钮
        map.addControl(new AMap.ToolBar());

        // 绘制边线
        const dengzhou = new AMap.Polygon({
          path: dzData,
          fillColor: '#0050b3',
          strokeOpacity: 1,
          fillOpacity: 0.4,
          strokeColor: '#fff', // '#2b8cbe',
          strokeWeight: 1,
          strokeStyle: 'dashed',
          strokeDasharray: [5, 5],
        });
        map.add(dengzhou);

        onReady(map, AMap);
      })
      .catch((err) => {
        console.log(err.message);
      });
  }, []);

  return <div style={style} className={className} ref={containerRef}></div>;
};