如何在多边形要素上分层点要素

Question

如何在面要素上获取点要素？我在点要素或标记要素之上分层多边形，但是我也有一个工具提示（弹出窗口），当鼠标悬停在这些要素上时会触发，但即使我将鼠标悬停在 point/marker 上，也只会显示多边形弹出窗口特征。我确信 point/marker 是多边形的 over/on 顶部，因为我指定了 1.0 不透明度并且 point/marker 仍然可见。

因此，当一个点位于多边形之上时，我怎样才能触发 point/marker 要素上的弹出窗口？或者这是一个潜在的缺陷？

我在 point/marker 功能上将悬停事件换成 'click' 事件，弹出窗口按预期工作，但这不是所需的行为。

TIA！瑞克...

Answer 1

我做了很多实验，是添加事件的顺序造成了所有差异，而不是在这种情况下层的顺序。除非您将事件添加到地图，而不是单个图层，否则将使用渲染顺序。

我整理了一个小测试应用程序来测试所有不同的场景：

var map, datasource, output, polygonLayer, pointLayer, isSwapped = false;

function GetMap() {
  output = document.getElementById('output');

  //Initialize a map instance.
  map = new atlas.Map('myMap', {
    center: [-122.1255, 47.6305],
    zoom: 17,
    view: 'Auto',

    //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
    authOptions: {
      authType: 'subscriptionKey',
      subscriptionKey: subscriptionKey
    }
  });

  //Wait until the map resources are ready.
  map.events.add('ready', function() {

    //Create a data source and add it to the map.
    datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Add polygon to data source.
    datasource.add(new atlas.data.Polygon(
      [
        [
          [-122.126, 47.63096],
          [-122.12602, 47.62997],
          [-122.12537, 47.62994],
          [-122.12534, 47.63094],
          [-122.12600, 47.63096]
        ]
      ]
    ));

    //Add point data
    datasource.add(new atlas.data.Point([-122.1255, 47.6305]));

    polygonLayer = new atlas.layer.PolygonLayer(datasource, null, {
      fillColor: 'red'
    });


    pointLayer = new atlas.layer.SymbolLayer(datasource, null, {
      filter: ['==', ['geometry-type'], 'Point']
    });

    map.layers.add([polygonLayer, pointLayer]);

    map.events.add('mousemove', layerHovered);
  });
}

function layerHovered(e) {
  var msg = [];

  if (e.shapes && e.shapes.length > 0) {
    msg.push(e.shapes.length, ' shapes hovered.<ul>');

    e.shapes.forEach(s => {
      if (s instanceof atlas.Shape) {
        msg.push('<li>Shape: ', s.getType(), '</li>');
      } else {
        msg.push('<li>Feature: ', s.geometry.type, ' (', s.source, ' -> ', s.sourceLayer, ')</li>');
      }
    });

    msg.push('</ul>');
  }

  output.innerHTML = msg.join('');
}

function swapLayerOrder() {
  map.layers.remove([pointLayer, polygonLayer]);

  if (isSwapped) {

    map.layers.add([polygonLayer, pointLayer]);
  } else {
    map.layers.add([pointLayer, polygonLayer]);
  }

  isSwapped = !isSwapped;
}

function changeEvents(elm) {
  map.events.remove('mousemove', layerHovered);
  map.events.remove('mousemove', pointLayer, layerHovered);
  map.events.remove('mousemove', polygonLayer, layerHovered);

  switch (elm.value) {
    case 'map':
      map.events.add('mousemove', layerHovered);
      break;
    case 'ps':
      map.events.add('mousemove', [polygonLayer, pointLayer], layerHovered);
      break;
    case 'sp':
      map.events.add('mousemove', [pointLayer, polygonLayer], layerHovered);
      break;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>

  <meta charset="utf-8" />

  <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
  <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>  
</head>

<body onload="GetMap()">
      <div id="myMap" style="position:relative;width:100%;height:600px;"></div>

 <div style="position:absolute;top: 10px;left:10px;background-color:white;padding:10px;">
 
  <input type="button" onclick="swapLayerOrder()" value="Swap layer order"/>
  
  <br/><br/>
  
  Attach event to:<br/>
  <input type="radio" name="gender" value="map" checked="checked" onclick="changeEvents(this)"/> map<br/>
  <input type="radio" name="gender" value="ps" onclick="changeEvents(this)"/> polygon layer then symbol layer<br/>
  <input type="radio" name="gender" value="sp" onclick="changeEvents(this)"/> symbol layer then polygon layer<br/>
  
  <br/>
  
  <div id="output"></div>
 
 </div>
    <script>var subscriptionKey = atob('dFRrMUpWRWFlTnZEa3h4bnhIbTljWWFDdnFsT3ExdS1mWFR2eVhuMlhrQQ==')</script>
</body>

</html>

如何在多边形要素上分层点要素

How to layer point feature over a polygon feature

javascript

maps

polygon

point

azure-maps