ওপেনলায়ারস / লিফলেটটিতে অ্যানিমেটেড ক্লাস্টার চিহ্নিতকারী কীভাবে তৈরি করবেন?


19

মসৃণ রূপান্তরগুলির কারণে লিফলেটটি ব্যবহার করতে চাই যা ওপেনলেয়ারদের মনে হয় তারা মেলে না। আমার বিশেষভাবে কাস্টম স্টাইলযুক্ত মার্কার গ্রুপগুলির সাথে ক্লাস্টার মার্কারগুলির দক্ষতা প্রয়োজন।

আমি যা অর্জন করতে চাইছি তার সর্বোত্তম উদাহরণটি রেডফিনে পাওয়া যাবে ।

অনুগ্রহ করে একটি ক্লাস্টার জুড়ে ঘোরাফেরা করে অবিচ্ছিন্ন অ্যানিমেশন সরবরাহ করে এবং একটি চিহ্নিতকারীকে ক্লিক করে ক্লাস্টারগুলি অ্যানিমেটেড প্রভাবের সাথে আলাদা হয়ে যায়। একটি জুম স্তরে পৌঁছানোর সময় যেখানে পৃথক পয়েন্টগুলি নির্দিষ্ট সহনশীলতার সাথে ওভারল্যাপ হয় না প্রকৃত চিহ্নিতকারীরা অ্যানিমেটেড ফ্যাশনে তাদের অবস্থানগুলিতে বিভক্ত হয়।

আমি এগুলির সাথে একইরকম প্রভাবগুলি সংহত করতে সত্যিই পছন্দ করব এবং সর্বোত্তম পদ্ধতির বা আপনি যে সম্পর্কে অবগত হতে পারেন এমন অন্যান্য উদাহরণ সম্পর্কে কিছু গাইডেন্সের প্রশংসা করব।

দ্রষ্টব্য: Redfin ফ্ল্যাশ ব্যবহার করছে বলে মনে হচ্ছে যা থেকে আমি দূরে থাকতে চাই। একটি আদর্শ পরিস্থিতিতে আমি যদি সম্ভব হয় তবে জাভাস্ক্রিপ্টের মাধ্যমে এটি অর্জন করতে চাই তবে মনে হয় এটি সম্ভবত HTML5 / ক্যানভাসের মাধ্যমে করা দরকার।

সম্ভবত পি ব্যবহার। - রাফেল.জেএস বা ডি 3 জেএস

কোন ধারনা?

বিটিডব্লিউ - এই উদাহরণটি খুঁজে পেয়েছে তবে এটি গুগল মানচিত্রে বিশেষভাবে প্রযোজ্য বলে মনে হচ্ছে।


আমি মনে করি না রেডফিন ফ্ল্যাশ ব্যবহার করছে। দেখে মনে হচ্ছে এটি ডোজো টুলকিট ( dojotoolkit.org ) ব্যবহার করে সমস্ত জাভাস্ক্রিপ্ট । আমি অন্য কোনও ম্যাপিং লাইব্রেরি সন্ধান করি নি - তারা সেগুলিও ব্যবহার করতে পারে।
djq

আমি বর্তমানে একটি লিফলেট ক্লাস্টারিং লেয়ার বিকাশ করছি - github.com/cavis/leafpile এটি সত্যিকার অর্থে অভিনব কিছু করে না, তবে আমি কাস্টমাইজযোগ্য মার্কার ইমেজ এবং জুম-ট্রানজিশন কৌশলগুলির মতো জিনিস যুক্ত করার পরিকল্পনা করছি। ইস্যু ট্র্যাকারে উন্নততর অনুরোধ যোগ করতে নির্দ্বিধায়
ক্যাভিস

উত্তর:


22

আপনি যদি রেডফিনের মতো ক্লাস্টার চান তবে আমার লিফলেট.মার্কক্র্লাস্টারটি দেখুন: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.388.html

https://github.com/danzel/Leaflet.markercluster

এটি পুরোপুরি অ্যানিমেটেড ইত্যাদি ইত্যাদি :)


3
হ্যাঁ - সেরা এবং আপনাকে প্রথমে আপনাকে স্বাগত জানাই ডেভ এবং আমাকে আপনার সহায়তার জন্য আপনার পয়েন্টগুলি বাড়িয়ে তুলতে দিন।
নেটকন্সট্রাক্টর.কম

1
খুবই চমৎকার! +1
unicoletti

6

