ওপেন লেয়ারস 3 লেয়ারের দৃশ্যমানতা সেট করা হচ্ছে


9

আমি স্বচ্ছ স্তরগুলিতে দুর্দান্ত রূপান্তর প্রভাবের সুবিধা নিতে আমার ওপেনলায়ার্স ২.১২ মানচিত্রটি ওপেনলেয়ার্স 3-তে আপগ্রেড করার চেষ্টা করছি (কিছু ওএল 2 এবং লিফলেট আকর্ষণীয়ভাবে করতে পারে না)। ওএল 3 আনুষ্ঠানিকভাবে প্রকাশিত হওয়ার পরে এটি এবং আমি আমার সাইটগুলি আপগ্রেড করতে পিছনে থাকতে চাই না। আমার বর্তমান সাইটে (OL2.12) লেয়ারের দৃশ্যমানতা টগল করার জন্য আমি একটি সাধারণ এইচটিএমএল মেনুতে চেক বাক্স ব্যবহার করি। আমি প্রতিটি স্তরকে একটি অ্যারেতে ঠেলাচ্ছি (আমি আশা করি আমি ওল 3 ভাবতে ঠিক আছি এখন স্বয়ংক্রিয়ভাবে 'স্তরগুলি' নামক স্তরগুলির জন্য একটি অ্যারে উত্পন্ন করে) এবং প্রতিটি চেকবাক্স এই ফাংশনটিকে কল করে (চেকবক্সগুলিকে এমন একটি মান দেওয়া হয় যা তাদের স্তরগুলির অ্যারে সংখ্যার প্রতিনিধিত্ব করে ):

function layerswitch(evt){
    layers[evt.value].setVisibility(evt.checked);
}

ওএল 3-তে এটি আর কাজ করে না এবং লেয়ারের দৃশ্যমানতা কীভাবে সেট করা যায় তার বিবরণে আমি এমন কোনও উদাহরণ বা ডকুমেন্টেশন পাই না।

উত্তর:



8

অ্যারাগন, আপনার উত্তর আমাকে সঠিক দিকে নির্দেশ করেছে। অ্যারেতে স্তর যুক্ত করার এবং তারপরে তাদের নিয়ন্ত্রণের জন্য নীচে আমার চূড়ান্ত অশুচি কোড।

একটি জাভাস্ক্রিপ্ট ফাইলে আমি মানচিত্রটি আরম্ভ করেছি এবং দৃশ্যমানতা টগল করার জন্য একটি ফাংশন ব্যবহার করেছি:

//Layer array
var layersArray = [];

//Map view (Initial location)
var view = new ol.View2D({
// the view's initial state
center: ol.proj.transform([*Lat*,*Long*], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
});

/*  Map Initialization  */
function initializeMap(){

var esribase = new ol.layer.Tile({
preload: Infinity,
  source: new ol.source.XYZ({
    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
  })
});

var poly1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly1.setVisible(false);

var poly2 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly2.setVisible(false);

var poly3 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly3.setVisible(false);

layersArray.push(esribase); //0
layersArray.push(poly1); //1
layersArray.push(poly2); //2
layersArray.push(poly3);//3

var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
  units: ol.control.ScaleLineUnits.METRIC
})
]),
renderer: ol.RendererHint.CANVAS,
target: 'map',
layers: layersArray,

view:view
});
}

// Layer visibility function
function layerswitch(evt){
layersArray[evt.value].setVisible(evt.checked);
}

এইচটিএমএলে আমি সাধারণ চেকবক্স ব্যবহার করেছি (পলি 1 টগলের উদাহরণ):

<input  style='cursor:pointer' type="checkbox" value="1" onclick="javascript:layerswitch(this)" class="Cpoly1" name="poly1check" id="poly1check"/><label id="poly1checkLabel" for="poly1check">Polygon 1 Layer Switcher</label>

ইমো ওল.লেয়ার.বাইন্ডটো ( 33js.org/en/master/apidoc/ol.layer.Vector.html#bindTo ) সহ আপনি এটিকে আরও মার্জিত পরিচালনা করতে পারেন।
ভুলভাবে পিন্ট করুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.