Javascript 无法将GeoJSON导入Openlayers

我正在尝试将GeoJSON文件加载到OpenLayers web应用程序中，但我一辈子都不知道为什么这样做行不通。我有以下js代码：

import TileLayer from 'ol/layer/Tile.js';
var base_layer = new ol.layer.Group({
  'title': 'Base maps',
  layers: [
    new TileLayer({
      title: 'OSM Data',
      type: 'base',
      visible: true,
      source: new ol.source.OSM()
    })
  ]
});

var vector_overlays = new ol.layer.Group({
  'title': 'Vector Overlays',
  layers: [
    new ol.layer.Vector({
      title: 'Soum boundaries',
      visible: true,
      source: new ol.source.Vector({
        projection: 'EPSG:4326',
        url: 'geofiles/test.geojson',
        format: new ol.format.GeoJSON()
      })
    })
  ]
});

var map = new Map({
  layers: [base_layer, vector_overlays],
  target: 'map',
  view: new View({
  projection: 'EPSG:4326',
    center: [102.376126,48.031532],
    zoom: 6
  })
});

我不断得到与GeoJSON相关的以下错误：

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

GeoJSON具有以下结构（jsonlint称其为有效的GeoJSON）：

我已经查看了关于堆栈溢出的其他问题，但没有找到任何关于此错误的问题，我尝试使用此错误实现更通用json文件的解决方案，但fa没有起到任何作用。我不知道下一步该怎么办

更新

根据下面的有用建议，并注意到基于我的GeoJSON上传的geocodezip文件工作正常，我认为这肯定是一个MIME类型的问题。我现在得到：

剧本来自 ”“上膛了 即使其MIME类型（“text/html”）不是有效的JavaScript MIME 类型

---

我一直在研究如何让OpenLayers为GeoJSON mime类型工作，但还没有任何运气。

对于初学者，请检查此链接中的内容是否能引导您朝着正确的方向前进

如果此处没有任何帮助，请尝试更改geojson文件中的crs。由此：

{"type": "FeatureCollection",
"name": "soums",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
...

对此

{"type": "FeatureCollection",
"name": "soums",
"crs": { "type": "name", "properties": {"name":"EPSG:4326"} },
...

---

对于初学者，请检查此链接中的内容是否能引导您朝正确的方向前进

如果此处没有任何帮助，请尝试更改geojson文件中的crs。由此：

{"type": "FeatureCollection",
"name": "soums",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
...

对此

{"type": "FeatureCollection",
"name": "soums",
"crs": { "type": "name", "properties": {"name":"EPSG:4326"} },
...

---

定义

新ol.format.GeoJSON

时，适当设置

数据投影

和

功能投影

，并使用

ol.proj.fromlont

从

ESPG:4326

坐标设置

中心

format: new ol.format.GeoJSON({
  dataProjection: 'EPSG:4326',
  featureProjection: 'EPSG:3857'
})

代码片段：

html，
身体，
#地图{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}

var base_layer=新ol.layer.Group({
“标题”：“底图”，
图层：[
新ol.layer.Tile({
标题：“OSM数据”，
类型：'base'，
可见：对，
来源：new ol.source.OSM（）
})
]
});
var vector_overlays=新ol.layer.Group({
“标题”：“矢量覆盖”，
图层：[
新ol.layer.Vector({
标题：“区域边界”，
可见：对，
来源：新ol.source.Vector({
投影：‘EPSG:4326’，
网址：'https://api.myjson.com/bins/upkqh',
格式：新的ol.format.GeoJSON({
数据预测：“EPSG:4326”，
功能投影：“EPSG:3857”
})
})
})
]
});
var map=新ol.map({
层：[基础层，向量覆盖层]，
目标：“地图”，
视图：新ol.view({
中心：Lonlat的其他项目（[102.376126,48.031532]），
缩放：6
})
});

定义新的ol.format.GeoJSON时，适当设置

数据投影

和

特征投影

，并使用

ol.proj.fromlont

从

ESPG:4326

坐标设置

中心

format: new ol.format.GeoJSON({
  dataProjection: 'EPSG:4326',
  featureProjection: 'EPSG:3857'
})

代码片段：

html，
身体，
#地图{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}

var base_layer=新ol.layer.Group({
“标题”：“底图”，
图层：[
新ol.layer.Tile({
标题：“OSM数据”，
类型：'base'，
可见：对，
来源：new ol.source.OSM（）
})
]
});
var vector_overlays=新ol.layer.Group({
“标题”：“矢量覆盖”，
图层：[
新ol.layer.Vector({
标题：“区域边界”，
可见：对，
来源：新ol.source.Vector({
投影：‘EPSG:4326’，
网址：'https://api.myjson.com/bins/upkqh',
格式：新的ol.format.GeoJSON({
数据预测：“EPSG:4326”，
功能投影：“EPSG:3857”
})
})
})
]
});
var map=新ol.map({
层：[基础层，向量覆盖层]，
目标：“地图”，
视图：新ol.view({
中心：Lonlat的其他项目（[102.376126,48.031532]），
缩放：6
})
});

尝试在浏览器中打开geojson url，以确保服务正确（有时可能需要在MIME类型中设置geojson），您使用的是哪个版本的OpenLayers？您的GeoJSON看起来不错，粘贴时没有语法错误。我建议您编写代码，让我们更容易地发现问题。您可以在JS部分中单击“gear”图标添加OpenLayers库。目前我正在使用OpenLayers 5.3.0。关于代码笔，看起来很有用！我打开了它并在中复制了代码，但它没有标记任何内容。请尝试在浏览器中打开geojson url，以确保服务正确（有时

。可能需要在MIME类型中设置geojson

），您使用的OpenLayers版本是什么？您的GeoJSON看起来不错，粘贴时没有语法错误。我建议您编写代码，让我们更容易地发现问题。您可以在JS部分中单击“gear”图标添加OpenLayers库。目前我正在使用OpenLayers 5.3.0。关于代码笔，看起来很有用！我打开它并复制了代码，但它没有标记任何内容。啊，在发布我自己的问题之前，我已经阅读了关于GeoJSON的问题。不幸的是，没有帮助：（我试着在我的文件中更改EPSG，但它不起作用。）啊，在发布我自己的问题之前，我已经阅读了关于GeoJSON的问题。不幸的是，没有帮助：（我试着在我的文件中更改EPSG，但它不起作用。）你的“myjson”url也与问题中的原始all EPSG:4326设置完美配合。第一行第一个字符处的解析错误可能表明本地托管副本未按预期提供。我明白你的意思：（虽然我不知道“完美”，但瓷砖在我看来很长）.用你的l运行代码的重投影，你会得到最完美的结果