无法将 GeoJSON 导入 Openlayers

Question

我正在尝试将 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）：

{"type": "FeatureCollection",
"name": "soums",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "ID": 1104, "OBJECTID": 25, "AREA_M2": 156387542.76619899, "LENGTH_M": 49278.986543539999, "TYPE": 3, "NAME": "Bagaxangai", "NAME_L1": "??????????", "PARENT_ID": 11, "UNIT_STATU": 2, "SHAPE_AREA": 0.01862, "SHAPE_LEN": 0.54868 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 107.488336568318374, 47.436899185450194 ], [ 107.489774709328984, 47.434026718450731 ], [ 107.495859151369757, 47.424669266453314 ], [ 107.499013906391355, 47.419637680454585 ], [ 107.500501638401317, 47.417390823455229 ], [ 107.500936513403644, 47.41711235045544 ], [ 107.505739217436854, 47.409326553457433 ], [ 107.509119039460501, 47.40374183745881 ], [ 107.516798024514614, 47.39104652446202 ], [ 107.519193654531065, 47.387380600463018 ], [ 107.528028493593624, 47.373025894466807 ], [ 107.528253560595189, 47.372671127466873 ], [ 107.529497152604023, 47.37064552346741 ], [ 107.529825216606397, 47.370115280467537 ], [ 107.530122762608514, 47.369634628467644 ], [ 107.53040505061054, 47.369176865467786 ], [ 107.541345601688874, 47.351480484472447 ], [ 107.551515584762541, 47.33506202747683 ], [ 107.552148824767386, 47.333909988477139 ], [ 107.552873616772274, 47.332963943477417 ], [ 107.554182058780611, 47.331571579478023 ], [ 107.554227834781955, 47.33090782247799 ], [ 107.545320516743928, 47.328996658473685 ], [ 107.532812124690608, 47.32650184646765 ], [ 107.530157094679709, 47.325731277466389 ], [ 107.519140249633281, 47.323453903461136 ], [ 107.509058004591253, 47.32120323245644 ], [ 107.50864983158958, 47.321115494456251 ], [ 107.50836754358842, 47.321054459456093 ], [ 107.50619698157935, 47.320600510455115 ], [ 107.504934316574094, 47.320329666454512 ], [ 107.501577382560143, 47.319620132452954 ], [ 107.50076866655678, 47.319448471452539 ], [ 107.500165944554411, 47.319250107452284 ], [ 107.499048238549975, 47.318880081451738 ], [ 107.497632985544101, 47.318574905451086 ], [ 107.497129445542029, 47.318468094450893 ], [ 107.472394948440453, 47.313173294439565 ], [ 107.440416341310964, 47.306631088425306 ], [ 107.434911733288885, 47.305501938422907 ], [ 107.417737966220656, 47.301958084415411 ], [ 107.394849782080144, 47.332387924406603 ], [ 107.393877034074279, 47.333669662406223 ], [ 107.392713552066866, 47.335481644405839 ], [ 107.388719564042603, 47.340860367404282 ], [ 107.376668934970681, 47.356714249399715 ], [ 107.370676045934985, 47.364812851397481 ], [ 107.362928395889284, 47.375173569394597 ], [ 107.357919697859273, 47.382310867392746 ], [ 107.351121906820339, 47.390932083390197 ], [ 107.346796040794445, 47.397344589388624 ], [ 107.347578053794678, 47.399400711388992 ], [ 107.353464131796457, 47.414918900391712 ], [ 107.356546406795289, 47.424524307393213 ], [ 107.402032856952559, 47.441427231412383 ], [ 107.428442006072856, 47.432771683423468 ], [ 107.488336568318374, 47.436899185450194 ] ] ] ] } }
]
}

我查看了有关 Stack Overflow 的其他问题，但无法找到任何有关此错误的信息，我尝试使用此错误为更通用的 json 文件实施解决方案，但没有任何效果.我不知道下一步该做什么！

Link to GeoJSON file

更新

根据以下有用的建议并注意到基于我的 GeoJSON 上传的文件 geocodezip 有效，我认为这绝对是 MIME 类型问题。我现在得到：

脚本来自 “http://localhost:1234/04d3cf9866d7a5d5ca27b8351f6969ac.js”已加载 即使它的 MIME 类型（“text/html”）不是有效的 JavaScript MIME 输入。

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

Answer 1

定义new ol.format.GeoJSON 时，适当设置dataProjection 和featureProjection，并使用ol.proj.fromLonLat 从ESPG:4326 坐标设置center。

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

var map = new ol.Map({
    layers: [base_layer, vector_overlays],
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([102.376126, 48.031532]),
      zoom: 6
    })
  });

proof of concept page

代码 sn-p：

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

<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>

<div id="map" class="map"></div>
<script>
  var base_layer = new ol.layer.Group({
    'title': 'Base maps',
    layers: [
      new ol.layer.Tile({
        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: 'https://api.myjson.com/bins/upkqh',
          format: new ol.format.GeoJSON({
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:3857'
          })
        })
      })
    ]
  });

  var map = new ol.Map({
    layers: [base_layer, vector_overlays],
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([102.376126, 48.031532]),
      zoom: 6
    })
  });
</script>

Answer 2

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

How to get GeoJSON into OpenLayers?

如果这里没有任何帮助，请尝试更改 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"} },
...