137 lines
4.4 KiB
TypeScript
137 lines
4.4 KiB
TypeScript
import makers from "../../static/map-maker.png";
|
|
import makers1 from "../../static/map-maker1.png";
|
|
interface makersInf {
|
|
userIdentity: string,
|
|
marker: any,
|
|
}
|
|
class MapUtl {
|
|
static makerList: makersInf[] = [];
|
|
static amap: any = null;
|
|
static loadMap: any = null;
|
|
static wecherInfo: any = null;
|
|
|
|
static addMaker(data: any) {
|
|
const { lng, lat, title, users,clicks } = data;
|
|
let mk, dep = "";
|
|
if (users?.militia_type === 1) {
|
|
mk = makers
|
|
dep = "民兵"
|
|
}
|
|
if (users?.grid_user === 1) {
|
|
mk = makers1
|
|
dep = "网格员"
|
|
}
|
|
if (users?.patrol_user === 1) {
|
|
dep = "巡防大队"
|
|
}
|
|
|
|
// if (MapUtl.loadMap === null) return;
|
|
const marker = new MapUtl.loadMap.Marker({
|
|
position: new MapUtl.loadMap.LngLat(lng, lat),
|
|
title: title,
|
|
icon: new MapUtl.loadMap.Icon({
|
|
imageSize: [20, 20],
|
|
image: mk,
|
|
style: {
|
|
backgroundImage: "red"
|
|
}// 默认的样式名
|
|
}),
|
|
});
|
|
var content = [
|
|
"<div><b>姓名 :" + users?.user_name + "</b>",
|
|
"职位 : " + users.pos_held,
|
|
"电话 : " + users.tel,
|
|
"部门 : " + dep,
|
|
"</div>",
|
|
];
|
|
var infoWindow = new MapUtl.loadMap.InfoWindow({
|
|
offset: new MapUtl.loadMap.Pixel(0, -30),
|
|
autoMove: true,
|
|
content: content.join("<br/>"),
|
|
});
|
|
marker.on("click", (e) => {
|
|
infoWindow.open(MapUtl.amap, e.target.getPosition());
|
|
clicks(users.id)
|
|
});
|
|
MapUtl.amap?.add(marker);
|
|
// 将maker添加到数组
|
|
MapUtl.makerList.push({
|
|
userIdentity: users.identity,
|
|
marker: marker
|
|
})
|
|
}
|
|
static addMakerDis(data: any) {
|
|
const { lng, lat, title } = data;
|
|
const marker = new MapUtl.loadMap.Marker({
|
|
position: new MapUtl.loadMap.LngLat(lng, lat),
|
|
icon: new MapUtl.loadMap.Icon({
|
|
image:
|
|
"https://img20.360buyimg.com/n1/jfs/t1/98676/8/28819/96905/62e1e96eE69561497/0e201e39d6d1c1e3.png",
|
|
imageSize: [30, 30],
|
|
}),
|
|
title: title,
|
|
});
|
|
var content = [
|
|
"<div><b>站点名称 :" + title + "</b>",
|
|
// "职位 : " + users.pos_held,
|
|
// "电话 : " + users.tel,
|
|
"</div>",
|
|
];
|
|
var infoWindow = new MapUtl.loadMap.InfoWindow({
|
|
offset: new MapUtl.loadMap.Pixel(0, -30),
|
|
autoMove: true,
|
|
content: content.join("<br/>"),
|
|
});
|
|
marker.on("click", (e) => {
|
|
infoWindow.open(MapUtl.amap, e.target.getPosition());
|
|
});
|
|
MapUtl.amap?.add(marker);
|
|
}
|
|
static setMakericon = (maker) => {
|
|
maker.setPosition([103.55, 30.342]);
|
|
var m = MapUtl.amap;
|
|
var newIcon = new m.Icon({
|
|
image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
|
|
size: new m.Size(25, 34), // 图标大小
|
|
anchor: new m.Pixel(12, 32), // 图标锚点
|
|
});
|
|
maker.setIcon(newIcon);
|
|
}
|
|
|
|
static polyline = (lineArr) => {
|
|
let markerp = new MapUtl.loadMap.Marker({
|
|
map: MapUtl.amap,
|
|
position: [116.478935, 39.997761],
|
|
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
|
|
offset: new MapUtl.loadMap.Pixel(-13, -26),
|
|
});
|
|
new MapUtl.loadMap.Polyline({
|
|
map: MapUtl.amap,
|
|
path: lineArr,
|
|
showDir: true,
|
|
strokeColor: "#28F", //线颜色
|
|
strokeWeight: 6, //线宽
|
|
});
|
|
let passedPolyline = new MapUtl.loadMap.Polyline({
|
|
map: MapUtl.amap,
|
|
strokeColor: "#AF5", //线颜色
|
|
strokeWeight: 6, //线宽
|
|
});
|
|
markerp.on('moving', function (e) {
|
|
passedPolyline.setPath(e.passedPath);
|
|
MapUtl.amap.setCenter(e.target.getPosition(), true)
|
|
});
|
|
MapUtl.amap.setFitView();
|
|
markerp.moveAlong(lineArr, {
|
|
duration: 500,//可根据实际采集时间间隔设置
|
|
autoRotation: true,
|
|
});
|
|
}
|
|
|
|
static getWecher() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
export default MapUtl; |