如何在多边形要素上叠加点要素
[英]How to layer point feature over a polygon feature
问题描述
How can I get a point feature over a polygon feature?
如何在多边形特征上获得点特征？ I am layering polygon on top of the point feature or a marker feature however I also have a tooltip (popup) that fires when hovering over the features but only the polygon popup is getting displayed even when I am hovering over the point/marker feature.我在点要素或标记要素之上分层多边形，但是我也有一个工具提示（弹出窗口），当悬停在要素上时会触发，但即使我将鼠标悬停在点/标记要素上，也只会显示多边形弹出窗口。 I am assured the point/marker is over/on top of the polygon because I assigned a 1.0 opacity and point/marker is still visible.我确信点/标记在多边形上方/顶部，因为我分配了 1.0 的不透明度并且点/标记仍然可见。
So when a point is on top of a polygon how can I get the popup on the point/marker feature to fire?因此，当一个点位于多边形顶部时，如何让点/标记功能上的弹出窗口触发？ Or is this a potential defect?或者这是一个潜在的缺陷？
I swapped out the hover event for a 'click' event on the point/marker feature and the popup works as expected but this is not the desired behavior.我将 hover 事件替换为点/标记功能上的“点击”事件，弹出窗口按预期工作，但这不是所需的行为。
TIA. TIA。 Rick...瑞克...
1 个解决方案
解决方案1
0 已采纳 2020-04-09 22:12:57
I've done a bunch of experimenting and its the order in which the events are added that make all the difference, not the order of the layers in this case.我已经做了一堆实验，它的添加事件的顺序会产生很大的不同，而不是在这种情况下层的顺序。 Unless you add the events to the map, rather than the individual layers, then the rendering order is used.除非您将事件添加到 map，而不是单个层，否则将使用渲染顺序。
I've put together a little test app to test all the different scenarios:我整理了一个小测试应用程序来测试所有不同的场景：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.