我的geojson数据文件是否正确创建? [英] Is my geojson data file created correclty?

问题描述

我正在使用此代码在单张地图上映射电源变压器，但是不幸的是，当加载地图时，我找不到显示的数据.您能否帮助我确定代码中的某些问题(如果有).我必须承认我是Web映射的新手，所以这里我只需要一些帮助.

I'm using this code to map power transformers on a leaflet map, but unfortunately when the map loads I don't find my data displayed. Can you please help me identify some problems(if any) in my code. I must admit that I'm new to web mapping so I just need some help here.

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

Here is the javascript code I'm using:

 //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:

my getData.php file works well so I guess the problem lies within the javascript file. Here is the 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 ";";
                   }
                   ?>

推荐答案

您可能遇到的问题与之相同:

You probably have the same issue as there:

Json文件未显示在Google Chrome中

即在Chrome浏览器中通过文件系统打开页面.

I.e. opening your page from File System in Chrome browser.

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

The solutions proposed in that post are to set up a local server or to open Chrome with specific parameters.

但是您应该可以直接使用Firefox对其进行测试.

这篇关于我的geojson数据文件是否正确创建?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！