2016-08-31 18 views
0

tl; dr: SVGポリゴンパスをgps座標または同じgoogle.maps.Polygonに変換するにはどうすればよいですか?SVGポリゴンパスを緯度および経度座標に変換する

私の上位レベルの目的は、2万の個々のGPS座標が固定領域(ジオフェンス)内にあるかどうかを判断することです。私はすでにGPSの座標を保存しています、そして、私は彼らがこのエリアにいるかどうかテストするつもりの基本的な考えがあります。

ここで私はGPSの緯度/経度に変換しようとしていますが、確かにこれは公式なので、0,0と縮尺を調整する必要があります。有望:https://stackoverflow.com/a/24171749/550595、私は "変換"のために使用しましたが、結果は近くにさえありません。

は、私は別のマップから借りていること、SVGポリゴンパスを持っている(Googleマップではないが、それは十分に近いです)、と私はマップ上でそれをレンダリング:サイドノートではhttps://jsfiddle.net/2n2jmj8L/1/

var width = 624, // width of SVG 
    height = 746; // height of SVG 

function toLongitude(x) { 
    return x * 180/width; 
} 

function toLatitude(y) { 
    return -y * 180/width + 90; 
} 

function initMap() { 
    // The SVG path; 
    var path = document.getElementById("reservation-path").getAttribute("d"); 

    // Get the points. Even indices are x coordinates and odd indices are y 
    // coordinates. Note that these are strings. 
    var points = path.match(/(\d+)/g); 

    map = new google.maps.Map(document.getElementById('map'), { 
    streetViewControl: false, 
    //scrollwheel: false, 
    disableDefaultUI: true, 
    draggable: false, 
    zoom: 11, 
    center: { 
     lat: 41.3671863, 
     lng: -123.8799729 
    }, 
    mapTypeId: 'roadmap' 
    }); 

    // Map polygon coordinates 
    var polyCoordinates = []; 
    for (var i = 0; i < points.length; i += 2) { 
    var longitude = toLongitude(parseInt(points[i]) + 6),//I added the 6 and the following 5 to offset the parent transform 
     latitude = toLatitude(parseInt(points[i + 1]) + 5); 

    polyCoordinates.push(new google.maps.LatLng(latitude, longitude)); 
    } 

    console.log(polyCoordinates); 

    var polygon = new google.maps.Polygon({ 
    paths: polyCoordinates, 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35 
    }); 

    polygon.setMap(map); 

    // Add a listener for the click event. 
    polygon.addListener('click', showArrays); 

    infoWindow = new google.maps.InfoWindow; 
} 

... Googleマップ/プレイスはジオフェンスとして使用したい領域を示しています:https://www.google.com/maps/place/Yurok+Reservation,+Trinity-Klamath,+CA/@41.373847,-123.9471508,11z/data=!4m5!3m4!1s0x54d1a8156f591fd5:0xbcbca4e17d7d8801!8m2!3d41.3724029!4d-123.9009415しかし、これを参照として使用する以外は何もできませんでした。

私はすでにこれに多くの時間を無駄にしています。したがって、私が持っているものをスクラップする必要があっても、私はします。私がしたいのは、一連の座標をループしてJSFiddle内のパスにあるかどうかを返すことだけです。事前に

おかげで...

答えて

1

このページでは、画面のピクセルが緯度/経度座標に座標変換する方法を文書化するために表示されます。

https://developers.google.com/maps/documentation/javascript/examples/map-coordinates

+0

私はあなたが何かに上だと思うように私は、私は数時間前にこの答えを得たいです。 'project'関数の' return new google.maps.Point'の式が私のニーズに合わせて変更されている可能性があります。その代わりに、私は焦っていて、google.maps.drawingツールを使用してポリゴンでアウトラインをしっかり追跡してから、コンソールで座標を返します。 SVG要素に 'pointer-events:none;' CSSルールを設定することで、元のSVGパスを上に重ねてマップ上に描画することができました。理想的ではありませんが、うまく機能しましこれは私が元々望んでいたものに近いので、これを答えとしてマークします。ありがとう。 – jreed121

関連する問題