ওপেনলায়ারগুলিতে সিওআরএস সক্ষম করা


12

ওপেনলায়ার্সে কি ক্রস-অরিজিন রিসোর্স শেয়ারিং (সিওআরএস) সক্ষম করা সম্ভব ? যদি তাই হয়, কিভাবে?

ওপেনলায়ার্সে আমার একটি ওয়েব ম্যাপ রয়েছে এবং আমি এটি পিএনজি চিত্র হিসাবে রেন্ডার করতে একটি HTML ক্যানভাস ব্যবহার করছি। আমার স্ক্রিপ্ট দুর্দান্ত কাজ করে তবে ব্রাউজারের একই-উত্স নীতির কারণে আমি কেবল আমার ক্যানভাসটিকে একটি চিত্রে রূপান্তর করতে পারি যদি আমি আঁকা সমস্ত মানচিত্র টাইল একই হোস্ট থেকে আসে (যেমন sub.domain.com)।

আমার মানচিত্রের লোডিং গতি বাড়াতে, আমি সাবডোমেন একটি অ্যারে থেকে টাইলস টান a.domain.com, b.domain.comকি কখনো একটি চিত্র আমার ক্যানভাস রূপান্তর থেকে, ইত্যাদি এই ব্যাপকভাবে হোস্ট প্রতি চার নিরন্তর সংযোগের ব্রাউজারের সীমা কাজ করছে, উন্নত কর্মক্ষমতা কিন্তু বাধা আমাকে, যেমন টাইলগুলি একাধিক হোস্ট থেকে আসে।

আমি এই সমস্যাটি সমাধান করার জন্য CORS ব্যবহার করার চেষ্টা করছি । আমি Access-Control-Allow-Originপিএইচপি দিয়ে যে টাইলসেটটি দিচ্ছি তার জন্য উপযুক্ত প্রতিক্রিয়া শিরোনামটি সেট করেছি , তবে এর কোনও প্রভাব নেই। আমি সন্দেহ করি Originএটি অনুরোধটিতে শিরোনাম না থাকার কারণে হয়েছে (উইকির পৃষ্ঠায় উদাহরণ হিসাবে দেখানো হয়েছে)। দেখে মনে হবে কিছু ওপেনলায়ার কনফিগারেশন প্রয়োজন। কিন্তু কি? অন্য কেউ সফলভাবে এটি করেছে?

উত্তর:


19

OpenLayers মাধ্যমে অনেক grepping পর উৎস , আমি এটা পাওয়া যায়! সমস্যাটি অনুপস্থিত অনুরোধ শিরোনামের নয়, তবে imgবিশেষত স্তরটিকে তৈরি করার উপাদানগুলিতে একটি অনুপস্থিত বৈশিষ্ট্য crossorigin। দেখুন MDN যে অ্যাট্রিবিউট বিবরণ, এবং ডকুমেন্টেশন কিভাবে OpenLayers সঙ্গে এটি ব্যবহার করার জন্য ওপেনস্ট্রীটম্যাপ স্তরগুলির জন্য ( আপডেট: এখানে একটু একটি অধিক যুক্তিসঙ্গত জায়গায় আরও কর্মকর্তা ডকুমেন্টেশন যায়)।

আপনার ওপেনলায়ার্সের imgসেই উপাদান রয়েছে তা নিশ্চিত করতে আপনার স্তর বিকল্পগুলিতে মানটির crossOriginKeywordবিকল্পটি সেট tileOptionsকরুন:

tileOptions: {crossOriginKeyword: 'anonymous'}

আপনি এটি সেট করতে পারেন:

  • "anonymous"- একটি " সাধারণ " সিওআরএস অনুরোধ করুন।
  • "use-credentials"- কুকিজ এবং HTTP প্রমাণীকরণের সাথে প্রয়োজনীয় হিসাবে একটি " শংসাপত্রযুক্ত " CORS অনুরোধ করুন।
  • null- crossoriginবৈশিষ্ট্যটি অন্তর্ভুক্ত করবেন না এবং এভাবে CORS ব্যবহার করবেন না। বেশিরভাগ ওপেনলায়ার লেয়ার ক্লাসের জন্য ডিফল্ট এবং আমার সমস্যার উত্স।

পরিশেষে, সম্পূর্ণতার জন্য, এখানে ডাব্লুএমএস স্তর দিয়ে এটি কীভাবে ব্যবহার করা যায় তার একটি স্ট্রিপ-ডাউন উদাহরণ। অন্যান্য স্তর শ্রেণীর সাথে কাজ করাও একই রকম।

var layer = new OpenLayers.Layer.WMS('My Layer', 'http://my.server.com', {
    format: 'image/png',
    layers: 'my:layer'
}, {
    tileOptions: {crossOriginKeyword: 'anonymous'},
    transitionEffect: null
});

আমি আশা করি এটি অন্য কাউকে সাহায্য করবে!

দ্রষ্টব্য: মনে হচ্ছে আপনি যদি এই পদ্ধতি / বৈশিষ্ট্যটি ব্যবহার করেন তবে আপনার টাইল সার্ভারকে একটি উপযুক্ত শিরোনাম প্রেরণ করা প্রয়োজনAccess-Control-Allow-Origin । এমন একটি সার্ভারের সাথে এটি ব্যবহার করা যা শিরোনামের ফলাফলটি টাইলসগুলিতে প্রদর্শিত না হয় send জিও সার্ভারটি পাশাপাশি খেলতে ...


1
এটি দুর্দান্ত যে আপনি এটি পেয়েছেন এবং আমাদের সাথে ভাগ করে নিয়েছেন।
দেবদত্ত টেংশে


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