Поиск области полигона с первичными гранями

Question

Я пытаюсь найти область многоугольника с использованием простых граней. Я могу помещать маркеры и создавать многоугольник и отображать его. Я надеялся подвергнуть полигон вызову функции API геометрии JavaScript, но я не могу получить доступ к многоугольнику, который был нарисован, так как он был создан бэк-файлом. Мой текущий план состоит в том, чтобы иметь два объекта полигона, которые представляют один и тот же полигон: один в чистом JavaScript и один в Google Maps/Prime Faces, но я не уверен, что он сработает. Вот то, что я до сих пор:

<p:gmap id="gmap" center="52.561201, -9.256510" zoom="13" type="HYBRID" style="width:100%;height:400px" 
         model="#{map.emptyModel}" onPointClick="handlePointClick(event);" widgetVar="map" /> 



       <p:dialog widgetVar="dlg" showEffect="fade"> 
        <h:form prependId="false"> 
         <h:panelGrid columns="2"> 
          <h:outputLabel for="title" value="Are you Sure?" /> 


          <f:facet name="footer"> 
           <p:commandButton value="Yes" actionListener="#{map.addMarker}" update=":messages" oncomplete="markerAddComplete()" /> 
           <p:commandButton value="No" onclick="return cancel()" /> 
          </f:facet> 
         </h:panelGrid> 

         <h:inputHidden id="lat" value="#{map.lat}" /> 
         <h:inputHidden id="lng" value="#{map.lng}" /> 
         <h:inputHidden id="area" value="#{map.area}" /> 
        </h:form> 
       </p:dialog> 

       <script type="text/javascript"> 
        var currentMarker = null; 
        var markers = []; 
        var path = new google.maps.MVCArray; 
        var poly; 
        function handlePointClick(event) { 
         //if statement handles bean markers and coordinates 
         if (currentMarker === null) { 
          document.getElementById('lat').value = event.latLng.lat(); 
          document.getElementById('lng').value = event.latLng.lng(); 

          currentMarker = new google.maps.Marker({ 
           position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()) 
          }); 



          PF('map').addOverlay(currentMarker); 

          PF('dlg').show(); 


         } 
         // javascript to mimic polygon copy 
         path.insertAt(path.length, event.latLng); 
         poly = new google.maps.Polygon(); 
         poly.setPaths(new google.maps.MVCArray([path])); 
         document.getElementById('area').value = document.getElementById('area').value = google.maps.geometry.spherical.computeArea(measure.polygon.getPath()); 
         console.log(path); 
        } 

Все в, если заявление относится к Xhtml кода, расположенного над сценарием, все остальное ниже, что моя попытка получить область, но не работает. Если у кого-нибудь есть идеи о том, как достичь области полигона в простых лицах, пожалуйста, поделитесь, спасибо.

Answer 1

Если вы все равно используете JavaScript в своем приложении, возможно, было бы проще просто прослушать прослушиватель событий Google Maps, который будет строить многоугольник всякий раз, когда пользователь нажимает на часть карты или когда вы используете какое-то меню чтобы вручную ввести точку (как я полагаю, вы делаете уже):

var polygonCoords = []; 

//can be called using forms 
function addMarker(lat, lng){ //split apart from google.maps.latLng to make compatible with form 
    polygonCoords.push(new google.maps.LatLng(lat, lng)); 
} 

google.maps.event.addListener(map, 'click', function(event){ 
    addPoint(event.latLng.lat(), event.latLng.lng()); 
} 

function getArea(pts){ 
    return google.maps.geometry.spherical.computeArea(pts); 
} 

//to get area do: 
getArea(polygonCoords); 
//this will return a float of the area 

Это решение требует, чтобы geometry library быть включены.

Я не включал код для отображения (или фактически создания!) Многоугольника, так как я не уверен, как вы хотите это сделать. Кроме того, создание многоугольника не требуется для вычисления его площади.

Как я понимаю, PrimeFaces используется аналогично jQuery. При этом я не думаю, что очень важно получить координаты с помощью PrimeFaces, особенно когда Google Maps уже ее поддерживает.