js高德地圖添加點Marker，添加線段Polyline，添加一個區域Polygon（面）

高德地圖JS API 實例親測可用參考網站=> 阿裡雲數據可視化平臺（下載json用的）：http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.685915dd8QQdlv <script ...

高德地圖JS API 實例親測可用

參考網站=> 阿裡雲數據可視化平臺（下載json用的）：http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.685915dd8QQdlv

1.渲染地圖

  const [initDataMap, setInitDataMap] = useState({
    centerCity: '拱墅區',
    defaultZoom: 12,
    centerPoint: { lng: 120.165533, lat: 30.329062 },
  });  
  //初始化地圖
  const initMap = () => {
    const { centerPoint } = initDataMap;
    const center = [centerPoint.lng, centerPoint.lat];
    const mzooms = [8, 19];
    const mzoom = 12;

    let map = new AMap.Map("AMapBox", {
      zoom: mzoom, //初始化地圖層級
      zooms: mzooms,
      rotateEnable: false, // 固定視角
      disableSocket: true,
      center: center,
    });

    mapRef.current = map;
    addAreaCoordinate(map); // 這個是渲染塊
  };

2.繪製Marker標記點

  // 繪製點
  const drawMarker = (data: any, map: any) => {
    const infoWindow = new AMap.InfoWindow({
      offset: new AMap.Pixel(5, -30),
      autoMove: true,
      closeWhenClickMap: true,
    });
    let ap: any = []
    data.forEach((item: any) => {
      if (item.lat && item.lng) {
        const ad = [item.lng, item.lat];
        const marker = new AMap.Marker({
          position: ad,
          icon: iconIMg, // 自己的icon
          map: map
        });

        ap.push(marker);
        setMarkerList(ap);

        const content = item.projectName;
        marker.on('click', () => {
          infoWindow.setContent(content);
          infoWindow.open(map, ad);
        });
      }
    });
    map.setFitView();
  }

3.繪製線段Polyline

  // 繪製線段
  const polylineInit = (lineArr: any, map: any, callBack: any) => {
    const infoWindowLine = new AMap.InfoWindow({
      offset: new AMap.Pixel(5, -30),
      autoMove: true,
      closeWhenClickMap: true,
    });

    const polyline = new AMap.Polyline({
      path: lineArr.list,          //設置線覆蓋物路徑
      strokeColor: "#3366FF", //線顏色
      strokeOpacity: 1,       //線透明度
      strokeWeight: 5,        //線寬
      strokeStyle: "solid",   //線樣式
      strokeDasharray: [10, 5] //補充線樣式
    });
    polyline.setMap(map);

    callBack(polyline);

    const content = `
      <div>
        <div style='border-bottom: 1px solid #F0F0F0; margin-bottom: 4px; padding: 4px 0 4px 0; color: #000000; font-size: 16px; '>${lineArr.roadName}</div>
        <div >所屬國企：${lineArr.belongCorpName}</div>
        <div>當前進度：${lineArr.currentStatusStr}</div>
        <a onclick="handleClickDetail(${lineArr.id})">查看詳情信息</a>
      <div>
    `

    if (callBackDetail) {
      polyline.on('click', (e: any) => {
        infoWindowLine.setContent(content);
        infoWindowLine.open(map, e.lnglat);
      });
    }
  }
  // 處理繪製線段  可不看嘎嘎···
  const dealPolylineInit = (arr: any, map: any) => {
    // map.clearMap();
    map.remove(polylineList);

    let ad: any = [];
    arr.forEach((item: any) => {
      const st = JSON.parse(item.locationMark);
      st.forEach((element: any) => {
        element.forEach((ele: any) => {
          ele.roadName = item.roadName;
          ele.belongCorpName = item.belongCorpName;
          ele.currentStatusStr = item.currentStatusStr;
          ele.id = item.roadId;
        });
      });
      ad.push(st);
    });
    const flatArr = ad.flat();

    const cloneDeepData = cloneDeep(flatArr);

    const opd: any = [];
    cloneDeepData.forEach((item: any) => {
      let lineArr: any = [];
      const obj: any = {};
      item.forEach((element: any) => {
        const ad = [element.lng, element.lat];
        obj.roadName = element.roadName;
        obj.belongCorpName = element.belongCorpName;
        obj.currentStatusStr = element.currentStatusStr;
        obj.id = element.id
        lineArr.push(ad);
      });
      obj.list = lineArr;
      polylineInit(obj, map, (v: any) => {
        opd.push(v)
      });
    })

    setPolylineList(opd)
  }

4.繪製區域Polygon

  const addAreaCoordinate = (map: any) => {
    const obj = gs_json || '';
    const points: any[] = [];
    obj?.features[0]?.geometry?.coordinates[0][0].map((item: any) => {
      points.push(new AMap.LngLat(item[0], item[1]));
    });

    const polygon = new AMap.Polygon({
      path: points,
      color: '#1CB9FF',
      weight: 3,
      opacity: 0.5,
      fillColor: '#1CB9FF',
      fillOpacity: 0.05,
    });

    map.add(polygon);
    map.setFitView(polygon);//視口自適應

  }

5.完整的代碼------（react寫的，但不影響cv）

import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState } from 'react';
//antd
// 第三方組件
//@ts-ignore
import AMap from 'AMap';
import { cloneDeep } from 'lodash';
import gs_json from '@/assets/json/gongshu.json'; // 地圖區域的json數據

import iconIMg from '@/assets/productizationimg/local.png'

