전단지는 geojson 기능으로 포인트를 표시하지 않습니까?

저는 Leaflet API부터 시작하고 있습니다. GeoJson 데이터를 사용하여 고객지도에 일부 기하학적 점을 추가하려고합니다. 현재 geojsonFeature 유형을 여기에 사용했습니다. http://leafletjs.com/examples/quick-start.html 전단지는 geojson 기능으로 포인트를 표시하지 않습니까?

그러나 이러한 단계를 수행하여 기능을 추가하면 해당 기능이 나타나지 않습니다. 아래 내 HTML 페이지 및 코드입니다.

<html><head> 
    <title>Leaflet Quick Start Guide Example</title> 
    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"> 
</head> 
<body class=""> 
    <div id="mapid" style="width: 600px; height: 400px; position: relative;" class="leaflet-container leaflet-fade-anim" tabindex="0"></div> 

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
    <script src="https://raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js"></script> 
    <script> 

     var mymap = L.map('mapid').setView([51.505, -0.09], 13); 

     L.tileLayer('https://api.mapbox.com/styles/v1/edsonbarboza/ciqb82pfe000dc1nliqy8sljp/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZWRzb25iYXJib3phIiwiYSI6ImNpbTJjMWRuczA5NGx1MGtzbmN6c3NjOHMifQ.FvAMXzmnQ0TIJDDsV6rXAw', { 
      maxZoom: 18, 
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
       '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
       'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
      id: 'mapbox.satelity' 
     }).addTo(mymap); 


     var myStyle = { 
     "color": "#ff7800", 
     "weight": 5, 
     "opacity": 0.65 
     }; 


     //L.marker([51.51, -0.09]).addTo(mymap) 

     var geojsonFeature = { 
      "type": "Feature", 
      "properties": { 
       "name": "Coors Field", 
       "amenity": "Baseball Stadium", 
       "popupContent": "This is where the Rockies play!" 
      }, 
      "geometry": { 
       "type": "Point", 
       "coordinates": [51.51, -0.09] 
      } 
     }; 

     var myLayer = L.geoJson().addTo(mymap); 
     myLayer.addData(geojsonFeature); 

     <!-- var geojsonLayer = new L.GeoJSON.AJAX("geojson_data.json", {style:myStyle}); --> 

     <!-- geojsonLayer.addTo(mymap); --> 

     var popup = L.popup(); 

     function onMapClick(e) { 
      popup 
       .setLatLng(e.latlng) 
       .setContent("You clicked the map at " + e.latlng.toString()) 
       .openOn(mymap); 
     } 

     mymap.on('click', onMapClick); 

    </script>

도움 주셔서 감사합니다.

출처

2016-07-07 Edson Barbosa

지오메트리 좌표를 반전해야합니다.

var geojsonFeature = { 
     "type": "Feature", 
     "properties": { 
      "name": "Coors Field", 
      "amenity": "Baseball Stadium", 
      "popupContent": "This is where the Rockies play!" 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [-0.09, 51.51] 
     } 
    };

은 여기 sample 보정

이를 가진이 here

출처

2016-07-07 15:02:43 YaFred

덕분에이 작업을 수행을 지정합니다. 하지만 leaflet-ajax collect json FeatureCollection이 작동하지 않습니다. –

[link] (http://jsfiddle.net/ve2huzxw/197/) 및 내 샘플 [link] (http://plnkr.co)에 지정된 예제를 따르십시오./편집/Y90ic8unce0cZOwzrG2w? p = info) –

죄송합니다, 이해가 안됩니다. 나는 아무 문제도 보지 않는다. 이 http://plnkr.co/edit/RtZL9YmlsTdbv3qJpW8e?p=preview를 보겠습니다. 원래 샘플 코드에 샘플 데이터를 추가했습니다. – YaFred

전단지는 geojson 기능으로 포인트를 표시하지 않습니까?

답변

관련 문제