Как визуализировать массив координат для линейной карты с помощью OpenLayers?

У меня есть конечная точка /geomap_data/, которую я использую для возврата 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.info('Moo')
                customer_sites = json;
            },
            async:false
        });
    
    console.info(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);
    
});

Я знаю, что могу преобразовать json customer_sites в 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%

Спасибо!

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
35
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Броооо это то, что я искал.. спасибо!! Как вы догадались сделать центр таким center: ol.proj.fromLonLat([-1, 53]),

RedRum 09.05.2022 13:01

Этот центр будет работать только с примерными данными. Лучше использовать map.getView().fit(features.getGeometry())

Mike 09.05.2022 13:05

хорошо попробую! Я заставил его работать с моими 2000 координатами, но карта выглядит очень уродливо, так что с этого момента только улучшения!!

RedRum 09.05.2022 13:17

Привет еще раз, как бы я использовал это map.getView().fit(features.getGeometry()) в коде, который вы предоставили? я продолжаю получать undefined error

RedRum 09.05.2022 15:04

Я обновил пример.

Mike 09.05.2022 15:20

Другие вопросы по теме