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

发布时间：2023-03-05 文章分类：编程知识 投稿人：赵颖 字号： 默认 | 大 | 超大 打印

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

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

<script src="https://webapi.amap.com/maps?v=1.4.15&key=564abe9d4eef2535f9cc6ab1c1229cfc&plugin=Map3D,AMap.DistrictSearch,AMap.MarkerClusterer,AMap.Object3DLayer,AMap.MouseTool"></script>
js高德地图添加点Marker，添加线段Polyline，添加一个区域Polygon（面）

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>${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();
* arr的数据结构
* @arr的数据结构
* arr:[
*  { ..., locationMark:[{lng:'',lat:''},{},{}]  },
*  { ..., },
*  { ..., },
* ]
*
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>${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();
* arr的数据结构
* @arr的数据结构
* arr:[
*  { ..., locationMark:[{lng:'',lat:''},{},{}]  },
*  { ..., },
*  { ..., },
* ]
*
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
标签 , ,