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

还要确保您需要将点坐标从 [35.463453, -97.514914] 翻转到 [-97.514914, 35.463453] 以匹配 geojson 规范，即“地理坐标的投影坐标、经度、纬度”

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

于 2016-12-01T13:58:13.910 回答