从 geojson 文件中的特征读取经纬度坐标，并在地图加载时设置为 openlayers 地图的中心

Question

我是打开图层的新手，目前在读取和绘制地图中心的经纬度时遇到问题。

我在 geojson 文件中有功能 ID，即 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
  })
});

Answer 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 && SSlong) {
    map.getView().setCenter(fromLonLat([SSlong, SSlat]);
  }
});

如果属性是字符串，你可能需要使用[Number(SSlong), Number(SSlat)]