mapbox-gl | 1.6 图层常用功能(方法)

1,224 阅读3分钟

简述

在之前的章节中,我们了解了地图的初始化和相关的地图事件,能够完成一些基本功能,而在这些基本功能中,一些常用的交互功能是需要我们掌握的。

图层显隐

应用场景

很多项目中,在UI界面会有“图层管理”“图层树”这类内容,最常见的是对图层的显示隐藏进行操作,虽然我们也可以使用添加删除图层实现这个功能,但这并不符合接口的设计目的,在这里有个原则性的问题,虽然设置显示隐藏和添加删除图层,在表现上是一样的,但是,我们最好尊重地图接口的设计目的,这不仅是性能问题,也是让我们的业务逻辑更贴合地图的渲染逻辑。

代码

// 隐藏
map.setLayoutProperty('layerName', 'visibility', 'none');
// 显示
map.setLayoutProperty('layerName', 'visibility', 'visible');

在之前的章节里我们了解到,一个图层有两个属性,layout,paint,从字面意思上来说,layout是图层的布局属性,paint是图层的样式属性,而在这里,我们只需要设置visibility属性,这个属性的值可以是visible或者nonevisible表示显示图层,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中写的那样,这里不会详细展开,有兴趣的同学可以阅读这个文档。也可以参考这篇博客,这是一个非常重要的功能,能够实现很多很多功能,可以说如果会学会使用表达式,能做出很多漂亮的效果或复杂的功能,当然,学习它的难度也会提高一些。