在 React Native 中实现 Geojson 时出错

Question

我正在尝试在 React-Native 的地图上实现一个 Geojson 图层。

开发环境：

react-native-maps: 0.24.2,
世博会：33.0.0

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

覆盖
多边形和图标（使用图像）
Geojson

我觉得Geojson是在地图上实现这一层最简单直接的方法（Apple Maps for iOS and Google Maps for 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}/>
  )
}

错误：

Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of LightPollutionAtlas.

预期结果：

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

Answer 1

按如下方式更新您的 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>
)
}

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

Answer 2

Geojson 是 'react-native-geojson' 模块的一个组件。所以您需要导入该模块，将此行添加到您的 class 之上。

import Geojson from 'react-native-geojson';

另外 "if haven't already"，运行 npm install react-native-geojson，在你的项目文件夹中。

此外，正如我所注意到的（也许我错了）Geojson 不直接支持图像，因此，您可以尝试的一件事是将此代码添加到 [=15 的 return 中=]函数：

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

Answer 3

这是我解决问题的方法。从今天开始，在 react-native-maps v0.24.2 中，Geojson 不渲染图像。据我了解，react-native-maps 中的 Geojson 组件仅呈现点、多边形和折线。因此，我切换到 Overlay 组件以将图像定位在地图上的预定义坐标处（Apple Maps for iOS）。我还没有在 Android 上测试 Google 地图的解决方案，但我相信它应该可以正常工作。

我将代码分为两个部分： 1. 创建叠加层。 2. 创建包含上述叠加层的地图视图。

class PollutionOverlay extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    return(
      <View>

        <Overlay
        image={{ uri: 'valid URI'}}
        bounds={[[50.9375138445,-4.12507035],[42.4041839245,4.2499263]]}
        />

        <Overlay
        image={{ uri: 'valid URI`enter code here`'}}
        bounds={[[50.9375138445,4.2499263],[42.4041839245,12.62492295]]}
        />

      </View>

    )
  }
}

export default PollutionOverlay;

-------------------------------------

import PollutionOverlay from 'valid path';
class LightPollutionAtlas extends React.Component {

  constructor(props) {
    super(props);
  }

render() {


  return(
      <MapView
      style={styles.mapStyle}
      maxZoomLevel={9}
      >

      <PollutionOverlay />

      </MapView>

  )
}
}

const styles = StyleSheet.create({
  mapStyle: {
    flex: 1
  }
});

export default LightPollutionAtlas;

在 React Native 中实现 Geojson 时出错

Error while implementing Geojson in React Native

react-native

geojson

react-native-maps