从Ajax请求获取JSON并在Leaflet中创建多边形层

时间:2019-02-21 16:36:17

标签: php json ajax leaflet

我需要有关脚本的帮助,我有一个返回GeoJSON的ajax请求

图片:

  1. PHP to Ajax
  2. TEST GeoJSON
  3. GeoJSON

JSON格式

  • “ id_map”:“ 2”,
  • “说明”:“ AC1”,
  • “ geojson”:{一个GeoJSON坐标}
  • “文件”:“ AC1.geojson”

我可以使用AJAX JSON Leaflet(插件(使用JSON值文件ex(ac1.geojson)创建一个多边形层,并将其指向带有GeoJSON文件(例如geojson)的文件夹,但是我具有相同的功能GeoJSON作为文本变量保存在数据库中,由于丢失文件的风险,我想在文件之外使用它,所以我将其恢复(我使用GeoJson.io验证geojson并将其复制粘贴到我的列中数据库),然后使用JSON编码,但是我无法使用它,而且PHP产生的格式也有问题。

$(document).ready(function() {
  document.body.onload = function() {

    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 20,
        minZoom: 13,
        attribution: 'x'
      }),
      latlng = L.latLng(-32.0312422, -52.0917713);

    var mymap = L.map('mapid', {
      center: latlng,
      zoom: 18,
      layers: [tiles]
    });
    L.marker([-32.0312422, -52.0917713]).addTo(mymap);

    function popUp(f, l) {
      var out = [];
      if (f.properties) {
        for (key in f.properties) {
          out.push(key + ": " + f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
      }
    }

    var j_url = "somephp.php";

    var results = $.ajax({
      url: j_url,
      dataType: 'json',
      cache: false,
      success: AjaxSucceeded,
      error: AjaxFailed
    });

    function AjaxSucceeded(results) {
      console.log("Data successfully loaded.");
      alert("OK");

      $.each(results, function(index, value) {
        var geojsonTESTE = {
          "type": "FeatureCollection",
          "features": [{
            "type": "Feature",
            "properties": {},
            "geometry": {
              "type": "Polygon",
              "coordinates": [
                [
                  [-52.101760, -32.031909],
                  [-52.102275, -32.028598],
                  [-52.100794, -32.028435],
                  [-52.099206, -32.029053],
                  [-52.097554, -32.029362],
                  [-52.097511, -32.029672],
                  [-52.096760, -32.029672],
                  [-52.096696, -32.029544],
                  [-52.095795, -32.029617],
                  [-52.094142, -32.029835],
                  [-52.088585, -32.030672],
                  [-52.088392, -32.030763],
                  [-52.088027, -32.034656],
                  [-52.101631, -32.032145],
                  [-52.101760, -32.031909]
                ]
              ]
            }
          }]
        };

        var geoObject = JSON.parse(value.geojson);

        L.geoJSON(geojsonTESTE).addTo(mymap);
        L.geoJSON(features).addTo(mymap);

        //With Leaflet Ajax e Files
        //j_url = "json/"+value.file;                            
        //var jsonTest = new L.GeoJSON.AJAX([j_url]{onEachFeature:popUp}).addTo(mymap);            
      });
    }

    function AjaxFailed(results) {
      console.log("ERROR AJAX");
      alert("ERRO");
    }

    $.when(results).done(function() {

    });

  };
});
<?php
header('Content-Type: application/json');

$connStr = { database connection string }
$conn   = pg_connect($connStr);
$result = pg_query($conn, "select * from mapas");

$qtd = pg_num_rows($result); 

$res = "[";

if($qtd > 0){   
   $i = 0;
   foreach(pg_fetch_all($result) as $row)
    {       
        $x = $row['geojson'];
        $patterns = array ('/[^A-Za-z0-9\-\,\"\:\{\}\[\]]/');
        $replace = array ('');
        $desc = preg_replace($patterns, $replace,$x);         
        $desc = str_replace('\"', '"', $desc, $count);
        
        $data['id_map']       = $row['id_map'];
        $data['description']  = $row['description'];
        $data['geojson']      = $desc;
        $data['file']         = $row['file'];
       
        $map = json_readable_encode($data,null,true); 
               
        $res .= $map;
        
        if($i < $qtd -1 ){
        $res .= ",";
        }
        $i++;
    }
}  
$res .= "]";

echo trim($res);

pg_free_result($result);
pg_close();
?>

0 个答案:

没有答案