根据 Azure 地图中的缩放级别渲染对象

Question

我想在一定的缩放级别后在标记上显示一个弹出窗口，这可能吗？

Answer 1

数据层有一个最小/最大缩放选项，可用于指定图层应显示的缩放级别范围。 然而，弹出窗口没有这样的选项，但是可以通过使用 zoomend 事件来添加这样的逻辑。 这是一个代码示例。

var map;

function GetMap() {
    //Initialize a map instance.
    map = new atlas.Map('myMap', {
        view: 'Auto',

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '<Your Azure Maps Key>'
        }
    });

    //Wait until the map resources are ready.
    map.events.add('ready', function () {
    
        //Create one or more popups.
        var popup = new atlas.Popup({
            //Set the position.
            position: [-99.213191, 39.507909], //Middle of the USA 
            
            //Add the content.
            content: '<div style="padding:10px;">Hello World</div>',
             
             //Likely don't want the user closing the popup if the map zoom level is managing this.
             closeButton: false
        });
        
        //Link some information to the popup that tells us the zoom level range.
        popup.metadata = {
            //In this case the popup will appear when the map is between zoom levels 3 and 8.
            minzoom: 3,
            maxzoom: 8
        };
        
        //Add the popup to the map.
        map.popups.add(popup);

        //Add an event to monitor the zoomend event. 
        //If you are only using a small number of popups in your app you could use the "zoom" event which will fire as the map moves, but can quickly cause performance issues if there is a a couple dozen or more popups.
        map.events.add('zoomend', mapZoomed);
    });
}

function mapZoomed(e){
    //Get the zoom level.
    var zoom = map.getCamera().zoom;

    var popups = map.popups.getPopups();
    
    for(var i=0, len = popups.length; i < len; i++){                
        var popup = popups[i];
        
        if(popup.metadata) {
            //Open/close the popup based on the zoom level range information.
            if(zoom >= popup.metadata.minzoom && zoom <= popup.metadata.maxzoom) {
                popup.open();
            } else {
                popup.close();
            }
        }
    }
}