OpenLayers Workshop(五)Vector tiles and Mapbox styles

Interact with VectorTile features 与矢量瓦片特征交互

矢量瓦片的一个好处是我们可以与特征进行交互,因为我们在客户端中有数据。需要注意的是在渲染的过程中矢量瓦片被优化了,这意味着特征只包含了那些过滤和渲染时需要的属性,并且几何图形也针对渲染的分辨率进行了优化,并在图块边界附近进行了裁剪。

在这个练习中,我们将要在鼠标悬浮在一个点的位置上方时,在其特征的周围画一个框。

Adding a vector layer for displaying bounding boxes 增加一个矢量图层用于展示框框

我们将要在单独的图层上绘制在特征上悬停时的编辑框。需要在main.js中增加以下的这些引用:

import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Style, Stroke} from 'ol/style';

接下来我们为创建一个图层和数据源,并分配给地图。

Interacting with the map 与地图交互

现在时候为地图增加pointermove 的监听器了,这个监听器可以获取点位置上的所有特征并将其边界框加入图层中,我们需要两个额外的引用:

import {Feature} from 'ol';
import {fromExtent} from 'ol/geom/Polygon';

最后我们编写清除当前数据源的内容并将当前点位置的特征的边界框作为新的内容写入数据源:

map.on('pointermove', function(event) {
  source.clear();
  map.forEachFeatureAtPixel(event.pixel, function(feature) {
    const geometry = feature.getGeometry();
    source.addFeature(new Feature(fromExtent(geometry.getExtent())));
  }, {
    hitTolerance: 2
  });
});

鼠标悬停时的效果如图:

发表评论