dock

Монгол

English

Монгол

English

Appearance

Mapbox эсвэл Google Maps-аас шилжих ​

@dock/js нь MapLibre дээр суурилсан. MapLibre бол Mapbox GL JS 1-ийн нээлттэй салбар. Mapbox GL JS-д бичсэн код ихэнхдээ өөрчлөлтгүй ажиллана: газрын зураг, source, layer, marker, popup, event адилхан. Google Maps-аас ирвэл ойлголт нь адил, нэр нь өөр. Энэ хуудас тус бүрийг харгалзуулна. Доорх блок бүрийн dock хэсгийг docs-ын тест ажиллуулдаг.

Нэг дүрэм: dock-д цэг үргэлж [lon, lat], Mapbox-той адил. Google { lat, lng } гэж бичдэг.

Ойлголтууд ​

Mapbox GL JSGoogle Maps JSdock
mapboxgl.accessToken = 'pk...'<script src="...?key=...">new Client({ key: 'dk_...' })
new mapboxgl.Map({...})new google.maps.Map(el, {...})createMap(maplibregl, dock, {...})
style: 'mapbox://styles/...'mapId, stylesЗагвар засагч-аас styleId: 'st_...'
center: [lng, lat]center: { lat, lng }center: [lon, lat]
new mapboxgl.Marker()new google.maps.Marker({...})new maplibregl.Marker()
map.on('click', e => e.lngLat)map.addListener('click', e => e.latLng)map.on('click', e => e.lngLat)
Geocoding API, хаягаарGeocoder.geocode({ address })dock.geocode(q)
Geocoding API, цэгээрGeocoder.geocode({ location })dock.reverse([lon, lat])
mapbox-gl-geocoder, <mapbox-search-box>new google.maps.places.Autocomplete(input)attachSuggest(input, dock, { onPick })
Directions APIDirectionsService.route(...)dock.route(from, to, { mode })
Directions-ийн эхний ба сүүлчийн хоорондох waypointwaypoints: [{ location }]dock.route(from, to, { via: [...] }), 10 хүртэл
Directions exclude=point(lon lat)avoidTolls, avoidHighways, avoidFerriesdock.closures(): бүх маршрут тойрно
place_name, full_addressformatted_addresslabel(place, 'mn')
байхгүйбайхгүйdock.door('7QSVX'): хаалганы код, барилгын гадна талын хаалга хүртэл

Газрын зураг ​

js
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'pk...';
const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v12', center: [106.9177, 47.9186], zoom: 15 });
js
const map = new google.maps.Map(document.getElementById('map'), { center: { lat: 47.9186, lng: 106.9177 }, zoom: 15 });
js
import * as maplibregl from 'maplibre-gl';
import { Client, createMap } from '@dock/js';

const dock = new Client({ key: 'dk_...' });
const map = createMap(maplibregl, dock, { container: 'map', center: [106.9177, 47.9186], zoom: 15 });

createMap нь maplibre-gl-ийн Map буцаана. Mapbox GL JS-ийн дуудлага бүр (addSource, addLayer, flyTo, fitBounds, queryRenderedFeatures) адилхан ажиллана. Bundler дээр maplibre-gl 6-д worker-ийн URL заана: Bundler хэсгийг харна уу.

