diff --git a/src/App.tsx b/src/App.tsx index 3058d97..5556144 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,8 +7,8 @@ const onMessage = (e: any) => { if (data.type === "accpt") { let body = JSON.parse(data.content.body); MapUtl.addMaker({ - lng: 103.55, - lat: 30.342, + lng: 103.872802, + lat: 30.523876, title: body?.user_name, users: body, }); diff --git a/src/components/map/MapComponent.tsx b/src/components/map/MapComponent.tsx index 750f4bc..2a6d993 100644 --- a/src/components/map/MapComponent.tsx +++ b/src/components/map/MapComponent.tsx @@ -22,8 +22,8 @@ export default function MapContainer() { amap = new Amap.Map("container", { viewMode: "2D", // 是否为3D地图模式 - zoom: 11, // 初始化地图级别 - center: [103.55, 30.34], // 初始化地图中心点位置 + zoom: 15, // 初始化地图级别 + center: [103.872802, 30.523876], // 初始化地图中心点位置 mapStyle: "amap://styles/darkblue", resizeEnable: true, }); @@ -44,7 +44,6 @@ export default function MapContainer() { // addMaket(Amap,amap); MapUtl.loadMap = Amap; MapUtl.amap = amap; - [ { title: "红桥微型消防站", po: [103.889435, 30.528084] }, { title: "桃荚微型消防站", po: [103.89066, 30.506378] }, diff --git a/src/components/map/MapFrom.tsx b/src/components/map/MapFrom.tsx index bbebf75..f14dc00 100644 --- a/src/components/map/MapFrom.tsx +++ b/src/components/map/MapFrom.tsx @@ -37,6 +37,7 @@ export default function MapFrom(props:any) { // 开启坐标选择功能 mouseTool.on("draw", function (event) { var lnglat = event.obj.getBounds().getCenter(); // 获取图形的中心点坐标 + console.log(lnglat) markers = mouseTool.overlays.marker props.onChange({lng:lnglat.lng,lat:lnglat.lat}) var mk = [] diff --git a/src/components/map/mapUtil.ts b/src/components/map/mapUtil.ts index f9bfca3..de22268 100644 --- a/src/components/map/mapUtil.ts +++ b/src/components/map/mapUtil.ts @@ -1,6 +1,6 @@ import makers from "../../static/map-maker.png"; -import makers1 from "../../static/map-maker (1).png"; -import makers2 from "../../static/map-maker (2).png"; +import makers1 from "../../static/map-maker1.png"; +import makers2 from "../../static/map-maker2.png"; interface makersInf { userIdentity: string, marker: any @@ -13,16 +13,16 @@ class MapUtl { static addMaker(data: any) { const { lng, lat, title, users } = data; - let mk,dep = ""; - if(users?.militia_type===1){ + let mk, dep = ""; + if (users?.militia_type === 1) { mk = makers dep = "民兵" } - if(users?.grid_user===1){ + if (users?.grid_user === 1) { mk = makers1 dep = "网格员" } - if(users?.patrol_user===1){ + if (users?.patrol_user === 1) { mk = makers2 dep = "巡防大队" } @@ -35,7 +35,7 @@ class MapUtl { imageSize: [20, 20], image: mk, style: { - backgroundImage:"red" + backgroundImage: "red" }// 默认的样式名 }), }); @@ -132,19 +132,7 @@ class MapUtl { static getWecher() { } - // 百度转高德 - static bdConvertGd(coordinate) { - var bd_lng = coordinate[0]; - var bd_lat = coordinate[1]; - var pi = 3.14159265358979324 * 3000.0 / 180.0; - var x = bd_lng - 0.0065; - var y = bd_lat - 0.006; - var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi); - var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi); - var gd_lng = z * Math.cos(theta); - var gd_lat = z * Math.sin(theta); - return [gd_lng, gd_lat]; - } + } export default MapUtl; \ No newline at end of file diff --git a/src/pages/home/home.less b/src/pages/home/home.less index 0c9ec7c..7580d74 100644 --- a/src/pages/home/home.less +++ b/src/pages/home/home.less @@ -127,13 +127,12 @@ bottom: 0px; backdrop-filter: blur(10px); background: rgba(37, 52, 70, 0.4); - height: 80px; + height: 60px; width: 100%; z-index: 1; text-align: center; .bottom_content { display: inline-block; - padding-top: 15px; > span { background: linear-gradient( 180deg, diff --git a/src/pages/home/homeBottom/home_bottom.tsx b/src/pages/home/homeBottom/home_bottom.tsx index 1ed0ee4..e79d1ea 100644 --- a/src/pages/home/homeBottom/home_bottom.tsx +++ b/src/pages/home/homeBottom/home_bottom.tsx @@ -3,7 +3,57 @@ import WhichVideo from "./which_video"; import Ec from "./ec"; import Emr from "./emr"; import "./bot.less"; -const HomeBottom = () => { +import { Radio } from "antd"; +import { useEffect, useState } from "react"; +import { inject, observer } from "mobx-react"; +import { Store } from "antd/es/form/interface"; +import MapUtl from "@/components/map/mapUtil"; + +const HomeBottom = (props: Store) => { + const { homeStore } = props; + const [size, changeSize] = useState("1"); + const handleSizeChange = (e: any) => { + changeSize(e.target.value); + getUlist(e.target.value); + }; + useEffect(() => { + setTimeout(() => { + getUlist("1"); + }, 2000); + }, []); + + const getUlist = (type) => { + let query = {}; + switch (type) { + case "1": + query = { militia: 1 }; + break; + case "2": + query = { grid_officer: 1 }; + break; + case "3": + query = { patrol_brigade: 1 }; + break; + } + let marks = MapUtl.makerList; + if (marks.length) { + marks.forEach((item) => { + item?.marker.remove(); + }); + } + homeStore.getContact(query).then((res) => { + let list = res.data.record; + list.forEach((element) => { + if (!element.lat || !element.long) return; + MapUtl.addMaker({ + lng: element.long, + lat: element.lat, + title: element.user_name, + users: element, + }); + }); + }); + }; return (