TurfJS MapBox에 포인트 추가

Turf JS에 익숙하며 MapBox API를 통한 통합을 검토하고 있습니다. 기본 MapBox.Outdoors 맵을 사용하고 예제 TurfJS 설명서 http://turfjs.org/docs/#point의 일부를 따라 왔지만 맵 상단에 내 포인트를 표시하지 못하는 것 같습니다. 모든 제안 크게 주셔서 감사합니다, 오류 내 FeatureLayer.setGeoJSON 관련 코드 라인에있을 것하지만 그것을 알아낼 수 없습니다. 마지막 줄을 활성 상태로두면 맵이로드되지 않습니다. 주석을 달면지도가로드되지만 핀이 나타나지 않습니다.TurfJS MapBox에 포인트 추가

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

출처

2016-09-05 MarkGuk

제 생각에 문제는 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-23 14:40:44

지도 상자에서 사용할 수있는 마커 기능을 사용해야한다고 생각합니다. 따라서 피쳐 레이어 만들기를 건너 뛰고 mapbox-marker 기능 만 사용하면됩니다. 여기에 설명되어 있습니다 : 방금 turf.point를 통해 geojson 객체의 생성을 건너 뛸 수 제공된 코드를 들어 https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/

: https://www.mapbox.com/mapbox.js/api/v3.0.1/l-marker/

여기에 간단한 마커를 만드는 방법에 대한 설명도 있습니다

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

012 또한 3,516,

당신이 당신의 포인트는 에서 [35.463453, -97.514914] 좌표 플립 필요가 있는지 확인 [-97.514914, 35.463453] "지리적 좌표에 대한 전망 좌표, 경도, 위도"

인 geojson 스펙과 일치하는

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

출처

2016-12-01 13:58:13

답변

관련 문제