react-amap总结

1.初始化

import { Map, InfoWindow } from "react-amap";
<Map
    mapStyle="amap://styles/darkblue"
    // plugins={["ToolBar", "Scale"]}
    center={center as any}
    amapkey={mapAK}
    zooms={[5, 18]}
    events={{
        created: (ins: any) => {
            setMapIns(ins); // 保存地图实例
        },
    }}
>
<InfoWindow
    position={iwPosition as any}
    closeWhenClickMap
    visible={iwVisible}
    offset={[2, -40]}
    events={{
        close: () => {
            setIwPosition(undefined);
            setIwValue(undefined);
            setIwVisible(false);
        }
    }}
    isCustom
    >
    ...
</InfoWindow>
</Map>

2. 点

const markerList = spots.map((v) => {
  const img = xxxxx;// 渲染对应Img
  const marker = new window.AMap.Marker({
    position: [v.location.longitude, v.location.latitude],
    content: `<img src="${img}" alt=""/>`,
    offset: new window.AMap.Pixel(-13, -36),// 这个貌似是图片宽高的一半
    extData: { ...v },
  });
  // 绑定点击事件
  marker.on("click", (e) => {
    const extData = e.target.getExtData();
    markerClick(extData); // 点击显示弹窗
  });
  return marker;
});
setEquipmentMarkers(markerList);

3.点聚合

mapIns.plugin(["AMap.MarkerClusterer"], () => {
    const cluster = new window.AMap.MarkerClusterer(
        mapIns,
        equipmentMarkers,
        {
            gridSize: 80,
            renderClusterMarker,// 聚合点的自定义绘制
        }
    );
    cluster.on("click", ({ lnglat, markers }) => {
        const zoom = mapIns.getZoom();
        if (zoom === 18) {
        const markerList = markers.map((v) => v.getExtData());
        navigateEquipments(markerList, lnglat);
        }
    });
    setClusterIns(cluster);
});
clusterIns?.removeMarkers?.(equipmentMarkers);

3. 点分散

clusterIns?.setMap?.(null);
mapIns.add(equipmentMarkers);
mapIns.remove(equipmentMarkers);

结合2、3、4就可以做一个点聚合/点分散的切换了

4. 图层
   如weixingditu,

mapIns.setLayers([
    new AMap.TileLayer.Satellite(),
    new AMap.TileLayer.RoadNet(),
]);

技巧：window.AMap | AMap都行，不行就换另一个

5. mapStyle
   map的参数属性，做个变量就好了

6. 特征

[
    { value: "road", label: "道路" },
    { value: "point", label: "兴趣点" },
    { value: "building", label: "建筑" },
]
mapIns.setFeatures(mapFeatures);

记得 bg 默认要有 不然海洋显示不出来哦

7. 设置为默认区域

const { northeast, southwest } = mapIns.getBounds();
const mybounds = new AMap.Bounds(northeast, southwest);
mapIns.setBounds(mybounds);

9. 全屏
   说实话这个不属于地图，但是地图往往又有这个功能，就一起讲了

// 1. 定义变量
const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
const containerRef = useRef<any>(null);

// 2.绑定div
<div ref={containerRef}>

// 3.监听ESC退出全屏事件
  useEffect(() => {
    const fn = () => {
      if (document.fullscreenElement) {
        setIsFullScreen(true);
      } else {
        setIsFullScreen(false);
      }
    };
    containerRef.current?.addEventListener("fullscreenchange", fn);
    return () =>
      containerRef.current?.removeEventListener("fullscreenchange", fn);
  }, []);

// 4. 点击切换
!isFullScreen
    ? lanchFullscreen(containerRef.current)
    : exitFullscreen();
setIsFullScreen(!isFullScreen);

// 方法定义如下
const lanchFullscreen = (element: any) => {
  if (!element) {
    return;
  }
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen();
  }
};

function exitFullscreen() {
  const de: any = document;
  if (de.exitFullscreen) {
    de.exitFullscreen();
  } else if (de.mozCancelFullScreen) {
    de.mozCancelFullScreen();
  } else if (de.webkitCancelFullScreen) {
    de.webkitCancelFullScreen();
  }
}