2015-05-14 64 views
-2

发现这个例子来说明一个简单的多边形,但我想,以显示与复杂的多边形六国的(多面的东西,国家)让我带路如何确定数组是从GeoJson中读取的多边形还是多层多边形?

例子:

"type": "Feature", 
    "properties": { 
     "Name": "Country_whit_multiples_polygons", 
     "Description": "" 
    },"geometry": { 
    "type": "MultiPolygon", 
    "coordinates": [ 
     [ 
      [-94.963194, 39.316858], 
      [-94.959670, 39.321990], 
      [-94.955570, 39.316610], 
      [-94.963194, 39.316858] 
     ], 
     [ 
      [-35, 34], 
      [-41, 37], 
      [-43, 38], 
      [-25, 39] 
     ] 
    ] 
} 

var sector_data = { 
    "type": "FeatureCollection", 
    "features": [{ 
     "type": "Feature", 
     "properties": { 
      "Name": "Country_1", 
      "Description": "" 
     }, 
     "geometry": { 
      "type": "Polygon", 
      "coordinates": [ 
       [ 
        [-94.963194, 39.316858], 
        [-94.959670, 39.321990], 
        [-94.955570, 39.316610], 
        [-94.963194, 39.316858] 
       ] 
      ] 
     } 
    }, { 
     "type": "Feature", 
     "properties": { 
      "Name": "COuntry_2", 
      "Description": "" 
     }, 
     "geometry": { 
      "type": "Polygon", 
      "coordinates": [ 
       [ 
        [-94, 36], 
        [-94, 35], 
        [-95, 34], 
        [-98, 32], 
        [-90, 31] 
       ] 
      ] 
     } 
    }] 
}; 
var map; 

function initialize() { 
    var kansas_city = new google.maps.LatLng(39.00495613,-94.64780668); 
    var mapOptions = { 
     zoom: 10, 
     center: kansas_city, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    sector_callback(sector_data); 
} 

    // Loop through the results array and place a marker for each 
    // set of coordinates. 
window.sector_callback = function(results) { 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, len = results.features.length; i < len; i++) { 
    var coords = results.features[i].geometry.coordinates[0]; 
    var path = []; 
    document.getElementById('coords').innerHTML += "Polygon "+i+"<br>"; 
    for (var j = 0; j < coords.length; j++){ 
     // alert("coords["+j+"][1]="+coords[j][1]+", coords["+j+"][0]="+coords[j][0]); 
     var pt = new google.maps.LatLng(coords[j][1], coords[j][0]) 
     bounds.extend(pt); 
     path.push(pt); 
    document.getElementById('coords').innerHTML += coords[j]+"<br>"; 
    } 

    var polygons = new google.maps.Polygon({ 
     path: path, 
       strokeColor: "#FF0000", 
       strokeOpacity: 0.8, 
       strokeWeight: 1, 
       fillColor: "#FF0000", 
       fillOpacity: 0.35, 
     map: map 
    }); 
    } 
    map.fitBounds(bounds); 
} 
+2

那么,什么是你的问题是什么呢? –

+0

请参阅[google地图API v3 - 如何绘制动态多边形/多义线?](http://stackoverflow.com/questions/3394961/google-maps-api-v3-how-to-draw-dynamic-polygons-polylines) – Roberto

+0

谢谢Hwathanie。在最重要的问题网站管理员编辑我的问题higthlight。请参阅片段“Country_whit_multiples_polygons”。我在“var sector_data”下面发布的代码就可以了。但只适用于多边形。我尝试使用MultiPolygons读取Json,并且如果数组是多边形或多面体以设置贴图,则无法读取它。 –

回答

0

我自己的答案,为谁需要。

从js文件数据:

var sector_data = { 
    "type": "FeatureCollection", 
    "features": [ 
{ 
"type": "Feature", 
"properties":{"Name": "Bolivia","Description": "-","Color":"#ff9900"}, 
"geometry":{"type": "Polygon","coordinates": 

[ 

[ 
[-58.159,-20.164], ... [-65.313,-10.253], ... [-58.159,-20.164] 
] 

] 
}// close geometry 
}// close pais 
// using "," 

, 

{ 
"type": "Feature", 
"properties":{"Name": "Cuba","Description": "-","Color":"#552233"}, 
"geometry":{"type": "Polygon","coordinates": 

[ 



[ 
[-82.561,21.5716], ... , [-82.561,21.5716] 
] 
, 
[ 
[-77.669,21.9519], ... , [-77.669,21.9519] 
] 
, 
[ 
MORE POLYGONS 
] 

] 
}// cierra geometry 
}// cierra pais 
// uso"," 



    ] 
}; // END. NOTE YoU MUST DELETE '//' AND REST... 



var map; 

function initialize() { 
    var latinoamerica = new google.maps.LatLng(-5,-63); 
    var mapOptions = { 
     zoom: 10, 
     center: latinoamerica, 
     mapTypeId: google.maps.MapTypeId.HYBRID, 
     panControl: true, 
     panControlOptions: { 
     position: google.maps.ControlPosition.LEFT_TOP 
     }, 
     zoomControl: true, 
     zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.LARGE, 
     position: google.maps.ControlPosition.LEFT_TOP 
    }, 
    scaleControl: true, 
    streetViewControl: false, 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    sector_callback(sector_data); 
} 

    // Loop through the results array and place a marker for each 
    // set of coordinates. 
window.sector_callback = function(results) { 
var bounds = new google.maps.LatLngBounds(); 
for (var i = 0, len = results.features.length; i < len; i++) { 
//console.log(i) 
//document.getElementById('coords').innerHTML += "Polygon "+results.features[i].properties.Name+"<br>"; 
Color = results.features[i].properties.Color 
cualpais = results.features[i].properties.Name 
//console.log(nombre) 
for (var a=0;a < results.features[i].geometry.coordinates.length; a++){ 
var coords = results.features[i].geometry.coordinates[a]; 
//console.log(a) 
var path = []; 
    for (var j = 0; j < coords.length; j++){ 
    // alert("coords["+j+"][1]="+coords[j][1]+", coords["+j+"][0]="+coords[j][0]); 
    var nombre = new google.maps.LatLng(coords[j][1], coords[j][0]) 
    bounds.extend(nombre); 
    path.push(nombre); 
    //document.getElementById('coords').innerHTML += coords[j]+"<br>"; 
    } 
    var nombre = new google.maps.Polygon({ 
     path: path, 
     strokeColor: "#f5f5f5", 
     strokeOpacity: 0.6, 
     strokeWeight: 1, 
     fillColor: Color, 
     fillOpacity: 0.35, 
     clickable: true, 
     //map: map 
    //console.log(map) 
    // console.log(nombre) 
    }); 
    nombre.setMap(map); 


} 
    map.fitBounds(bounds); 
}}