Azure 地图图层

Question

我正在尝试在地图上绘制多个圆圈，并向每个多边形图层添加一个事件。然而，问题是，当我单击内圈时，它会触发所有警报，这意味着它会调用所有事件。在 Bing Maps 中，有一个名为 zIndex 的属性，允许我们以这种方式处理图层，但 Azure Maps 不提供类似的功能。 这是代码

    function getMap() {
        //Initialize a map instance.
        map = new atlas.Map('myMap', {
            center: [-90, 35],
            zoom: 3,
            view: 'Auto',
                //Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authType: 'subscriptionKey',
                subscriptionKey: ''
            }
        });

        //Wait until the map resources are ready.
        map.events.add('ready', function () {
            var temp=[300000,500000,800000]

            temp.forEach(function(data,index){
                 //Create a data source and add it to the map.
            datasource = new atlas.source.DataSource();
            map.sources.add(datasource);
            datasource.add(new atlas.data.Feature(new atlas.data.Point([-122.5430235659865,48.947622108796494]),
                {
                    subType: "Circle",
                    radius: data
                }));
        var layer=new atlas.layer.PolygonLayer(datasource, null, {
                fillColor: 'rgba(0, 200, 0.8)'
            });
            map.layers.add(layer);

            map.events.add("click", layer,function(){
                alert("Layer"+""+index)
            });

            })
        });

    }


</script>
<style>
    #myMap {
        position: relative;
        width: calc(100% - 210px);
        min-width: 290px;
        height: 600px;
        float: left;
    }

    #output {
        float: left;
        width: 200px;
        height: 600px;
        margin-left: 10px;
        overflow-y: auto;
    }
</style>

<div id="output"></div>

我想将 z 索引添加到图层或以不会与另一个事件重叠的方式处理它

Answer 1

Azure Maps 使用基于图层的事件解决方案，而不是单个对象解决方案。这样效率就高很多了。如果您在 Bing 地图 V7 中使用图层，Bing 地图实际上具有相同的概念。

Azure Maps 更进一步，将数据分离到一个数据源中，允许您在同一数据上使用多个渲染层。 （例如，您可以使用多边形图层以一种方式渲染其区域，使用线条图层来自定义其轮廓，以及使用符号或气泡图层来显示其坐标）。如果您想更改显示的数据，只需添加/删除/编辑数据源中的数据即可。请注意，当添加到数据源时，GeoJson 功能会使用 atlas.Shape 类进行包装。如果您使用形状类上的 setter 函数来编辑它，更新会自动流入数据源并更新地图。

需要注意的几个关键事项；

1. 大多数应用程序只需要一个数据源。绝对不要在循环中为每个形状创建一个。在大约 100 个数据源时，地图变得非常慢。
2. 同样，您应该只创建一次图层，而不是循环中每个形状创建一个图层。如果您想自定义每个形状的渲染方式（例如不同的颜色），请利用数据驱动的样式。您也只需将事件添加到图层一次。

我强烈建议观看本文档中的视频，其中解释了上述所有内容： https://learn.microsoft.com/en-us/azure/azure-maps/data-driven-style-expressions-web- sdk

在单击事件回调中，事件参数将具有一个

shapes

属性，该属性包含鼠标下方且事件添加到的图层中的所有形状的数组。如果有多个形状相互重叠，则可以返回多个形状。地图上最上面的形状将是数组中的第一个形状。

这是代码的更新版本，效率更高。

var map, dataSource;

function getMap() {
    //Initialize a map instance.
    map = new atlas.Map('myMap', {
        center: [-90, 35],
        zoom: 3,
        view: 'Auto',
            //Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
            authType: '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);

        //Create a layer and add it to the map.
        var layer = new atlas.layer.PolygonLayer(datasource, null, {
            fillColor: 'rgba(0, 200, 0.8)'
        });
        map.layers.add(layer);

        //Add a click event to the layer.
        map.events.add("click", layer,function(e){
            var shape = e.shapes[0];
            var properties = shape.getProperties();
            
            alert("Layer ID: "+ e.layerId + "\nTop most shape radius: " + properties[radius]);
        });
        
        //Loop through and create three circles, add them to the data source.
        var temp=[300000,500000,800000];
        
        temp.forEach(function(data, index){          
            datasource.add(new atlas.data.Feature(new atlas.data.Point([-122.5430235659865,48.947622108796494]), {
                subType: "Circle",
                radius: data
            }));
        });
    });
}