Question

Turf JS的新手，并一直在寻找通过MapBox API进行集成。使用默认的MapBox.Outdoors地图，并且已经关注了一些示例TurfJS文档http://turfjs.org/docs/#point，但似乎无法将我的点绘制在地图上。任何建议都非常感激，错误似乎在我的与ListLayer.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>

Answer 1

我认为问题在于您尝试将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)

Answer 2

我认为你应该使用mapbox提供给你的set marker功能。因此，您可以跳过创建要素图层并仅使用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规范，即＆＃34;地理坐标的投影坐标，经度，纬度＆＃34;

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

TurfJS将点添加到MapBox地图

2 个答案: