কোনও আইকন ছাড়াই লিফলেট মানচিত্রে কেবল পাঠ্য লেবেল কীভাবে যুক্ত করবেন


22

আমি কোনও আইকন না দেখিয়ে চিহ্নিতকারী বা অন্য কিছু ব্যবহার করে লিফলেট মানচিত্রে পাঠ্য প্রদর্শনের একটি উপায় খুঁজছি। আমি কেবল পাঠ্যটি দেখাতে চাই এবং এটি স্টাইল করতে এবং এটিকে ঘোরানোর জন্য সক্ষম হতে চাই ... কোনও পরামর্শ?


1
@ নিখিলভিজে - এই প্রশ্নোত্তর সম্পর্কিত কোনও মার্কার না রেখে কীভাবে টুলটিপ রাখতে হবে তা নিয়ে আলোচনা করে না । উত্তর এখানে আলোচনা কিভাবে আছে শুধুমাত্র পাঠ্য, কোনো দৃশ্যমান মার্কারের সাথে।
নির্মাতা স্টিভ

আহ দুঃখিত আমার খারাপ
নিখিল ভিজে

উত্তর:


19

আমি লিফলেট এল ডিভিঙ্কন বৈশিষ্ট্যটি ব্যবহার করে আমার সমস্যার সমাধান করেছি যা চিহ্নিতকারীদের জন্য একটি হালকা আইকন উপস্থাপন করে যা কোনও চিত্রের পরিবর্তে একটি সাধারণ ডিভ উপাদান ব্যবহার করে ... এই চিহ্নিতকারীদের একটি এইচটিএমএল এবং একটি ক্লাসনেম বিকল্প রয়েছে যা আমাকে সিএসএস চালিত লেবেল তৈরি করতে দেয় allow শৈলী ...


11
আপনি কি এর জন্য কিছুটা কোড সরবরাহ করতে আপত্তি করবেন?
mastov

আপনি যদি একটি লেবেল এবং একটি চিহ্নিতকারী চান তবে এই উত্তরটির ধারণা নেই
রায়

@ রয় - এটি একটি ভিন্ন পরিস্থিতি; এল.টুলটিপ দেখুন । আপনি যদি লেবেলটি (টুলটিপ) সর্বদা প্রদর্শন করতে চান তবে আপনি বিকল্পটিকে স্থায়ী থেকে সত্য হিসাবে সেট করেছেন।
নির্মাতা স্টিভ

16

