Question

我正在使用KineticJS在HTML5画布上创建交互式地图，问题是我的地图数据是geoJSON，所以我有多边形坐标而不是多边形点。

做的方法

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

Answer 1

  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;

也许这是很多级别的嵌套，但这是主要的想法：

浏览所有子阵列并获取每个子阵列中的数字并将它们放入一个新数组中。

Answer 2

Polygon对象接受数据作为数组OR Point Objects，它有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]

如何将KineticJS多边形对象与geoJSON坐标而不是点一起使用？

2 个答案: