base-amap2 v2.0.1

####1.NPM引入 ######VUE2与VUE3分别采用2.x.x / 3.x.x大版本号

vue2

 npm install base-amap@2.x.x

vue3

 npm install base-amap@3.x.x

####2.VUE配置

######BaseAmap注册时配置项说明

    //定位后台域名
    baseHttpUrl:string,
    //高德地图key
    amapKey: string,
    //存储OA用户sid的键名(需在服务所在的LocalStorage中存储sid)
    sidLocalStorageKeyName?: string,
    //项目名称
    projectCode: string

######代码示例

import BaseAmap from 'base-amap'
import 'base-amap/lib/style.css'

createApp(App)
    .use(BaseAmap,{
        useGuiJi:true,
        amapKey:'1ca569e765cfb1fc36840bb9513bac90',
        baseHttpUrl:'https://hxmapd.huaxincem.com'
    })
    .mount('#app')

####3.界面使用 #####BaseAmap为封装地图的全局基本组件.除此之外,也可使用AmapLoader.init方法自定义渲染地图(BasePosition组件即采用此方式)

   <template>
           <div id="postionMapContainer"></div>
   </template>
   
   <script>
       let amapModel = new AmapModel();
       AmapLoader.init("postionMapContainer").then(initAmapModel => {
           //initAmapModel中存储了地图基本元素. 本处采用复制值方式给amapModel属性赋值,避免vue子组件无法动态接收
           Object.assign(amapModel,initAmapModel);
       })
   </sript>

#####基础地图组件使用代码示例 a.简略使用

   <BaseAmap></BaseAmap>

b.开启轨迹查询功能(useGuiJi),围栏绘制渲染功能(useWeiLan)

   <BaseAmap :useGuiJi="true" :useWeiLan="true"></BaseAmap>

c.插槽方式自定义轨迹查询界面(#guiJi),自定义围栏绘制渲染界面(#weiLan).

   <BaseAmap>
        <template #guiJi>轨迹查询界面(自定义轨迹查询界面及功能)</template>
        <template #weiLan>围栏功能界面(自定义围栏界面及功能)</template>
   </BaseAmap>

#####单独使用轨迹组件示例

<template>

    <--起初始化地图图层信息作用-->
    <div id="myGuiJiMap" style="height: 500px;width: 600px"></div>
    
    <-- gjCloseFun 导航关闭事件 -->
    <BaseGj :amapModel="amapModel" @gjCloseFun="daohangClose"/>
    
 </template> 
 
 <script>
        import {AmapModel,AmapLoader,EventAction,MapConstant} from 'base-amap'
 
        let amapModel = new AmapModel();
        AmapLoader.init("myWeiLanMap").then(initAmapModel => {
            //initAmapModel中存储了地图基本元素. 本处采用复制值方式给amapModel属性赋值,避免vue子组件无法动态接收
            Object.assign(amapModel,initAmapModel);
        })
    </sript>

#####单独使用围栏组件示例

<template>
        <div id="myWeiLanMap" style="height: 500px;width: 600px"></div>

        <-- 
             weiLanOptionInfo 围栏信息
             weiLanAddOrUpdateCallBackFun 保存后回调
             weiLanCloseFun 关闭事件
          -->
        <BaseWeiLan
                    :amapModel = "amapModel"
                    :weiLanOptionInfo="weiLanOptionModel"
                    @weiLanAddOrUpdateCallBackFun="weiLanAddOrUpdateCallBack"
                    @weiLanCloseFun="weiLanClose"/>
          
 </template>                   
        
        
   <script>
        import {AmapModel,AmapLoader,EventAction,MapConstant} from 'base-amap'
        
       let amapModel = new AmapModel();
       AmapLoader.init("myWeiLanMap").then(initAmapModel => {
           Object.assign(amapModel,initAmapModel);
       })
   </sript>

#####实时定位跟踪组件使用代码示例

        <BasePosition :cars="mycars"></BasePosition>
        
        let mycars = ["京F00001","京F00002"]