2.0.7 • Published 11 months ago
hx-amap v2.0.7
#hx-amap 基于VUE封装的高德组件,现有轨迹/围栏/实时定位功能,适用于VUE2与VUE3.
#使用介绍 ##1. NPM引入
VUE2与VUE3分别采用2.x.x / 3.x.x大版本号
vue2
npm install hx-amap@2.x.xvue3
npm install hx-amap@3.x.x##2. VUE配置及类型属性说明
###2.1 BaseAmap注册时配置项说明
//定位后台域名
baseHttpUrl:string,
//高德地图key
amapKey: string,
//存储OA用户sid的键名(需在服务所在的LocalStorage中存储sid)
sidLocalStorageKeyName?: string,
//项目名称
projectCode: string代码示例
import BaseAmap from 'hx-amap'
import 'hx-amap/lib/style.css'
createApp(App)
.use(BaseAmap,{
amapKey:'高德地图key',
sidLocalStorageKeyName:'mySidKeyName',
baseHttpUrl:'定位平台接口地址',
projectCode:'TMS'
})
.mount('#app')###2.2 类型属性说明
AmapModel {
//是否初始化完成
isInit: boolean = false,
//对应高德地图API中的 Map(渲染指定id容器后的对象)
theMap,
//对应高德地图API中的 AMapUI(高德UI组件对象)
aMapUI,
//对应高德地图API中的 AMap(高德MAP组件对象)
aMap,
//是否为3D地图模式
viewMode = "2D",
//初始化地图城市
city,
//初始化地图级别
zoom: number,
//初始化地图中心点位置
center: number[]
}###2.3 事件名称(MapConstant)
//地图初始化完成事件
MapConstant.AMAP_READY_EVENT
// 车辆实时位置功能,更新车辆数据事件前缀
MapConstant.POSITION_FLUSH_EVENT_PRE
// 轨迹查询功能,主动查询渲染车辆轨迹数据事件前缀
MapConstant.GJ_QUERY_EVENT_PRE###2.4 渲染服务工具类 渲染服务所需的AmapModel,需为地图容器渲染完成的.
####2.4.1 WeiLanService 围栏服务
//初始化
let wls = new WeiLanService(amapModel);
//地图渲染展示指定的围栏, 入参为围栏的CID数组, 返回为围栏地图元素的异步对象
wls.show(cids: string[]) :Promise<any>
//清空上一次所有的围栏图形
wls.clearAll()####2.4.2 MarkerService 标记点服务
//初始化
let ms = new MarkerService(amapModel);
/*
地图添加标记点
callback:用户点击地图生成标记点后调用此回调函数并传输marker地图元素. config为标记点配置
MarkerConfig {
name?: string; //名称
iconUrl?: any; //标记点图标
draggable? : boolean;//是否可拖动
}
*/
ms.addMarker(callback: Function, config?: MarkerConfig)
//地图展示渲染标记点. 入参: lng 经度, lat 纬度. 返回:marker地图元素
ms.showMarker(lng: number, lat: number, config?: MarkerConfig) :any
//清除所有上述操作产生的标记点
ms.clearAll()marker为高德官方标记点对象
marker.getPosition() //可获取标记点的坐标
marker.getExtData().address //通过addMarker方法新增产生的标记点,在自定义数据(ExtData)中放入了地址描述信息(address)##3. 界面使用 ###3.1 BaseAmap为封装地图的全局基本组件.除此之外,也可使用AmapLoader.init方法自定义渲染地图.
<template>
<div id="postionMapContainer"></div>
</template>
<script>
let amapModel = new AmapModel();
AmapLoader.init("postionMapContainer").then(initAmapModel => {
//initAmapModel中存储了地图基本元素. 本处采用复制值方式给amapModel属性赋值,避免vue子组件无法动态接收
Object.assign(amapModel,initAmapModel);
//地图容器渲染完成事件通知
EventAction.getAction().emit(MapConstant.AMAP_READY_EVENT, this.amapModel);
})
</sript>###3.2 基础地图组件使用代码示例 ####3.2.1. 简略使用
<BaseAmap></BaseAmap>####3.2.2. 简略使用(baseAmapReadyEvent:自带容器渲染完成后,进行调用. 参数为渲染完成后的amapModel对象)
<BaseAmap @baseAmapReadyEvent="baseAmapReadyEvent"></BaseAmap>
function baseAmapReadyEvent(amapModel:any){
console.log(amapModel);
}####3.2.3. 开启轨迹查询功能(useGuiJi),围栏绘制渲染功能(useWeiLan)
<BaseAmap :useGuiJi="true" :useWeiLan="true"></BaseAmap>####3.3.4. 插槽方式自定义轨迹查询界面(#guiJi),自定义围栏绘制渲染界面(#weiLan).
<BaseAmap>
<template #guiJi="scope">轨迹查询界面(自定义轨迹查询界面及功能)</template>
<template #weiLan="scope">围栏功能界面(自定义围栏界面及功能)</template>
<template #weiLan="scope">
<BaseWeiLan :amapModel="scope.amapModel"/>
</template>
</BaseAmap>###3.3 单独使用轨迹组件示例 ####3.3.1. 基础用法
<template>
<!--起初始化地图图层信息作用-->
<div id="myGuiJiMap" style="height: 500px;width: 600px"></div>
<!-- gjCloseFun 导航关闭事件 -->
<BaseGj :amapModel="amapModel" @gjCloseFun="daohangClose"/>
</template>
<script>
import {AmapModel,AmapLoader,EventAction,MapConstant} from 'hx-amap'
let amapModel = new AmapModel();
AmapLoader.init("myGuiJiMap").then(initAmapModel => {
Object.assign(amapModel,initAmapModel);
EventAction.getAction().emit(MapConstant.AMAP_READY_EVENT, this.amapModel);
})
</sript>####3.3.2. 进阶属性 eventName: 向组件发送查询并渲染轨迹事件名称 notUseQueryUi: 不使用组件自带的查询条件框
<BaseGj :amapModel="amapModel" @gjCloseFun="daohangClose" :eventName="myeventName" :notUseQueryUi="true"/>
//触发轨迹查询渲染事件(第一个参数为固定前缀+事件名称,第二个参数为所需查询车辆的信息)
EventAction.getAction().emit(
MapConstant.GJ_QUERY_EVENT_PRE + myeventName,
{
no:"京F00001",
startTime:"2022-08-18 00:00:00",
endTime:"2022-08-19 00:00:00"
}
);###3.4 单独使用围栏组件示例 ####3.4.1. 单个围栏的增改查
<template>
<div id="myWeiLanMap" style="height: 500px;width: 600px"></div>
<!--
amapModel 地图渲染容器模型
weiLanAddOrUpdateCallBackFun 保存后回调
weiLanCloseFun 关闭事件
weiLanOptionInfo 所需渲染的围栏信息
{
openType: 打开方式 0:新增, 1:查看 2:修改
cid: 查看/修改的围栏主键(新增方式无需此值)
}
-->
<BaseWeiLan
:amapModel = "amapModel"
:weiLanOptionInfo="weiLanOptionModel"
@weiLanAddOrUpdateCallBackFun="weiLanAddOrUpdateCallBack"
@weiLanCloseFun="weiLanClose"/>
</template>
<script>
import {AmapModel,AmapLoader,EventAction,MapConstant} from 'hx-amap'
let amapModel = new AmapModel();
AmapLoader.init("myWeiLanMap").then(initAmapModel => {
Object.assign(amapModel,initAmapModel);
EventAction.getAction().emit(MapConstant.AMAP_READY_EVENT, this.amapModel);
})
weiLanOptionModel:{
openType:1,
cid:"c42acfd148cc1857fc90cd844d15a4ae"
}
</sript>####3.4.2. 多个围栏的同时渲染
<template>
<div id="myWeiLanMap" style="height: 500px;width: 600px"></div>
</template>
<script>
import {AmapModel,AmapLoader,EventAction,MapConstant} from 'hx-amap'
let amapModel = new AmapModel();
AmapLoader.init("myWeiLanMap").then(initAmapModel => {
Object.assign(amapModel,initAmapModel);
EventAction.getAction().emit(MapConstant.AMAP_READY_EVENT, this.amapModel);
//根据cid渲染多个围栏(地图容器渲染完成后,再使用amapModel)
let weiLanService = new WeiLanService(amapModel);
weiLanService.show(['b599a47095903aa33f630caf6c9074a6','b575d8b7081f8b333789db6215fcd145','ffb374e53e5d1e68cfe2a6eb3c3fff3f']).then(weiLanUis=>{
//weiLanUis:围栏的地图图形对象集合
console.log(weiLanUis);
})
})
</sript>###3.5 实时定位跟踪组件使用代码示例 ####3.5.1. 组件会以固定频率更新车辆位置(1min)
<BasePosition :cars="mycars"></BasePosition>
let mycars = ["京F00001","京F00002"]####3.5.2. 如需变更为其他车辆,示例如下
<!-- 引用组件时,eventName值为"向组件发送消息事件名称" -->
<BasePosition :eventName="myeventName"></BasePosition>
//向组件发送消息(第一个参数为固定前缀+事件名称,第二个参数为变更后的车辆集合)
EventAction.getAction().emit(MapConstant.POSITION_FLUSH_EVENT_PRE+myeventName, ["京F00001","京F00002"]);