尝试将用户选择的 json 数据加载到 openlayers 上

问题描述 投票:0回答:1

我正在尝试编写代码,允许用户选择 json 文件并在 openlayers 中的地图顶部创建一个图层,允许用户选择他们想要的 json 文件的能力有效,并且 json 文件本身是正确的,我用来根据 json 文件创建图层的代码位于下面,但是我解决了这个问题的朋友说我没有使用正确的函数将数据加载到图层上。

我查看了来自 https://gis.stackexchange.com/questions/134688/add-geojson-layer-to-openlayers-3从 API 到向量层 openlayers JSON 的信息,以及 geojson 本身和来自看起来似乎都表明创建 Vectorsource 和 Vectorlayer 然后使用 addlayer 函数添加它就是加载数据的方式。我认为 readFeatures 函数允许 VectorSource 读取 json 文件的特征,而 addLayer 则加载数据。我也尝试使用 vectorSource.addFeatures 函数,但无济于事。我仍在阅读所有 API 文档,但我没有看到任何与我一直使用的代码相矛盾的内容。

    const vectorSource = new VectorSource({features: new GeoJSON().readFeatures(json, { featureProjection: 'EPSG:3857' }),});
    const vectorLayer = new VectorLayer({ source: vectorSource });

    // Add the vector layer to the map
    map.addLayer(vectorLayer);`

***更新*** 我不应该修改给定的 json 文件,但作为测试,我创建了一个基本点 json 文件,如下所示,该点显示出来。然而有趣的是,如果我将坐标更改为下面的 json,则不会再显示任何内容(即 [10, 5]、[10,0]、[0,10] 等)。另外,虽然我们应该使用的实际 json 文件更复杂,但我已经确认这不是问题,因为我的朋友能够成功使用它,我们不应该修改它。

{
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [0, 0]
        },
        "properties": {
          "name": "Test Point"
        }
      }
    ]
  }
reactjs typescript openlayers geojson
1个回答
0
投票

如果您使用的数据不是 geoJSON 格式,则会遇到问题。上面例子的两个坐标是[0,0],当然地图上不会有标记

© www.soinside.com 2019 - 2024. All rights reserved.