Mapbox自定义无人机标记添加旋转参数技术问询

Hey there! I see you're trying to add rotation to your drone marker in Mapbox GL JS v0.43.0—let's fix that up for you. Since you're using a custom HTML element as your marker, we can leverage CSS transforms to rotate it, which works perfectly with your existing code setup.

Solution: Add Rotation to Your Drone Marker #

First, update your GeoJSON to include a rotation value in each feature's properties (you can set this to any degree value that matches your drone's heading):

var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-90,40]
    },
    properties: {
      title: 'Mapbox',
      rotation: 45 // Add your desired rotation (in degrees) here
    }
  }]
};

Next, when creating your marker element, apply the rotation via CSS and adjust the transform origin to ensure the marker spins around its center (instead of the top-left corner, which would look off):

// add markers to map
geojson.features.forEach(function(marker) {
  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';
  // Apply rotation from GeoJSON properties
  el.style.transform = `rotate(${marker.properties.rotation}deg)`;
  // Set transform origin to center for natural rotation
  el.style.transformOrigin = 'center center';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});

Bonus: Dynamic Rotation #

If you need to update the rotation later (like when your drone changes direction), you can grab the marker element and update its transform style dynamically:

// Example: Rotate the marker to 90 degrees after 2 seconds
setTimeout(() => {
  el.style.transform = 'rotate(90deg)';
}, 2000);

Why This Works #

Your custom marker is just a regular HTML <div>—so all standard CSS transforms apply here. Setting transformOrigin ensures the marker rotates around its center, which is exactly what you want for a drone icon. This method works seamlessly with your older Mapbox GL JS version (v0.43.0) and remains valid in newer versions too.

Here's the full modified code for reference:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Rotating Drone Marker</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.marker {
  background-image: url('MQ-1_Predator_silhouette.svg.png');
  background-size: cover;
  width: 61px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWF0dGhpZXU2MyIsImEiOiJjamNob3I3cmgxam1kMzFzNzdja2ZvNmhuIn0.AyFos9o0afaaBU21CgrxXg';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [-96, 37.8],
  zoom: 3
});

var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-90,40]
    },
    properties: {
      title: 'Mapbox',
      rotation: 45 // Rotation in degrees
    }
  }]
};

// add markers to map
geojson.features.forEach(function(marker) {
  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';
  // Apply rotation and set origin
  el.style.transform = `rotate(${marker.properties.rotation}deg)`;
  el.style.transformOrigin = 'center center';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Matthieu Faure