gpt4 book ai didi

javascript - 多边形 GeoJSON 功能将在控制台中加载,但不会在传单中显示

转载 作者:行者123 更新时间:2023-12-03 02:14:13 25 4
gpt4 key购买 nike

GIS 数据和 python 对我来说已经很老了,但我对 Web 开发和地理空间 Web 应用程序非常陌生。

我已经遵循了一个教程和一个类(class),我正在学习以下脚本,但我无法将生成的 geojson 对象(多边形层)显示在传单中。但是,我可以将多边形层的所有特征记录到控制台。此外,在控制台中我可以清楚地看到 geojson 对象的正确类型、属性和坐标数组。我还可以清楚地看到控制台中传单 map 对象内的所有功能。

任何意见都将不胜感激。如果需要,我很乐意发布 getData.php 代码。我只是认为这不是问题所在。

var map,
fieldsin = ["campus_nam", "status", "schnumber", "type"],
autocomplete = [];

$(document).ready(initialize);

function initialize(){
map = L.map("mapdiv", {
center: [36.10, -80.25],
zoom: 12
});
var backgroundLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

//adding postgresql layers to map with getData.php
getData(fieldsin);
};

function getData(fieldsin){
$.ajax({
url: "php/getData.php",
data: { table: "public.school_campus", fields: fieldsin },
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(", ;");
//pop off the last value of the array because it is an empty string.
dataArray.pop();
//build geojson features
dataArray.forEach(function(d){

d = d.split(", "); //split the comma seperated data string up into individual attribute values
var test = d[fieldsin.length].concat("}");

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

//bulding properties for properties container above
for (var i=0; i<fieldsin.length; i++){
feature.properties[fieldsin[i]] = d[i];
};

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

//console.log(feature.geometry)

geojson.features.push(feature);

//var campusLayer = L.geoJSON(geojson).addTo(map);
var campusLayer = L.geoJSON(geojson, {
style: {
fillColor: "#CC9900",
color: "#66ffff",
weight: 1
},
onEachFeature: function (feature, layer) {
var html = "";
for (prop in feature.properties){
html += prop+": "+feature.properties[prop]+"<br>";
};
layer.bindPopup(html);
}
}).addTo(map);
});
};

最佳答案

添加生成的 GeoJSON 对象的示例肯定有助于理解您的情况。

但是我高度怀疑你只是颠倒了坐标:

  • 传单需要[纬度,经度]顺序
  • GeoJSON 需要 [经度、纬度] 顺序

另请参阅https://macwright.org/lonlat/

因此,您的 Leaflet GeoJSON 图层组实际上被添加到您的 map 上的可能性非常高,但您必须缩小才能在完全不同的位置看到您的要素并发生扭曲。

看来您还没有指定适当的 CRS到您的Leaflet map 实例,或者您需要将后端的坐标转换为Leaflet的默认EPSG:3857 .

请注意,GeoJSON 规范 requests WGS84 CRS ,这与 EPSG:3857 的输入相同。

关于javascript - 多边形 GeoJSON 功能将在控制台中加载,但不会在传单中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49430818/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com