将自定义标记添加到 Mapbox 地图

Question

我在我的项目中使用 mapbox

我使用的是 mapbox.js 并使用这样的自定义标记制作我的地图

 $(function() { 
  const token = '*********';
  let myLatlng = L.latLng(<%= @hotel.lat %>,<%= @hotel.lng %>);
  L.mapbox.accessToken = token;
  let map = L.mapbox.map('map-canvas', 'mapbox.streets')
  .setView(myLatlng, 14);

  let marker = new L.marker(myLatlng,{
    icon: L.icon({
        iconUrl: '//chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|EBCB2D'
      })
  }).addTo(map);
  });

我正在改变这样的标记图标

  icon: L.icon({
        iconUrl: '//chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|EBCB2D'
      })

我想知道 MapBox GL JS 是否有像 rhis 这样的简写方法来更改它？

Answer 1

要说明给出的两个 cmets，有两种不同的方法可以将自定义图像添加到地图：

使用符号层

符号层存在于地图中，可用于可视化数据源。

首先，使用loadImage()获取图片URL：

map.loadImage('https://example.com/image.png', function(error, image) {
    if (error) throw error;

然后，使用addImage()将获取到的图片转换成图标在地图中使用：

   map.addImage('pin', image);

最后，在图层上使用该图标：

   map.addLayer({ id: 'mypin', type: 'symbol', paint: { 'icon-image': 'pin' });

完整示例：https://www.mapbox.com/mapbox-gl-js/example/add-image/

使用标记

或者，您可以使用标记。这存在于地图上方，不与地图中的数据交互。

首先，为图片创建 DOM 元素：

var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://example.com/icon.png)';
el.style.width = '20px';
el.style.height = '20px';

接下来，基于此元素创建一个 Marker 对象，并将其添加到地图中：

new mapboxgl.Marker(el)
    .setLngLat(mylatlng)
    .addTo(map);

完整示例：https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/