mapbox 之 switch map 图层切换
由于最近在mapbox-extensions中完善的功能越来越多，尤其是SwitchMapControl这个控件，所以单开一篇向大家介绍一下。
先看一下效果：
功能包括 (整体模仿google)：
- 卫星地图和电子地图切换
- 图层分组
- 图层组内图层互斥显示
- 点击后图层置顶
- 图层显示后easeTo
如何使用：
- install
yarn add mapbox-gl mapbox-extensions
- use
map.on('load', () => {
map.addControl(new SwitchMapControl())
});
这样就完成了基本使用，但是这样只提供切换到卫星地图功能，并没有弹出的附加图层，接下来我将参数一一介绍。
1.3.x 版本
- 使用css文件样式替代js中直接写入样式。
- 增加
全选|清除功能 - 增加图钉动画
new SwitchMapControl({
baseOption:{
name:'电子地图', // 默认："电子地图" 初始加载的style地图名
textColor:'black', // 默认："white" name文字颜色
backgroundImage:'../assets/1.png', // 默认： 背景图片
},
// satelliteOption:{}, // 和baseOption一样
showSatelliteDefault:true, // 默认：false 是否默认显示卫星影像
extra:{ // 默认：空 附加图层
name:"附加图层", // 默认："附加图层" 名称 会显示在图层卡标题栏中
nailActiveColor:"blue", // 默认："#0066FF" 图钉(点击后图层卡不会消失)点击激活后的颜色
showToTop:true, // 默认：false 图层被激活时是否移动到上层
topLayerId:"", // 默认：undefined 与showToTop进行配合，图层激活时移动到此id图层之后
selectAndClearAll:false // 默认：true 是否开启全选清空功能，
// 当group中mutex:true 此功能无效
// 当group中mutex不为true layers存在mutex:true只有清空
selectAllLabel: "全选" // 默认："全选"
clearAllLabel : "清空" // 默认："清空"
layerGroups：{
"group1" :{ // 这是一个record，prop name 被认为组名
mutex:true, // 默认：false 控制整个组图层是否互斥
uiType:"SwitchBtn" // 默认："ImgTxtBtn" ImgTxtBtn--图片文字按钮(一行三个)
// SwitchBtn--开关(一行一个)
layers:[
{
name:"图层1", // 必填 图层名字
layer:[{id:'layer1', // 必填 虽然名字叫layer，你可以使用但图层也可以使用图层数组
type:'fill'}],
backgroundImage: "", // 可空
backgroundImageActive:"" // 可空
zoom:1, // 默认：0 初始图层加载顺序
fixed:true, // 默认：false 是否固定图层顺序，不受showToTop影像，如正射影像等
easeToOptions:{}, // 默认：undefined 激活图层后移动镜头参数，默认不移动
mutex:true, // 默认：false 组内互斥，即使group的mutex为false也有效
active:true, // 默认：fasle 是否初始加载后显示
onVisibleChange:visible=>{ // 默认：空 当图层激活状态修改时回调
console.log(visible);
}
}
]
}
}
}
})
1.2.x 版本
new SwitchMapControl({
baseOption:{
name:'电子地图', // 默认：电子地图 初始加载的style地图名
textColor:'black', // 默认：白色 name文字颜色
backgroundImage:'../assets/1.png', // 默认： 背景图片
},
// satelliteOption:{}, // 和baseOption一样
showSatelliteDefault:true, // 默认：false 是否默认显示卫星影像
extra:{ // 默认：空 附加图层
name:"附加图层", // 默认：附加图层 名称 会显示在图层卡标题栏中
nailActiveColor:"blue", // 默认：#0066FF 图钉(点击后图层卡不会消失)点击激活后的颜色
groupsContainerMaxHeight:300, // 默认：300px 卡片最大高度
layerItemActiveColor:"blue", // 默认：#1677FF 图层被激活显示时ui颜色
layerItemHoverColor:"black", // 默认：black 鼠标经过图层后ui颜色,SwitchButton不起作用
layerItemImgSize:50, // 默认：50px 每个图层ui图片的宽高,SwitchButton不起作用
showToTop:true, // 默认：false 图层被激活时是否移动到上层
topLayerId:"", // 默认：undefined 与showToTop进行配合，图层激活时移动到topLayerId图层之后
layerGroups：{
"group1" :{ // 这是一个record，prop name 被认为组名
mutex:true, // 默认：false 控制整个组图层是否互斥
uiType:"SwitchBtn" // 默认：ImgTxtBtn ImgTxtBtn--图片文字按钮(一行三个)
// SwitchBtn--开关(一行一个)
layers:[
{
name:"图层1", // 必填 图层名字
layer:[{id:'layer1', // 必填 虽然名字叫layer，你可以使用但图层也可以使用图层数组
type:'fill'}],
backgroundImage: "", // 必填
zoom:1, // 默认：0 初始图层加载顺序
fixed:true, // 默认：false 是否固定图层顺序，不受showToTop影像，如正射影像等
easeToOptions:{}, // 默认：undefined 激活图层后移动镜头参数，默认不移动
mutex:true, // 默认：false 组内互斥，即使group的mutex为false也有效
active:true, // 默认：fasle 是否初始加载后显示
onVisibleChange:visible=>{ // 默认：空 当图层激活状态修改时回调
console.log(visible);
}
}
]
}
}
}
})
