简述
在之前的章节中,我们了解了地图的初始化和相关的地图事件,能够完成一些基本功能,而在这些基本功能中,一些常用的交互功能是需要我们掌握的。
图层显隐
应用场景
很多项目中,在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
中写的那样,这里不会详细展开,有兴趣的同学可以阅读这个文档。也可以参考这篇博客,这是一个非常重要的功能,能够实现很多很多功能,可以说如果会学会使用表达式,能做出很多漂亮的效果或复杂的功能,当然,学习它的难度也会提高一些。