React native 在React Native中实现Geojson时出错

我正在尝试在React Native中的地图上实现一个

Geojson

层

发展环境：

• 反应本机映射：0.24.2
• 世博会：33.0.0

我尝试过以下三种方法，但都没有成功：

覆盖层

多边形和图标（使用图像）

Geojson

我觉得

Geojson

是在地图上实现这一层的最简单和直接的方法（苹果地图用于iOS，谷歌地图用于Android）。很遗憾，Geojson方法不起作用

我不知道如何为React Native创建codesandbox，但您可以在下面找到我的代码片段

displayLightPollutionLayer() {
  const features = {
    "type": "FeatureCollection",
    "name": "artificialNightSkyBrightness_example",
    "crs": { 
      "type": "name", 
      "properties": 
        { 
          "name": "urn:ogc:def:crs:OGC:1.3:CRS84" 
        }
      },
      "features": [
        {  
          "type": "Feature",
          "properties": 
            { 
              "Name": null, 
              "description": null, 
              "drawOrder": 15, 
              "icon": "https:\/\/nightskybrightness.s3.eu-west-3.amazonaws.com\/ArtificialSkyBrightness537.JPG" 
            }, 
          "geometry": 
            { 
              "type": "Polygon", 
              "coordinates": [ 
                [ 
                  [4.2499263, 50.937513844500003], 
                  [4.2499263, 42.404183924500003], 
                  [-4.12507035, 42.404183924500003], 
                  [-4.12507035, 50.937513844500003], 
                  [4.2499263, 50.937513844500003] 
                ] 
              ] 
            } 
        }
      ]
  }

  return (
    <Geojson geojson={features}/>
  )
}

displayLightPollutionLayer（）{
常量特征={
“类型”：“FeatureCollection”，
“名称”：“人造夜空亮度\u示例”，
“crs”：{
“类型”：“名称”，
“财产”：
{ 
“名称”：“urn:ogc:def:crs:ogc:1.3:CRS84”
}
},
“特点”：[
{  
“类型”：“功能”，
“财产”：
{ 
“名称”：空，
“描述”：空，
“提款单”：15，
“图标”：“https:\/\/nightskybrightness.s3.eu-west-3.amazonaws.com\/ArtificialSkyBrightness537.JPG”
}, 
“几何学”：
{ 
“类型”：“多边形”，
“坐标”：[
[ 
[4.2499263, 50.937513844500003], 
[4.2499263, 42.404183924500003], 
[-4.12507035, 42.404183924500003], 
[-4.12507035, 50.937513844500003], 
[4.2499263, 50.937513844500003] 
] 
] 
} 
}
]
}
返回(
)
}

错误：

不变冲突：不变冲突：不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查

LightPollutionAtlas

的渲染方法

预期结果：

---

图像应以预定义的坐标定位在整个地图上，并应可缩放。

更新您的

displayLightPollutionLayer

功能，如下所示，以绘制多边形

displayLightPollutionLayer(markers) {
const features = {
      "type": "FeatureCollection",
      "name": "artificialNightSkyBrightness_example",
      "crs": { "type": "name", "properties": { "name": 
      "urn:ogc:def:crs:OGC:1.3:CRS84" } },
      "features": [
        {
          "type": "Feature",
          "properties": {
            "Name": null,
            "description": null,
            "drawOrder": 15,
            "icon": "https:\/\/nightskybrightness.s3.eu-west- 3.amazonaws.com\/ArtificialSkyBrightness537.JPG"
          },
          "geometry": { 
            "type": "Polygon",
            "coordinates": [
              [
                [ 4.2499263, 50.937513844500003 ],
                [ 4.2499263, 42.404183924500003 ],
                [ -4.12507035, 42.404183924500003 ],
                [ -4.12507035, 50.937513844500003 ],
                [ 4.2499263, 50.937513844500003 ]
              ]
            ]
          } 
        }
      ]
    }
   return (<Polygon
      coordinates={this.getCoordinates(features)}
      title={marker.title}
      description={marker.description}
    />);
}

getCoordinates(features) {
     let updatedFeatures = features.features[0].geometry.coordinates.map((coordinate) => {latitude: coordinate[0], longitude: coordinate[1]});
     return updatedFeatures;
}

render() {
    return (
<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.displayLightPollutionPolygonLayer()}
</MapView>
)
}

