Я использую этот код для сопоставления силовых трансформаторов на листовой карте, но, к сожалению, когда загружается карта, я не вижу отображаемых данных. Можете ли вы помочь мне определить некоторые проблемы (если таковые имеются) в моем коде. Я должен признать, что я новичок в веб-картографии, поэтому мне просто нужна помощь здесь.
Вот код 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 © <a href="http://www.powergridmap.com">Rajab Inc.</a>, Map data © <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 ";";
}
?>
Вы, вероятно, имеете ту же проблему, что и там:
JSON-файл не отображается в Google Chrome
То есть открыв свою страницу из файловой системы в браузере Chrome.
Решения, предложенные в этом посте, состоят в том, чтобы настроить локальный сервер или открыть Chrome с определенными параметрами.
Но вы должны иметь возможность проверить это непосредственно с Firefox.
Других решений пока нет …