检测标记是否在视点中

Question

我正在使用 react-native-maps。我有一个项目列表，我将其作为标记显示在地图中。 如何检测标记是否在用户在地图中搜索的视图中。 我尝试使用 react-native-component-inview 包，但它不起作用。 这是我完整 MapView 的代码

<MapView
  ref={mapRef}
  provider="google"
  initialRegion={tripdata.pickup ? initialRegion : qatarRegion}
  onRegionChange={onRegionChange}
  onRegionChangeComplete={onRegionChangeComplete}
 >
        {mapAds
          ? mapAds.map((item, index) => {
              return (
                <Marker
                  onPress={() => mapEngagement(item.id)}
                  coordinate={{
                    latitude: item.lat ? item.lat : 0.0,
                    longitude: item.lng ? item.lng : 0.0,
                  }}
                  key={index}
                >
                  <TouchableOpacity
                    style={{
                      width: 50,
                      height: 50,
                      backgroundColor: colors.GREY.YELLOW,
                      borderRadius: 100,
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                  >
                    <Image
                      source={{
                        uri: item.logo
                          ? item.logo
                          : "https://firebasestorage.googleapis.com/v0/b/faroutdrive001.appspot.com/o/corporations%2F-McAZ_l4YQ4X4Hg71dTF%2Flogo?alt=media&token=de3aff61-0deb-4cea-a3f0-0e0b491146b1",
                      }}
                      style={{
                        height: 47,
                        width: 47,
                        zIndex: 2,
                        borderRadius: 100,
                      }}
                    />
                    {/* <Text>{visible}</Text> */}
                  </TouchableOpacity>
                  <Callout tooltip>
                    <View style={{ padding: 3 }}>
                      <TouchableOpacity
                        style={{
                          backgroundColor: colors.GREY.YELLOW,
                          justifyContent: "space-evenly",
                          alignItems: "center",
                          minWidth: 120,
                          maxWidth: 150,
                          minHeight: 50,
                          borderRadius: 10,
                        }}
                      >
                        <Text style={{ color: colors.WHITE }}>
                          {item.ad_name ? item.ad_name : "Advertise Here"}
                        </Text>
                        <Text style={{ color: colors.WHITE, fontSize: 12 }}>
                          {item.ad_description ? item.ad_description : ""}
                        </Text>
                      </TouchableOpacity>
                    </View>
                  </Callout>
                </Marker>
              );
            })
          : null}
</MapView>

Answer 1

您所描述的问题空间被称为“多边形中的点”问题。基本上，您的地图视图具有隐含的纬度/经度边界，您需要知道一个点（即您的标记）是否包含在多边形（您的地图视图边界）中。

有几种方法可以解决这个问题。长话短说，除非您想了解和实施涉及测地线和半正弦公式的地理数学和算法，否则我建议您改用一个好的软件包来完成困难的部分。我使用 TurfJS 来做到这一点。我不以任何方式代表他们或他们的社区，但它似乎做得很好，我很喜欢使用 JS 和 Java 实现来解决这样的问题。

对于这个特殊的问题，我建议你在这里：

https://www.npmjs.com/package/@turf/boolean-point-in-polygon

基本上，您将要使用他们提供的示例，我将在此处复制以供后代使用，以防链接更改：

var pt = turf.point([-77, 44]);
var poly = turf.polygon([[
  [-81, 41],
  [-81, 47],
  [-72, 47],
  [-72, 41],
  [-81, 41]
]]);

turf.booleanPointInPolygon(pt, poly);
//= true

注意：请小心为您使用的任何库正确指出 lat/lng！

对您而言，多边形将是地图的边界点。请注意，图书馆不会假设您有一个漂亮、整洁的“4 尖方”地图视图（当然，实际上它并不完全是一个正方形），但您需要将地图视图的 4 尖方转换为5个边缘点。 （第一点和最后一点相同）。

然后您将标记的 lat/lng 翻译成“pt”并用它来询问引擎的问题。

对于您的点（标记）是否在边界（地图视图）中，结果应该是直观的真/假。

另一个注释。注意如何指定边界点。单击页面中有关“多边形/多多边形”的链接。您想要遵循多边形规则来创建一个简单的 MapView。如果您以错误的顺序指定边界点，它可能会以一种意想不到且完全令人困惑的方式对其进行解释。

Polygon 的链接详细地讨论了它，但我会提请您注意它的以下部分：

3.1.6.  Polygon

   To specify a constraint specific to Polygons....

   o  A linear ring MUST follow the right-hand rule with respect to the
      area it bounds, i.e., exterior rings are counterclockwise...