Считывает координаты широты и длины из объекта внутри файла geojson и устанавливает в качестве центра карты openlayers при загрузке карты

#openlayers

#openlayers

Вопрос:

Я новичок в открытых слоях и в настоящее время сталкиваюсь с проблемой чтения и отображения широты и длины в центре карты.

У меня есть идентификатор объекта внутри файла geojson, который есть slat и slong который я могу читать с помощью var SSlat= feature.get('sat') и var SSlong =feature.get('slong') который я вызываю внутри функции стиля.

Я получаю lat long для первого выполнения, в конце выполнения полной функции стиля var SSlong и var SSLat становятся неопределенными. пожалуйста, дайте мне знать, есть ли какой-либо способ обойти

 var SSlat;
var SSlong;

var styleFunction = function(feature) {
  SSlat=feature.get('slat');
  SSlong=feature.get('slong');
};

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new VectorLayer({
      source: new VectorSource({
        url:'http://127.0.0.1:8080/abc.geojson',
        crossOrigin:'null',
        projection: 'EPSG:3857',
        format: new GeoJSON(), 
      }),
      style: styleFunction
    })
  ],
  target: 'map',
  view: new View({
    center: [-9752120.04, 5132251.45],// here add lat and long which needs to be taken from geojson file
    zoom: 13
  })
});
  

Ответ №1:

Я бы центрировал карту по геометрии объекта при загрузке объекта. Если свойства slat и slong были разными и предпочтительными, вы могли бы использовать их вместо этого. Вы должны присвоить свой источник переменной, чтобы на нее было легче ссылаться.

 import {getCenter} from 'ol/extent.js';

let vectorSource = new VectorSource({
    url:'http://127.0.0.1:8080/abc.geojson',
    format: new GeoJSON(), 
  });

vectorSource.on('addfeature', function(e) {
  map.getView().setCenter(getCenter(e.feature.getGeometry().getExtent()));
});

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new VectorLayer({
      source: vectorSource,
      style: styleFunction
    })
  ],
  target: 'map',
  view: new View({
    center: [-9752120.04, 5132251.45],// here add lat and long which needs to be taken from geojson file
    zoom: 13
  })
});
  

Для центрирования использования slat и slong свойств объектов

 vectorSource.on('addfeature', function(e) {
  var SSlat = e.feature.get('slat');
  var SSlong = e.feature.get('slong');
  if (SSlat amp;amp; SSlong) {
    map.getView().setCenter(fromLonLat([SSlong, SSlat]);
  }
});
  

возможно, вам потребуется использовать [Number(SSlong), Number(SSlat)] , если свойство является строкой

Комментарии:

1. Спасибо, Майк, у меня есть тысячи координат широты и длины внутри файла geojson, в котором свойства slat и slog помогают мне центрировать карту, чтобы были видны другие значения широты и длины. Пожалуйста, дайте мне знать, как я могу их получить и установить в качестве центра из приведенного выше кода, а также где мне нужно разместить VectorSource.on(‘addfeature’, function(e) { map.getView().setCenter(getCenter(e.feature.getGeometry().getExtent()));}); в моем коде

2. Вы имеете в виду, что только один из ваших тысяч объектов имеет slat и slong свойства, и вы хотите найти и использовать это, или функции имеют разные значения, и вы хотите включить все?

3. в геометрии их тысячи, свойства slat и slong имеют по одному значению каждое. например, «Slat»: «1234.01477» » и Slong»: «-1234.89216», которые необходимо добавить в центр карты, и это свойство уникально и появляется только один раз в объекте внутри файла geojson

4. Вы можете центрироваться только в одной точке, поэтому вы не можете центрироваться на всех из них. Чтобы разместить все ваши объекты в представлении, вы можете использовать map.getView().fit(vectorSource.getExtent());

5. мне нужно центрироваться только в одной точке, а не во всех точках, и эта центральная точка хранится в slat и slong. например, центр: [-123.67, 34.45]. где у slat -123.67, а у slang — 34.5, пожалуйста, дайте мне знать