``` 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
npm install airmap
npm install airmap
2 引入
import airmap from 'airmap'
import 'airmap/airmap.css'
3 全局注册
Vue.use(airmap,{mapTheme:'dark'})
4 页面使用
5 自定义Option
js
{
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
}
}
`
$3
js
{
key:'',
title:'',
icon:'',
layer:'',
showFun:Boolean/Function,
callback:(e)=>{
//其中e中封装事件对象的id
}
}
`
$3
js
{
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}}
}
``