এফওএসএস 4 জি ম্যাপবক্স স্টুডিওতে একটি আলোচনায় উপস্থাপিত হিসাবে ম্যাপবক্স ভেক্টর টাইলস তৈরি করতে এবং .mbtiles
ফাইল হিসাবে তাদের রফতানি করার অনুমতি দেয় ।
Mapbox-gl.js লাইব্রেরিতে পরিবর্তনশীল শৈলী ব্যবহার করা যাবে এবং ক্লায়েন্টের (ব্রাউজার) পাশ Mapbox ভেক্টর টাইল রেন্ডার।
অনুপস্থিত অংশ: আমি কীভাবে ম্যাপবক্স ভেক্টর টাইলস ( .mbtiles
) স্ব-হোস্ট করব যাতে আমি তাদেরকে ম্যাপবক্স-গিল.জেএস দিয়ে গ্রাস করতে পারি?
আমি জানি যে ম্যাপবক্স স্টুডিও ভেক্টর টাইলসটি ম্যাপবক্স সার্ভারে আপলোড করতে এবং এটি টাইলগুলি হোস্ট করতে পারে। তবে এটি আমার পক্ষে কোনও বিকল্প নয়, আমি নিজের সার্ভারে ভেক্টর টাইলগুলি হোস্ট করতে চাই।
নীচের টাইলস্ট্রিম পদ্ধতির একটি শেষ প্রান্তে পরিণত হয়েছিল। টাইলিভের সাথে কাজের সমাধানের জন্য আমার উত্তরটি দেখুন।
আমি টাইলস্ট্রিম চেষ্টা করেছি যা .mbtiles
ফাইলগুলির বাইরে ইমেজ টাইলগুলি পরিবেশন করতে পারে :
আমার ওয়েবপৃষ্ঠায় ম্যাপবক্স-গ্লোব v0.4.0 ব্যবহার করা হয়েছে:
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>
এবং এটি একটি জাভাস্ক্রিপ্ট স্ক্রিপ্টে একটি ম্যাপবক্সগ্ল.ম্যাপ তৈরি করে:
var map = new mapboxgl.Map({
container: 'map',
center: [46.8104, 8.2452],
zoom: 9,
style: 'c.json'
});
c.json
শৈলী ফাইল কনফিগার ভেক্টর টালি উৎস:
{
"version": 6,
"sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/bright",
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
"constants": {
"@land": "#808080",
"@earth": "#805040",
"@water": "#a0c8f0",
"@road": "#000000"
},
"sources": {
"osm_roads": {
"type": "vector",
"url": "tile.json"
}
},
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "@land"
}
}, {
"id": "roads",
"type": "line",
"source": "osm_roads",
"source-layer": "roads",
"paint": {
"line-color": "@road"
}
}]
}
... এখানে নিম্নলিখিত টাইলজেসন স্পেসিফিকেশন সহ tile.json
:
{
"tilejson": "2.1.0",
"tiles": [
"http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 12
}
... আমার TileStream সার্ভার চলমান স্থানটিকে যা localhost:8888
। টাইলস্ট্রিম দিয়ে শুরু করা হয়েছে:
node index.js start --tiles="..\tiles"
... যেখানে ..\tiles
ফোল্ডারে আমার osm_roads.mbtiles
ফাইল রয়েছে ।
এই সেটআপের সাহায্যে আমি আমার ওয়েবপৃষ্ঠাটি খুলতে পারি তবে কেবল ব্যাকগ্রাউন্ড স্তরটি দেখতে পারি। ব্রাউজার নেটওয়ার্কের ট্রেসটিতে আমি দেখতে পাচ্ছি যে আমি জুম বাড়ানোর সময় টাইলগুলি প্রকৃতপক্ষে লোড হয় তবে ব্রাউজার জাভাস্ক্রিপ্ট ত্রুটি কনসোলটিতে ফর্মের বেশ কয়েকটি ত্রুটি রয়েছে
Error: Invalid UTF-8 codepoint: 160 in mapbox-gl.js:7
যেহেতু ভেক্টর টাইলগুলি .png
চিত্র নয় বরং প্রোটো বুফ ফাইল, তাই টাইলস ইউআরএলটি http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbf
আরও বেশি বোঝায় তবে এটি কার্যকর হয় না।
কোন ধারনা?
///
এতে এমবাটিল ফাইলটি সংজ্ঞায়িত করতে আপনার তিনজনের প্রয়োজন :tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {