5

私はMapboxが初めてです。mapbox studio でカスタム スタイル マップを作成し、geoJson を使用してマーカーを追加しました。サンプルコードは次のとおりです。

mapboxgl.accessToken = 'pk.eyJ1Ijoic2Fua3ljc2Uhhcc.mb22KHuonjywQ-eaWQ';
var map = new mapboxgl.Map({
container: 'map_geo',
style: 'mapbox://styles/abcd/cipjtsdhyh04ebam5tndf4jaj',
zoom: 3.7,
center: [81.30, 22.76]
});
var geoJson = {
"type": "FeatureCollection",
 "features": [{
     "type": "Feature",
    "properties": {
        "title": "Nagpur",
          "description": "Nagpur",
         "marker-symbol": "marker",
     },
    "geometry": {
         "coordinates": [79.0882, 21.1845],
         "type": "Point"
    },
    "id": "223e9579f03849c87abec10dfed64c37"
 }, {
    "type": "Feature",
    "properties": {
        "title": "Lucknow",
        "description": "Lucknow",
        "marker-symbol": "marker",
    },
    "geometry": {
        "coordinates": [80.9462, 26.8467],
        "type": "Point"
    },
    "id": "2cc757705489152c8bccb33635708427"
 }]
};

map.on('load', function () {
map.addSource("markers", {
    "type": "geojson",
    "data": geoJson

});

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",
    },
    "paint": {
            "text-size": 16,
            "text-color": "#fff",
        }
});
});
map.scrollZoom.disable();
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['markers']    });

if (!features.length) {
    return;
}

// here I want to change the marker color to highlight the selected marker

});

ここで、マーカーをクリックして選択したマーカーを表示するときにマーカーの色を変更したいと考えています。前もって感謝します。

4

1 に答える 1

5

質問ありがとう！

この例は、リクエストした機能を実装するのに役立ちます: https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

基本的なワークフローは次のとおりです。

  • マーカーの 2 つのレイヤーを作成します。1 つは強調表示されていないスタイルでマーカーを表示し、もう 1 つは強調表示されたスタイルでマーカーを表示します。
  • フィルターを使用して、強調表示されたスタイルのレイヤーからすべてのマーカーを非表示にします
  • clickイベントを聞く
  • を使用してカーソルの下のマーカーを見つけるqueryRenderedFeatures
  • フィルターを使用してハイライトされたレイヤーにマーカーを表示します

私たちは、このプロセスをより簡単にする方法に取り組んでいます!

于 2016-06-28T18:06:14.407 に答える