ওপেনলায়ারসের একটি ক্লাস্টার কৌশলও রয়েছে। আপনাকে যা করতে হবে তা হ'ল ভেক্টর স্তরটিতে কৌশল হিসাবে নির্দিষ্ট করা।

সমাধানটি মুহুর্তের জন্য খুব "সহজ", জুম স্তরের উপর নির্ভর করে কেবল পয়েন্টের সংখ্যা হ্রাস করে। আপনার যদি আরও দুর্দান্ত কিছু প্রয়োজন হয় তবে আপনার নিজের এবং নিজের প্রয়োজন অনুসারে এটিকে প্রোগ্রাম করতে হবে। সিলেক্ট ফিচার কন্ট্রোলটিতে একবার নজর দিন যা আপনি কোনও বৈশিষ্ট্যের উপর মাউস রাখার সময় আপনাকে নিয়ন্ত্রণ করতে পারে।

রেডফিনটি আসলেই ফ্যাশনের নমুনা। আশা করি ওএল এর সাথে কিছু পরীক্ষা করার জন্য আমার কিছুটা সময় আছে :)


আমি ওপেনলায়ার্স ব্যবহার করতে চাই তবে লিফলেটে পাওয়া মত মসৃণ রূপান্তরগুলি আমার দরকার need আপনি কি কোনও ওপ্লেলেয়ার হ্যাক সম্পর্কে সচেতন যা এই চটজল জুম অ্যানিমেশনগুলিকে প্রতিলিপি করে?
নেটকন্সট্রাক্টর.কম

দুঃখিত তবে না। এই মুহূর্তে আমি বৃত্তে কিছু রঙ এবং গণনা নম্বর যুক্ত করে কিছুটা "বিন্দু" স্টাইলিং করছি। তবে অ্যানিমেশন যোগ করা মুহুর্তের জন্য অনেক দূরে।
এরিকসোনারন

আপনি কি নতুন অল 3 ক্ষমতা সহ এর সমাধান পেয়েছেন?
নেটকন্সট্রাক্টর.কম

3

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

http://developers.cloudmade.com/projects/web-maps-api/examples/marker-clustering


3

লিফলেট ব্যবহারকারীদের জন্য।

লিফলেটের জন্য গুগল ম্যাপস মার্কারক্লসটারের একটি বন্দর এখানে

https://github.com/ideak/leafclusterer


হ্যাঁ, আমি এটি বুকমার্ক করেছি তবে আমার এখনও অ্যানিমেশন অংশটি প্রয়োজন
নেটকন্সট্রাক্টর.কম

3

আমি সবেমাত্র ওপেনলায়ার্সের জন্য একটি তথাকথিত অ্যানিমেটেডক্লাস্টার কৌশল প্রয়োগ করেছি। আপনি এটি সম্পর্কে কিছুটা আরও দেখতে পারেন: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

এটি কেবল ফার্মগুলির সংস্করণ তবে ক্লাস্টারগুলিতে একটি দুর্দান্ত অ্যানিমেশন যুক্ত করেছে। উন্নত করার জন্য অনেক কিছুই আছে তবে এটি একটি সূচনা পয়েন্ট।


এই সঙ্গে দুর্দান্ত কাজ!
নেটকন্সট্রাক্টর.কম

1

আপনি কোন ক্লিস্টার পয়েন্টগুলিতে পলিম্যাপের উদাহরণটি দেখেছেন ?

এগুলির চেনাশোনাগুলি ভেক্টর যা সিএসএস ব্যবহার করে সংশোধন করা যেতে পারে।


ধন্যবাদ তবে আমি বিশেষত এমন কোনও ধরণের সমাধান খুঁজছি (সাধারণত ক্রস ব্রাউজার সমর্থিত) যা মার্কারগুলির অ্যানিমেশনটির অনুমতি দেয়। আমি নিশ্চিত না যে আপনার যদি রেডফিনের লিঙ্কের উদাহরণ ( redfin.com/… ) পরীক্ষা করার সুযোগ ছিল কিনা । সেই লিঙ্কটি যা আমি অর্জন করতে চাই তা প্রতিনিধিত্ব করে - ক্লাস্টারযুক্ত মার্কার / অঞ্চলগুলিতে আপনি / ইন / জুমের গভীরতর ক্লিক করে চটজলদি মার্কার অ্যানিমেশন উপস্থাপনা।
নেটকন্সট্রাক্টর.কম
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.