简述
在之前的章节中，我们了解了地图的初始化和相关的地图事件，能够完成一些基本功能，而在这些基本功能中，一些常用的交互功能是需要我们掌握的。
图层显隐
应用场景
很多项目中，在UI界面会有“图层管理”“图层树”这类内容，最常见的是对图层的显示隐藏进行操作，虽然我们也可以使用添加删除图层实现这个功能，但这并不符合接口的设计目的，在这里有个原则性的问题，虽然设置显示隐藏和添加删除图层，在表现上是一样的，但是，我们最好尊重地图接口的设计目的，这不仅是性能问题，也是让我们的业务逻辑更贴合地图的渲染逻辑。
代码
// 隐藏
map.setLayoutProperty('layerName', 'visibility', 'none');
// 显示
map.setLayoutProperty('layerName', 'visibility', 'visible');
在之前的章节里我们了解到，一个图层有两个属性，layout,paint，从字面意思上来说，layout是图层的布局属性，paint是图层的样式属性，而在这里，我们只需要设置visibility属性，这个属性的值可以是visible或者none，visible表示显示图层，none表示隐藏图层。
可以查看官网的示例
与setLayoutProperty相似的，是setPaintProperty,我们可以参考mapbox Layer,去查看这两个方法能够更改的属性，总的来说，我们在添加图层时设置的 layout,paint，都可以被设置
高亮
应用场景
在地图交互中，我们经常要点击地图上一些元素，让他能够“高亮”起来，表示我点击了这里，在mapbox里，我们常用的实现方式是添加一个高亮图层，点击到元素后，获取元素唯一ID(尽量是唯一的，看业务场景需求)，通过过滤高亮图层的方式展示出来。当然也有用唯一渲染的方式实现，但是这种方式不是很灵活。
代码
// 数据
const data = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
name: "1",
},
geometry: {
type: "Polygon",
coordinates: [
[
[116.38585567474364, 39.92099342895789],
[116.38615608215332, 39.91622086779371],
[116.39057636260985, 39.91655002062137],
[116.39049053192137, 39.921125081103234],
[116.38585567474364, 39.92099342895789],
],
],
},
},
{
type: "Feature",
properties: {
name: "2",
},
geometry: {
type: "Polygon",
coordinates: [
[
[116.39104843139647, 39.92102634201797],
[116.39117717742919, 39.91655002062137],
[116.39503955841063, 39.91684625681369],
[116.39469623565674, 39.920960515882015],
[116.39104843139647, 39.92102634201797],
],
],
},
},
{
type: "Feature",
properties: {
name: "3",
},
geometry: {
type: "Polygon",
coordinates: [
[
[116.38628482818604, 39.91576005117727],
[116.38662815093993, 39.91227091046905],
[116.39044761657713, 39.91243549657234],
[116.39049053192137, 39.91618795242394],
[116.38628482818604, 39.91576005117727],
],
],
},
},
{
type: "Feature",
properties: {
name: "4",
},
geometry: {
type: "Polygon",
coordinates: [
[
[116.39139175415039, 39.91612212163695],
[116.39147758483887, 39.91240257938332],
[116.39516830444335, 39.91266591645252],
[116.39486789703369, 39.91628669848582],
[116.39139175415039, 39.91612212163695],
],
],
},
},
],
};
map.addSource("polygon", {
type: "geojson",
data: data,
});
// 添加图层
map.addLayer({
id: "Polygon",
type: "fill",
source: "polygon",
paint: {
"fill-color": "rgb(0,255,255)",
},
layout: {},
});
// 添加高亮图层
map.addLayer({
id: "highlightPolygon",
type: "fill",
source: "polygon",
paint: {
"fill-color": "#6e599f",
"fill-opacity": 0.75,
},
filter: ["in", "name", "0"], // 这里只要保证过滤跳件使高亮图层默认不显示任何图层即可。
});
// 添加点击事件
map.on("click", function (e) {
var bbox = [
[e.point.x, e.point.y],
[e.point.x, e.point.y],
];
var features = map.queryRenderedFeatures(bbox, {
layers: ["Polygon"],
});
var filter = features[0].properties.name;
map.setFilter("highlightPolygon", ["in", "name", filter]);
});
这里面我们用了setFilter,也在添加图层的时候设置了filter字段，两者的作用都是通过一定的条件过滤图层，这里我们通过in来过滤，它的作用是判断一个属性是否在一个数组中，在例子中，我们在加载高亮图层时，只展示name为1的元素，但是数据中并没有，也就意味着所有要素都不展示，到了后面点击获取元素id后，我们可以通过这个name来过滤高亮图层，这样就可以只高亮我们点击的元素了。
在这里我们涉及一个mapbox的功能——表达式，也就是setFilter中写的那样，这里不会详细展开，有兴趣的同学可以阅读这个文档。也可以参考这篇博客,这是一个非常重要的功能，能够实现很多很多功能，可以说如果会学会使用表达式，能做出很多漂亮的效果或复杂的功能，当然，学习它的难度也会提高一些。
