geojson坐标到线

Question

我想在传单地图上将 geojson 点坐标显示为一条线。带有一些测试数据的简化代码如下所示：

<html>
  <head>  
    <!-- Load leaflet library and use its styling css        -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js">  </script>
    
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />  //not included
    
  </head>
  <body>
    <div class="pagewrapper">
        <div id="map"></div>
        <button onclick="myFunction()">Click me</button>
    </div>
    <script type="text/javascript">

    //add map and set view
    var map =  L.map('map').setView([48.8,13.03],6);
      
    // add background layer "opentopomap"
    var backgroundlayer = L.tileLayer ('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png');
    map.addLayer(backgroundlayer);
  
    //get geojson data
    function myFunction() {
        $.ajax({
        type: 'GET',
        dataType:"json",
        url: "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_populated_places.geojson",
        method: 'GET',
              success: function(response) {
            visualizer.sendDataToMap(response);
              },
              error:function(error) {
              }
            });
        
        var visualizer = {};

    //make geojson object and add to map  
        visualizer.sendDataToMap = function(jsonData) {
            L.geoJson(jsonData).addTo(map);;
             };
        };

    </script>
  </body>
</html>

“visualizer.sendDataToMap(..)”部分可能看起来很奇怪，但由于某些原因需要它。我设法在地图上显示了这些点。但我需要的是将它们显示为线（将第一个点与第二个点连接，将第二个点与第三个点连接..）。我想过将坐标写入一个数组，然后我可以在 L.polyline() 中进一步使用它并用于其他一些计算。我尝试使用 response.geometry.coordinates 并摆弄“coordsToLatLng”和我在论坛中找到的其他一些建议。也许我需要遍历坐标，但我不知道该怎么做。无法对我的示例进行任何处理。任何提示都是 appreciated.Thanks.

Answer 1

您可以通过遍历 geojson 要素数组并映射经纬度来从 geojson 要素中提取坐标。然后你将得到一个 latLngs 数组，这就是你想要在标记坐标之间创建线条的内容。

  //make geojson object and add to map  
        visualizer.sendDataToMap = function(jsonData) {
          console.log(jsonData)
          L.geoJson(jsonData).addTo(map);
          const latlngs = jsonData.features.map(feature => [feature.properties.LATITUDE, feature.properties.LONGITUDE]);
          L.polyline(latlngs, {
            color: 'red'
          }).addTo(map);

        };
      };

Demo

geojson坐标到线

geojson coordinates to line

coordinates

geojson

leaflet