在mapbox中通過mapbox添加一些基本的標記gl js

我有一個mapbox樣式的mapbox，但是我很難添加一個基本的標記，但是文本出現在標記應該在的地方該標記將在那裏。在mapbox中通過mapbox添加一些基本的標記gl js

因此，這裏是與地圖樣式代碼：

mapboxgl.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA'; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: "mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1", 
    center: [-30.50, 40], 
    zoom: 2, 
    interactive: false 
});

這裏正在從一個例子中的API增加了一些標記：

map.on('style.load', function() { 

    map.addSource("markers", { 
     "type": "geojson", 
     "data": { 
      "type": "FeatureCollection", 
      "features": [{ 
       "type": "Feature", 
       "geometry": { 
        "type": "Point", 
        "coordinates": [-77.03238901390978, 38.913188059745586] 
       }, 
       "properties": { 
        "title": "Mapbox DC", 
        "marker-symbol": "monument" 
       } 
      }, { 
       "type": "Feature", 
       "geometry": { 
        "type": "Point", 
        "coordinates": [-122.414, 37.776] 
       }, 
       "properties": { 
        "title": "Mapbox SF", 
        "marker-color": "#ff00ff" 
       } 
      }] 
     } 
    }); 

    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" 
     } 
    }); 
});

然而，只有文字，而不是圖標顯示。

問題是：我會如何添加一個普通的基本彩色標記到這張地圖，甚至沒有一個特殊的圖標？

謝謝。

來源

2016-02-07 Smickie

這裏的問題在於，您選擇的模板Mapbox Studio中的樣式起點沒有在圖層佈局中引用的字形/精靈。如果您切換到他們在您使用的示例中使用的相同樣式： mapbox://styles/mapbox/streets-v8您會看到標記會出現。這是因爲他們已被添加到該風格。如果你切換回你的風格，他們會再次離開。

這是你的風格的精靈的的console.log：

而這裏的Mapbox街道精靈的的console.log：

正如你所看到的，你有隻有兩個，而mapbox有幾十個（超過截圖）。 default_marker和secondary_marker：上Plunker

{ 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-77.03238901390978, 38.913188059745586] 
    }, 
    "properties": { 
     "title": "Mapbox DC", 
     "marker-symbol": "default_marker" 
    } 
} 

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

例子：http://plnkr.co/edit/W7pfGHVBzJj8U3AmPyzf?p=preview

如果您需要更多的你一定要添加精靈/字形你願意，你可以通過簡單地使用propertynames使用你的那些在Mapbox工作室中使用您的風格。不幸的是，這與「編程」無關，因爲它與Mapbox Studio有關，這是一個軟件工具，因此在stackoverflow上是一種「offtopic」。

如果你甚至不需要精靈/字形你也可以使用type: circle和paint屬性以創建簡單的圓圈：上Plunker

map.addLayer({ 
    "id": "markers", 
    "source": "markers", 
    "type": "circle", 
    "paint": { 
     "circle-radius": 10, 
     "circle-color": "#007cbf" 
    } 
});

例子：http://plnkr.co/edit/QDtIBtDIimKy6TUmKxcC?p=preview

更多款式和精靈能在這裏找到：

來源

2016-02-10 21:56:12 iH8

當心，'default_marker'已更名爲'標記15'。 HTTP：//計算器。com/a/38061574/3625228花了我一段時間來弄清楚它爲什麼不起作用。 – oelna

在mapbox中通過mapbox添加一些基本的標記gl js

回答

相關問題