如何使用帶有geoJSON座標而非點的KineticJS多邊形對象？

我使用KineticJS在HTML5畫布上創建交互式地圖，問題在於我的地圖數據位於geoJSON中，所以我有多邊形座標而不是多邊形點。如何使用帶有geoJSON座標而非點的KineticJS多邊形對象？

//Javascript object with map data 
    var myMap = { 
    'Russia': { 
    points: [44,1,397,1,518,2,518,151,515,..............6,43,4,43,4] 
    }, 
    'Azerbaijan': { 
    points: [198, 242, 201, 245, 203,..............197, 242] 
    }, 
    'UAE': { 
    points: [224,406,225,410,...............225,407] 
    } 
    }; 

    //Function to return map data 
    function getData() { 
    return myMap; 
    }

然後使用KineticJS多邊形對象上繪製HTML5畫布地圖上做到這一點。

 //store map data in a variable 
    var areas = getData(); 

    //Loop through the map 
    for (var key in areas) { 
     (function() { 
      var k = key; 
      var area = areas[key]; 
      var points = area.points; 

      var shape = new Kinetic.Polygon({ 
       points: points, 
       fill: '#fff', 
       stroke: '#555', 
       strokeWidth: .5, 
       alpha: 0.1 
       }); 

      }()); 
     }

有沒有人知道我可以如何實現與geoJSON座標相同？以下是geoJSON的示例。座標嵌套在幾何對象內。

 { 
"type": "FeatureCollection", 
"features": [{ "type": "Feature", "id": 0, 
"properties": { "OBJECTID_1": 29, "OBJECTID": 29, "COUNTY_NAM": "BARINGO", "COUNTY_COD": 30, "Shape_Leng": 5.81571392065, "Shape_Area": 0.88451236881 }, 
"geometry": { "type": "Polygon", "coordinates": [ [ [ 36.028686523000033, 1.276123047000056 ], [ 36.036499023000033, 1.263916016000053 ], [ 36.039306641000053, 1.259887695000032 ],............[ 36.028686523000033, 1.276123047000056 ] ] ] } } 
] 
}

來源

2013-02-15 user1678293

如果我沒有記錯，KineticJS兩個最新版本支持數組的數組給予的點。但是你應該做的是創建一個循環，通過座標對象進行解析並順序抓取所有的值，因爲這些都是KineticJS的需要。 – SoluableNonagon 2013-02-15 14:25:56

var myArray = new Array(); 
    for(var level1 in coordinates){ // for each array in coordinates 
     for(var level2 in level1){ // for each array in that array 
      for(var number in level2){ // for each number in that array 
       myArray.push(number); 
      } 
     } 
    } 
    var points = myArray;

也許這是嵌套層次太多，但是這是主要的想法：

經過的所有子陣列和在各搶號並將其放置在一個新的數組。

來源

2013-02-15 14:32:57 SoluableNonagon

多邊形對象接受數據作爲數組或點對象，它有x和y。

var polygonData = coordinates.map(function(cord) { 
    return {x:cord[0],y:cord[1]}; 
}) 

//excample 
array = [[1,2],[3,4],[5,6]] 
array.map(function(cord) { 
    return {x:cord[0],y:cord[1]}; 
}) 
// will return [{x:1,y:2},{x:3,y:4}, {x:5,y:6}]

或者，如果你只想得到一個數組（沒有X，Y）

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { 
    return a.concat(b); 
}); 
// flattened is [0, 1, 2, 3, 4, 5]

來源

2013-02-15 16:25:46 allenhwkim

如何使用帶有geoJSON座標而非點的KineticJS多邊形對象？

回答

相關問題