使用Leaflet删除来自ajax jquery结果

时间:2017-11-27 13:44:18

标签: javascript php ajax leaflet

我有一个MySQL数据库,其中包含一个包含多边形几何的表。 我有一个Leaflet地图,发布您单击的位置的坐标,运行SQL查询以选择包含坐标的多边形。然后另一个php文件回显一个geojson,我用它来添加到传单地图。

这非常有效,但无论我做什么,我都无法删除这些功能。每次我点击一个新区域时,都会添加一个新的多边形,并且不会删除旧的多边形。以下是我正在获取的YouTube视频的链接。如果在获取geojson的ajax函数之外的函数中定义,则在视频中说removeLayer()。但无论我把removeLayer()放在哪里,我都无法删除任何旧功能。

https://youtu.be/1idIc7ROXE0

以下是js脚本。

简而言之,这就是我正在做的事情。

步骤1.我在点击地图时获取坐标,将其转换为要在MySQL中使用的WKT,将WKT发送到将获取数据的函数

步骤2.这里我使用ajax函数将WKT发布到php,它将首先删除临时表中的所有数据,并插入包含WKT坐标的多边形的新信息。

步骤3.我从临时表中选择*,将信息作为geojson回显。

 //step 3----------------get the geojson from the MySQL table-----
    function getBuilding(n) {
    var getBuildingSelected_jq = $.ajax({
      url: "phpfile_selected.php",
      data: "q=1"+n,
      dataType:"json",
      async: false,
      success: function(data){

          console.log("getting clicked polygon")
      }
    }).responseText;

     var convert_ = JSON.stringify(eval("(" + getBuildingSelected_jq + ")"))
     var selectedBuildingLayer2 = JSON.parse(convert_);

     var selectedBuildingLayer2 = L.geoJSON(selectedBuildingLayer2)
     selectedBuildingLayer2.addTo(map)
     }

//步骤2 ----------------将coord发布到php文件并执行sql查询-----

    async function php_postCoord(clicked)
            {
            var site = clicked;
            $.ajax({
                type:'post',
                url:'PHP_postCoordToMySQL.php',
                data: {Site:site},                 
                success: function(value){
                console.log('yes');
                }
            });
                await sleep(250)
              //-----refresh totals----
                $("#divSq_m").load(" #divSq_m");

                map.removeLayer(selectedBuildingLayer2)
                getBuilding(1);
          };

//步骤1 ---------------------在地图上点击获取coord并从中制作WKT,运行函数发布数据并从mysql获取数据。

      map.on('click', async function (e) {
     var lnglat = [e.latlng.lat, e.latlng.lng];
    console.log(lnglat)

    //---make WKT Yes I know there are better ways to do this, but hay this workd for me
    latLng_ = lnglat.reverse()
    latLng_ = JSON.stringify(latLng_);
    var i = 0;
            while (i <100)   {
                     latLng_= latLng_.replace("[","");
                        latLng_= latLng_.replace(","," ");
                            latLng_= latLng_.replace("]","");
                i++;
            }
    console.log(latLng_)

    var start = "POINT("; //the start of the string that need to be send to SQL  
    var end = ")"; //the last but of the string that need to be send to SQL
    s = start.concat(latLng_.concat(end)); // concat the first bit, middle part and last bit

    console.log(s)

    php_postCoord(s)

好的,所以这里是获得coord的php脚本并执行sql查询。 (PHP_postCoordToMySQL.php)

<?php require_once('connect.php');
$idXY = $_POST["Site"];
$query = "delete from _building";
$result = mysqli_query($con, $query);

$query ="insert into _building ( sq_m,geojson_text ) 
SELECT    sq_m,geojson_text  FROM  demo_data_buildings  
WHERE 
ST_Contains(SHAPE, ST_GeomFromText('".$idXY."',1))";
$result = mysqli_query($con, $query);

这是调用的php文件,并从上面的结果返回一个geojson(phpfile_selected.php)。

require_once('connect.php');


$myquery = "SELECT build.* FROM demo_data_buildings as build join _building as b on b.gti_id = build.gti_id";

$result = mysqli_query($con, $myquery);
//echo -----the geojson------";
echo "{
\"type\": \"Feature\",
\"name\": \"Buildings\",
\"crs\": { \"type\": \"name\", \"properties\": { \"name\":
\"urn:ogc:def:crs:OGC:1.3:CRS84\" } },
\"features\": [";

while ($row =mysqli_fetch_array($result, MYSQLI_ASSOC)){
    $sq_m = $row['sq_m'];
    $geoj = $row['geojson_text'];
    echo  "{ \"type\": \"Feature\", \"properties\":{\"sq_m\":".$sq_m."},\"geometry\": ".$geoj."},";
};
echo "]}";

我怀疑这与某些事情有关,这个层只存在于一个函数中,或者当涉及到jquery ajax时我不明白。 谢谢!!!!

0 个答案:

没有答案