官网网站建设方案书,友情链接交换形式,济南建设学院官网,分类用wordpress功能点
地图的初始化显示电子围栏#xff08;先初始化在调接口显示电子围栏#xff09;显示定位显示轨迹轨迹回放 #xff08;回放速度无法控制是因为高德地图的版本问题#xff0c;不要设置版本#xff0c;使用默认的即可生效#xff09;获取当前城市及天气情况设置地图…
功能点
地图的初始化显示电子围栏先初始化在调接口显示电子围栏显示定位显示轨迹轨迹回放 回放速度无法控制是因为高德地图的版本问题不要设置版本使用默认的即可生效获取当前城市及天气情况设置地图样式坐标拾取器
重点
默认当前城市 地图加载完成的生命周期 this.map.on(complete, () {})清除地图上所有图形若不想清除电子围栏可以全部清除后重新显示电子围栏
this.map.clearMap();自动适配到合适视野范围无参数默认包括所有覆盖物的情况
this.map.setFitView();设置地图中心点下拉框和时间选择框样式的修改 this.map.setCenter([point.longitude, point.latitude]); templatediv classw100 h100 white relative!-- 地图区域 --div idcontainer classw100 h100/div!-- 搜索框 --div classabsolute styleleft: .2rem; top: .5rem;z-index: 9; div classbg-com white pdRem-20 sizeRem-30div classbold w100div classitem pdRem-20正在监测人员共{{ olderArr.length }}人/divdiv classitem pdRem-20护理院el-select v-modelinfo.orgId classw100 mtRem-20 changechangeOrgId :popper-append-to-bodyfalse:teleportedfalseel-option v-foritem in roomArr :keyitem.id :labelitem.label :valueitem.id/el-option/el-select/divdiv classitem pdRem-20老人姓名el-select v-modelinfo.syncUserId classw100 mtRem-20 filterable :filter-methodremoteMethod:popper-append-to-bodyfalse :teleportedfalseel-option v-foritem in olderArr :keyitem.syncUserId :labelitem.userName:valueitem.syncUserId/el-option/el-select/divdiv classitem pdRem-20div classmbRem-20开始时间/divel-date-picker v-modelinfo.dateRange changehandleDateRange stylewidth: 100%; typedatetimerangerange-separator start-placeholder开始日期 end-placeholder结束日期 alignrightpopper-classpopperClass-my classpicker :popper-append-to-bodyfalse/el-date-picker/divdiv classitem pdRem-20el-tag classbtn-time clickgetTime(0)当天/el-tagel-tag classbtn-time mlrRem-20 clickgetTime(3)近3天/el-tagel-tag classbtn-time clickgetTime(7)近7天/el-tag/div/div!-- 按钮 --div classcenter mtRem-80el-button sizemedium classblock btn-bg clicksubmit(1)实时定位/el-buttonel-button sizemedium classblock mlRem-40 btn-bg clicksubmit(2)轨迹回放/el-button/div/div/div!-- 告警 --div classabsolute styleright: 1.5rem; top: .5rem;z-index: 9; div v-for(alarmInfo, index) in alarmList :keyindex classitem-bg pdRem-30 sizeRem-26div classflex_rel-tag typewarning effectdark sizemini{{ alarmInfo.alarmLevelName }}/el-tag/divdiv classflex1div stylewidth: 90%;div class{{ alarmInfo.alarmContent }}/div/divdiv stylewidth:10%img :srcrequire(./components/img/alarm-icon.png) alt stylewidth:0.4rem;height: 0.4rem;/div/div/div/div/div
/templatescript
import { selectCompanyList, userInfoList, fenceList, userLocation, trajectory } from ./components/js/apiimport AMapLoader from amap/amap-jsapi-loader;
import redIcon from ./components/img/point-red1.png;
import originIcon from ./components/img/origin.png;
import endIcon from ./components/img/end.png;
import olderManIcon from ./components/img/olderMan.png;
window._AMapSecurityConfig {securityJsCode: bc0077d71423eedb1d25df186610f740,
};
export default {props: [alarmList], //告警列表data() {return {isOrgId: true, //true是卫健委账号 fase机构账号map: null,trackLineArr: [],fenceArr: [], //电子围栏数据// 搜索框num: 0,info: {orgId: ,syncUserId: ,dateRange: [],},roomArr: [],//护理院-下拉olderArr: [],//老人-下拉olderArrCopy: [],//老人-下拉}},watch: {info.dateRange(newVal) {if (newVal null) {this.info.dateRange [];}},},mounted() {console.log(mounted, 33333333333)this.isOrgId localStorage.getItem(isOrgId) true ? true : false;this.initAMap();},beforeDestroy() {this.map.destroy();},methods: {// 机构改变changeOrgId() {console.log(changeOrgId, this.info.orgId)// 老人下拉userInfoList({orgId: this.info.orgId}).then(res {this.olderArr res.data;this.olderArrCopy res.data;this.$set(this.info, syncUserId, res.data.length ? res.data[0].syncUserId : )})// 电子围栏fenceList({orgId: this.info.orgId}).then(res {console.log(电子围栏, res.rows)this.fenceArr res.rows;this.getFenceInfoList(res.rows)})},remoteMethod(query) {if (query) {console.log(query, query)this.olderArr this.olderArrCopy.filter(item {console.log(item.userNamePingYin.includes(query), 999, item.userNamePingYin);return item.userNamePingYin.toLowerCase().includes(query.toLowerCase()) || item.userName.includes(query);});} else {this.olderArr this.olderArrCopy;}},formatDate(date) {const year date.getFullYear();const month String(date.getMonth() 1).padStart(2, 0);const day String(date.getDate()).padStart(2, 0);const hours String(date.getHours()).padStart(2, 0);const minutes String(date.getMinutes()).padStart(2, 0);const seconds String(date.getSeconds()).padStart(2, 0);return ${year}-${month}-${day} ${hours}:${minutes}:${seconds};},getTime(day) {this.info.dateRange [, ]const now new Date();const startOfDay new Date(now.getFullYear(), now.getMonth(), now.getDate())this.info.dateRange[1] now;this.info.dateRange[0] day 0 ? startOfDay : new Date(now.getTime() - day * 24 * 60 * 60 * 1000);},// 时间段筛选handleDateRange() {if (this.info.dateRange) {const minDate new Date(this.info.dateRange[0]).getTime();const maxDate new Date(this.info.dateRange[1]).getTime();if (maxDate - minDate 7 * 24 * 60 * 60 * 1000) {this.msgError(选择的时间范围不能超过7天);// 清空日期范围选择器this.info.dateRange [];}} else {this.info.dateRange [];}},submit(type) {//1实时定位 2轨迹回放console.log(type, this.info, 999);if (type 1) {if (!this.info.syncUserId) {this.msgError(请选择老人);} else {userLocation({syncUserId: this.info.syncUserId,}).then(res {this.createMarker(res.data)})}} else {if (!this.info.syncUserId) {this.msgError(请选择老人);} else if (this.info.dateRange.length 0) {this.msgError(请选择时间);} else {trajectory({syncUserId: this.info.syncUserId,startTime: this.formatDate(this.info.dateRange[0]),endTime: this.formatDate(this.info.dateRange[1]),}).then(res {if (res.data.length 0) {this.msgError(未查询到轨迹数据);} else {this.handleTrack(2, res)// setTimeout(() {// this.handleTrack(2, res)// }, 2000)}})}}},// 地图initAMap() {AMapLoader.load({key: d3e34dd987d36d98958ea35f97303089, // 申请好的Web端开发者Key首次调用 load 时必填// version: v1.4.15, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [AMap.ControlBar,AMap.ToolBar,AMap.Weather,AMap.CitySearch,AMap.Marker,AMap.MouseTool,AMap.PolyEditor,AMap.Driving,AMap.Polyline,AMap.Geolocation,AMap.GraspRoad,AMap.Geocoder,AMap.GeometryUtil.ringArea,AMap.DistrictSearch,AMap.MoveAnimation,], // 需要使用的的插件列表如比例尺AMap.Scale等}).then((AMap) {this.map new AMap.Map(container, {// 设置地图容器idrotateEnable: true,pitchEnable: true,zoom: 17,pitch: 50,rotation: -15,viewMode: 3D, //开启3D视图,默认为关闭zooms: [2, 20],center: [116.930096, 34.758164],mapStyle: amap://styles/blue, //设置地图的显示样式});// 工具条var controlBar new AMap.ControlBar({position: {right: 10px,top: 10px}});this.map.addControl(controlBar)// var toolBar new AMap.ToolBar({// position: {// right: 40px,// top: 110px// }// });// this.map.addControl(toolBar)this.map.on(complete, () {let idObj JSON.parse(localStorage.getItem(formJx))// 机构下拉selectCompanyList({orgId: this.isOrgId ? -1 : idObj.orgId,groupId: idObj.groupId,}).then(res {this.roomArr res.data;this.$set(this.info, orgId, res.data[0].id)this.changeOrgId()})})}).catch((e) {console.log(e);});},// 获取当前定位城市——获取天气getWeather() {const city new AMap.CitySearch()city.getLocalCity((status, result) {if (status complete result.info OK) {console.log(当前城市, result.city);// 天气// 创建天气实例const weather new AMap.Weather();// 获取指定城市例如北京的实时天气weather.getLive(result.city, (error, data) {if (error) {console.error(获取天气失败, error);} else {console.log(实时天气数据, data, 天气${data.weather} 温度${data.temperature}℃ 风向${data.windDirection});this.$emit(getWeather, 天气${data.weather} 温度${data.temperature}℃ 风向${data.windDirection})// 数据结构中通常包含如下信息// data.city: 城市名称// data.weather: 天气状况描述// data.temperature: 温度// data.windDirection: 风向// data.windPower: 风力等级等其他气象参数}});} else {console.error(获取当前城市失败, result.info);}});},// 创建两个点标记createMarker(arr []) {if (arr.length ! 0) {// 清除地图上所有图形this.map.clearMap();this.getFenceInfoList(this.fenceArr)arr.map((item) {var marker new AMap.Marker({position: new AMap.LngLat(item.longitude, item.latitude),icon: new AMap.Icon({image: redIcon,imageSize: new AMap.Size(28, 28),}),// offset: new AMap.Pixel(-13, -30),// label: {// content: div classinfos张三/div,// direction: bottom //文本标注方位 可选值top|right|bottom|left|center默认值: right// }});this.map.add(marker);});//自动适配到合适视野范围//无参数默认包括所有覆盖物的情况this.map.setFitView();} else {this.msgError(未有相关定位消息);}},//获取接口返回的电子围栏数据getFenceInfoList(arr []) {if (arr.length 0) {// 清除地图上所有图形this.map.clearMap();// 使用 setCenter 方法将地图中心移动到新的位置let point this.roomArr.filter(item item.id this.info.orgId)[0]console.log(point, this.roomArr, 99999999999)// 设置地图中心点this.map.setCenter([point.longitude, point.latitude]);return;}let arr1 [];for (let i 0; i arr.length; i) {if (arr[i].fenceType 0) {if (arr[i].useFence) {arr1.push({radius: arr[i].radius,center: arr[i].point,fillColor: #16d46b,fillOpacity: 0.35,strokeColor: #16d46b,strokeOpacity: 0.8,strokeStyle: solid,zIndex: 10,});} else {arr1.push({radius: arr[i].radius,center: arr[i].point,fillColor: #1791fc,fillOpacity: 0.5,strokeStyle: solid,strokeColor: #FF33FF,strokeOpacity: 0.8,zIndex: 10,});}} else if (arr[i].fenceType 1) {if (arr[i].useFence) {arr1.push({path: arr[i].optimal,fillColor: #16d46b,fillOpacity: 0.35,strokeColor: #16d46b,strokeOpacity: 0.8,strokeStyle: solid,zIndex: 10,});} else {arr1.push({path: arr[i].optimal,fillColor: #1791fc,fillOpacity: 0.5,strokeColor: #FF33FF,strokeOpacity: 0.8,strokeStyle: solid,zIndex: 10,});}} else {for (let j 0; j arr[i].optimal.length; j) {if (arr[i].useFence) {arr1.push({path: arr[i].optimal[j],fillColor: #16d46b,fillOpacity: 0.35,strokeColor: #16d46b,strokeOpacity: 0.8,strokeStyle: solid,zIndex: 10,});} else {arr1.push({path: arr[i].optimal[j],fillColor: #1791fc,fillOpacity: 0.5,strokeColor: #FF33FF,strokeOpacity: 0.8,strokeStyle: solid,zIndex: 10,});}}}}this.handleDrawPolygon(arr1);},// 获取接口返回的绘制图形handleDrawPolygon(data) {for (let i 0; i data.length; i) {let polygon null;if (data[i].radius) {polygon new AMap.Circle(data[i]);} else {polygon new AMap.Polygon(data[i]);}this.map.add(polygon);// 定位到绘制图形的位置this.map.setFitView();}},// type 1查询轨迹 2轨迹播放handleTrack(type, res) {// 清除地图上所有图形this.map.clearMap();this.getFenceInfoList(this.fenceArr)this.trackLineArr res.data.map(item {return {x: parseFloat(item.longitude),y: parseFloat(item.latitude),createTime: item.createTime,address: item.address,sp: 0,ag: 0,tm: 6}});// console.log(444, 接口获取的数据, this.trackLineArr)let lineArr res.data.map(item [item.longitude, item.latitude])this.handleGraspRoad(lineArr, type)},// 轨迹纠偏(因为最多只能纠偏500个点,所以只能采用循环方式进行处理)handleGraspRoad(graspArr, type) {// 起点let marker1 null;marker1 new AMap.Marker({map: this.map,position: graspArr[0],icon: new AMap.Icon({image: originIcon,size: new AMap.Size(48, 48), //图标大小imageSize: new AMap.Size(32, 32),}),offset: new AMap.Pixel(-13, -26),});marker1.setMap(this.map);// 终点let marker2 null;marker2 new AMap.Marker({map: this.map,position: graspArr[graspArr.length - 1],icon: new AMap.Icon({image: endIcon,size: new AMap.Size(48, 48), //图标大小imageSize: new AMap.Size(32, 32),}),offset: new AMap.Pixel(-13, -26),});// 定位到指定位置this.map.setFitView();marker2.setMap(this.map);//查询轨迹if (type 1) {console.log(666, 轨迹的坐标点, graspArr)// 绘制轨迹(轨迹纠偏)const polyline new AMap.Polyline({map: this.map,path: graspArr,showDir: true,strokeColor: red, //线颜色// strokeOpacity: 1, //线透明度strokeWeight: 6, //线宽});} else {//轨迹播放var markerSign new AMap.Marker({map: this.map,position: graspArr[0],icon: new AMap.Icon({image: olderManIcon,size: new AMap.Size(48, 48), //图标大小imageSize: new AMap.Size(44, 44),}),// icon: https://webapi.amap.com/images/car.png,offset: new AMap.Pixel(-13, -26),autoRotation: true,angle: -90,});// 绘制轨迹(轨迹纠偏)const polyline new AMap.Polyline({map: this.map,path: graspArr,showDir: true,strokeColor: #28F, //线颜色strokeOpacity: 1, //线透明度strokeWeight: 6, //线宽});// 轨迹路线样式const passedPolyline new AMap.Polyline({map: this.map,strokeColor: #68d068, //线颜色strokeOpacity: 1, //线透明度strokeWeight: 6, //线宽strokeStyle: solid //线样式});markerSign.on(moving, function (e) {passedPolyline.setPath(e.passedPath);// this.map.setCenter(e.target.getPosition(), true);});this.map.setFitView();setTimeout(() {markerSign.moveAlong(graspArr, 300);}, 1000);// markerSign.moveAlong(graspArr, {// // 每一段的时长// duration: 200, //可根据实际采集时间间隔设置// // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置// // autoRotation: true,// });}},},
}
/script
style langscss
// 修改时间选择框的样式不能加scoped
.popperClass-my {border: 1px solid #66729b;background-color: rgba(0, 0, 0, 0.7);color: white;.el-date-range-picker__content.is-left,.el-picker-panel__content .el-date-range-picker__content .is-left,.el-picker-panel__content .el-date-range-picker__content .is-right,.el-date-range-picker__time-header,.el-date-range-picker__time-picker-wrap,.el-input__inner,.el-picker-panel__footer,.el-time-panel .el-popper,.el-button,.el-time-spinner,.el-time-spinner__item,.el-time-panel .el-popper {border: 0;}.el-time-spinner,.el-picker-panel__footer,.el-time-spinner__item {background: rgba(0, 0, 0, 0.7);// border: 0;// color: white;}.is-disabled .el-input__inner {background: rgba(0, 20, 38, 1);color: white;}.el-input__inner {background: rgba(0, 20, 38, 1);color: white;// 点日期-时间框}.el-time-panel__footer {background: rgba(0, 20, 38, 1);border: 0;}ul.el-scrollbar_view.el-time-spinner_list::before {background: rgba(0, 20, 38, 1);}// 选中日期.available.in-range div {background-color: black;color: white;}.available.in-range div:hover {background-color: black;color: white;}.el-button,.el-button.is-plain:hover {color: white;background: rgba(0, 20, 38, 1);border: 0;}.el-time-spinner__item:hover:not(.disabled) {//二级下拉框background: rgba(0, 0, 0, 0.7);font-size: medium;color: white;}}
/stylestyle scoped langscss
import ./components/css/rem.scss;// 下拉框样式的修改
::v-deep .el-input,
::v-deep .el-input__inner,
::v-deep .btn-bg,
::v-deep .el-range-editor--medium .el-range-input {background: url(./components/img/search1.png) no-repeat center center;background-size: 100% 100%;color: #fff;border: 0px;text-align: center;
}::v-deep .el-select-dropdown,
::v-deep .popperClass .el-date-picker .el-range-input {border: 0;background-image: url(./components/img/search-bg.png);background-position: center;background-repeat: no-repeat;background-size: 100% 100%;.el-select-dropdown__item {color: #fff;}
}.btn-time {background: url(./components/img/search1.png) no-repeat center center;background-size: 100% 100%;color: white;border: 0;
}.picker .el-date-range-picker {background-color: transparent !important;// border: 0;// background-image: url(./components/img/search-bg.png);// background-position: center;// background-repeat: no-repeat;// background-size: 100% 100%;}::v-deep .amap-marker-label {background-color: transparent !important;color: #ffcd09;border: 0px solid #00f;white-space: nowrap;font-size: 16px;transform: translateX(-50%);font-weight: 700;
}.bg-com {width: 18vw;padding: .375rem;background: url(./components/img/bg-2.png) no-repeat center center;background-size: 100% 100%;z-index: 10;.item {max-width: 26vw;}
}.item-bg {width: 4.125rem;background: url(./components/img/alarm-bg.png) no-repeat center center;background-size: 100% 100%;
}
/style
