个人中心
gpt4 book ai didi

javascript - 停止 Mapbox 图层的事件传播

转载 作者：行者123 更新时间：2023-12-03 07:06:30 36 4
gpt4 key购买 nike

我有一个图层和一个 basemap 

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>

https://codepen.io/diesdasananas/pen/eqVLyj

每当我点击 circle layer 时，事件就会通过 basemap 传播。 Basemap click 被记录。我想知道如何阻止 event propagation 从 circle layer 到 basemap ？我不能使用 event.stopPropagation() 因为 Mapbox 在 Canvas 上绘制...

最佳答案

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

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 .

关于javascript - 停止 Mapbox 图层的事件传播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57477898/

36 4 0
文章推荐： javascript - 在内容中搜索多个引用字段
文章推荐： javascript - onClick触发点击报错: current.点击不是函数
文章推荐： javascript - AmCharts 4 donut chart - 自定义 URL 的超链接
文章推荐： javascript - 未捕获的 TypeError : Failed to resolve module specifier "...". 相对引用必须以 "/"、 "./"或 "../"开头。在(索引):1
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com