不尊重 zindex 的 Mapbox 标记

Posted 2023-02-16

【中文标题】不尊重 zindex 的 Mapbox 标记

【英文标题】：Mapbox markers not respecting zindex

【发布时间】：2014-10-07 13:38:29

【问题描述】：

在我正在构建的 mapbox 应用程序中，我根据用户的地理位置将多个标记加载到页面上，问题是虽然我需要某些标记高于其他标记，但标记不尊重 zIndex我设置的。这是我的代码。

function addMarker(type, radius, height, lat, long, id, special, name) 
    var circle_options;
    switch (type) 
        case marker.RESTRICTED:
            circle_options = 
                color: '#D90000',
                fillColor: '#D90000',  // Fill color
                fillOpacity: 0.4,    // Fill opacity
                stroke: false,
                zIndexOffSet: -1

            ;
            break;

        case marker.NOT_RECOMMENDED:
            circle_options = 
                color: '#FF8000',
                fillColor: '#FF8000',  // Fill color
                fillOpacity: 0.75,    // Fill opacity
                stroke: false,
                zIndexOffSet: 1000

            ;
            break;
        case marker.USER_RECOMMENDED:
            circle_options = 
                color: '#9FCC1C',
                fillColor: '#9FCC1C',  // Fill color
                fillOpacity: 0.75,    // Fill opacity
                stroke: false,
                zIndexOffSet: 1000

            ;
            break;
        case marker.APPROVED:
            circle_options = 
                color: '#006ADC',
                fillColor: '#006ADC',  // Fill color
                fillOpacity: 0.75,
                stroke: false,
                zIndexOffSet: 1000
            ;
            break;
    
    var mark = L.circle([
   lat, long
    ], radius * 1609.34, circle_options);

    if (nav.currentPage() == 'location-details') 
        if (mapElement) 
            mapElement.setView([lat, long], zoomMap[radius])
            mapElement.removeLayer(use);
            mapElement.removeLayer(ic);

        
    
    else if (nav.currentPage() == 'home') 
        mark.objectId = id;
        circles.push(mark);
    
    mark.on('click', function (e) 
        var self = id;
        circles.some(function (item) 
            if (self == item.objectId) 
                nav.navigate('location-details', false, item.objectId);
                return true;
            
        );
    )
    mark.addTo(mapElement)

【问题讨论】：

为什么不按您希望它们显示的顺序添加标记？ Mapbox 中没有 z-index 功能

L.Circle extends L.Path 所以你可以使用bringToFront() 和bringToBack() 方法。但它不允许您精确控制 z-index，请参阅此 feature request。文森特的命令是正确的：见With javascript, can I change the Z index/layer of an SVG <g> element?

你可以为它创建一个jsfiddle 吗？

你在使用定位元素吗？ developer.mozilla.org/en-US/docs/Web/CSS/z-index

【参考方案1】：

看起来Path options 中没有zIndexOffSet 选项，您可以将其作为最后一个参数传递给L.Circle()。

虽然有一个 className 选项，您可以使用它为您的标记分配具有不同预设 z 索引的自定义类。

【参考方案2】：

如果您正在使用图层，则可以使用此功能来控制标记的渲染顺序：

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-symbol-symbol-sort-key