geojson 坐标到直线

Question

I would like to show geojson point coordinates as a line on a leaflet map.我想将 geojson 点坐标显示为 leaflet map 上的一条线。 A simplified code with some test data looks like this:带有一些测试数据的简化代码如下所示：

<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>

The part "visualizer.sendDataToMap(..)" might seem strange but is needed for some reason. “visualizer.sendDataToMap(..)”部分可能看起来很奇怪，但出于某种原因需要。 I managed to show the points on the map.我设法展示了 map 上的点。 But what I need is to show them as line (connect the first point with the second, connect the second point with the third..).但我需要将它们显示为线（将第一个点与第二个点连接，将第二个点与第三个点连接......）。 I thought about writing the coordinates into an array which I then can use further in L.polyline() and use for some other calculations.我考虑将坐标写入一个数组，然后我可以在 L.polyline() 中进一步使用它并用于其他一些计算。 I tried with response.geometry.coordinates and fiddled around with "coordsToLatLng" and some other suggestions I found in the forum.我尝试了 response.geometry.coordinates 并摆弄了“coordsToLatLng”和我在论坛中找到的一些其他建议。 Maybe I need to loop through the coordinates, but I dont know how to do that.也许我需要遍历坐标，但我不知道该怎么做。 Could not get anything to work with my example.无法与我的示例一起使用。 Any hints would be appreciated.Thanks.任何提示将不胜感激。谢谢。

Answer 1

You can extract the coordinates from the geojson features by looping over geojson features array and mapping latitude and longitude.您可以通过遍历 geojson 要素数组并映射纬度和经度来从 geojson 要素中提取坐标。 Then you will end up with an array of latLngs which is what you want to create the lines between the marker coordinates.然后你会得到一个 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 坐标到直线

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-05-14 13:48:53

geojson 坐标到直线

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-05-14 13:48:53

解决方案1
0 已采纳 2021-05-14 13:48:53