displayLightPollutionLayer（标记）{
常量特征={
“类型”：“FeatureCollection”，
“名称”：“人造夜空亮度\u示例”，
“crs”：{“类型”：“名称”，“属性”：{“名称”：
“urn:ogc:def:crs:ogc:1.3:CRS84”}，
“特点”：[
{
“类型”：“功能”，
“财产”：{
“名称”：空，
“描述”：空，
“提款单”：15，
“图标”：“https:\/\/nightskybrightness.s3.eu-west-3.amazonaws.com\/ArtificialSkyBrightness537.JPG”
},
“几何学”：{
“类型”：“多边形”，
“坐标”：[
[
[ 4.2499263, 50.937513844500003 ],
[ 4.2499263, 42.404183924500003 ],
[ -4.12507035, 42.404183924500003 ],
[ -4.12507035, 50.937513844500003 ],
[ 4.2499263, 50.937513844500003 ]
]
]
} 
}
]
}
返回（）；
}
获取坐标（特征）{
让updatedFeatures=features.features[0]。geometry.coordinates.map（（坐标）=>{纬度：坐标[0]，经度：坐标[1]}）；
返回更新的特征；
}
render（）{
返回(
{this.displayLightPollutionPolygonLayer（）}
)
}

---

我已经更新了逻辑，请添加所有必要的验证以避免意外的崩溃。

更新您的

displayLightPollutionLayer

函数，如下所示，以绘制多边形

displayLightPollutionLayer(markers) {
const features = {
      "type": "FeatureCollection",
      "name": "artificialNightSkyBrightness_example",
      "crs": { "type": "name", "properties": { "name": 
      "urn:ogc:def:crs:OGC:1.3:CRS84" } },
      "features": [
        {
          "type": "Feature",
          "properties": {
            "Name": null,
            "description": null,
            "drawOrder": 15,
            "icon": "https:\/\/nightskybrightness.s3.eu-west- 3.amazonaws.com\/ArtificialSkyBrightness537.JPG"
          },
          "geometry": { 
            "type": "Polygon",
            "coordinates": [
              [
                [ 4.2499263, 50.937513844500003 ],
                [ 4.2499263, 42.404183924500003 ],
                [ -4.12507035, 42.404183924500003 ],
                [ -4.12507035, 50.937513844500003 ],
                [ 4.2499263, 50.937513844500003 ]
              ]
            ]
          } 
        }
      ]
    }
   return (<Polygon
      coordinates={this.getCoordinates(features)}
      title={marker.title}
      description={marker.description}
    />);
}

getCoordinates(features) {
     let updatedFeatures = features.features[0].geometry.coordinates.map((coordinate) => {latitude: coordinate[0], longitude: coordinate[1]});
     return updatedFeatures;
}

render() {
    return (
<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.displayLightPollutionPolygonLayer()}
</MapView>
)
}

displayLightPollutionLayer（标记）{
常量特征={
“类型”：“FeatureCollection”，
“名称”：“人造夜空亮度\u示例”，
“crs”：{“类型”：“名称”，“属性”：{“名称”：
“urn:ogc:def:crs:ogc:1.3:CRS84”}，
“特点”：[
{
“类型”：“功能”，
“财产”：{
“名称”：空，
“描述”：空，
“提款单”：15，
“图标”：“https:\/\/nightskybrightness.s3.eu-west-3.amazonaws.com\/ArtificialSkyBrightness537.JPG”
},
“几何学”：{
“类型”：“多边形”，
“坐标”：[
[
[ 4.2499263, 50.937513844500003 ],
[ 4.2499263, 42.404183924500003 ],
[ -4.12507035, 42.404183924500003 ],
[ -4.12507035, 50.937513844500003 ],
[ 4.2499263, 50.937513844500003 ]
]
]
} 
}
]
}
返回（）；
}
获取坐标（特征）{
让updatedFeatures=features.features[0]。geometry.coordinates.map（（坐标）=>{纬度：坐标[0]，经度：坐标[1]}）；
返回更新的特征；
}
render（）{
返回(
{this.displayLightPollutionPolygonLayer（）}
)
}

---

我已经更新了逻辑，请添加所有必要的验证以避免意外的崩溃。

Geojson

是“react native Geojson”模块的一个组件。因此，您需要导入该模块，在类的顶部添加这一行

import Geojson from 'react-native-geojson';

另外，“如果尚未”，请在项目文件夹中运行

npm install react native geojson

另外，正如我所注意到的（可能我错了）

Geojson

不直接支持图像，因此，您可以尝试添加此代码以返回

displayLightPollutionLayer

函数：

return (
  <Geojson geojson={features}>
          <Image source="https:\/\/nightskybrightness.s3.eu-west-3.amazonaws.com\/ArtificialSkyBrightness537.JPG" style = {{flex:1}}/>
  </Geojson>
)

返回(
)

Geojson

是“react native Geojson”模块的一个组件。因此，您需要导入该模块，在类的顶部添加这一行

import Geojson from 'react-native-geojson';

也可以是“如果h