লিফলেট 1.0 এর জন্য আপডেট: লিফলেট 1.0 হিসাবে, লিফলেট.লাবেল প্লাগইনটি খচিত হয়, কারণ এটি লিফলেট কোর হিসাবে অন্তর্ভুক্ত করা হয়েছে L.Tooltip। উত্স স্ক্রিপ্টটি অন্তর্ভুক্ত করার দরকার নেই এবং সিনট্যাক্সটি কিছুটা পরিবর্তিত হয়েছে। নমুনা ব্যবহার:

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip("My Label", {permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

ক্লাসে সিএসএস স্টাইলিং আগের মতো প্রয়োগ করা যেতে পারে।

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

এটিতেও প্রদর্শিত হয় যে চিহ্নিতকারী অস্বচ্ছতা পুরোপুরি 0 তে সেট করা যেতে পারে।


লিফলেট 1.0 এর আগে: লিফলেট.লাবেল প্লাগিন ব্যবহার করুন (ইতিমধ্যে জিওমাজোর 57 দ্বারা উল্লিখিত)।

<script src="scripts/leaflet.label.js"></script>

লিফলেট লেবেল প্লাগইনের সাহায্যে লেবেলগুলি সরাসরি চিহ্নিতকারীগুলিতে আবদ্ধ থাকে তবে আপনি চিহ্নিতকারীটির অস্বচ্ছতা প্রায় শূন্যে সেট করতে পারেন তাই কেবলমাত্র লেবেলটি দৃশ্যমান। (আপনি যদি মার্কারটির অস্বচ্ছতা 0 তে সেট করেন তবে সম্পর্কিত লেবেলটিও অদৃশ্য হয়ে যায়))

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 });
marker.bindLabel("My Label", {noHide: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

তারপরে আপনি উপযুক্ত দেখতে দেখতে আপনার লেবেলগুলি স্টাইল করতে CSS ব্যবহার করতে পারেন:

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

<স্ক্রিপ্ট src = "স্ক্রিপ্টস / লিফলেট.লাবেল.জেএস"> </script> - আমি আমার এইচটিএমএলে এই লাইনটি যুক্ত করার পরে পৃষ্ঠাটি ফাঁকা মনে হয়েছে। আমার কি কোনও ফাইল ডাউনলোড করার দরকার আছে?
মার্সিন কোসিস্কি

@ মার্সিনকোসিস্কি - হ্যাঁ, আপনাকে পোস্টের গিটহাব লিংক থেকে লিফলেট.লাবেল.জে গুলি ডাউনলোড করতে হবে এবং আপনার ওয়েবসাইটের স্ক্রিপ্টস নামের একটি সাবফোল্ডারে রেখে দিতে হবে। অথবা, আপনি লিফলেট . github.io/Leaflet.label/leaflet.label.js এ হোস্ট করা ফাইলের সাথে কোডটিতে URL টি প্রতিস্থাপন করতে পারেন (আপনি সিএসএস ফাইলও দেখতে পারেন; একই নাম এবং অবস্থান, বিভিন্ন এক্সটেনশন)।
কিথস

আমি এটি করার চেষ্টা করলাম ,,, কীভাবে পটভূমি এবং সীমানা মুছে ফেলতে পারে কোন ধারণা? snag.gy/JdnpyV.jpg
চাই

L.Tooltipঅন ​​এচ ফিচারের ভিতরে ব্যবহার করার সময়, ত্রুটি পেয়ে: "আনকচড টাইপ এরির: 'নোড' এ 'অ্যাপেন্ডচিল্ড' কার্যকর করতে ব্যর্থ: প্যারামিটার 1 'নোড' টাইপের নয়" "
নিখিল ভিজে

সমাধান করা হয়েছে, আমি পাঠ্য হিসাবে বৈশিষ্ট্যগুলির একটি বৈশিষ্ট্য ব্যবহার করছি, .toString()শেষে একটি সংযোজন করতে হয়েছিল। marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...
নিখিল ভিজে

4

আপনি এই লিফলেট প্লাগইন দিয়ে এখানে শুরু করতে পারেন । সম্ভবত আপনার পছন্দ অনুসারে একটি মার্কার তৈরি বা সম্পাদনা করুন। পাঠ্যটি কি বৈশিষ্ট্যের বৈশিষ্ট্য থেকে আসছে?


এটি জিজ্ঞাসা করা চেয়ে একটি পৃথক প্রশ্নের উত্তর। এইভাবে কোনও বিদ্যমান চিহ্নিতকারীতে কোনও লেবেল যুক্ত করতে হয় ; এটি কীভাবে কেবলমাত্র একটি লেবেল থাকবে - কোনও চিহ্ন চিহ্ন নেই তা ব্যাখ্যা নয়
টুলমেকারস্টেভ

0
marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });

এটি আমার পক্ষে কাজ করে


এটি জিজ্ঞাসা করা চেয়ে একটি পৃথক প্রশ্নের উত্তর। এইভাবে কোনও বিদ্যমান চিহ্নিতকারীতে কোনও লেবেল যুক্ত করতে হয় ; এটি কীভাবে কেবলমাত্র একটি লেবেল থাকবে - কোনও চিহ্ন চিহ্ন নেই তা ব্যাখ্যা নয়
নির্মাতা স্টিভ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.