如何在我的單張地圖上使用此JSON數據

Question

如何在我的單張地圖中使用此類型的json數據？我有很多區域數據集，並且座標數組有點混亂。我想知道如何使用此數據集在我的地圖上顯示多邊形。

{ 
     "Locality": "Andrews Ganj", 
     "Loc_Id": 1006613, 
     "City": "New Delhi", 
     "City_Id": 10397, 
     "State": "Delhi", 
     "HH": 1713, 
     "T_Pop": 7418, 
     "T_mPop": 3842, 
     "T_fPop": 3576, 
     "CGT10L": 20.26, 
     "C5_10L": 31.23, 
     "C1o5_5L": 36.37, 
     "CLT1o5L": 12.14, 
     "Coordinates": "28.561508|77.220098$28.561776|77.220469$28.562004|77.220674$28.561748|77.221049$28.561635|77.221411$28.562657|77.221943$28.562881|77.221555$28.562955|77.221624$28.563224|77.221846$28.564101|77.222571$28.564359|77.222735$28.564582|77.222899$28.565257|77.22327$28.565302|77.223305$28.565317|77.223356$28.56528|77.22352$28.565568|77.223684$28.565617|77.223663$28.565647|77.223663$28.565681|77.223667$28.565886|77.223844$28.565997|77.22403$28.566084|77.224073$28.566611|77.22444$28.56707|77.224663$28.567374|77.224804$28.567752|77.224983$28.567935|77.22501$28.567964|77.225012$28.56778|77.22547$28.567577|77.225968$28.567507|77.226139$28.566662|77.228219$28.566539|77.228578$28.566479|77.228722$28.566147|77.229518$28.56609|77.229666$28.565992|77.229919$28.565964|77.229999$28.5659|77.230175$28.565791|77.230598$28.565746|77.230792$28.5657|77.231073$28.565646|77.2317$28.565643|77.231748$28.565602|77.232306$28.565532|77.233377$28.565492|77.23383$28.565472|77.23409$28.565177|77.233967$28.564747|77.23376$28.56397|77.233318$28.563079|77.232797$28.562897|77.232657$28.560578|77.231256$28.560877|77.231066$28.56154|77.230979$28.561895|77.231141$28.562254|77.230363$28.562874|77.228948$28.563081|77.228477$28.563377|77.227801$28.563269|77.227589$28.563478|77.227399$28.563565|77.227283$28.564525|77.224997$28.564815|77.224312$28.564827|77.224284$28.564441|77.224069$28.564275|77.223981$28.563897|77.223919$28.563211|77.223555$28.562788|77.223312$28.562583|77.223192$28.562223|77.222981$28.561837|77.222605$28.561175|77.22209$28.560751|77.22165$28.560386|77.221168$28.561018|77.22056$28.561508|77.220098" 
    }, 

Answer 1

我們可以在Coordinates字符串String.split分成可用陣列，然後在地圖顯示它：

//for the demo 
    var defaultCoords = [28.561508, 77.220098]; 

    //set up our map 
    var map = L.map('map').setView(defaultCoords, 12); 
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{}).addTo(map); 


    var sampleData = { 
     "Locality": "Andrews Ganj", 
     "Loc_Id": 1006613, 
     "City": "New Delhi", 
     "City_Id": 10397, 
     "State": "Delhi", 
     "HH": 1713, 
     "T_Pop": 7418, 
     "T_mPop": 3842, 
     "T_fPop": 3576, 
     "CGT10L": 20.26, 
     "C5_10L": 31.23, 
     "C1o5_5L": 36.37, 
     "CLT1o5L": 12.14, 
     "Coordinates": "28.561508|77.220098$28.561776|77.220469$28.562004|77.220674$28.561748|77.221049$28.561635|77.221411$28.562657|77.221943$28.562881|77.221555$28.562955|77.221624$28.563224|77.221846$28.564101|77.222571$28.564359|77.222735$28.564582|77.222899$28.565257|77.22327$28.565302|77.223305$28.565317|77.223356$28.56528|77.22352$28.565568|77.223684$28.565617|77.223663$28.565647|77.223663$28.565681|77.223667$28.565886|77.223844$28.565997|77.22403$28.566084|77.224073$28.566611|77.22444$28.56707|77.224663$28.567374|77.224804$28.567752|77.224983$28.567935|77.22501$28.567964|77.225012$28.56778|77.22547$28.567577|77.225968$28.567507|77.226139$28.566662|77.228219$28.566539|77.228578$28.566479|77.228722$28.566147|77.229518$28.56609|77.229666$28.565992|77.229919$28.565964|77.229999$28.5659|77.230175$28.565791|77.230598$28.565746|77.230792$28.5657|77.231073$28.565646|77.2317$28.565643|77.231748$28.565602|77.232306$28.565532|77.233377$28.565492|77.23383$28.565472|77.23409$28.565177|77.233967$28.564747|77.23376$28.56397|77.233318$28.563079|77.232797$28.562897|77.232657$28.560578|77.231256$28.560877|77.231066$28.56154|77.230979$28.561895|77.231141$28.562254|77.230363$28.562874|77.228948$28.563081|77.228477$28.563377|77.227801$28.563269|77.227589$28.563478|77.227399$28.563565|77.227283$28.564525|77.224997$28.564815|77.224312$28.564827|77.224284$28.564441|77.224069$28.564275|77.223981$28.563897|77.223919$28.563211|77.223555$28.562788|77.223312$28.562583|77.223192$28.562223|77.222981$28.561837|77.222605$28.561175|77.22209$28.560751|77.22165$28.560386|77.221168$28.561018|77.22056$28.561508|77.220098" 
    }; 

    //first take the coords string and split into an array by the $ 
    var coords = sampleData.Coordinates.split('$') 

    //next, take that array of strings that looks like' 28.561508|77.220098' and split again by the | 
    coords = coords.map(function (pair) { 
     return pair.split('|'); 

    }); 

    //show it on a map. 
    var polygon = L.polygon(coords, { color: 'red' }).addTo(map); 
    // zoom the map to the polyline 
    map.fitBounds(polygon.getBounds());