0
252
Views¿Cómo puedo hacer waypoints personalizados en el agua con un clic en mapbox?
Tengo un mapa en mi sitio web que solo muestra el mapa y mi ubicación (luego cambiará a la ubicación de un pequeño bote). Quiero marcar un camino en el agua para que el bote pueda viajar en ese camino exacto, por ejemplo, del punto A al B al C, etc. pero no pude encontrar la manera de hacerlo con Dropbox. Entonces, básicamente, una ruta de entrega, pero luego en el agua. ¡Alguien puede ayudarme! esto es lo que tengo hasta ahora:
este es mi mapa.html
<meta charset="UTF-8"> <title>Title</title> <meta name='viewport' content='width=device-width, initial-scale=1' /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute ; top: 56px; bottom: 0; width: 100%; } #buttons { position: absolute; bottom: 0; margin: 0 0 10px 25px} </style> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body > <div id="map"></div> <div > <button type="button" class="btn btn-primary" id="buttons">asdasd</button> </div> </body> <script src="../js/map.js"> </script> </html>y este es mi map.js:
mapboxgl.accessToken = 'my_token'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v11', // style URL center: [-96, 37.8], // starting position zoom: 3 // starting zoom }); const geolocate = new mapboxgl.GeolocateControl() map.addControl(geolocate) map.on('load', function() { geolocate.trigger(); });1 answers
Answer question0
solo tiene que almacenar a intervalos regulares la posición del barco (almacenarlo en una variable simple, escribirlo en un archivo, usar una API, usar localStorage, todo depende del uso). Luego solo tienes que agregar una capa de tipo "línea" que usará los diferentes puntos grabados para dibujar líneas entre cada punto.
Aquí hay un ejemplo de trabajo https://codepen.io/cladjidane/pen/MWrJjjw
mapboxgl.accessToken = 'pk.eyJ1IjoiY2xhZGppZGFuZSIsImEiOiJjbDA4NmVra3gwMG1jM2dvM3V1djh2NnFwIn0.m8Swm9zWKqf0ozaNcZtISQ' // Init map const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [-122.02991,37.33265], zoom: 12, }) // Definition of the configuration for GeolocateControl let geolocate = new mapboxgl.GeolocateControl({ positionOptions: { enableHighAccuracy: true, timeout: 15000, maximumAge: 0, }, trackUserLocation: true, }); map.addControl(geolocate) // Once the map is loaded map.on('load', function () { geolocate.trigger(); // We create a data source - GeoJSON format const position_boat = { type: 'FeatureCollection', features: [ { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: [], }, }, ], } // We add to the map this source map.addSource('route', { type: 'geojson', data: position_boat, }) // All the magic happens here: // We push in our source the table of coordinates updated with the method "geolocate". geolocate.on('geolocate', function (position) { let newCoordinates = [position.coords.longitude, position.coords.latitude] position_boat.features[0].geometry.coordinates.push(newCoordinates) map.getSource('route').setData(position_boat) }) // We add the layer that displays the source on the map map.addLayer({ id: 'route', type: 'line', source: 'route', layout: { 'line-join': 'round', 'line-cap': 'round', }, paint: { 'line-color': 'red', 'line-width': 8, }, }) })