如何在我的Leaflet Map上使用此JSON数据

时间:2017-07-12 18:01:14

标签: leaflet

如何在传单地图中使用此类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"
    },

1 个答案:

答案 0 :(得分: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());