TurfJS将点添加到MapBox地图
刚接触Turf JS，并且一直在考虑通过MapBox应用程序接口进行集成。使用默认的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>回答 2
Stack Overflow用户
发布于 2016-11-23 22:40:45
我认为问题在于，您试图在没有转换的情况下将geojson添加到地图中。您需要将geojson转换为leaflet可以使用的格式。这里有一个示例，它应该适用于您。它还将一个弹出式窗口绑定到将为您显示属性的点标记。样式部分可以静态完成(类似于除title之外的所有属性)，以便将其应用于要素集合中的所有点，也可以使用每个要素属性动态完成(与title相同)。
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)Stack Overflow用户
发布于 2016-12-01 21:58:14
我认为您应该使用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);或者，如果你想在turf.point中使用geojson，你也可以这样做：
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
https://stackoverflow.com/questions/39326702
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号