Skip to content

W
web
提交 c631bd5f 作者: 18928357778
操作

添-首页-地图-三个点位

上级 b129fd10
正在显示 包含 207 行增加 和 150 行删除
pages/home/waterfallFlowBody/components/map/api/index.tsx
import request, { Response } from "~/api/request";
export interface PositioningInfoParams {
lat: number;
lon: number;
lat?: number;
lon?: number;
pageNo?:number,
pageSize?:number
}
export interface Entiy {
......@@ -19,11 +21,46 @@ export interface ListPageJobInfoResp {
locationList: Array<Entiy>;
}
export interface FlyerBitmapEntiy {
flyerName: string,
phoneNum: string,
lon: number,
lat: number,
distance: number
}
export interface UavBitmapEntiy {
uavName: string,
online: number,
lon: number,
lat: number,
distance: number,
id: string
}
export interface BitmapInfo<T> {
pageNo: number,
pageSize: number,
list: T[],
totalCount: number,
totalPage: number
}
export default {
//web-作业服务-分页
//web-首页-地图-全国点位
listPositioningInfo: (
params: PositioningInfoParams
): Promise<Response<ListPageJobInfoResp[]>> => {
return request("/release/website/getWebsiteList", "get", params);
},
//web-首页-地图-全国飞手
listFlyerBitmap: (
params: PositioningInfoParams
): Promise<Response<BitmapInfo<FlyerBitmapEntiy>>> => {
return request("/release/website/flyer/bitmap", "get", params);
},
//web-首页-地图-全国无人机
listUavBitmap: (
params: PositioningInfoParams
): Promise<Response<BitmapInfo<UavBitmapEntiy>>> => {
return request("/release/website/uav/bitmap", "get", params);
},
};
pages/home/waterfallFlowBody/components/map/index.tsx
import React, { Component, useEffect, useState } from "react";
import { message } from 'antd';
import { Box } from "./styled";
import api from "./api";
let Map: any;
import icon from './assets/icon.png'
let MAP :any ;
let Amap:any;
interface UserInfoType {
lat: number;
lon: number;
pageNo?:number,
pageSize?:number
}
export default function MapComponent() {
const [mapItem, setMapItem] = useState(0);
const [userPositioning, setUserPositioning] = useState<UserInfoType>();
const [markerCol, setMarkerCol] = useState<any>([]);
//初始化地图
const init = async () => {
try {
const AMapLoader = await import(
/* webpackChunkName: "amap" */ "@amap/amap-jsapi-loader"
);
AMapLoader.load({
await AMapLoader.load({
key: "87b424e68754efc3ba9d11ae07475091", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(async (AMap) => {
Map = new AMap.Map("container", {
Amap = AMap
MAP = new AMap.Map("container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291], // 初始化地图中心点位置
});
console.log(Map, "MapMapMapMapMapMapMapMapMapMapMap");
await mapEntiy(0, AMap);
//用户定位
AMap.plugin('AMap.Geolocation', function() {
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
position:'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
});
MAP.addControl(geolocation);
geolocation.getCurrentPosition(function(status:string,result:any){
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
});
});
//解析定位结果
async function onComplete(data:any) {
console.log('定位成功');
setUserPositioning(data.position)
// return await mapEntiy(0,data.position);
}
//解析定位错误信息
async function onError(data:any) {
message.error(`定位失败
失败原因排查信息：${data.message}
浏览器返回信息：${data.originMessage}
`)
}
await mapEntiy(0)
})
.catch((e) => {
console.log(e);
......@@ -32,118 +77,10 @@ export default function MapComponent() {
console.log(error);
}
};
useEffect(() => {
(async () => {
await init();
})();
console.log("渲染6666666666666666666666");
}, []);
const addEntiy = (AMap: any, lan: any, lon: any, dizhi: string) => {
if (!AMap) return;
// // 创建 AMap.Icon 实例：
// const Icon = new AMap.Icon({
// size: new AMap.Size(40, 50), // 图标尺寸
// image: "//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png", // Icon的图像
// imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
// imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片
// });
// // 将 Icon 实例添加到 marker 上:
// const marker = new AMap.Marker({
// position: new AMap.LngLat(lan, lon),
// offset: new AMap.Pixel(-10, -10),
// icon: Icon, // 添加 Icon 实例
// title: dizhi,
// zoom: 9,
// map: Map,
// });
const marker = new AMap.Marker({
map: Map,
position: [lan, lon],
title: dizhi,
});
// //鼠标点击marker弹出自定义的信息窗体
// AMap.Event.addListener(marker, "click", function () {
// infoWindow.open(map, marker.getPosition());
// });
// //实例化信息窗体
// var title =
// '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
// content = [];
// content.push(
// "<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里"
// );
// content.push("电话：010-64733333");
// content.push(
// "<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>"
// );
// var infoWindow = new AMap.InfoWindow({
// isCustom: true, //使用自定义窗体
// content: createInfoWindow(title, content.join("<br/>")),
// offset: new AMap.Pixel(16, -15),
// anchor: "bottom-center",
// });
// //构建自定义信息窗体
// function createInfoWindow(title, content) {
// var info = document.createElement("div");
// info.className = "custom-info input-card content-window-card";
// //可以通过下面的方式修改自定义窗体的宽高
// //info.style.width = "400px";
// // 定义顶部标题
// var top = document.createElement("div");
// var titleD = document.createElement("div");
// var closeX = document.createElement("img");
// top.className = "info-top";
// titleD.innerHTML = title;
// closeX.src = "https://webapi.amap.com/images/close2.gif";
// closeX.onclick = closeInfoWindow;
// top.appendChild(titleD);
// top.appendChild(closeX);
// info.appendChild(top);
// // 定义中部内容
// var middle = document.createElement("div");
// middle.className = "info-middle";
// middle.style.backgroundColor = "white";
// middle.innerHTML = content;
// info.appendChild(middle);
// // 定义底部内容
// var bottom = document.createElement("div");
// bottom.className = "info-bottom";
// bottom.style.position = "relative";
// bottom.style.top = "0px";
// bottom.style.margin = "0 auto";
// var sharp = document.createElement("img");
// sharp.src = "https://webapi.amap.com/images/sharp.png";
// bottom.appendChild(sharp);
// info.appendChild(bottom);
// return info;
// }
// //关闭信息窗体
// function closeInfoWindow() {
// map.clearInfoWindow();
// }
return marker;
};
const mapEntiy = async (index: number, AMap?: any) => {
// api
// .listPositioningInfo({
// lat: 113.944825,
// lon: 22.573664,
// })
// .then((res) => {});
setMapItem(index);
const showPositioningInfo = async (index:number,data?:UserInfoType) => {
const res = await api.listPositioningInfo({
lat: 113.944825,
lon: 22.573664,
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
});
const list = res.result
?.map((item) => item.locationList)
......@@ -152,17 +89,88 @@ export default function MapComponent() {
const markerList: any = [];
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(AMap, item.jd, item.wd, item.dizhi);
const EntiyValue = addEntiy(item.jd, item.wd, item.dizhi);
markerList.push(EntiyValue);
});
Map?.add(markerList);
if(markerList.length) MAP?.add(markerList);setMarkerCol([...markerList]);
}
console.log(Map, "地图实例++++++++++++++++++++++++++++++");
if (index && list?.length) {
Map?.panTo([list![index].jd, list![index].wd]);
}
const showFlyerBitmap = async (index:number,data?:UserInfoType,pageSize?:number) => {
const res = await api.listFlyerBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo:1,
pageSize: pageSize || 10
});
const list = res.result?.list
const markerList: any = [];
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName);
markerList.push(EntiyValue);
});
if(markerList.length) MAP?.add(markerList);setMarkerCol(markerList)
}
};
}
const showUavBitmap = async (index:number,data?:UserInfoType) => {
console.log(MAP.panTo);
const res = await api.listUavBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo:1,
pageSize: 10
});
const list = res.result?.list
const markerList: any = [];
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.uavName);
markerList.push(EntiyValue);
});
if(markerList.length) MAP?.add(markerList);setMarkerCol(markerList)
}
}
//添加点位
const mapEntiy = async (index: number,data?:UserInfoType) => {
MAP.remove(markerCol);
if (index === 0) {
showPositioningInfo(index,data)
}else if (index === 1) {
showFlyerBitmap(index,data)
} else if(index === 2) {
showUavBitmap(index,data)
}else{
showFlyerBitmap(index,data,30)
}
setMapItem(index);
};
const addEntiy = ( lon: any, lat: any, name: string) => {
if (!Amap) return;
const icons = new Amap.Icon({
size: new Amap.Size(60, 60), // 图标尺寸
image: icon.src, // Icon的图像
imageSize: new Amap.Size(60, 60) // 根据所设置的大小拉伸或压缩图片
});
const marker = new Amap.Marker({
position: new Amap.LngLat(lon, lat),
offset: new Amap.Pixel(-10, -10),
icon: icons, // 添加 Icon 实例
title: name,
zoom: 13
});
return marker;
};
useEffect(() => {
(async () => {
await init();
})();
return MAP && MAP.destroy();
}, []);
return (
<Box className="right-box-item">
......
pages/home/waterfallFlowBody/index.tsx
......@@ -129,8 +129,6 @@ export default function WaterfallFlowBody() {
index: number,
option: []
) => {
console.log("跳转",value,index,option);
const [item] = option.filter((item: any) => item.name === value.value);
routerPath(index, item);
};
......@@ -153,40 +151,52 @@ export default function WaterfallFlowBody() {
let res4 = await Promise.all([listAllIndustry(), listAllAppType()]);
// let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
// let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
const resValuelist1 = res1
.map((item, index) => {
return item.result?.map((it) => {
it.type = eqApiTypeList[index];
return it;
});
if (item.code === "200") {
return item.result?.map((it) => {
it.type = eqApiTypeList[index];
return it;
});
}
return {}
})
.flat();
const resValuelist2 = res2
.map((item, index) => {
return item.result?.map((it) => {
it.type = mallApiTypeList[index];
return it;
});
if (item.code === "200") {
return item.result?.map((it) => {
it.type = mallApiTypeList[index];
return it;
});
}
return {}
})
.flat();
const resValuelist3 = res3
.map((item, index) => {
return item.result?.map((it) => {
it.type = flightApiTypeList[index];
it.name = it.name || it.skillsName || it.licenseType;
return it;
});
if (item.code === "200") {
return item.result?.map((it) => {
it.type = flightApiTypeList[index];
it.name = it.name || it.skillsName || it.licenseType;
return it;
});
}
return {}
})
.flat();
const resValuelist4 = res4
.map((item, index) => {
return item.result?.map((it) => {
it.type = jobApiTypeList[index];
console.log(it);
it.name = it.name || it.appName;
return it;
});
if (item.code === "200") {
return item.result?.map((it) => {
it.type = jobApiTypeList[index];
it.name = it.name || it.appName;
return it;
});
}
return {}
})
.flat();
......@@ -222,7 +232,6 @@ export default function WaterfallFlowBody() {
resValuelist4,
list2Option,
];
console.log(optionList);
setLeftDomList(
columns.map((item, index) => {
......@@ -333,6 +342,7 @@ export default function WaterfallFlowBody() {
};
const rightDom = (list: Array<NewsPageType>) => {
if(!list?.length) return;
return (
<div key={1009} className="right-box-item right-item">
<div className="title">
......@@ -364,6 +374,7 @@ export default function WaterfallFlowBody() {
};
const rightDom2 = (list: Array<NewsTenderType>) => {
if(!list.length) return;
return (
<div key={1008} className="right-box-item right-item-second">
<div className="item-box">
......
pages/home/waterfallFlowBody/styled.tsx
......@@ -102,6 +102,7 @@ export const Box = styled.div`
}
}
.right-item {
background-color: #fff;
border-radius: 6px;
.title {
display: flex;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论