亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

傳單 geojson - 指向某些圖標上的圖層集 z 索引?

傳單 geojson - 指向某些圖標上的圖層集 z 索引?

喵喔喔 2022-06-16 17:13:18
我目前正在使用 GeoJSON 并pointToLayer在我的地圖上創建圖標,我希望其中一些圖標出現在頂部。我的 GeoJSON 中有一個屬性,在z_index我設置為 100 和其他 null 的一些值上調用它(通過研究,我認為我可以用這個來影響排序?)但到目前為止我嘗試過的插件和東西不是工作(例如https://gist.github.com/up209d/4c68f2391f2302e510eb81aa8bcd4514 )我當前的配置如下:var geo_data = {{ geo_data|safe }}{% for st in site_types %}var z_index = nullvar {{ st.safe_name }} = L.geoJSON(geo_data, {    filter: function(feature, layer) {        if (feature.geometry.coordinates != "None") {            return feature.properties.type === "{{ st.name }}";        }    },    pointToLayer: function (feature, latlng) {        return L.marker(latlng, {            icon: L.AwesomeMarkers.icon(                        {                            icon: feature.properties.icon,                             markerColor: feature.properties.color,                             prefix: 'fa',                             iconColor: 'white',                        }                    )                }            );    },    onEachFeature: function (feature, layer) {        layer.bindPopup('<h3><a href="/sites/site/'+feature.properties.site_id+'">'+feature.properties.popupContent+'</a></h3>');}});{% endfor %}這是目前應該在頂部的圖標示例,看起來它的 z-index 設置為 1901<div class="awesome-marker-icon-darkred awesome-marker leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(512px, 901px, 0px); z-index: 1901; outline: none;"><i class="fa fa-server  icon-white"></i></div>
查看完整描述

1 回答

?
德瑪西亞99

TA貢獻1770條經驗 獲得超3個贊

標記有一個zIndexOffset屬性:


zIndexOffset(數字,默認值:0)

默認情況下,標記圖像 zIndex 是根據其緯度自動設置的。如果要將標記放在所有其他標記的頂部(或下方),請使用此選項,指定一個高值,如 1000(或分別為高負值)。


您的pointToLayer函數可以根據您的z_index屬性設置此選項。就像是:


pointToLayer: function (feature, latlng) {

    // beware the exact type of your property

    // adapt your test to your context

    var zindex = feature.properties.z_index && feature.properties.z_index !== "null";


    return L.marker(latlng, {

        zIndexOffset: zindex  ? 1000 : 0,

        icon: L.AwesomeMarkers.icon(

                    {

                        icon: feature.properties.icon, 

                        markerColor: feature.properties.color, 

                        prefix: 'fa', 

                        iconColor: 'white',

                    }

                )

            }

        );

},

和一個演示

var points = {

    "type": "FeatureCollection",

    "features": [

        {

            "geometry": {

                "type": "Point",

                "coordinates": [

                    -104.9998241,

                    39.7471494

                ]

            },

            "type": "Feature",

            "properties": {

              color: 'green',

              z_index: null

            }

        },

        {

            "geometry": {

                "type": "Point",

                "coordinates": [

                    -104.9983545,

                    39.7502833

                ]

            },

            "type": "Feature",

            "properties": {

                z_index: 1000

            }

        }

    ]

};

var map = L.map('map').setView([39.74739, -105], 13);



L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {

    maxZoom: 18,

    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +

      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +

      'Imagery ? <a href="https://www.mapbox.com/">Mapbox</a>',

    id: 'mapbox/light-v9',

    tileSize: 512,

    zoomOffset: -1

  }).addTo(map);

  

var iconGreen = L.AwesomeMarkers.icon({icon: 'glass', prefix: 'fa', markerColor: 'green'});

var iconRed = L.AwesomeMarkers.icon({icon: 'spinner', prefix: 'fa', markerColor: 'red', spin:true});


L.geoJSON(points, {

    pointToLayer: function (feature, latlng) {

        var color = feature.properties.color || 'red';

        var zIndex = feature.properties.z_index || 0;

        return L.marker(latlng, {

          zIndexOffset: zIndex,

          icon: color === 'green' ? iconGreen: iconRed

       });

    }

  }).addTo(map);

html, body {

  height: 100%;

  margin: 0;

}

#map {

  width: 100%;

  height: 100%;

}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css">

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>


<div id='map'></div>


查看完整回答
反對 回復 2022-06-16
  • 1 回答
  • 0 關注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號