Question

我有一层和底图

mapboxgl.accessToken = '';

const coords = JSON.parse('{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[13.380550656438709,52.52208508665396]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[13.380633221743006,52.52208172104466]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[13.380686171093972,52.52208244564463]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[13.380702060621635,52.5220511942754]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[13.380527236009051,52.52205779286111]}}]}');

this.map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  zoom: 19, // starting zoom
  center: [13.380702060621635, 52.5220511942754]
});

this.map.on('load', async () => {
  const controls = new mapboxgl.NavigationControl();
  this.map.addControl(controls, 'top-right');

  this.map.addSource('foo', {
    type: 'geojson',
    data: coords
  });

  this.map.addLayer({
    id: 'points',
    type: 'circle',
    source: 'foo',
    paint: {
      'circle-radius': 5,
      'circle-color': 'hotpink',
    },
  });
});

this.map.on('click', 'points', event => {
  console.log('Layer click')
});

this.map.on('click', () => {
  console.log('Basemap click')
});

body { 
  margin: 0; 
  padding: 0; 
}

#map { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  width: 100%; 
}

#sidebar {
  background-color: hotpink;
  height: 100vh;
  width: 200px;
  position: relative;
  z-index: 99999999999;
  opacity: 0.5;
}

.popup-content {
  display: inline-block
}

.pin-icon {
  font-size: 20px;
  color: blue
}

.vl {
  border-left: 1px solid #bababa;
  height: 15px;
  padding: 0px;
  margin: 10px;
}

<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-;scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>

<div id='map'></div>
</body>
</html>

this

每当我单击circle layer时，该事件就会通过底图传播。 Basemap click被记录。我想知道如何停止event propagation从circle layer到basemap？我无法使用event.stopPropagation()，因为Mapbox会在画布上绘制...

Answer 1

一种方法是保存单击的事件坐标，然后将这些坐标与基础层及其事件坐标进行比较。

let clickCoords = {};

this.map.on('click', 'points', event => {
  clickCoords = event.point;
  console.log('Layer click')
});

Now, detect a click on the map, not on the points layer

this.map.on('click', () => {
  // check if coords are different, if they are different, execute whatever you need
  if (clickCoords.x !== event.point.x && clickCoords.y !== event.point.y) {
    console.log('Basemap click');
    clickCoords = {};
  }
});

或者，甚至更好的是，使用queryRenderedFeatures()。

this.map.on('click', event => {
   if (this.map.queryRenderedFeatures(event.point).filter(feature => feature.source === YOURLAYERNAME).length === 0) {
    console.log('Basemap click');
  }
});

这里是Mapbox example。

停止Mapbox图层的事件传播

1 个答案: