如何使用带有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多边形对象？

回答

相关问题