লিফলেট, কার্টোডিবিতে মানচিত্রের 3 ডি দৃষ্টিভঙ্গি?

Question

ওয়েবে এমন কোনও জেএস লাইব্রেরি আছে যা সাধারণ, সমতল মানচিত্র (লিফলেট এর মতো) কে এই জাতীয় দৃষ্টিকোণ মানচিত্রে ওয়েবে রেন্ডার করে:

এছাড়াও, যে কেউ এমন কোনও কিছু দেখেছেন যা কার্টোডিবি ডেটা এইভাবে 3D উপস্থাপনে পরিণত করতে পারে?

Comments

আমি কার্টডবের সাথে সংহতকরণ সম্পর্কে নিশ্চিত নই, তবে আমি সম্প্রতি তিন.জেএস লাইব্রেরি ব্যবহার করে কিউজিআইএস থেকে 3D মানচিত্র তৈরির বিষয়ে এই পোস্টটি দেখেছি । আপনি এটি একবার দেখে নিতে পারেন।

— রায়ানকডালটন

আরও দেখুন: থ্রি.জেএস + লিফলেট = 3 ডি মানচিত্র? স্ট্যাকওভারফ্লোতে

— রায়ানকেডাল্টন

এবং চেহারা নিবন্ধ দুয়েক মধ্যে: Three.js এর এবং D3.js 3D দিয়ে জিওগ্রাফিক ইনফরমেশন রেন্ডার , এবং Three.js এবং d3.js সঙ্গে 3D মধ্যে জিপিএস ট্র্যাক দেখানো

— RyanKDalton

সম্ভবত আপনি এই দৃশ্যায়নটি দরকারী বলে মনে করছেন: pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/…

— জবিসন্তনা

Answer 1

হতে পারে আপনি ওস্মবিল্ডিংস ব্যবহার করতে পারেন । এটি ওপেনস্ট্রিটম্যাপস (বা কাস্টম জিওজসন) ভুমিতিকে 3D দৃষ্টিভঙ্গিতে রূপ দেওয়ার জন্য একটি জাভাস্ক্রিপ্ট লাইব্রেরি।

এটি সরাসরি ওপেনস্ট্রিটম্যাপস ডেটা ব্যবহার করে। কেবল লোডডাটা () পদ্ধতিটি যুক্ত করুন:

var map = new L.Map('map').setView([52.50440, 13.33522], 17);
var osmb = new OSMBuildings(map).loadData();
L.control.layers({}, { Buildings:osmb }).addTo(map); // add to layer switcher (optional)

অথবা, আপনি নিজের জিওজেএসন লোড করতে পারেন। কেবল লোডডেটা () পদ্ধতিটি সেটডেটা (জিওজসন) এ পরিবর্তন করুন:

var osmb = new OSMBuildings(map).setData(geoJSON);

আপনার ডেটাতে একটি উচ্চতার সম্পত্তি থাকা দরকার এবং আপনি প্রাচীর এবং ছাদের রঙ পরিবর্তনশীল করতে পারেন:

osmb.setStyle({ 
     wallColor:'rgba(100, 100, 250, 0.701961)', 
     roofColor:'rgb(220, 220, 50)', 
     shadows:true 
});

এমনকি দিনের সময় সেট করে ছায়ার দৃষ্টিভঙ্গিও পরিবর্তন করুন:

osmb.setDate(new Date(2014, 3, 24, 13, 0));

Comments

ওএসএম বিল্ডিংয়ের বর্তমান সংস্করণ (0.2.2 বি) setDataপদ্ধতি সমর্থন করে না , তবে setকাজ করে! এটি tjus হয়ে যায়:var osmb = new OSMBuildings(map).setData(geoJSON);

— bradypus

Answer 2

এটি ভিজিসিটিসগুলির জন্য প্রাথমিক ব্যবহারের একটি ক্ষেত্রে (ওপেনস্ট্রিটম্যাপ দ্বারা চালিত ব্রাউজারে 3 ডি শহর), যদিও ডেটা স্তরগুলি বর্তমানে কাজ করছে না। ভবিষ্যতের জন্য সম্ভবত বিবেচনা করার মতো কিছু: https://github.com/robhawkes/vizicities

