airmap
v0.9.4
Published
``` 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-slo
Downloads
15
Readme
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