Обнаружение щелчка по карте на 3d-модели и вокруг нее в веб-просмотре android - PullRequest
Новая
       8

Обнаружение щелчка по карте на 3d-модели и вокруг нее в веб-просмотре android

0 голосов
/ 03 апреля 2020

Я использовал mapbox на прошлой неделе и использовал this как есть, но окончательный код встроен в android webview.

Я хотел обнаружить щелчок на радиусе 15 метров от 3d-модели. Я добавил следующий код в пример, приведенный в приведенной выше ссылке: 

var assetArr = [ {id:"3d0", cord:{lng:longitude,lat:latitude} ];




map.on('click',function(e){
         var arrValue = assetArr[0];
         var longLatT = e.lngLat.wrap();
         var tempd = distance(longLatT.lat, longLatT.lng, arrValue.cord.lat, arrValue.cord.lng);
         tempd = parseInt(tempd.replace(/\D/g,''));       

           if(tempd <= 15){
              document.getElementById("info4").innerHTML = "clicked"+tempd;

           }else{
             document.getElementById("info4").innerHTML = "not clicked1"+tempd;
           }

    });



function distance(lat1,lon1,lat2,lon2) {
    var R = 6371; // km (change this constant to get miles)
    var dLat = (lat2-lat1) * Math.PI / 180;
    var dLon = (lon2-lon1) * Math.PI / 180;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
        Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;
    if (d>1) return Math.round(d)+"km";
    else if (d<=1) return Math.round(d*1000)+"m";
    return d;
}

Но нажатие на веб-просмотр не так гладко, как я хотел. Иногда касание дальше 30 метров также обнаруживает касание, а иногда касание ближе 5 метров также не обнаруживает щелчок.

Есть ли какие-либо встроенные функции в mapbox, которые могли бы помочь в достижении того, чего я хочу. Вот нам html и Манактивность: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Locate the user</title>
    <meta name="viewport" content="width=device-width,
    user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>

    <script src="js/three.min.js"></script>


    <script src="js/GLTFLoader.js"></script>

    <script src="dist/tween.umd.js"></script>
    <script src="js/RequestAnimationFrame.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script> 


    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>

</head>
<body>
<div id="map"></div>
<div id="info4"></div>
<script src="js/capture.js"></script>
</body>
</html>

Моя основная активность. java

public class MainActivity extends AppCompatActivity {

    WebView wbView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        wbView = (WebView)findViewById(R.id.myWebview);
        wbView.getSettings().setJavaScriptEnabled(true);
        wbView.setWebChromeClient(new MyWebChromeClient());
        wbView.getSettings().setGeolocationEnabled(true);
        wbView.getSettings().setAppCacheEnabled(true);
        wbView.getSettings().setDatabaseEnabled(true);
        wbView.getSettings().setDomStorageEnabled(true);

        wbView.getSettings().setAllowFileAccessFromFileURLs(true);
        wbView.getSettings().setAllowUniversalAccessFromFileURLs(true);

        wbView.loadUrl("file:///android_asset/capture.html");






        wbView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url != null) view.loadUrl(url);
                return true;
            }
        });



    }




}
...