দাবি অস্বীকার: আমি ভিজিটিসিটির বিকাশকারী

Comments

কুল প্রকল্প! এছাড়াও, এটি মোটামুটি স্পষ্ট যে এটি আপনার সাথে অনুমোদিত একটি প্রকল্প, আপনি সম্ভবত এটি আরও কিছুটা পরিষ্কার করতে চাইতে পারেন (এমনকি এটি উন্মুক্ত উত্স হলেও)।

— blah238

ধন্যবাদ, তবে আমি একটি নন-ওয়েবজিএল সমাধান খুঁজছি।

— নটোল

কোনও উদ্বেগ নেই, কেবল আপনাকে একটি মাথা আপ দিতে চেয়েছিল।

— রবিন হকস

এই সংস্করণে কি প্লট বা কোনও উন্নত সংস্করণ রয়েছে?

— জোকার 21

Answer 3

আপনি ওপেনস্ট্রীটম্যাপ (map.osm) 3D বস্তু (map.obj) থেকে 2D তথ্য পাস OSM2world ব্যবহার করতে পারেন, তারপর অন্য কনভার্টার (ব্যবহার convert_obj_three.py ) এটি একটি রূপান্তর করতে তাদেরকে JSON মডেল (map.js), এবং তারপর ব্যবহার threejs এটি একটি তিন জনের দৃশ্যে।

আপনি এখানে দেখতে পারেন:

https://www.youtube.com/watch?v=S6LbKH6NnZU

Comments

অনেক ধন্যবাদ. তবে এর জন্য ওয়েবজিএল দরকার, তাই না?

— নটোল

থ্রিজেএস এটি একটি জাভাস্ক্রিপ্ট লাইব্রেরি / এপিআই যা ওয়েবজিলের সুবিধা নেয়। তবে কোডটিতে আপনাকে কেবল দুটি লিবস অন্তর্ভুক্ত করতে হবে: থ্রি.জেস এবং অরবিটকন্ট্রোলস.জে (এটি এটি ক্যামেরার কক্ষপথ পরিচালনা করার জন্য)।

— সিগন

এবং হ্যাঁ, থ্রিজে কেবলমাত্র ওয়েবজিএল দ্বারা সমর্থিত ব্রাউজারগুলিতে কাজ করে।

— সিগন

Answer 4

সবচেয়ে কাছের আমি মাইক বোস্টকের কাজ দেখেছি ।

তার কাছে একটি দুর্দান্ত মানচিত্র রয়েছে যার মধ্যে একধরনের তির্যক প্রক্ষেপণ রয়েছে ।

তবে এমন কিছুই নেই যা এটি সহজ করে তোলে। ডি 3 অনুমানগুলি সেট আপ করার ক্ষেত্রে আমার মাথাটি করে। আপনি যদি এটিতে কাজ করেন তবে আপনি আশ্চর্যজনক জিনিসগুলি তৈরি করতে পারেন।

Comments

ঠিক আছে, মাইক কীভাবে তা করে ??

— টিপটির

এটি পছন্দ করুন: bl.ocks.org/mbostock/3790444

— জন

Answer 5

http://osm2world.org/ ওয়েবজিএল ছাড়া কাজ করে, তবে জাএসের পরিবর্তে জাভা ব্যবহার করে।

ওপেনস্ট্রিটম্যাপ বিল্ডিং ডেটার আউটপুট জন্য ডিজাইন করা, এটি অন্যান্য 3 ডি ডেটার জন্যও গ্রহণযোগ্য হতে হবে।

আউটপুটটি লিফলেটের অনুরূপ একটি পিচ্ছিল মানচিত্র: http://maps.osm2world.org/

Answer 6

ভাল, কার্টোডিবি দিয়ে আপনি এই জাতীয় কিছু করতে পারেন http://andrewxhill.com/cartodb-example/scroll-story/pluto/index.html#4

আপনাকে এই কার্টোসিএসএস প্যারামিটারটি ব্যবহার করতে হবে: {বিল্ডিং-উচ্চতা: 512; }

এখানে আরও তথ্য: https://github.com/CartoDB/cartodb-pluto