OpenLayer 6.3.1 在地图上显示 GeoJson 数据的问题答案

【问题标题】：OpenLayer 6.3.1 problem displaying GeoJson data on the mapOpenLayer 6.3.1 在地图上显示 GeoJson 数据的问题
【发布时间】：2020-07-03 11:36:13
【问题描述】：

我对 openlayer geojson 有疑问。我正在尝试在地图中显示数据，但我没有尝试任何方法。

我需要更改哪些内容才能在地图上显示数据？

代码：

 var map = new Map({
  controls: defaultControls().extend([
    new FullScreen()
  ]),
  interactions: defaultInteractions().extend([
    new DragRotateAndZoom()
  ]),
  target: 'map',
  view: new View({
    center: [32.2128100772116, -7.92209407500733],
    zoom: 5
  }),
});

var vectorSource = new VectorSource({
  features: (new GeoJSON()).readFeatures(this.geojsonObject)
});

var vectorLayer = new VectorLayer({
  source: vectorSource,
  visible: true
});
this.map.addLayer(vectorLayer);

geoJson 数据：

geojsonObject = {
'type': 'Feature',
'geometry': {
  'type': 'MultiPolygon',
  'coordinates': [

    [[
      [
        33.3984375,
        37.16031654673677
      ],
      [
        -11.25,
        27.68352808378776
      ],
      [
        14.765625,
        -10.833305983642491
      ],
      [
        48.515625,
        5.61598581915534
      ],
      [
        58.00781249999999,
        28.92163128242129
      ],
      [
        48.515625,
        37.43997405227057
      ],
      [
        33.3984375,
        37.16031654673677
      ]
    ]]
  ]
}
};

【问题讨论】：

在视图选项中指定projection: 'EPSG:4326',（除非您需要不同的投影，在这种情况下您必须转换中心和特征几何）

标签： javascript openlayers openlayers-3 openlayers-6 angular-openlayers

【解决方案1】：

正如 Mike 在他的评论中指出的那样，您需要在视图选项中添加 projection: 'EPSG:4326'。

  var map = new Map({
    controls: defaultControls().extend([
      new FullScreen()
    ]),
    interactions: defaultInteractions().extend([
      new DragRotateAndZoom()
    ]),
    target: 'map',
    view: new View({
      projection: 'EPSG:4326',
      center: [32.2128100772116, -7.92209407500733],
      zoom: 2
    }),
  });

proof of concept fiddle (using the legacy build: os.js)

code sn-p（再次使用旧版本：os.js）：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.map {
  height: 70%;
  width: 100%;
}

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v6.3.1/css/ol.css" type="text/css">
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
  geojsonObject = {
    'type': 'Feature',
    'geometry': {
      'type': 'MultiPolygon',
      'coordinates': [
        [ [ [ 33.3984375,37.16031654673677],[-11.25,27.68352808378776],[ 14.765625, -10.833305983642491],[ 48.515625,5.61598581915534],[ 58.00781249999999,28.92163128242129],[ 48.515625,37.43997405227057],[33.3984375,37.16031654673677] ] ]
      ]
    }
  };
  var map = new ol.Map({
    controls: ol.control.defaults().extend([
      new ol.control.FullScreen()
    ]),
    interactions: ol.interaction.defaults().extend([
      new ol.interaction.DragRotateAndZoom()
    ]),
    target: 'map',
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [32.2128100772116, -7.92209407500733],
      zoom: 2
    }),
  });

  var vectorSource = new ol.source.Vector({ // VectorSource({
    features: (new ol.format.GeoJSON()).readFeatures(this.geojsonObject)
  });

  var vectorLayer = new ol.layer.Vector({ //VectorLayer({
    source: vectorSource,
    visible: true
  });
  map.addLayer(vectorLayer);
</script>

【讨论】：