如何使用 OpenLayers 渲染线图的坐标数组？

Question

我有一个端点 /geomap_data/，我正在使用它来 return customer_sites 在浏览器的控制台登录中显示以下内容 Sites Coordinates, Customer coordinates:

0: "[53.50119612705815, -1.1270833894501477], [53.34474, -3.01101]"
1: "[53.50119612705815, -1.1270833894501477], [53.34474, -3.01101]"
2: "[52.04061648544843, -0.6655072691644374], [51.90829, -0.5127]"
3: "[52.04061648544843, -0.6655072691644374], [51.90829, -0.5127]"
4: "[52.04061648544843, -0.6655072691644374], [51.90829, -0.5127]"

我可以使用下面的代码和假坐标渲染一张只有 1 条线的地图：

 $(document).ready(function(){
        var customer_sites = [];
        $.ajax({
            dataType: 'json',
            url: '/geomap_data/',
            success: function(json) {
                console.log('Moo')
                customer_sites = json;
            },
            async:false
        });
    
    console.log(customer_sites);
    
    var map = new ol.Map({
        target: 'GeoMap',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([3.8, 51.1]),
          zoom: 10
        })
      });
      var myView = map.getView();
      var myStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'blue',
          width: 5
        })
      });
      var myVectorSource = new ol.source.Vector();
      var point1 = ol.proj.transform([3.8, 51.20], 'EPSG:4326', 'EPSG:3857');
      var point2 = ol.proj.transform([4, 51], 'EPSG:4326', 'EPSG:3857');
      var points = [point1, point2];
      var myLine = new ol.geom.LineString(points);
      
      var myproj = myView.getProjection();
      var length = ol.sphere.getLength(myLine);
      
      var segment = new ol.Feature({
        geometry: myLine,
        style: myStyle
      });
      
      myVectorSource.addFeature(segment);
      // Create vector layer attached to the vector source.
      var vectorLayer = new ol.layer.Vector({
        source: myVectorSource,
        style: myStyle
      });
      
      // Add the vector layer to the map.
      map.addLayer(vectorLayer);
    
});

我知道我可以使用以下代码将 customer_sites json 转换为 Geojson：

geojsonObject = {
    'type': 'FeatureCollection',
    'crs': {
        'type': 'name',
        'properties': {
            'name': 'EPSG:3857',
        },
    },
    'features': [
        {
            'type': 'Feature',
            'geometry': {
                'type': 'MultiLineString',
                'coordinates': customer_sites
            },
        }
    ]
};

然后我应该能够读取 GeoJson 并使用以下方法将其添加到矢量图层：

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: new ol.format.GeoJSON().readFeatures(geojsonObject)
    }),

但是 customer_sites 不起作用..

我想是因为坐标 "[53.50119612705815, -1.1270833894501477], [53.34474, -3.01101]" 绕错了，它们不在嵌套数组中？虽然我不是 100% 确定

谢谢！

Answer 1

您可以将数据直接解析为 MultiLineString 几何图形。使用.reverse()调换坐标顺序。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      var data = [
        "[53.50119612705815, -1.1270833894501477], [53.34474, -3.01101]",
        "[53.50119612705815, -1.1270833894501477], [53.34474, -3.01101]",
        "[52.04061648544843, -0.6655072691644374], [51.90829, -0.5127]",
        "[52.04061648544843, -0.6655072691644374], [51.90829, -0.5127]",
        "[52.04061648544843, -0.6655072691644374], [51.90829, -0.5127]"
      ];
      var features = new ol.Feature(
        new ol.geom.MultiLineString(
          data.map(function(row) { 
            return JSON.parse('[' + row + ']').map(function(coordinate) {
              return coordinate.reverse();
            });
          })
        ).transform('EPSG:4326', 'EPSG:3857')
      );
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Vector({
            source: new ol.source.Vector({
              features: [features]
            }),
            style: new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: 'blue',
                width: 5
              })
            })
          })
        ],
        view: new ol.View()
      });
      map.getView().fit(features.getGeometry());
    </script>
  </body>
</html>

如何使用 OpenLayers 渲染线图的坐标数组？

How to render Array of coordinates for line map using OpenLayers?

openlayers

openstreetmap

geojson

openlayers-3