地图的初始化 显示电子围栏（先初始化在调接口显示电子围栏） 显示定位 显示轨迹 轨迹回放 （回放速度无法控制是因为高德地图的版本问题，不要设置版本，使用默认的即可生效） 获取当前城市及天气情况 设置地图样式 坐标拾取器
this . map. on ( 'complete' , ( ) => { } )
清除地图上所有图形（若不想清除电子围栏，可以全部清除后重新显示电子围栏） this . map. clearMap ( ) ;
自动适配到合适视野范围（无参数，默认包括所有覆盖物的情况） this . map. setFitView ( ) ;
this . map. setCenter ( [ point. longitude, point. latitude] ) ;
< template>
< div class = "w100 h100 white relative" >
< ! -- 地图区域 -- >
< div id= "container" class = "w100 h100" > < / div>
< ! -- 搜索框 -- >
< div class = "absolute" style= "left: .2rem; top: .5rem;z-index: 9; " >
< div class = "bg-com white pdRem-20 sizeRem-30" >
< div class = "bold w100" >
< div class = "item pdRem-20" > 正在监测人员：共{ { olderArr. length } } 人< / div>
< div class = "item pdRem-20" >
护理院
< el- select v- model= "info.orgId" class = "w100 mtRem-20" @change= "changeOrgId" : popper- append- to- body= "false"
: teleported= "false" >
< el- option v- for = "item in roomArr" : key= "item.id" : label= "item.label" : value= "item.id" > < / el- option>
< / el- select>
< / div>
< div class = "item pdRem-20" >
老人姓名
< el- select v- model= "info.syncUserId" class = "w100 mtRem-20" filterable : filter- method= "remoteMethod"
: popper- append- to- body= "false" : teleported= "false" >
< el- option v- for = "item in olderArr" : key= "item.syncUserId" : label= "item.userName"
: value= "item.syncUserId" > < / el- option>
< / el- select>
< / div>
< div class = "item pdRem-20" >
< div class = "mbRem-20" > 开始时间< / div>
< el- date- picker v- model= "info.dateRange" @change= "handleDateRange" style= "width: 100%;" type= "datetimerange"
range- separator= "" start- placeholder= "开始日期" end- placeholder= "结束日期" align= "right"
popper- class = "popperClass-my" class = "picker" : popper- append- to- body= "false" >
< / el- date- picker>
< / div>
< div class = "item pdRem-20" >
< el- tag class = "btn-time" @click= "getTime(0)" > 当天< / el- tag>
< el- tag class = "btn-time mlrRem-20" @click= "getTime(3)" > 近3 天< / el- tag>
< el- tag class = "btn-time" @click= "getTime(7)" > 近7 天< / el- tag>
< / div>
< / div>
< ! -- 按钮 -- >
< div class = "center mtRem-80" >
< el- button size= "medium" class = "block btn-bg" @click= "submit(1)" > 实时定位< / el- button>
< el- button size= "medium" class = "block mlRem-40 btn-bg" @click= "submit(2)" > 轨迹回放< / el- button>
< / div>
< / div>
< / div>
< ! -- 告警 -- >
< div class = "absolute" style= "right: 1.5rem; top: .5rem;z-index: 9; " >
< div v- for = "(alarmInfo, index) in alarmList" : key= "index" class = "item-bg pdRem-30 sizeRem-26" >
< div class = "flex_r" > < el- tag type= "warning" effect= "dark" size= "mini" > { { alarmInfo. alarmLevelName } } < / el- tag>
< / div>
< div class = "flex1" >
< div style= "width: 90%;" >
< div class = "" > { { alarmInfo. alarmContent } } < / div>
< / div>
< div style= "width:10%" >
< img : src= "require('./components/img/alarm-icon.png')" alt= "" style= "width:0.4rem;height: 0.4rem;" >
< / div>
< / div>
< / div>
< / div>
< / div>
< / template>
< script>
import { selectCompanyList, userInfoList, fenceList, userLocation, trajectory } from './components/js/api'
import 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 ,
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 ) {
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)
}
} )
}
}
} ,
initAMap ( ) {
AMapLoader. load ( {
key : "d3e34dd987d36d98958ea35f97303089" ,
plugins : [ "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" ,
] ,
} )
. then ( ( AMap ) => {
this . map = new AMap. Map ( "container" , {
rotateEnable : true ,
pitchEnable : true ,
zoom : 17 ,
pitch : 50 ,
rotation : - 15 ,
viewMode : '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)
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} ` )
}
} ) ;
} 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 ) ,
} ) ,
} ) ;
this . map. add ( marker) ;
} ) ;
this . map. setFitView ( ) ;
} else {
this . msgError ( '未有相关定位消息' ) ;
}
} ,
getFenceInfoList ( arr = [ ] ) {
if ( arr. length == 0 ) {
this . map. clearMap ( ) ;
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 ( ) ;
}
} ,
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
}
} ) ;
let lineArr = res. data. map ( item => [ item. longitude, item. latitude] )
this . handleGraspRoad ( lineArr, type)
} ,
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" ,
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 ) ,
} ) ,
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. setFitView ( ) ;
setTimeout ( ( ) => {
markerSign. moveAlong ( graspArr, 300 ) ;
} , 1000 ) ;
}
} ,
} ,
}
< / script>
< style lang= "scss" >
. 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 ) ;
}
. 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;
}
}
< / style>
< style scoped lang= "scss" >
@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;
}
: : 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>
