Question

在按照地图框教程后，我设法在地图上显示无人机。我唯一的问题是：如何在代码中添加旋转参数（在不同角度显示无人机标记）？我花了几个小时寻找例子，但没有一个符合我已经写过的......

谢谢！

这是脚本：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></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
});



// code from the next step will go here!

var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-90,40]
    },
    properties: {
      title: 'Mapbox'
    }
  }]
};

// add markers to map
geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);
});

</script>

</body>
</html>

Answer 1

Mapbox在“获取方位”标题下提供了内置的图标旋转功能，一旦您发现了两对LatLng之间的地理方位并输入了该值以获取方位，就可以在内部处理图标旋转。

如果您正在使用mapbox标记并且热衷于旋转它，则可以使用css变换属性（rotate（））并动态计算两对latLng之间的角度，并在rotate属性中使用该值。

        var dLon = destination[0]-origin[0];
        var dLat = destination[1]-origin[1];
        var angle = 180+(Math.atan2(dLon, dLat) * 180 / Math.PI);
        var rotateString = "rotate(" + angle + "deg)";

        var el = document.createElement('div');
        el.className = 'marker';
        var truckMarker = new mapboxgl.Marker(el)
        el.style.transform = el.style.transform + rotateString;

在最后一行中，重要的一点是要附加rotate属性，因为transform属性已经被更新，因为由于动画调用了translate。对我来说效果很好！

Answer 2

如果你正在使用Markers，那么你需要自己进行轮换作为标记元素样式的一部分。这可能仅在您禁用地图旋转时才有效，或者除非您执行https://github.com/mapbox/mapbox-gl-js/issues/3937#issuecomment-304916394之类的操作以自行考虑地图轮换。

如果您正在使用Symbols，则可以使用https://www.mapbox.com/mapbox-gl-js/style-spec#layout-symbol-icon-rotate来设置轮换，这样会更容易。

Mapbox自定义标记旋转

2 个答案: