Question

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

开发环境：

react-native-maps：0.24.2，
博览会：33.0.0

我尝试了以下三种方法，但未成功：

重叠
多边形和图标（使用图片）
Geojson

我认为Geojson是在地图（iOS的Apple Maps和Android的Google Maps）上实现此图层的最简单直接的方法。不幸的是，Geojson方法无法正常工作。

我不知道如何为React Native创建一个codeandbox，但是您会在下面找到我的代码段。

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}/>
  )
}

错误：

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

预期结果：

图像应在地图上的所有位置处都位于预定义的坐标处，并且应该可缩放。

Answer 1

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>
)

Answer 2

这是我解决问题的方式。到目前为止，在react-native-maps v0.24.2中，Geojson不会渲染图像。据我了解，react-native-maps中的Geojson组件仅呈现点，多边形和折线。因此，我切换到了Overlay组件，以将图像定位在地图上的预定义坐标上（iOS的Apple Maps）。我尚未针对Android上的Google Maps测试该解决方案，但我认为它应该可以正常工作。

我已将代码分为两个部分： 1.创建叠加层。 2.创建包含以上叠加图的Map View。

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;

Answer 3

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

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

在React Native中实现Geojson时出错

3 个答案: