【问题标题】:Openlayers 4.3.1 is not showing my GeoJSON layerOpenlayers 4.3.1 没有显示我的 GeoJSON 层
【发布时间】:2017-12-29 10:29:59
【问题描述】:

我想使用 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);

【问题讨论】:

    标签: gis openlayers geojson


    【解决方案1】:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-06-29
      相关资源
      最近更新 更多