Использование газона с листовкой

#leaflet

#листовка

Вопрос:

Я создал карту листовок и пытался реализовать turf. В качестве быстрого теста я просто хотел поместить буфер вокруг одного из моих маркеров. Но почему-то я все еще вижу только два маркера на своей карте. Я в основном следовал инструкциям из этого документа. https://lib.dr.iastate.edu/gis_tasksheets/3 / Я не уверен, где я допустил ошибку, надеюсь, кто-нибудь сможет мне сказать.

 <!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title>Leaflet Map"</title>
      <!-- leaflet.css, leaflet.js, turf.js von externer Quelle einbinden -->
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />   
      <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <!-- Load Leaflet code library-->
      <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js'></script>  <!-- Load Omnivore to convert CSV to GeoJSON format -->
      <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script><!-- Load jQuery and PapaParse to read data from a CSV file -->
      <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
      <script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
      
      <script>
      var buffered = turf.buffer(point);                                    
      </script>
   </head>
   <body>
      <div id='Karte' style='height: 800px; width: 100%;'></div> 
     
     
    <script type='text/javascript'>
         
        var Karte = L.map('Karte').setView([48.896465, 10.996526], 13);  
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         'attribution':  'Kartendaten amp;copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
         'useCache': true
         }).addTo(Karte);       
        
        
        var marker1 = L.marker([48.896465, 10.996526]).addTo(Karte);    
        var marker2 = L.marker([48.892750, 10.990300]).addTo(Karte);
    
        
        var point = turf.point([48.896465, 10.996526]);              
        var buffered = turf.buffer(point, 50, {units: 'meter'});
        buffer = L.geoJSON(buffered);
        buffer.addTo(Karte); 
        
     </script>
   </body>
</html>

Ответ №1:

Turf использует geojson, а geojson имеет формат координат lnglat, листовка имеет latlng.

Вы должны поменять местами свои координаты в turf.point функции:

   var point = turf.point([10.996526,48.896465]);

Обновить

Удалите также следующее:

       <script>
      var buffered = turf.buffer(point);                                    
      </script>

И измените meter на meters

  {units: 'meters'}

ДЕМОНСТРАЦИЯ

Ответ №2:

Будьте осторожны, листовка работает с координатами [lat, lon], в то время как GeoJSON (и turf) — [lon, lat].

     var coords1 = [48.896465, 10.996526];
    var coords2 = [48.892750, 10.990300];
    
    var marker1 = L.marker(coords1).addTo(Karte);    
    var marker2 = L.marker(coords2).addTo(Karte);
    
    //add buffers
    
    var point1 = turf.point([coords1[1], coords1[0]]);
    var buffered1 = turf.buffer(point1, 50, {units: 'meters'})
    L.geoJSON(buffered1).addTo(Karte);
    
    var point2 = turf.point([coords2[1], coords2[0]]);
    var buffered2 = turf.buffer(point2, 50, {units: 'meters'})
    L.geoJSON(buffered2).addTo(Karte);

Проверьте скрипку: https://jsfiddle.net/rp1320mf /

Я также хотел бы добавить примечание. Работа с буферами или выполнение других задач, связанных с расстоянием, могут быть очень неточными в географических системах координат. Вы должны использовать его, только если вы действительно не заботитесь о точности.