GEOjson 未显示在我的地图 openlayers 中
GEOjson not displaying in my map openlayers
我想在我的地图 openLayers 中显示 geojson 数据,但我的数据没有显示,地图甚至没有显示。我使用 openLayers 5。
我有一个 api(在 node.js 中),它允许在我的数据库中提取数据。
我有一个文件 (script.js),它允许显示地图,恢复 api 发送的数据并在地图上显示数据。
在script.js中:
我创建了一个包含 geojson 样式的新 vectorLayer:
var foncier2 = new VectorLayer({
source:source,
style: function (feature, res) {
property = feature.get("nature");
return new Style({
stroke: new Stroke({
color: [40, 40, 40, 1],
width: 0.3
}),
fill: new Fill({
color: couleur(property)
})
})
},});
我请求 API 在回调的帮助下恢复数据:
`
function loadJSON(callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
console.log(this.responseText);
callback(this.responseText);
}
};
xhr.open("GET", "adressIP:port/endpoint", true);
// xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null);
}`
然后我创建一个函数,将数据转换为 json 然后转换为 GEOjson :
var myData = JSON.parse(data);
var geojsonObject = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "EPSG:4326" }},
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates":myData[2].geom
}
}
]};
最后我显示数据:
foncier2.getSource().clear();
foncier2.getSource().addFeatures(foncier2.getSource().getFormat().readFeatures(geojsonObject, {
dataProjection: 'EPSG:4326',
defaultFeatureProjection: 'EPSG:3857',
}));
foncier2.getSource().refresh();
foncier2.getSource().changed();
map.getView().fit(foncier2.getSource().getExtent());
但是
我的地图上没有任何显示,我的控制台日志中也没有错误。
谢谢你帮助我
PS : (我设法恢复了数据,看起来像 that and the coordinates )
您正在为几何体(您的屏幕截图显示的是多面体)而不是几何体的坐标设置坐标,并且没有更新类型。试试这个:
var geojsonObject = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "EPSG:4326" }},
"features": [
{
"type": "Feature",
"geometry": {
"type": JSON.parse(myData[2].geom).type,
"coordinates": JSON.parse(myData[2].geom).coordinates
}
}
]};
我想在我的地图 openLayers 中显示 geojson 数据,但我的数据没有显示,地图甚至没有显示。我使用 openLayers 5。 我有一个 api(在 node.js 中),它允许在我的数据库中提取数据。 我有一个文件 (script.js),它允许显示地图,恢复 api 发送的数据并在地图上显示数据。
在script.js中:
我创建了一个包含 geojson 样式的新 vectorLayer:
var foncier2 = new VectorLayer({
source:source,
style: function (feature, res) {
property = feature.get("nature");
return new Style({
stroke: new Stroke({
color: [40, 40, 40, 1],
width: 0.3
}),
fill: new Fill({
color: couleur(property)
})
})
},});
我请求 API 在回调的帮助下恢复数据:
`
function loadJSON(callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
console.log(this.responseText);
callback(this.responseText);
}
};
xhr.open("GET", "adressIP:port/endpoint", true);
// xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null);
}`
然后我创建一个函数,将数据转换为 json 然后转换为 GEOjson :
var myData = JSON.parse(data);
var geojsonObject = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "EPSG:4326" }},
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates":myData[2].geom
}
}
]};
最后我显示数据:
foncier2.getSource().clear();
foncier2.getSource().addFeatures(foncier2.getSource().getFormat().readFeatures(geojsonObject, {
dataProjection: 'EPSG:4326',
defaultFeatureProjection: 'EPSG:3857',
}));
foncier2.getSource().refresh();
foncier2.getSource().changed();
map.getView().fit(foncier2.getSource().getExtent());
但是
我的地图上没有任何显示,我的控制台日志中也没有错误。
谢谢你帮助我
PS : (我设法恢复了数据,看起来像 that and the coordinates )
您正在为几何体(您的屏幕截图显示的是多面体)而不是几何体的坐标设置坐标,并且没有更新类型。试试这个:
var geojsonObject = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "EPSG:4326" }},
"features": [
{
"type": "Feature",
"geometry": {
"type": JSON.parse(myData[2].geom).type,
"coordinates": JSON.parse(myData[2].geom).coordinates
}
}
]};