OpenLayers 3 में Z-index: OL3 में लेयर ऑर्डरिंग


13

क्या OpenLayers3 में परतों के जेड-इंडेक्स को बदलने की एक विधि है जैसे कि यह पुराने संस्करण में थी?

map.setLayerIndex(markers, 99); //set the marker layer to an arbitrarily high layer index

मुझे मानचित्र का उपयोग करके परतों के क्रम को बदलना होगा। तो इस तरह से z- इंडेक्स को परिभाषित करने की ऐसी संभावना मदद नहीं करती है

var geoLayer = new ol.layer.Vector({
    source : new ol.source.GeoJSON({
        projection : 'EPSG:900913',
        url : './myGeoJson.json'
    }),
    style : function(feature, resolution) {
        var text = resolution < 5000 ? feature.get('name') : '';
        if (!styleCache[text]) {
            styleCache[text] = [new ol.style.Style({
                fill : new ol.style.Fill({
                    color : 'rgba(255, 255, 255, 0.1)'
                }),
                stroke : new ol.style.Stroke({
                    color : '#319FD3',
                    width : 1
                }),
                text : new ol.style.Text({
                    font : '12px Calibri,sans-serif',
                    text : text,
                    fill : new ol.style.Fill({
                        color : '#000'
                    }),
                    stroke : new ol.style.Stroke({
                        color : '#fff',
                        width : 3
                    })
                }),
                zIndex : 999
            })];
        }

    }
});

मुझे इस समाधान का उपयोग करने में परेशानी हो रही है, सबसे अधिक संभावना है कि मेरी ऐसी चीजों की समझ में कमी के कारण। क्या आप कृपया परिणाम का एक उदाहरण पोस्ट कर सकते हैं, मेरा मानना ​​है कि यह वास्तव में मेरी मदद करेगा?
dave_does_not_understand

जवाबों:


10

कुछ इस तरह का प्रयास करें:

map.getLayers().setAt(99, markers)

परतों की सूची एक वस्तु से विरासत में मिली है ol.Collection। इसके लिए एपीआई डॉक देखें ।

सावधान रहें, मुझे पूरा यकीन है, आप 99 की तरह मनमानी संख्या का उपयोग नहीं कर सकते हैं setAt: पहला arg परतों की सरणी में स्थिति के लिए है और दूसरा arg उस परत तत्व संदर्भ के लिए है जिसे आप स्थानांतरित करना चाहते हैं। परतों की संख्या प्राप्त करने के लिए, बस का उपयोग करेंmap.getLayers().getArray().length

यद्यपि आप देखते हैं कि हम परतों के लिए एक JS सरणी प्राप्त कर सकते हैं, मुझे यकीन नहीं है कि इस सरणी को सीधे हेरफेर करना सबसे अच्छा तरीका है क्योंकि परतें घटनाओं से जुड़ी हो सकती हैं। आप ol.Collectionइसके बजाय विधियों का उपयोग कर सकते हैं ।


मैं ओवरले के लिए एक समाधान के लिए देख रहा था, तो मैं बस एक टिप्पणी करते हुए कहा कि इस (बेशक) भी ओवरले के लिए काम करता है, के रूप में जोड़ना चाहते थे map.getOverlays()रिटर्न एक ol.Collectionजैसे map.getLayers()है।
डेसिबल

8

यह उतना आसान नहीं है जितना पहले हुआ करता था, लेकिन संग्रह के लिए कुछ सहायक तरीके हैं। आपको इसी तरह की चीजों को करने की अनुमति देनी चाहिए जैसा कि थॉमसजी 77 ने ऊपर वर्णित किया है।

मान लें कि आपके पास नक्शे का नाम है, जिसमें 4 परतें हैं [आधार_ परत, तटरेखा, हीटमैप, मार्कर]

तब आप map.getLayers (), और परतों के सरणी को map.getLayers ()। GetArray () और व्यक्तिगत परतों के माध्यम से संग्रह प्राप्त कर सकते हैं।

var heatmap = map.getLayers().getArray()[2]

