Каков правильный способ выбора и стиля маркеров на Mapbox GL JS?

Question

Я работаю с картой Mapbox с точками. Я хотел бы знать правильную процедуру добавления символа-маркера. Вот мой GeoJSON:

"type": "FeatureCollection", 
    "features": [ 
    { 
     "type": "Feature", 
     "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -89.12312324, 
      13.686886 
     ] 
     }, 
     "properties": { 
     "title": "Random Location", 
     "description": "Individual" 
     } 
    } 
] 

Вот пример из документации MapBox:

map.addLayer({ 
     "id": "airport", 
     "source": "airports", 
     "source-layer": "ne_10m_airports", 
     "type": "symbol", 
     "layout": { 
      "icon-image": "airport-15", 
      "icon-padding": 0 
     }, 
     "filter": ["in", "abbrev", ""] 
    }); 

Когда я использую этот

"layout": { 
       "icon-image": "marker-11", 
       "icon-allow-overlap": true, 
      } 

Я получаю маленькие коричневые точки вместо классических маркеров. Я использую

<script src='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script> 
<link href='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' /> 

и я использую

style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location 

Мой весь сценарий выглядит следующим образом:

mapboxgl.accessToken = 'pk.mylongAkey'; 

    var map = new mapboxgl.Map({ 
     container: 'map', // container id 
     style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location 
     center: [-88.866245, 13.770391], // starting position 
     zoom: 6 // starting zoom 
    }); 

    var url = '/maps/index.json'; 
     var source = new mapboxgl.GeoJSONSource({ 
     data: url 
    }); 

    map.on('load', function() { 
     map.addSource('location', source); 
     map.addLayer({ 
      "id": "map", 
      "type": "symbol", 
      "source": "location", 
      "source-layer": 'location', 
      "layout": { 
       "icon-image": "marker-11", 
       "icon-allow-overlap": true, 
      } 
     }); 
    }); 

    map.on('click', function (e) { 
     var features = map.queryRenderedFeatures(e.point, { layers: ['map'] }); 

     if (!features.length) { 
      return; 
     } 

     var feature = features[0]; 

     // Populate the popup and set its coordinates 
     // based on the feature found. 
     var popup = new mapboxgl.Popup() 
      .setLngLat(feature.geometry.coordinates) 
      .setHTML(feature.properties.title) 
     .addTo(map); 
    }); 

    // Use the same approach as above to indicate that the symbols are clickable 
    // by changing the cursor style to 'pointer'. 
    map.on('mousemove', function (e) { 
     var features = map.queryRenderedFeatures(e.point, { layers: ['map'] }); 
     map.getCanvas().style.cursor = (features.length) ? 'pointer' : ''; 
    }); 

ли я что-то отсутствует? Кроме того, всплывающие окна не всплывают над точками, они всплывают поверх значка. Вы не можете сказать с этой маленькой коричневой точкой, но с ракетой, например, всплывающее окно находится в середине ракеты. Благодаря!

Вот скриншот

Answer 1

Я работаю с картой MapBox, которая имеет точки. Я хотел бы знать правильную процедуру добавления символа-маркера. Что лучше сделать это в GeoJSON как:

...

Или лучше использовать схему как это:

... информация о стиле

Погружение в GeoJSON (первая) - это спецификация, называемая simplestyle, которая не поддерживается в GL JS. Использование макета (последнее) - единственный способ стилизовать функции в GL JS.

---

Я получаю маленькие коричневые точки вместо классических маркеров.

Не могли бы вы предоставить скриншот об этом?

Answer 2

В редакторе редакторов Mapbox вам необходимо убедиться, что на самом деле у вас есть значок «marker-11» в вашей библиотеке значков. Если нет, он не знает, что вы ссылаетесь и по умолчанию ставится точка.

В противном случае все остальное выглядит хорошо.