MapboxGL JS - Тип слоя слоя

Question

У меня есть карта с источником векторной плитки, содержащей тысячи точек геойсона. Я могу отображать точки на карте, показывая круг для каждого из них, используя слой типа circle.

Я хотел был бы сделать то же самое, но используя различные формы, такие как квадрат и треугольник. Разве нет встроенного способа сделать это? Какие у меня варианты?

Answer 1

В случае любого использования, это то, что я сделал:

1. Я создал набор SVG изображений в различных цветах, путем редактирования иконок формы маки, предусмотренные в https://www.mapbox.com/maki-icons/editor/
2. я преобразовал их в файл JPG спрайты и дескриптор JSon с помощью https://github.com/mapbox/spritezero-cli
3. Я создал стиль, полученный из MapBox предоставленных стилей, чтобы использовать свой собственный спрайт, и служил в этом стиле, используя https://github.com/klokantech/tileserver-gl
4. в моей конфигурации слоя, Я использовал слой типа «символ» и выбрал соответствующий значок, передав его имя в свойствах макета «icon-image»: «green-triangle-11»

Я признаю, что это довольно много работы для отображения зеленого треугольника на карте!

---

Edit (18-07-2017): я узнал, вы можете загрузить любое изображение и отобразить его на карте, он не должен быть частью стиля. Я не уверен, что Mapbox добавил это недавно или я пропустил его до сих пор. Здесь идет:

map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => { 
    if (error) throw error; 
    map.addImage('cat', image); 
    map.addLayer({ 
     "id": "points", 
     "type": "symbol", 
     "source": { 
      "type": "geojson", 
      "data": { 
       "type": "FeatureCollection", 
       "features": [{ 
        "type": "Feature", 
        "geometry": { 
         "type": "Point", 
         "coordinates": [0, 0] 
        } 
       }] 
      } 
     }, 
     "layout": { 
      "icon-image": "cat", 
      "icon-size": 0.25 
     } 
    }); 
}); 

Взятые из https://www.mapbox.com/mapbox-gl-js/example/add-image/