কীভাবে কোনও বৈশিষ্ট্যকে পুনরায় আকার দিন এবং ওপেনলায়ার্স 3-এ জুম করার সময় এটি স্কেলিং থেকে রোধ করবেন

Question

আমি মানচিত্র হিসাবে একটি চিত্র দিয়ে একটি কাস্টম ওপেনলায়ার্স 3 মানচিত্র (আশেপাশে বিক্রয়ের জন্য ঘরগুলি দেখানোর জন্য ব্যবহৃত) ব্যবহার করেছি।

তারপরে, আমি প্রতিটি বাড়ির জন্য ক্রমবর্ধমান বৈশিষ্ট্য এবং স্তরগুলি তৈরি করি (প্রতিটি বৈশিষ্ট্যের অ্যাঙ্করটিকে তার চিত্রের মাঝখানে হিসাবে সেট করা হয়)।

sizeবৈশিষ্ট্যটি আরম্ভ করার সময় আমি সম্পত্তিটি ব্যবহার করার চেষ্টা করছি , তবে এটি কী করে তা পুনরায় আকার দেওয়ার পরিবর্তে চিত্রটি ক্রপ করে।

আমি মনে করি যে আমি resizeওল 2 এর কোথাও স্তরগুলির জন্য ফাংশনটি দেখেছি , তবে আমি এটি ওল 3 তে খুঁজে পাচ্ছি না ... এই জাতীয় ফাংশনটি কি আমার ফলাফলটি অর্জন করবে?

মানচিত্রটি জুম বের করার সময় বৈশিষ্ট্যগুলি খুব বড় আকারের হয় এবং অনেকটা জুম করা হলে খুব ছোট করে স্কেলিংয়ের সমস্যাও রয়েছে। বৈশিষ্ট্যের স্থানাঙ্কগুলি নির্দিষ্ট করার কোনও উপায় আছে কি না তবে খুব বড় বা খুব ছোট (এক ধরণের স্ট্যাটিক আকার) থেকে রোধ করতে তার চারপাশে এক ধরণের অদৃশ্য মার্জিন / প্যাডিং করা যায়?

এখানে বৈশিষ্ট্যগুলির আসল আচরণ এখানে রয়েছে (এখানে বৈশিষ্ট্যটি দেখানো হল কৃষ্ণ ঘর): - পরবর্তী: নিখুঁত আকার, জুম করা (যদিও প্রথম ছবিতে দেখা যাবে) এর মতো ঘরটি ছোট হওয়া উচিত। - এই শেষ ছবিটিতে আবার স্কেলিং না করে বাড়ির বড় থাকা উচিত ছিল। ।

Answer 1

আমি ধরেছি আপনি একটি ব্যবহার ol.style.Icon। আইকন চিত্রটি স্কেল করতে আপনি ol.style.Iconএকটি scale বিকল্প ব্যবহার করতে পারেন।

উদাহরণস্বরূপ, আপনি যদি কোনও চিত্র স্কেল করতে চান তবে আপনি এই জাতীয় কিছু ব্যবহার করবেন:

var style = new ol.style.Style({
  image: new ol.style.Icon({
    url: 'http://example.com/icon.png',
    scale: 0.5,
    // …
  })
});

এখন, আপনি যদি scaleবর্তমান রেজোলিউশনের উপর ভিত্তি করে বিভিন্ন মান চান , আপনি ভেক্টর স্তরটিতে একটি শৈলী ফাংশনটি দিতে পারেন:

var iconStyle = new ol.style.Icon({
  url: 'http://example.com/icon.png',
  // …
});

var styles = [new ol.style.Style({
  image: iconStyle
})];

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    // "func" is your function that gives you a scale for a resolution
    var scale = func(resolution);
    iconStyle.setScale(scale);
    return styles;
  })
});

নোট করুন, একটি অপ্টিমাইজেশন হিসাবে, উপরোক্ত কোডটি প্রতিবার স্টাইল ফাংশন বলা হলে অবজেক্ট তৈরি করা এড়ানোর জন্য ol.style.Iconঅবজেক্ট, ol.style.Styleঅবজেক্ট এবং স্টাইলগুলির অ্যারের পুনরায় ব্যবহার করে ।

Comments

আমি অবশেষে এটি কাজ করেছিলাম, আপনাকে ধন্যবাদ। আমি আপনার কোডটি কিছুটা মানিয়ে নিয়েছি: উত্সটির বৈশিষ্ট্যটি নিজেই অন্তর্ভুক্ত করা দরকার: source: new ol.source.Vector({features:[iconFeature]})অন্যথায় স্তরটির মধ্যে কিছুই inোকানো হয়নি (কোনও কারণে সম্ভবত বৈশিষ্ট্যের জ্যামিতির উপাদান সম্পর্কিত)।

— জেফ নোয়েল