आप संग्रह विधियों के माध्यम से परत क्रम में हेरफेर कर सकते हैं। यह शायद कुछ सहायक कार्यों को बनाने में मदद करेगा जैसे:

function moveLayerBefore(map, old_idx, new_idx){
  var layer = map.getLayers().removeAt(old_idx);
  map.getLayers().insertAt(new_idx, layer);
}

उम्मीद है कि आपके पास अपनी परतों को पहचानने और उन्हें खोजने की क्षमता है, मैंने लेयर.सेट ("layer_id" 44) जैसी रचना पर एक आईडी सेट की है, जिसे बाद में layer.get ("layer_id") के माध्यम से पुनर्प्राप्त किया जा सकता है। फिर आप अपने लेयर एरे के जरिए फाइलेर हेल्पर लूप ले सकते हैं और लेयर इंडेक्स वापस कर सकते हैं।

function findLayer(map, layer_id){
  var layer_idx = -1;
  $.each(map.getLayers().getArray(), function (k,v){
    var this_layer_id = v.get("layer_id")
    if(this_layer_id == layer_id){
      layer_idx = k;
    }
  });
  return layer_idx;
}   

इस तरह से मेरे पास मूव लेयरबियर जैसे कुछ हो सकता है (नक्शा, फाइंडलेयर (44), फाइंडलेयर (22));

वैसे भी, संग्रह में कई तरीके हैं, लेकिन उम्मीद है कि इससे आपको शुरुआत करने में मदद मिलेगी। और खेद है कि अगर उस कोड में कीड़े हैं, तो यह सब दिमाग संकलित है ... :)


5

निम्नलिखित उत्तर के आधार पर मैंने निम्नलिखित कोड को मुख्य मानचित्र ऑब्जेक्ट कहलाता है जिसे मानचित्र कहा जाता है और यह एक वैश्विक संस्करण है, मैंने नाम से नहीं बल्कि आईडी द्वारा खोज की परत का उपयोग करना पसंद किया है,

यहाँ मेरा कोड है:

function moveLayerBefore(old_idx, new_idx){
    if((old_idx === -1) || (new_idx === -1)){
        return false;
    }

    layer = map.getLayers().removeAt(old_idx);
    map.getLayers().insertAt(new_idx, layer);
}

function findLayer(layer_name){
    var layer_idx = -1;
    $.each(map.getLayers().getArray(), function (k,v){
        var this_layer_name = v.get('name');
        if(this_layer_name == layer_name){
            layer_idx = k;
        }
    });

    return layer_idx;
}

// set name1 before name2
moveLayerBefore(findLayer('name1'),findLayer('name2'));

1

सेटअट या इंसर्ट के माध्यम से संग्रह में सूचकांकों को संभालने की आवश्यकता नहीं है। सबसे आसान तरीका यह है कि एपीआई में परत पर सेटजैंडेक्स विधि का उपयोग करें

geoLayer.setZIndex(999);

यहाँ मुश्किल बात यह है कि यह केवल तभी काम करता है जब परतें पहले से ही नक्शे पर हों। कहते हैं, मैंने दो वेक्टर लेयर को सीधे मैप पर डाला (एक-एक करके, बिल्कुल नहीं)। पहला मैं ZIndex 10 पर सेट करता हूं, दूसरा ZIndex 9 पर। यह काम नहीं करता है। ZIndex 9 के साथ दूसरा एक ZIndex 10. के ऊपर दिखाई देगा
kiradotee

1

मेरे मामले में थॉमस जी 77 का जवाब एक कारण था AssertionError, क्योंकि मैं जिस परत को ऊपर ले जाने वाला था, वह पहले ही नक्शे ( https://openlayers.org/en/v4.4.2/doc/errors/#58 ) से जुड़ी हुई थी ।

समाधान जो मेरे लिए काम करता है:

    let layers = map.getLayers();
    let markerTemp = layers.remove(refToMarkerLayer);
    layers.push(markerTemp);

(निकालें समारोह रिटर्न हटा परत)। ऑनलाइनर को भी काम करना चाहिए, लेकिन मैंने इसका परीक्षण नहीं किया।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.