프로그래밍 방식으로 융합 표 다각형 색을 변경합니다.

130 개의 시정촌을 나타내는 130 개의 다각형에 대한 kml 정의가있는 융합 표가 있습니다. 자치 도시 이름이 일치하는 배열에 저장된 16 진수 값으로 다각형 채우기 색을 설정하고 싶습니다.프로그래밍 방식으로 융합 표 다각형 색을 변경합니다.

여기 내 코드 스텁이 있지만 채우기 색상이 작동하지 않습니다. 아무도 내가 이것을 관리 할 수있는 방법에 대한 통찰력을 가지고 있습니까?

... 
getFTData(table_id, 'Name', example_dataHandler); 
... 

function getFTData(table_id, col_list, successFunction) { 

    var query = "SELECT " + col_list + " FROM " + table_id; 

    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail); 

    $.ajax({ 
     type: "GET", 
     url: queryurl, 
     dataType: "jsonp", // return CSV FustionTable response as JSON 
     success: successFunction, 
     error: function() {alert("AJAX ERROR for " + queryurl); } 
    }); 
} 
function example_dataHandler(d) { 
    // get the actual data out of the JSON object 
    var rows = d.table.rows; 
    var row_count = 0; 
    layer = new google.maps.FusionTablesLayer({ 
     query: 
     { 
      select: 'geometry', 
      from: '11KMJrKcQ4f729YGbcUoe4lvp66JKZhB0pJ-3w9k' 
     }, 
     options: 
     { 
     suppressInfoWindows: true 
     } 
    }); 

    for (var i = 0; i < rows.length; i++) { 

     // Per the expected columns 
     for(j=0; j < rows[i].length; j++) 
     { 
      styles: [{ 
       where: "'Name' = '" + rows[i][j] + "'", 
       polygonOptions: { 
       fillColor: countyColors[row_count], 
       strokeColor: "#FFFFFF", 
       strokeWeight: 3 
       } 
      }] 

     } 
     row_count++; 
    } 

    layer.setMap(map); 

}

출처

2012-11-26 LauraNMS

이는 한 번에 작업인가? FusionTable의 열에서 다각형의 색상을 구성 할 수 있습니다. 색상이 5 색 미만인 경우 [자바 스크립트에서 동적으로] 할 수 있습니다 (https://developers.google.com/maps/documentation/javascript/reference#FusionTablesStyle). 코드가 폴리곤을 두 번로드하는 것 같습니다. 하나는 FusionTablesLayer에, 다른 하나는 네이티브 Google Maps API v3 다각형 (쿼리 콜백에서)으로로드하는 것입니다. – geocodezip

퓨전 테이블 열에서 색을 설정하지 않는 것이 좋지만 그렇게해야 할 수도 있습니다. 각 시정촌마다 색이있는 json 파일을받습니다. 또한 융합 테이블로 쉽게 업로드하고 Google지도에 배치 할 수있는 kml 파일이 있습니다. 난 단지 내 루프를 제대로 구조화하여지도에 kml 파일을 배치하고 시정촌을 색칠하려고합니다. 하지만 여기서 제대로하지 못했습니다. – LauraNMS

테이블이 공개되어 있습니까? 색상을 정의하는 JSON 샘플이 있습니까? 그 세부 사항을 고려할 때 구현하기에 너무 어렵지 않아야합니다. – geocodezip

테이블을 사용하여 간단한 예제를 만들고 작동합니다.

<!DOCTYPE HTML> 
<html> 
    <head> 
    <title>Fusion Tables</title> 
    <style type="text/css"> 
     html, body,#map_canvas { 
     margin: 0; 
     padding: 0; 
     width : 100%; 
     height: 100%; 
     } 
    </style> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     var map, layer; 
     function initialize() { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
      center : new google.maps.LatLng(40.42127, -80.098181), 
      zoom : 10, 
      mapTypeId : google.maps.MapTypeId.ROADMAP, 
      noClear : true 
     }); 

     var selectEle = document.getElementById("colorSelector"); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(selectEle); 
     google.maps.event.addDomListener(selectEle, "change", onColorSelect_changed); 

     layer = new google.maps.FusionTablesLayer({ 
      map : map, 
      query : { 
      select : "geometry", 
      from : "11KMJrKcQ4f729YGbcUoe4lvp66JKZhB0pJ-3w9k" 
      } 
     }); 
     } 

     function onColorSelect_changed() { 
     var options = { 
      styles : [] 
     }; 
     var styles = []; 
     var selectEle = this; 

     if (selectEle.selectedIndex == 0) { 
      return; 
     } 

     options.styles.push({ 
      where: "'Name' = 'Pittsburgh'", 
      polygonOptions: { 
       fillColor: selectEle.value, 
       strokeColor: "#FFFFFF", 
       strokeWeight: 3 
      } 
      }); 
     layer.setOptions(options); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 

    <div id="map_canvas"> 
     <select id="colorSelector"> 
     <option >--Select color--</option> 
     <option value="#ffff00">#FFFF00</option> 
     <option value="#ff00ff">#FF00FF</option> 
     <option value="#f0f0f0">#F0F0F0</option> 
     </select> 

    </div> 
    </body> 
</html>

enter image description here

출처

2012-11-26 20:44:14 wf9a5m75

아직 끝나지 않았다. 그리고 여전히 내 json 파일에서 채우기 색을 찾아보고 추출하는 데 문제가 있습니다. – LauraNMS

하나의 시정촌에서 일할 수있는 코드가 있습니다. 이제 json 파일에서 정확한 색상을 찾고 추출하는 방법을 알아야합니다. – LauraNMS

코드가 올바른 위치에 놓여 있습니다! 감사! 내가하고있는 일은 루프를 만들고 배열에 옵션을 푸싱하는 것입니다 : (var i = 0; i LauraNMS

프로그래밍 방식으로 융합 표 다각형 색을 변경합니다.

답변

관련 문제