javascript — Является ли мой файл данных geojson создан правильно?

Я использую этот код для сопоставления силовых трансформаторов на листовой карте, но, к сожалению, когда загружается карта, я не вижу отображаемых данных. Можете ли вы помочь мне определить некоторые проблемы (если таковые имеются) в моем коде. Я должен признать, что я новичок в веб-картографии, поэтому мне просто нужна помощь здесь.

Вот код 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 ";";
}
?>

1

Решение

Вы, вероятно, имеете ту же проблему, что и там:

JSON-файл не отображается в Google Chrome

То есть открыв свою страницу из файловой системы в браузере Chrome.

Решения, предложенные в этом посте, состоят в том, чтобы настроить локальный сервер или открыть Chrome с определенными параметрами.

Но вы должны иметь возможность проверить это непосредственно с Firefox.

1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]