检测标记是否在视点内

如何解决检测标记是否在视点内

我正在使用 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,}}
                    />
                    {/* <Text>{visible}</Text> */}
                  </TouchableOpacity>
                  <Callout tooltip>
                    <View style={{ padding: 3 }}>
                      <TouchableOpacity
                        style={{
                          backgroundColor: colors.GREY.YELLOW,justifyContent: "space-evenly",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>

解决方法

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

有几种方法可以解决这个问题。长话短说，除非您想学习和实施涉及测地线和半正弦公式的地理数学和算法，否则我建议您改用一个好的包来完成困难的部分。我使用 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,41]
]]);

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

注意：对于您正在使用的任何库，请注意正确指向 lat/lng！

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

然后，您可以将标记的纬度/经度转换为“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...

检测标记是否在视点内

如何解决检测标记是否在视点内

解决方法

相关推荐