0

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

2 に答える 2

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;

入れ子のレベルが多すぎるかもしれませんが、これが主なアイデアです。

すべてのサブ配列を調べて、それぞれの数値を取得し、新しい配列に配置します。

于 2013-02-15T14:32:57.627 に答える
0

Polygon オブジェクトは、x と y を持つ配列または Point オブジェクトとしてデータを受け入れます。

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-15T16:25:46.380 に答える