Как наложить точечный объект поверх многоугольника - PullRequest
Новая
       35

Как наложить точечный объект поверх многоугольника

0 голосов
/ 08 апреля 2020

Как я могу получить точечный объект поверх многоугольника? Я накладываю многоугольник поверх точечного объекта или объекта маркера, однако у меня также есть всплывающая подсказка, которая срабатывает при наведении курсора на объекты, но отображается только всплывающее окно с полигоном, даже когда я нахожусь над объектом точечного / маркера. Я уверен, что точка / маркер находится над / поверх многоугольника, потому что я назначил непрозрачность 1,0, а точка / маркер все еще видима.

Так что, когда точка находится на вершине многоугольника, как я могу получить всплывающее окно на точку / маркер, чтобы стрелять? Или это потенциальный дефект?

Я поменял событие при наведении курсора на событие «щелчок» на функции «точка / маркер», и всплывающее окно работает, как и ожидалось, но это не желаемое поведение.

TIA! Рик ...

1 Ответ

0 голосов
/ 10 апреля 2020

Я провел несколько экспериментов, и в этом порядке добавляются события, которые имеют значение, а не порядок слоев в этом случае. Если вы не добавите события на карту, а не отдельные слои, будет использоваться порядок рендеринга.

Я собрал небольшое тестовое приложение для тестирования всех различных сценариев ios: 

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>
...