文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在多边形特征上对点特征进行分层

问如何在多边形特征上对点特征进行分层
EN

Stack Overflow用户

提问于 2020-04-08 17:45:18

回答 1查看 339关注 0票数 0

如何在多边形特征之上获得点特征？我是在点功能或标记功能的顶部分层多边形，但我也有一个工具提示(弹出)，当我在特征上方盘旋时会触发，但即使在点/标记功能上盘旋时，也只显示多边形弹出。我确信点/标记在多边形的上方，因为我分配了一个1.0的不透明度，而且点/标记仍然是可见的。

因此，当点位于多边形的顶部时，如何才能激发点/标记功能上的弹出？或者这是一个潜在的缺陷？

我将悬停事件替换为点/标记功能上的“单击”事件，弹出的活动与预期的一样，但这不是期望的行为。

蒂娅！瑞克。

azure-maps

javascript

maps

polygon

point

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-09 22:12:57

我已经做了大量的实验，这是事件被添加的顺序，它决定了所有的不同，而不是在这种情况下层的顺序。除非将事件添加到映射中，而不是单个层，否则将使用呈现顺序。

我已经组装了一个测试应用程序来测试所有不同的场景：

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61106811

复制

相似问题

问如何在多边形特征上对点特征进行分层
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在多边形特征上对点特征进行分层EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在多边形特征上对点特征进行分层
EN