我的 geojson 数据文件是否正确创建？

Question

我正在使用此代码在传单地图上映射电源变压器，但不幸的是，当地图加载时，我没有找到显示的数据。你能帮我找出我的代码中的一些问题（如果有的话）吗？我必须承认我是网络地图的新手，所以我只需要一些帮助。

这是我正在使用的 javascript 代码：

 //global variables
  var map,
     fields = ["tx_id", "owner", "kva_rating", "prim_voltage", "sec_voltage", "serial_no", "area_name"], 
     autocomplete = [];

     $(document).ready(initialize);

     function initialize(){
    $("#map").height($(window).height());

    map = L.map("map", {
    center: L.latLng(-0.7166700, 36.4359100),
    zoom: 10
    });

   var tileLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicmFqYWJueWFtYnUiLCJhIjoiY2lqbTB4cnpiMDA4bnZhbHh3Znl2aDAwZiJ9.YC_iahav7t9GPl-7XgB-yQ', {
                attribution: 'Network Design &copy; <a href="http://www.powergridmap.com">Rajab Inc.</a>, Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, | Map Tiles: <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
                maxZoom: 19,
                minZoom: 1,
                id: 'rajabnyambu.oo91e3ga',
                accessToken: 'pk.eyJ1IjoicmFqYWJueWFtYnUiLCJhIjoiY2lqbTB4cnpiMDA4bnZhbHh3Znl2aDAwZiJ9.YC_iahav7t9GPl-7XgB-yQ'
                }).addTo(map);


//next: add features to map
getData();
};

 function getData(){
      $.ajax("getData.php", {
    data: {
        table: "transformer",
        fields: fields
      },
    success: function(data){
        mapData(data);
    }
})
};

function mapData(data){
//remove existing map layers
map.eachLayer(function(layer){
    //if not the tile layer
    if (typeof layer._url === "undefined"){
        map.removeLayer(layer);
    }
});

//create geojson container object
var geojson = {
    "type": "FeatureCollection",
    "features": []
    };

//split data into features
var dataArray = data.split(", ;");
dataArray.pop();

//console.log(dataArray);

//build geojson features
dataArray.forEach(function(d){
    d = d.split(", "); //split the data up into individual attribute values        and the geometry

    //feature object container
    var feature = {
        "type": "Feature",
        "properties": {}, //properties object container
        "geometry": JSON.parse(d[fields.length]) //parse geometry
    };

    for (var i=0; i<fields.length; i++){
        feature.properties[fields[i]] = d[i];
    };

    //add feature names to autocomplete list
    if ($.inArray(feature.properties.featname, autocomplete) == -1){
        autocomplete.push(feature.properties.featname);
    };

    geojson.features.push(feature);
});

//console.log(geojson);

//activate autocomplete on featname input
$("input[name=area_name]").autocomplete({
    source: autocomplete
});

var mapDataLayer = L.geoJson(geojson, {
    pointToLayer: function (feature, latlng) {
        var markerStyle = { 
            fillColor: "#CC5600",
            color: "#CAF",
            fillOpacity: 0.5,
            opacity: 0.8,
            weight: 1,
            radius: 8
        };

        return L.circleMarker(latlng, markerStyle);
    },
    onEachFeature: function (feature, layer) {
        var html = "";
        for (prop in feature.properties){
            html += prop+": "+feature.properties[prop]+"<br>";
        };
        layer.bindPopup(html);
    }
}).addTo(map);
};

我的 getData.php 文件运行良好，所以我猜问题出在 javascript 文件中。这是getData.php：

      require ('networkdbinfo.php');

      $dbc = pg_connect( "$host $port $dbname $credentials" ); 
      if(!$dbc) { 
      echo "Not connected : " . pg_error();
      exit; 
      }
      // Get the table and fields data
         $table= 'transformer';
         $fields = ["tx_id", "owner", "kva_rating", "prim_voltage", "sec_voltage", "serial_no", "area_name"];

          // Turn fields array into formatted string
           $fieldstr="";
              foreach ($fields as $i=> $field) {
                 $fieldstr=$fieldstr . "l.$field,";
                  }
                 // Get the geometry as geojson in EPSG:900913
                 $fieldstr=$fieldstr . "ST_AsGeoJSON(ST_Transform(l.geom, 900913))";

                // Create basic SQL statement
                $sql="SELECT $fieldstr FROM $table l";

                //if a query, add those to the sql statement
                    if (isset($_GET['area_name'])){
                   $area_name = $_GET['area_name'];
                  $distance = $_GET['distance'] * 1000; //change km to meters

                     //join for spatial query - table geom is in EPSG:900913
                          $sql = $sql . " LEFT JOIN $table r ON ST_DWithin(l.geom, r.geom, $distance) WHERE r.area_name = '$area_name';";
                 }

                // echo $sql;

                 // Send the query
                if (!$response=pg_query($dbc, $sql)) {
                 echo "A query error occurred.\n";
                   exit;   
                      }

                  // Echo the data back to the DOM
                  while ($row=pg_fetch_row($response)) {
                 foreach ($row as $i=> $attr) {
                 echo $attr.", ";
                   }
                     echo ";";
                   }
                   ?>

Answer 1

你可能有同样的问题：

Json file dosen't show up in google chrome

即在 Chrome 浏览器中从文件系统打开您的页面。

该帖子中提出的解决方案是设置本地服务器或使用特定参数打开 Chrome。

但你应该可以直接用 Firefox 来测试它。