使用草坪和传单

问题描述 投票:0回答:3

我制作了一张传单地图,并正在尝试实施草皮。 作为一项快速测试,我只想在我的一个标记周围放置一个缓冲区。但不知何故,我仍然只能看到地图上的两个标记。我基本上按照该文档中的步骤进行操作。 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/[email protected]/dist/leaflet.css" />   
      <script src="https://unpkg.com/[email protected]/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/[email protected]/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 &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> 
leaflet
3个回答
1
投票

Turf 使用 geojson,geojson 的坐标格式为 lnglat,leaflet 的坐标格式为 latlng。

您必须在

turf.point
功能中交换坐标:

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

更新

同时删除以下内容:

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

并将

meter
更改为
meters

 {units: 'meters'}

演示


1
投票

请注意,传单使用 [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/

我还想添加一条注释。在地理坐标系使用缓冲区或执行其他与距离相关的任务可能非常不准确。仅当您并不真正关心准确性时才应该使用它。


0
投票

tuf.js 没有像米这样的单位,所以应该是米。

turf.buffer 采用 geojson、半径和其他选项(如单位)作为输入,因此 turf.point 将坐标转换为 geojson。

您可以查看参考https://turfjs.org/docs/#buffer

© www.soinside.com 2019 - 2024. All rights reserved.