2

ポイントを持つ 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' : '';
    });

何か不足していますか？また、ポップアップはポイントの上にはポップアップせず、アイコンの上にポップアップします。この小さな茶色の点ではわかりませんが、たとえばロケットの場合、ポップアップはロケットの真ん中にあります。ありがとう！

ここにスクリーンショットがあります

ここに画像の説明を入力

4

2 に答える 2

2

I am working with a Mapbox map that has points. I would like to know the correct procedure for adding a marker-symbol. Is it better to do it in the GeoJSON like:

...

Or is better to use layout like this:

...

Embedding style information in the GeoJSON (the former) is a specification called simplestyle, which is not supported in GL JS. Using layout (the latter) is the only way to style features in GL JS.

I get little brown dots instead of the classic marker.

Could you please provide a screenshot of this?

于 2016-05-31T17:56:02.103 に答える
1

Mapbox Studio エディタで、アイコン ライブラリに「marker-11」というアイコンが実際にあることを確認する必要があります。そうでない場合、何を参照しているのかわからず、デフォルトでドットになります。

それ以外の場合は、他のすべてが正常に見えます。

于 2016-06-08T18:41:02.540 に答える