打开图层地图不加载GeoJSON

Question

尝试使用我从QGIS导出的我自己的GeoJSON文件创建Web地图，但它似乎不起作用，我不知道为什么？

这是我的js文件：

var islandStyle = new ol.style.Style({
  fill: new ol.style.Fill({
    color: [20, 20, 80, 1]
  }),
  stroke: new ol.style.Stroke({
    color: [127,127,127,1.0],
    width: 1,
    lineJoin: 'round'
  })
});

var islands = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    projection: 'EPSG:3857',
    url: 'yep.geojson'
  }),
  style: islandStyle
});

var map = new ol.Map({
  target: 'map',
  layers: [islands],
  view: new View({
    center: [0, 0],
    zoom: 1
  })
});

和geoJSON：

{
"type": "FeatureCollection",
"name": "yep",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 0, "Name": "Mainland" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -0.68616423, 0.37457818 ], [ -0.67716535, 0.46231721 ], [ -0.62092238, 0.56355456 ], [ -0.45444319, 0.65354331 ], [ -0.21822272, 0.66254218 ], [ 0.05624297, 0.6287964 ], [ 0.18672666, 0.4015748 ], [ 0.16422947, 0.03712036 ], [ -0.12373453, -0.4015748 ], [ -0.53543307, -0.20809899 ], [ -0.68391451, 0.09111361 ], [ -0.68616423, 0.37457818 ] ] ] ] } },
{ "type": "Feature", "properties": { "id": 0, "Name": "Outer" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 0.43865453, 0.0574541 ], [ 0.4226662, 0.51152271 ], [ 0.20842256, 0.78652201 ], [ -0.12413473, 0.93041699 ], [ -0.42471536, 0.94000999 ], [ -0.677331, 1.03593998 ], [ -0.658145, 1.15425363 ], [ -0.4215177, 1.15425363 ], [ 0.08051591, 1.12547463 ], [ 0.40028254, 0.99756798 ], [ 0.63690984, 0.75774301 ], [ 0.74882816, 0.32925573 ], [ 0.71045616, -0.13440588 ], [ 0.52818919, -0.70359048 ], [ 0.1572599, -0.98178744 ], [ -0.40872703, -0.94981078 ], [ -0.60058701, -0.72917181 ], [ -0.52384302, -0.58527683 ], [ -0.25843672, -0.68440448 ], [ 0.00377192, -0.66202082 ], [ 0.29795721, -0.53411416 ], [ 0.40028254, -0.21434754 ], [ 0.43865453, 0.0574541 ] ] ] ] } }
]
}

Answer 1

您使用的是哪个版本的OpenLayers？如果是版本3.5.0或更高版本ol.source.GeoJSON被ol.source.Vector和格式选项取代：

var islands = new ol.layer.Vector({
  source: new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: 'yep.geojson'
  }),
  style: islandStyle
});