So ziehen Sie benutzerdefinierte Symbole Mapbox GL JS

Question

Ich verwende derzeit Mapbox GL JS und ich habe custom icons like this example und ich möchte in der Lage sein, die Symbole zu ziehen.

Ich mache es ähnlich wie draggable point example, wo ich mouseDown, onMove und Funktionen habe. Aber der Teil, in dem ich feststecke, ist in onMove, ich bin nicht sicher, wie man die kundenspezifischen Ikonen einstellt, die div sind, um seine Positionen während des Ziehenprozesses zu aktualisieren. Ich aktualisiere die neuen Koordinaten (lng & lat) der Symbole, aber ich bin mir nicht sicher, wie ich sie tatsächlich bewegen soll, da sich die Symbole momentan nicht bewegen/ziehen.

Im ursprünglichen ziehbaren Punktbeispiel hat es map.getSource('point').setData(geojson);, die den Geojson aktualisiert, damit der Punkt auf der Karte bewegt werden kann.

Also im Grunde möchte ich nur die benutzerdefinierten Symbole in Mapbox GL JS ziehen können.

Danke.

Answer 1

Ich stieß auf ein ähnliches Problem und nach vielen Stunden gelang es, die beiden Beispiele zu kombinieren und die Koordinaten zu Feldern zu exportieren. Versuchen Sie, diese Schnipsel (verwenden Sie Ihre eigenen accessToken, Kartenstil und Markierungsbild)

$(document).ready(function() { 
 
    // =============================================== 
 
    // mapbox 
 
    // =============================================== 
 
    // Holds mousedown state for events. if this 
 
    // flag is active, we move the point on `mousemove`. 
 
    var isDragging; 
 

 
    // Is the cursor over a point? if this 
 
    // flag is active, we listen for a mousedown event. 
 
    var isCursorOverPoint; 
 

 
    
 
    
 
mapboxgl.accessToken = '############# Add your own accessToken here ##########'; 
 
    var map = new mapboxgl.Map({ 
 
     container: 'map-one', 
 
     style: 'mapbox://############# Add your own style here ##########', 
 
     center: [5.037913, 52.185175], 
 
     pitch: 0, 
 
     zoom: 12 
 
    }); 
 
    
 
    var nav = new mapboxgl.Navigation({ 
 
     position: 'top-left' 
 
    }); 
 

 
    map.addControl(nav); 
 

 
    var canvas = map.getCanvasContainer(); 
 

 
    var geojson = { 
 
     "type": "FeatureCollection", 
 
     "features": [{ 
 
      "type": "Feature", 
 
      "geometry": { 
 
       "type": "Point", 
 
       "coordinates": [5.067, 52.1923] 
 
      }, 
 
\t \t \t "properties": { 
 
\t \t \t \t "title": "Afspreekpunt", 
 
\t \t \t \t "marker-symbol": "dimmle-marker" 
 
\t \t \t } 
 
     }] 
 
    }; 
 

 
    function mouseDown() { 
 
     if (!isCursorOverPoint) return; 
 

 
     isDragging = true; 
 

 
     // Set a cursor indicator 
 
     canvas.style.cursor = 'grab'; 
 

 
     // Mouse events 
 
     map.on('mousemove', onMove); 
 
     map.on('mouseup', onUp); 
 
    } 
 

 
    function onMove(e) { 
 
     if (!isDragging) return; 
 
     var coords = e.lngLat; 
 

 
     // Set a UI indicator for dragging. 
 
     canvas.style.cursor = 'grabbing'; 
 

 
     // Update the Point feature in `geojson` coordinates 
 
     // and call setData to the source layer `point` on it. 
 
     geojson.features[0].geometry.coordinates = [coords.lng, coords.lat]; 
 
     map.getSource('point').setData(geojson); 
 
    } 
 

 
    function onUp(e) { 
 
     if (!isDragging) return; 
 
     var coords = e.lngLat; 
 

 
     canvas.style.cursor = ''; 
 
     isDragging = false; 
 

 
     // Update form fields with coordinates 
 
     $('#latitude').val(coords.lat); 
 
     $('#longitude').val(coords.lng); 
 
    } 
 

 

 
    // Mapbox map-accordion fix 
 
    $('#accordion').on('hidden.bs.collapse', function() { 
 
     map.resize(); 
 
    }) 
 
    $('#accordion').on('shown.bs.collapse', function() { 
 
     map.resize(); 
 
    }) 
 

 

 
    // After the map style has loaded on the page, add a source layer and default 
 
    // styling for a single point. 
 
    map.on('load', function() { 
 

 
     // Add a single point to the map 
 
     map.addSource('point', { 
 
      "type": "geojson", 
 
      "data": geojson 
 
     }); 
 

 
     map.addLayer({ 
 
      "id": "point", 
 
      "type": "symbol", 
 
      "source": "point", 
 
      "layout": { 
 
       // ############################################## 
 
       // NOTE: this is my marker, change it 
 
       // to the marker you uploaded in your map style 
 
       // - you will likely need different 
 
       // offset/translate values 
 
       // ############################################## 
 
\t \t \t \t "icon-image": "my-marker", 
 
       "icon-size": 0.3, 
 
\t \t \t \t "text-field": "", 
 
\t \t \t \t "text-offset": [0, 0.6], 
 
\t \t \t \t "text-anchor": "top", 
 
       "text-size": 14 
 
\t \t \t }, 
 
\t \t \t "paint": { 
 
       "icon-translate": [-6, -34], 
 
\t \t \t } 
 
     }); 
 

 
     // If a feature is found on map movement, 
 
     // set a flag to permit a mousedown events. 
 
     map.on('mousemove', function(e) { 
 
      var features = map.queryRenderedFeatures(e.point, { layers: ['point']   }); 
 

 
      // Change point and cursor style as a UI indicator 
 
      // and set a flag to enable other mouse events. 
 
      if (features.length) { 
 
       canvas.style.cursor = 'move'; 
 
       isCursorOverPoint = true; 
 
       map.dragPan.disable(); 
 
      } else { 
 
       //map.setPaintProperty('point', 'circle-color', '#3887be'); 
 
       canvas.style.cursor = ''; 
 
       isCursorOverPoint = false; 
 
       map.dragPan.enable(); 
 
      } 
 
     }); 
 

 
     // Set `true` to dispatch the event before other functions call it. This 
 
     // is necessary for disabling the default map dragging behaviour. 
 
     map.on('mousedown', mouseDown, true); 
 

 

 
    }); 
 
}); // end document ready

.map { border: 1px solid #ccc }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.1/mapbox-gl.js'></script> 
 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.1/mapbox-gl.css' rel='stylesheet' /> 
 

 
<div id='map-one' class='map' style='height: 360px;'></div> 
 
<input id="latitude"> <input id="longitude">