const AMapModal = forwardRef((props: any, ref: any) => {
  const { roadMapData, projectMapData, isShowLanLat, callBackDetail } = props;
  const mapRef = useRef<any>();
  const [markerList, setMarkerList] = useState<any>([]);
  const [polylineList, setPolylineList] = useState<any>([]);

  const [initDataMap, setInitDataMap] = useState({
    centerCity: '拱墅區',
    defaultZoom: 12,
    centerPoint: { lng: 120.165533, lat: 30.329062 },
  });

  //@ts-ignore
  window.document.handleClickDetail = function (id: any) {
    if (callBackDetail) {
      callBackDetail(id);
    }
  };

  // 根據levelCode向地圖中畫一個區域輪廓
  const addAreaCoordinate = (map: any) => {
    const obj = gs_json || '';
    const points: any[] = [];
    obj?.features[0]?.geometry?.coordinates[0][0].map((item: any) => {
      points.push(new AMap.LngLat(item[0], item[1]));
    });

    const polygon = new AMap.Polygon({
      path: points,
      color: '#1CB9FF',
      weight: 3,
      opacity: 0.5,
      fillColor: '#1CB9FF',
      fillOpacity: 0.05,
    });

    map.add(polygon);
    map.setFitView(polygon);//視口自適應

  }

  // 繪製點
  const drawMarker = (data: any, map: any) => {
    const infoWindow = new AMap.InfoWindow({
      offset: new AMap.Pixel(5, -30),
      autoMove: true,
      closeWhenClickMap: true,
    });
    let ap: any = []
    data.forEach((item: any) => {
      if (item.lat && item.lng) {
        const ad = [item.lng, item.lat];
        const marker = new AMap.Marker({
          position: ad,
          icon: iconIMg,
          map: map
        });

        ap.push(marker);
        setMarkerList(ap);

        const content = item.projectName;
        marker.on('click', () => {
          infoWindow.setContent(content);
          infoWindow.open(map, ad);
        });
      }
    });
    map.setFitView();
  }


  // 繪製線段
  const polylineInit = (lineArr: any, map: any, callBack: any) => {
    const infoWindowLine = new AMap.InfoWindow({
      offset: new AMap.Pixel(5, -30),
      autoMove: true,
      closeWhenClickMap: true,
    });

    const polyline = new AMap.Polyline({
      path: lineArr.list,          //設置線覆蓋物路徑
      strokeColor: "#3366FF", //線顏色
      strokeOpacity: 1,       //線透明度
      strokeWeight: 5,        //線寬
      strokeStyle: "solid",   //線樣式
      strokeDasharray: [10, 5] //補充線樣式
    });
    polyline.setMap(map);

    callBack(polyline);

    const content = `
      <div>
        <div style='border-bottom: 1px solid #F0F0F0; margin-bottom: 4px; padding: 4px 0 4px 0; color: #000000; font-size: 16px; '>${lineArr.roadName}</div>
        <div >所屬國企：${lineArr.belongCorpName}</div>
        <div>當前進度：${lineArr.currentStatusStr}</div>
        <a onclick="handleClickDetail(${lineArr.id})">查看詳情信息</a>
      <div>
    `

    if (callBackDetail) {
      polyline.on('click', (e: any) => {
        infoWindowLine.setContent(content);
        infoWindowLine.open(map, e.lnglat);
      });
    }
  }
  // 處理繪製線段
  const dealPolylineInit = (arr: any, map: any) => {
    // map.clearMap();
    map.remove(polylineList); // 清除線段的

    let ad: any = [];
    arr.forEach((item: any) => {
      const st = JSON.parse(item.locationMark);
      st.forEach((element: any) => {
        element.forEach((ele: any) => {
          ele.roadName = item.roadName;
          ele.belongCorpName = item.belongCorpName;
          ele.currentStatusStr = item.currentStatusStr;
          ele.id = item.roadId;
        });
      });
      ad.push(st);
    });
    const flatArr = ad.flat();

    const cloneDeepData = cloneDeep(flatArr);

    const opd: any = [];
    cloneDeepData.forEach((item: any) => {
      let lineArr: any = [];
      const obj: any = {};
      item.forEach((element: any) => {
        const ad = [element.lng, element.lat];
        obj.roadName = element.roadName;
        obj.belongCorpName = element.belongCorpName;
        obj.currentStatusStr = element.currentStatusStr;
        obj.id = element.id
        lineArr.push(ad);
      });
      obj.list = lineArr;
      polylineInit(obj, map, (v: any) => {
        opd.push(v)
      });
    })

    setPolylineList(opd)
  }

  const initMap = () => {
    const { centerPoint } = initDataMap;
    const center = [centerPoint.lng, centerPoint.lat];
    const mzooms = [8, 19];
    const mzoom = 12;

    let map = new AMap.Map("AMapBox", {
      zoom: mzoom, //初始化地圖層級
      zooms: mzooms,
      rotateEnable: false, // 固定視角
      disableSocket: true,
      center: center,
    });

    mapRef.current = map;
    addAreaCoordinate(map);
  };

  useEffect(() => {
    initMap();
  }, []);
  // 地圖道路線更新
  useEffect(() => {
    dealPolylineInit(roadMapData, mapRef.current);
  }, [roadMapData]);
  // 地圖點更新
  useEffect(() => {
    if (isShowLanLat == 1) {
      drawMarker(projectMapData, mapRef.current);
    } else {
      if (mapRef.current) {
        mapRef.current.remove(markerList);// 清除markerList點位
      }

    }
  }, [isShowLanLat, projectMapData]);

  return (
    <div>
      <div id='AMapBox' style={{ width: '100%', height: 640 }}></div>
    </div>
  );
})


export default AMapModal

js高德地圖添加點Marker，添加線段Polyline，添加一個區域Polygon（面）

高德地圖JS API 實例 親測可用

1.渲染地圖

2.繪製Marker標記點

3.繪製線段Polyline

4.繪製區域Polygon

5.完整的代碼------（react寫的，但不影響cv）

高德地圖JS API 實例親測可用