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 = [ "
姓名 :" + users?.user_name + "", "职位 : " + users.pos_held, "电话 : " + users.tel, "部门 : " + dep, "
", ]; var infoWindow = new MapUtl.loadMap.InfoWindow({ offset: new MapUtl.loadMap.Pixel(0, -30), autoMove: true, content: content.join("
"), }); 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 = [ "
站点名称 :" + title + "", // "职位 : " + users.pos_held, // "电话 : " + users.tel, "
", ]; var infoWindow = new MapUtl.loadMap.InfoWindow({ offset: new MapUtl.loadMap.Pixel(0, -30), autoMove: true, content: content.join("
"), }); 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;