Листовка не указывает точку с geojsonFeatures?

Я начинаю работу с API-интерфейса Leaflet и надеюсь добавить некоторые точки геометрии на карту клиента, используя данные GeoJson. В настоящее время я использовал здесь geojsonFeaturehttp://leafletjs.com/examples/quick-start.html Листовка не указывает точку с geojsonFeatures?

Но, когда я выполняю такие шаги, чтобы добавить функции, они не отображаются. Ниже приведена страница и код 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

спасибо, что делает работу. Но с листом-ajax собирать json FeatureCollection не работает –

следуйте примеру, указанному в [link] (http://jsfiddle.net/ve2huzxw/197/), и мой пример его на [link] (http://plnkr.co/edit/Y90ic8unce0cZOwzrG2w? p = info) –

Извините, я не понимаю. Я не вижу никаких проблем. Посмотрите на это http://plnkr.co/edit/RtZL9YmlsTdbv3qJpW8e?p=preview, где я только что добавил ваши образцы данных в ваш исходный фрагмент. – YaFred

Листовка не указывает точку с geojsonFeatures?

ответ

Смежные вопросы