js高德地图添加点Marker，添加线段Polyline，添加一个区域Polygon（面）
高德地图JS API 实例 亲测可用参考网站=> 阿里云数据可视化平台（下载json用的）：http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.685915dd8QQdlv
1.渲染地图
const = useState({
centerCity: '拱墅区',
defaultZoom: 12,
centerPoint: { lng: 120.165533, lat: 30.329062 },
});
//初始化地图
const initMap = () => {
const { centerPoint } = initDataMap;
const center = ;
const mzooms = ;
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 = ;
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: //补充线样式
});
polyline.setMap(map);
callBack(polyline);
const content = `
${lineArr.roadName}
所属国企：${lineArr.belongCorpName}
当前进度：${lineArr.currentStatusStr}
<a onclick="handleClickDetail(${lineArr.id})">查看详情信息</a>
`
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 = ;
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?.geometry?.coordinates.map((item: any) => {
points.push(new AMap.LngLat(item, item));
});
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-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 = useState([]);const = useState([]);const = useState({ centerCity: '拱墅区', defaultZoom: 12, centerPoint: { lng: 120.165533, lat: 30.329062 },});//@ts-ignorewindow.document.handleClickDetail = function (id: any) { if (callBackDetail) { callBackDetail(id); }};// 根据levelCode向地图中画一个区域轮廓const addAreaCoordinate = (map: any) => {
const obj = gs_json || '';
const points: any[] = [];
obj?.features?.geometry?.coordinates.map((item: any) => {
points.push(new AMap.LngLat(item, item));
});
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 = ; 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: //补充线样式 }); polyline.setMap(map); callBack(polyline); const content = ` ${lineArr.roadName} 所属国企：${lineArr.belongCorpName} 当前进度：${lineArr.currentStatusStr} 查看详情信息 ` 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 = ; 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 = ; const mzooms = ; 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);}, );// 地图点更新useEffect(() => { if (isShowLanLat == 1) { drawMarker(projectMapData, mapRef.current); } else { if (mapRef.current) { mapRef.current.remove(markerList);// 清除markerList点位 } }}, );return ( );})export default AMapModal
来源:https://www.cnblogs.com/dreamtt/p/17173262.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]