Mapbox GL AddLayer : 아이콘 이미지는 어디에서 오는가

많은 예제는 항상 다음과 같은 아이콘 이미지를로드합니다 (예 : https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ ) :

map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

이 아이콘은 어디에 저장되어 있으며 로컬 png 또는 svg에 어떻게 연결할 수 있습니까? 아니면 어떻게 내 markers소스를 넣을 수 있습니까? 이 예는 잘 문서화되어 있지 않습니다.

예제를 따르면 특정 스타일의 스프라이트 시트와 함께로드되는 스프라이트 만 가져옵니다.이 스프라이트는 다른 스타일과 일대일로 일치하지 않습니다.

예 : emerald-v8에는 streets-v8을 사용하는 예와 같이 "icon-image": "harbor-15"가 없습니다.

해당 스타일에서 사용 가능한 스프라이트 목록을 보려면 https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites

에메랄드 -v8 저장소에서 "하버"아이콘을 선택할 수 있습니다 :

map.addLayer({
    "id": "pointclick",
    type: 'symbol',
    source: 'pointclick',
    "layout": {
        "icon-image": "harbor_icon",
        "icon-size":1.5
    },
    "paint": {}
});

다음은이 도구를 모두 정리하는 데 도움이되는 리소스이며, 고유 한 아이콘을 만드는 방법을 설명합니다. https://www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images

편집하다:

기본적으로 자신의 아이콘 중 하나를 추가하려면 Mapbox Studio로 이동하거나 자신 만의 스타일을 만들거나 아이콘 중 하나를 편집하십시오. 자신의 SVG 중 하나를 추가하기 만하면 해당 아이콘을 사용자 정의 스프라이트 시트에서 사용할 수있게됩니다.

같이 외부 / 생성 된 아이콘을 사용하여 icon-image사용하는 경우 map.loadImage()와 map.addImage()처음.

예 :

지도에 아이콘 추가

생성 된 아이콘을지도에 추가

그것은 말했다함에 따라 스프라이트 문서 : 패스는 "sprite": "https://link"당신의 스타일에 link와 genereted JSON에 대한 링크입니다 spritezero-CLI . spritezero-cli는 svg 형식의 아이콘 목록에서 png 스프라이트를 생성했습니다. 심볼 레이어에서 아이콘을로 사용할 수 있습니다 'icon-image'.