Как отобразить в Mapbox вместо маркеров иображения?

Question

[Антон Ипатов]

Использую Mapbox, нужно чтобы вместо маркеров у каждой позиций была своя картинка
то есть вместо

paint: {
		"circle-color": "#11b4da",
		"circle-radius": 4,
		"circle-stroke-width": 1,
		"circle-stroke-color": "#fff"
	}

нужно чтобы было изображение взятое из geojson даты

<div id='map-index'></div>

<script>
mapboxgl.accessToken = 'YourAccessToken';
var map = new mapboxgl.Map({
container: 'map-index',
style: 'mapbox://styles/mapbox/dark-v10',
center: [-103.59179687498357, 40.66995747013945],
zoom: 3
});
 
map.on('load', function() {
// Add a new source from our GeoJSON data and set the
// 'cluster' option to true. GL-JS will add the point_count property to your source data.
map.addSource("random", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: "https://gist.githubusercontent.com/ipatovanton/5b4cd9dbf18f8f321512bea9ac49d534/raw/d67ea8584831fa61efd20e7ab8cbc58bfa8bfc76/random.geojson",
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
...

map.addLayer({
	id: "unclustered-point",
	type: "circle",
	source: "random",
	filter: ["!", ["has", "point_count"]],
	paint: {
		"circle-color": "#11b4da",
		"circle-radius": 4,
		"circle-stroke-width": 1,
		"circle-stroke-color": "#fff"
	}
});

</script>

Answer 1

[freeExec]

Делаете символьный стиль где настраиваете какую иконку выводить у объекта. Ну и по началу, когда ни бум-бум, лучше начинать не с голого кода, а покрутить mapbox studio, чтобы понимать какие есть возможности и посмотреть как они реализуется внутри стиля.

Comments

[Антон Ипатов]

Здравствуйте, а понимаю как выводить иконки, но не могу понять как выводить изображение у каждой позиции оно свое

[freeExec]

Антон Ипатов, Фильтруется по параметру в данных.
Если позиция == своя, то иконка твоя, если позиция == своя2, то иконка твоя2

Answer 2

[EmelyanovKonstantin]

Немного не понятно что в GeoJson. И как в GeoJson может быть изображение(может ссылка на него). Предположим там всё-таки есть какой-то тэг, позволяющий сделать сопоставление точки и соответствующей ей картинке.
Есть 2 пути:
1. Как предусмотрено это в Mapbox: Вы загружайте ваш GeoJson на сервера MapBox и с помощью стилей описывайте эти точки. Картинки добавляются в виде спрайтов.
В спецификации к стилям для каждой точки можно указать соответствующую ей картинку

"icon-image": "{icon}"

"icon-size": "{size}"

"icon-rotation": "{rotation}"

и другие свойства.
Это делается в Mapdox Studio. Вместо Circle используется Symbol. Делается фильтр по данным и назначатся изображение. Как пример:

{
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"has",
"name"
],
[
"==",
"class",
"railway"
],
[
"==",
"subclass",
"station"
]
],
"id": "poi-railway",
"layout": {
"icon-image": "{class}_11",
"text-field": "{name}",
"text-font": [
"Noto Sans Regular"
],
"text-size": 12
},
"source": "source",
"source-layer": "poi",
"type": "symbol"
}

Это в концепции Mapbox. В принципе, это может делать картограф вообще без кода. А вы просто цепляйте готовую карту на клиенте.
2.Второй вариант. Делать все те же действия только на стороне клиента JS. Загружать картинки и Json с бэкенда или сторонних сервисов.
Сопоставить типу точки ссылку на картинку в спрайтах.
И сформировать либо такой же фрагмент стиля, если вы используйте фреймворк с поддержкой стилей MapBox, либо рисовать эти изображения своими средствами, если фреймворк не поддерживает спецификацию MapBox.
У вас Mapbox GL JS поэтому просто

map.addLayer({ фрагмент стиля});