airmap

airmap

1 安装

npm install airmap

2 引入

import airmap from 'airmap'
import 'airmap/airmap.css'

3 全局注册

Vue.use(airmap,{mapTheme:'dark'})

4 页面使用

<vmap :mapKey='地图id' :options='options'>
    <!--这里可以加入自定义的工具按钮,如下所示-->
    <template v-slot:tool-after-工具名>
        <el-tooltip content="导出地图" placement="left" effect="dark" popper-class="shadow-box-popper shadow-box dark">
        <i class="el-icon-picture toolbox-icon i-18x" @click="printMap"></i>
        </el-tooltip>
    </template>
</vmap>

5 自定义Option

{
    baseUrl:'',//地图服务baseUrl
    retainNaipLayer:true,//是否保留NAIP图层
    defaultWorldLayer:false,//是否加载默认的世界地图
    contextMenus:[
        { 'key': 'posToZh', 'title': '定位到中国', 'icon': 'iconfont iconzhongguoditu', 'layer': 'all',showFun:true,
          callback:(e)=>{
            this.fitExtent()
          } 
        },
    ],
    control:{
        mousePosition:true,
        scaleLine:true,
        toolBar:{
            show:true,
            zoomin:true,
            zoomout:true,
            posToChina:true,
            layerControl:true,
            locate:true,
            measure:true,
            distCircle:true,
            printMap:true
        },
        searchBox:false,
        contextMenu:true
    }
}

5.1 自定义右键菜单

{
    key:'',
    title:'',
    icon:'',
    layer:'',
    showFun:Boolean/Function,
    callback:(e)=>{
        //其中e中封装事件对象的id
    }
}

5.2 自定图层参数

{
    title: '运输机场',//标题
    gtype: 'point',  //类型
    gicon: 'fa fa-xing',//图标
    allowLabel: true,//是否支持标注
    allowFilter: true,//是否允许过滤
    appendToLyrCtl: true,//是否加入图层控制
    allowReload: false,//是否可以重新加载图层元素
    glabel: true,//显示隐藏标注
    visible: false,//显示隐藏图层
    dFilter: '',//cql 过滤条件
    minZoom: 4,//初始过滤
    tooltip:true,//字符串模板函数（f）=>{return `${f.name}`}
}

更多layer参数见openlayers官网图层参数Api