js高德地图添加点Marker，添加线段Polyline，添加一个区域Polygon（面）

许媛媛

高德地图JS API 实例  亲测可用

参考网站=> 阿里云数据可视化平台（下载json用的）：http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.685915dd8QQdlv
1.渲染地图

1.   const [initDataMap, setInitDataMap] = useState({
2.     centerCity: '拱墅区',
3.     defaultZoom: 12,
4.     centerPoint: { lng: 120.165533, lat: 30.329062 },
5.   });  
6.   //初始化地图
7.   const initMap = () => {
8.     const { centerPoint } = initDataMap;
9.     const center = [centerPoint.lng, centerPoint.lat];
10.     const mzooms = [8, 19];
11.     const mzoom = 12;
13.     let map = new AMap.Map("AMapBox", {
14.       zoom: mzoom, //初始化地图层级
15.       zooms: mzooms,
16.       rotateEnable: false, // 固定视角
17.       disableSocket: true,
18.       center: center,
19.     });
21.     mapRef.current = map;
22.     addAreaCoordinate(map); // 这个是渲染块
23.   };

复制代码

2.绘制Marker标记点

1.   // 绘制点
2.   const drawMarker = (data: any, map: any) => {
3.     const infoWindow = new AMap.InfoWindow({
4.       offset: new AMap.Pixel(5, -30),
5.       autoMove: true,
6.       closeWhenClickMap: true,
7.     });
8.     let ap: any = []
9.     data.forEach((item: any) => {
10.       if (item.lat && item.lng) {
11.         const ad = [item.lng, item.lat];
12.         const marker = new AMap.Marker({
13.           position: ad,
14.           icon: iconIMg, // 自己的icon
15.           map: map
16.         });
18.         ap.push(marker);
19.         setMarkerList(ap);
21.         const content = item.projectName;
22.         marker.on('click', () => {
23.           infoWindow.setContent(content);
24.           infoWindow.open(map, ad);
25.         });
26.       }
27.     });
28.     map.setFitView();
29.   }

复制代码

3.绘制线段Polyline

1.   // 绘制线段
2.   const polylineInit = (lineArr: any, map: any, callBack: any) => {
3.     const infoWindowLine = new AMap.InfoWindow({
4.       offset: new AMap.Pixel(5, -30),
5.       autoMove: true,
6.       closeWhenClickMap: true,
7.     });
9.     const polyline = new AMap.Polyline({
10.       path: lineArr.list,          //设置线覆盖物路径
11.       strokeColor: "#3366FF", //线颜色
12.       strokeOpacity: 1,       //线透明度
13.       strokeWeight: 5,        //线宽
14.       strokeStyle: "solid",   //线样式
15.       strokeDasharray: [10, 5] //补充线样式
16.     });
17.     polyline.setMap(map);
19.     callBack(polyline);
21.     const content = `
22.       
23.         ${lineArr.roadName}
24.         所属国企：${lineArr.belongCorpName}
25.         当前进度：${lineArr.currentStatusStr}
26.         <a onclick="handleClickDetail(${lineArr.id})">查看详情信息</a>
27.       
28.     `
30.     if (callBackDetail) {
31.       polyline.on('click', (e: any) => {
32.         infoWindowLine.setContent(content);
33.         infoWindowLine.open(map, e.lnglat);
34.       });
35.     }
36.   }
37.   // 处理绘制线段  可不看嘎嘎···
38.   const dealPolylineInit = (arr: any, map: any) => {
39.     // map.clearMap();
40.     map.remove(polylineList);
42.     let ad: any = [];
43.     arr.forEach((item: any) => {
44.       const st = JSON.parse(item.locationMark);
45.       st.forEach((element: any) => {
46.         element.forEach((ele: any) => {
47.           ele.roadName = item.roadName;
48.           ele.belongCorpName = item.belongCorpName;
49.           ele.currentStatusStr = item.currentStatusStr;
50.           ele.id = item.roadId;
51.         });
52.       });
53.       ad.push(st);
54.     });
55.     const flatArr = ad.flat();
57.     const cloneDeepData = cloneDeep(flatArr);
59.     const opd: any = [];
60.     cloneDeepData.forEach((item: any) => {
61.       let lineArr: any = [];
62.       const obj: any = {};
63.       item.forEach((element: any) => {
64.         const ad = [element.lng, element.lat];
65.         obj.roadName = element.roadName;
66.         obj.belongCorpName = element.belongCorpName;
67.         obj.currentStatusStr = element.currentStatusStr;
68.         obj.id = element.id
69.         lineArr.push(ad);
70.       });
71.       obj.list = lineArr;
72.       polylineInit(obj, map, (v: any) => {
73.         opd.push(v)
74.       });
75.     })
77.     setPolylineList(opd)
78.   }

复制代码

4.绘制区域Polygon

1.   const addAreaCoordinate = (map: any) => {
2.     const obj = gs_json || '';
3.     const points: any[] = [];
4.     obj?.features[0]?.geometry?.coordinates[0][0].map((item: any) => {
5.       points.push(new AMap.LngLat(item[0], item[1]));
6.     });
8.     const polygon = new AMap.Polygon({
9.       path: points,
10.       color: '#1CB9FF',
11.       weight: 3,
12.       opacity: 0.5,
13.       fillColor: '#1CB9FF',
14.       fillOpacity: 0.05,
15.     });
17.     map.add(polygon);
18.     map.setFitView(polygon);//视口自适应
20.   }

复制代码

5.完整的代码------（react写的，但不影响cv）

1. import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState } from 'react';//antd// 第三方组件//@ts-ignoreimport 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();  const [markerList, setMarkerList] = useState([]);  const [polylineList, setPolylineList] = useState([]);  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) => {
2.     const obj = gs_json || '';
3.     const points: any[] = [];
4.     obj?.features[0]?.geometry?.coordinates[0][0].map((item: any) => {
5.       points.push(new AMap.LngLat(item[0], item[1]));
6.     });
8.     const polygon = new AMap.Polygon({
9.       path: points,
10.       color: '#1CB9FF',
11.       weight: 3,
12.       opacity: 0.5,
13.       fillColor: '#1CB9FF',
14.       fillOpacity: 0.05,
15.     });
17.     map.add(polygon);
18.     map.setFitView(polygon);//视口自适应
20.   }  // 绘制点  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 = `              ${lineArr.roadName}        所属国企：${lineArr.belongCorpName}        当前进度：${lineArr.currentStatusStr}        [url=http://bbs.itdo.tech/]查看详情信息[/url]          `    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 (                );})export default AMapModal

复制代码

 

来源:https://www.cnblogs.com/dreamtt/p/17173262.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！