Như được trình bày trong một cuộc nói chuyện tại FOSS4G Mapbox Studio cho phép tạo các ô vector Mapbox và xuất chúng dưới dạng .mbtilestệp.
Các mapbox-gl.js thư viện có thể được sử dụng để tự động phong cách pha trộn và trình gạch vector Mapbox trên client (trình duyệt) bên.
Phần còn thiếu: Làm cách nào tôi có thể tự lưu trữ các ô vectơ Mapbox ( .mbtiles) để tôi có thể sử dụng chúng với mapbox-gl.js?
Tôi biết rằng Mapbox Studio có thể tải các ô vector lên máy chủ Mapbox và cho phép nó lưu trữ các ô đó. Nhưng đó không phải là lựa chọn cho tôi, tôi muốn lưu trữ các ô vector trên máy chủ của riêng tôi.
Cách tiếp cận TileStream dưới đây hóa ra là một ngõ cụt. Xem câu trả lời của tôi cho một giải pháp làm việc với Tilelive.
Tôi đã thử TileStream có thể phục vụ các ô hình ảnh trong số .mbtilescác tệp:
Trang web của tôi sử dụng mapbox-gl 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>và nó tạo ra mapboxgl.Map trong tập lệnh JavaScript:
var map = new mapboxgl.Map({
container: 'map',
center: [46.8104, 8.2452],
zoom: 9,
style: 'c.json'
});
Tệp c.jsonkiểu cấu hình nguồn vector vector:
{
"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"
}
}]
}
... với thông số kỹ thuật của TileJSON sau đây trong tile.json:
{
"tilejson": "2.1.0",
"tiles": [
"http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 12
}
... trỏ đến máy chủ TileStream của tôi đang chạy localhost:8888. TileStream đã được bắt đầu với:
node index.js start --tiles="..\tiles"... nơi ..\tilesthư mục chứa osm_roads.mbtilestập tin của tôi .
Với thiết lập này, tôi có thể mở trang web của mình nhưng chỉ nhìn thấy lớp nền. Trong theo dõi mạng trình duyệt, tôi có thể thấy rằng các ô thực sự được tải khi tôi phóng to, nhưng bảng điều khiển lỗi trình duyệt JavaScript có một số lỗi của biểu mẫu
Error: Invalid UTF-8 codepoint: 160 in mapbox-gl.js:7Vì các ô xếp vectơ không phải là .pnghình ảnh mà là các tệp ProtoBuf, URL của ô http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbfthực sự sẽ có ý nghĩa hơn, nhưng điều đó không hoạt động.
Có ý kiến gì không?
///để xác định tệp mbtiles trong:tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {