0

Turf JS は初めてで、MapBox API を介した統合を検討しています。デフォルトの MapBox.Outdoors マップを使用し、TurfJS のドキュメントの例http://turfjs.org/docs/#pointに従っていますが、マップの上にプロットするポイントを取得できないようです。エラーは FeatureLayer.setGeoJSON に関連する私のリストのコード行にあるようですが、私はそれを理解できません。最後の行をアクティブのままにしておくと、マップが読み込まれません。コメントアウトすると、マップは読み込まれますが、ピンが表示されませんか?

<BODY>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWFya2d1ayIsImEiOiJjaXNsd2VhMG8wMDdrMzNybmticDJhdnZsIn0.KXcvejg6QplSsAlj8aimjA';

var point = turf.point([35.463453, -97.514914], {
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
});

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19);
.featureLayer.setGeoJSON(point); // If I comment this line out the map loads with no pin. If I leave this line active the map doesn't load at all?
</SCRIPT>
</BODY>
4

2 に答える 2

0

問題は、最初に変換せずに geojson をマップに追加しようとしていることにあると思います。geojson をリーフレットが使用できる形式に変換する必要があります。これはあなたのために働くはずの例です。また、プロパティを表示するポイント マーカーにポップアップをバインドします。スタイル パーツは、フィーチャ コレクション内のすべてのポイントに適用されるように静的に (タイトルを除くすべてのプロパティのように)、または各フィーチャ プロパティを使用して動的に (タイトルで行われるように) 実行できます。

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19);

var featureCollection = {"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {"title": "OKC Thunder"}, "geometry": {"type": "Point", "coordinates": [35.463453, -97.514914]}}]};

L.geoJson(featureCollection, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup(""+feature.properties+"<br />");
    },
    style: function (feature) {
        style = {
            "title": feature.properties.title,
            "description": "100 W Reno Ave, Oklahoma City",
            "marker-color": "#6BC65F",
            "marker-size": "large",
            "marker-symbol": "basketball"
        };
        return style
    }
}).addTo(map)
于 2016-11-23T14:40:44.867 に答える
0

mapbox が提供するマーカー設定機能を使用する必要があると思います。したがって、フィーチャ レイヤーの作成をスキップして、mapbox-marker 関数のみを使用できます。ここに文書化されています： https://www.mapbox.com/mapbox.js/api/v3.0.1/l-marker/

簡単なマーカーの作成方法の説明もここにあります: https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/

あなたが提供したコードについては、turf.pointを介してgeojsonオブジェクトの作成をスキップし、これを使用するだけです：

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19);
L.marker([-97.514914, 35.463453], {
  icon: L.mapbox.marker.icon({
    "title": "OKC Thunder",
    "description": "100 W Reno Ave, Oklahoma City",
    "marker-color": "#6BC65F",
    "marker-size": "large",
    "marker-symbol": "basketball"
  })
}).addTo(map);

または、 geojson を turf.point で使用する場合は、次のようにすることもできます。

var point = turf.point([-97.514914, 35.463453], {
  "title": "OKC Thunder",
  "description": "100 W Reno Ave, Oklahoma City",
  "marker-color": "#6BC65F",
  "marker-size": "large",
  "marker-symbol": "basketball"
});

var coords = point.geometry.coordinates;

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19);
  L.marker(coords, {
    icon: L.mapbox.marker.icon(point.properties)
  }).addTo(map);

また、「地理座標の投影座標、経度、緯度」である geojson 仕様に一致するように、ポイント座標を [35.463453, -97.514914] から [-97.514914, 35.463453] に反転する必要があることを確認してください。

http://geojson.org/geojson-spec.html#id2

于 2016-12-01T13:58:13.910 に答える