Openlayers 4.3.1未显示我的GeoJSON图层

时间:2017-12-29 10:30:00

标签: gis openlayers geojson

我想用Openlayers 4.3.1显示GeoJSON文件中的图层,但结果(vectorLayer变量)显示空白页面。我错过了什么?

GeoJSON文件位于https://gist.githubusercontent.com/abdounasser202/5d830738ad29e6395743530545bd322b/raw/0c34d9a1ced1879432318b6860c1c21e8e88ef04/quartiers_yaounde.geojson

这是我的JS代码

    var styles = {
   'Polygon': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'grey',
       width: 1
     }),
     fill: new ol.style.Fill({
       color: 'rgba(0, 0, 255, 0.1)'
     })
   }),
  };

  var styleFunction = function(feature) {
   return styles[feature.getGeometry().getType()];
  };

  var geojsonObject = 'https://gist.githubusercontent.com/abdounasser202/5d830738ad29e6395743530545bd322b/raw/0c34d9a1ced1879432318b6860c1c21e8e88ef04/quartiers_yaounde.geojson';
  console.log("geodata >>> ", geojsonObject);

  var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: geojsonObject
    });

  var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: styleFunction
  });

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  // var extent_degree = [11.4095, 3.71349, 11.5747, 3.9692];

  var map = new ol.Map({
   layers: [vectorLayer],
   target: 'map',
   view: new ol.View({
      // projection: 'EPSG:4326',
      center: ol.proj.fromLonLat([11.5021, 3.8480]),
      zoom: 6
   })
  });

  // ol.proj.get('EPSG:4326').setExtent(extent_degree)

  var units = map.getView().getProjection().getUnits();
  console.log("units >>> ", units);

  var projections = map.getView().getProjection();
  console.log("projections >>> ", projections);

1 个答案:

答案 0 :(得分:0)

根据您的代码,您正在设置多边形样式,但没有其他几何类型。因此,您只会在地图上看到多边形。其他几何类型将不可见,因为它们没有样式。 GeoJSON文件不包含多边形,所以确实你不会看到任何东西。

据我所知,GeoJSON文件只包含MultiPolygons。要使它们可见,请为“MultiPolygon”添加样式。在变量样式中,或者只是更改字符串' Polygon'在您的代码中“MultiPolygon'”