2013-02-15 3 views
0

Я создаю интерактивную карту на холсте HTML5 с помощью KineticJS, проблема заключается в том, что мои данные карты находятся в geoJSON, поэтому у меня есть координаты полигонов, а не полигональные точки.Как использовать объект polygon KineticJS с координатами geoJSON, а не с точками?

Это, как я хотел бы сделать это с точками многоугольника (according to this tutorial)

//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 ] ] ] } } 
] 
} 
+0

Если я правильно помню, KineticJS последние две версии поддерживают массив массивов, который будет дан в виде точек. Но вам нужно создать цикл, который анализирует объекты координат и последовательно захватывает все значения, поскольку это все потребности KineticJS. – SoluableNonagon

ответ

0
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; 

Может быть, это слишком много уровней вложенности, но это основная идея:

Пройдите через все подразделы массивы и захватить числа в каждом и поместить их в новом массиве.

0

Объект Polygon принимает данные как массив OR Point Объекты, которые имеют 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}] 

Или, если вы хотите, чтобы получить массив только (не х, у)

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { 
    return a.concat(b); 
}); 
// flattened is [0, 1, 2, 3, 4, 5] 
Смежные вопросы