Mapbox-ын загвар (mapbox://...) болон Google-ийн map id dock tile дээр ачаалагдахгүй. Өнгийг сонголтоор өгнө, эсвэл загвар засагч-д загвар хадгалаад styleId дамжуулна. Суурь зурагт одоогоор бичвэр шошго байхгүй.

Marker ба дарах ​

js
new mapboxgl.Marker().setLngLat([106.9303, 47.9202]).addTo(map);
map.on('click', (e) => console.log(e.lngLat.lng, e.lngLat.lat));
js
new google.maps.Marker({ position: { lat: 47.9202, lng: 106.9303 }, map });
map.addListener('click', (e) => console.log(e.latLng.lng(), e.latLng.lat()));
js
new maplibregl.Marker().setLngLat([106.9303, 47.9202]).addTo(map);
map.on('click', (e) => console.log(e.lngLat.lng, e.lngLat.lat));

Хайлт ​

js
const url = `https://api.mapbox.com/search/geocode/v6/forward?q=${encodeURIComponent('Сансар 24')}&access_token=pk...`;
const { features } = await (await fetch(url)).json();
console.log(features[0].properties.full_address, features[0].geometry.coordinates);
js
const { results } = await new google.maps.Geocoder().geocode({ address: 'Сансар 24' });
console.log(results[0].formatted_address, results[0].geometry.location.toJSON());
js
const { results } = await dock.geocode('Сансар 24', { limit: 5 });
console.log(label(results[0], 'mn'), results[0].point);

Хаягийг хүмүүсийн ярьдгаар бичнэ: барилга, хаалга, танил газар, латин эсвэл кирилл. label-ээр харуулна. Албан ёсны хаягтай таараагүй газрын ард "(албан бус)" гэж гарна, API үүнийг шаарддаг.

Mapbox-ын types шүүлтүүр GET /v1/geocode-д мөн types (API 0.70.0): door, business, building, district, khoroo, area, street, landmark, таслалаар; гурван SDK-ийн geocode-д types.

Цэгээр хайлт ​

js
const url = 'https://api.mapbox.com/search/geocode/v6/reverse?longitude=106.9301&latitude=47.9201&access_token=pk...';
const { features } = await (await fetch(url)).json();
js
const { results } = await new google.maps.Geocoder().geocode({ location: { lat: 47.9201, lng: 106.9301 } });
js
const here = await dock.reverse([106.9301, 47.9201], { radius: 50 });
console.log(here.district_mn, here.khoroo, here.results.length);

Mapbox-ын types шүүлтүүр GET /v1/reverse-д мөн types (API 0.69.0): door, business, building, landmark, таслалаар; гурван SDK-ийн reverse-д types.

Зам ​

js
const url = 'https://api.mapbox.com/directions/v5/mapbox/driving/106.9177,47.9186;106.9303,47.9202?geometries=geojson&access_token=pk...';
const { routes } = await (await fetch(url)).json();
console.log(routes[0].distance, routes[0].duration, routes[0].geometry);
js
const { routes } = await new google.maps.DirectionsService().route({
  origin: { lat: 47.9186, lng: 106.9177 }, destination: { lat: 47.9202, lng: 106.9303 }, travelMode: 'DRIVING',
});
console.log(routes[0].legs[0].distance.value, routes[0].legs[0].duration.value);
js
const trip = await dock.route([106.9177, 47.9186], '7QSVX', { mode: 'driving' });
console.log(trip.distance_m, trip.duration_s, trip.geometry, trip.to.gap_m);

Метр ба секунд, хоёуланд нь адил. to нь хаалганы код байж болно: зам барилгын голд биш, тэр хаалганд дуусна. geometry нь GeoJSON шугам; Mapbox дээрх шиг addSource, addLayer-ээр зурна. Замаас хаалга хүртэлх үлдсэн алхалт to.gap_m, шугамд орохгүй. Горим: driving, walking, cycling.

Хаалттай зам ​

js
const url = 'https://api.mapbox.com/directions/v5/mapbox/driving/106.9177,47.9186;106.9303,47.9202?exclude=point(106.9240%2047.9190)&geometries=geojson&access_token=pk...';
const { routes } = await (await fetch(url)).json();
js
const { routes } = await new google.maps.DirectionsService().route({
  origin: { lat: 47.9186, lng: 106.9177 }, destination: { lat: 47.9202, lng: 106.9303 }, travelMode: 'DRIVING', avoidFerries: true,
});
js
const trip = await dock.route([106.9177, 47.9186], [106.9303, 47.9202], { mode: 'driving' });
console.log(trip.closures.as_of, trip.closures.avoided);
const avoid = excludePolygons(await dock.closures());
console.log(closureAt(avoid, [106.9303, 47.9202]) ?? 'төгсгөлд хаалт алга');

Mapbox хүсэлт бүрт илгээсэн цэгээ тойрно, 50 хүртэл, зөвхөн машинаар. Google ямар ч бүсийг тойрохгүй, зөвхөн төлбөртэй зам, хурдны зам, гатлага онгоц. dock-д бүсийг хэн ч илгээхгүй: түнш хаалттай замыг нэг удаа мэдэгдэнэ (POST /v1/closures: үер, угаагдсан зам, гүүр эвдэрсэн, цас, шавар, засвар), тэгээд бүх маршрут эхний өдрөөс сүүлийн өдөр хүртэл түүнийг тойрно. trip.closures.avoided дугааруудыг жагсаана; маршруттай хамт харуул. Хаалт дотор төгссөн маршрут DockError 422 end_in_closure. Өөрийн Valhalla дээр, офлайн: excludePolygons нь exclude_polygons-д өгөх цагиргуудыг, closureAt нь төгсгөл дээрх хаалтыг нэрлэнэ. Зам хаалт-ыг үз.

Алдаа ​

Mapbox, Google HTTP статус эсвэл статус мөр өгдөг. dock status, code (not_found, rate_limited, quota_exceeded, ...) болон секундээр retryAfter-тэй DockError шиднэ. Алдаа хэсгийг харна уу.

iOS ба Android ​

iOS SDK (Swift), Android SDK (Kotlin) нь нэг API-н клиент, аргын нэр нь JS SDK-тай адил. Газрын зургийг өөрсдөө зурдаггүй: Mapbox GL Native-ийн нээлттэй салбар MapLibre Native-ээр зурна. Хоёуланд нь цэг LonLat(lon, lat), уртраг эхэлж. Apple, Google өргөргийг эхэлж бичдэг; Android дээрх Mapbox dock шиг Point.fromLngLat(lng, lat) гэж бичнэ. API-н дуудлага бүр Swift-д async throws, Kotlin-д suspend функц: callback, delegate байхгүй. label, excludePolygons, tile ба загварын туслах функц сүлжээ шаарддаггүй. Доорх dock нэр бүрийг docs-ын тест SDK-ийн эх кодтой тулгадаг.

Mapbox (iOS)Google Maps (iOS)dock (Swift)
MapboxOptions.accessToken = "pk..."GMSServices.provideAPIKey("...")try Client(key: "dk_...")
CLLocationCoordinate2D(latitude: lat, longitude: lng)CLLocationCoordinate2D(latitude: lat, longitude: lng)LonLat(lon, lat)
MapView(frame:mapInitOptions:)GMSMapView(options:)MapLibre Native MLNMapView, styleURL нь dock.styleJSON()-ийг бичсэн файл
Search SDK PlaceAutocomplete.suggestions(for:)GMSPlacesClient.findAutocompletePredictions(fromQuery:...)dock.geocode(q, proximity: here)
Search SDK SearchEngine.reverse(options:)GMSGeocoder().reverseGeocodeCoordinate(_:)dock.reverse(LonLat(lon, lat))
Directions.calculate(_:)Routes API, HTTP-ээр, SDK дуудлагагүйdock.route(from: .point(here), to: "7QSVX", mode: .driving)
RouteOptions.roadClassesToAvoidRoutes API routeModifiersdock.closures(), дараа нь excludePolygons(closures)
SearchResult.address?.formattedAddress(style:)GMSAddress.lines, GMSPlace.formattedAddresslabel(place, lang: .mn)
SearchError, DirectionsErrorNSErrorDockError: status, code, retryAfter
байхгүйбайхгүйdock.door("7QSVX"): хаалганы код, барилгын гадна талын хаалга хүртэл
Mapbox (Android)Google Maps (Android)dock (Kotlin)
MapboxOptions.accessToken = "pk..."manifest дахь com.google.android.geo.API_KEYClient("dk_...")
Point.fromLngLat(lng, lat)LatLng(lat, lng)LonLat(lon, lat)
mapView.mapboxMap.loadStyle(Style.STANDARD)SupportMapFragment.getMapAsync { ... }MapLibre Native map.setStyle(Style.Builder().fromJson(dock.styleJson()))
placeAutocomplete.suggestions(query)placesClient.findAutocompletePredictions(request)dock.geocode(q, proximity = here)
searchEngine.search(ReverseGeoOptions(center), callback)Geocoder(context).getFromLocation(lat, lng, 1)dock.reverse(LonLat(lon, lat))
MapboxDirections.builder().routeOptions(...)Routes API, HTTP-ээр, SDK дуудлагагүйdock.route(Client.End.Point(here), Client.End.Code("7QSVX"), RouteMode.DRIVING)
RouteOptions.exclude(...)Routes API routeModifiersdock.closures(), дараа нь excludePolygons(closures)
SearchResult.fullAddressAddress.getAddressLine(0), Place.formattedAddresslabel(place, Lang.MN)
onError(e: Exception)ApiExceptionDockError: status, code, retryAfter
байхгүйбайхгүйdock.door("7QSVX"): хаалганы код, барилгын гадна талын хаалга хүртэл

Хайлт, цэгээр хайлт, зам, хаалттай зам, алдаа нь дээрх JS блоктой адил ажиллана. Бүтэн хуудас, SDK-ийн тестэд ажилладаг кодтой: iOS SDK, Android SDK.

dock-д одоогоор байхгүй ​

Хамрах хүрээ Улаанбаатар. Суурь зурагт бичвэр шошго, хиймэл дагуулын зураг, түгжрэл, iOS, Android SDK-д газрын нэр нөхөх бэлэн view (Suggester бичих зуур санал өгнө, жагсаалтыг таны view зурна; JS SDK-д attachSuggest бий), статик зураг, Street View байхгүй. Аяллын хугацааны матриц нь GET /v1/matrix (10-аас 10 хүртэл, Mapbox-ын Matrix API шиг), гурван SDK-д matrix. Isochrone нь GET /v1/isochrone (60 минут хүртэл 4 contour, Mapbox-ын Isochrone API шиг), гурван SDK-д isochrone. GPS мөрийг замд буулгах нь GET /v1/matching (100 цэг хүртэл, Mapbox-ын Map Matching API шиг), гурван SDK-д matching. Зогсоолуудын хамгийн сайн дараалал нь GET /v1/optimized-trips (12 хүртэл, Mapbox-ын Optimization API v1 шиг), гурван SDK-д optimizedTrips. Цэг дээрх, ойрхон байшин, хаалга нь GET /v1/tiles/{sources}/tilequery/{lon},{lat} (50 хүртэл, 1000 м дотор, Mapbox-ын Tilequery API шиг), гурван SDK-д tilequery. Android SDK (Kotlin, sdk/android), iOS SDK (Swift, sdk/swift) анхны хувилбар: өөрийн газрын зургийн view-гүй, багцын индекст ороогүй. Хоёулаа MapLibre Native-д dock загвар өгнө: Android (styleJson), iOS (styleJSON, файлд бичээд). Хоёулаа зөвшөөрөлтэйгөөр аялал, хайлтын мэдээлэл бичнэ. Хуудас нь: iOS SDK, Android SDK.

Тэдэнд байхгүй, dock-д байгаа ​

Хаалганы код: барилга, хашаа бүрт таван тэмдэгт, бичих эсвэл хуваалцахад (dock.door('7QSVX')). Хаягт хаалга, давхар, тоот. Хаалга хүртэл хүрдэг зам. Хаалга бүрийн итгэлцэл, ард нь төрийн албан ёсны хаяг эсвэл "(албан бус)" шошго. JS SDK-г харна уу.