leaflet ajax geojson,'无效的GeoJSON对象。'('Invalid GeoJSON object.' Using Leaflet and leaflet-ajax)...

'无效的GeoJSON对象。'('Invalid GeoJSON object.' Using Leaflet and leaflet-ajax)

我正在使用传单来构建法国地图，突出显示区域，然后单击缩放。

首先，我在script.js中有geojson，但在我的情况下，我需要分开的geojson文件中的区域。 所以我现在使用leaflet-ajax在script.js中调用它们，如下所示：

var BordeauxLayer = new L.GeoJSON.AJAX("src/js/DI_Bordeaux.geojson").addTo(map);

区域显示在地图上，但现在所有放大，突出显示的功能......我在教程中所用的功能都不再适用。

L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

// HIGHLIGHT FEATURE = MOUSEOVER

function onEachFeature(feature, layer) {

layer.on({

mouseover: highlightFeature,

mouseout: resetHighlight,

click: zoomToFeature

});

}

// HIGHLIGHT FEATURE = MOUSEOVER

function highlightFeature(e) {

var layer = e.target;

layer.setStyle({

weight: 5,

color: '#666',

dashArray: '',

fillOpacity: 0.7

});

};

// HIGHLIGHT FEATURE = MOUSE LEFT

function resetHighlight(e) {

geojson.resetStyle(e.target);

};

// ZOOM TO THE REGION

function zoomToFeature(e) {

map.fitBounds(e.target.getBounds());

}

现在，控制台在leaflet.js的第8行显示“Uncaught Error：Invalid GeoJSON object。”。

这个问题似乎就在这条线上：

L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

我不明白为什么:(

编辑：这是我的geojson： https ：//api.myjson.com/bins/3s1ad

提前致谢。

I'm using leaflet to build a map of France, with the regions highlighted, and on-click zoom.

First, I've had the geojson in the script.js, but in my case i needed regions in separated geojson files. So i'm now calling them in the script.js with leaflet-ajax like this :

var BordeauxLayer = new L.GeoJSON.AJAX("src/js/DI_Bordeaux.geojson").addTo(map);

The regions is displayed on the map, but now all the function to zoom-in, highlight etc... that I took on the tutorial don't work anymore.

L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

// HIGHLIGHT FEATURE = MOUSEOVER

function onEachFeature(feature, layer) {

layer.on({

mouseover: highlightFeature,

mouseout: resetHighlight,

click: zoomToFeature

});

}

// HIGHLIGHT FEATURE = MOUSEOVER

function highlightFeature(e) {

var layer = e.target;

layer.setStyle({

weight: 5,

color: '#666',

dashArray: '',

fillOpacity: 0.7

});

};

// HIGHLIGHT FEATURE = MOUSE LEFT

function resetHighlight(e) {

geojson.resetStyle(e.target);

};

// ZOOM TO THE REGION

function zoomToFeature(e) {

map.fitBounds(e.target.getBounds());

}

And now the console says " Uncaught Error: Invalid GeoJSON object. " on the line 8 of leaflet.js.

The problem seems to be on this line :

L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

And I don't get why :(

Thank's in advance.

原文：https://stackoverflow.com/questions/35870567

更新时间：2019-11-09 04:34

最满意答案

您对onEachFeature的调用必须在您的AJAX调用中

var BordeauxLayer = new L.GeoJSON.AJAX("src/js/DI_Bordeaux.geojson", {onEachFeature: onEachFeature}).addTo(map);

你也必须摆脱

L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

Your call to onEachFeature has to be in your AJAX call

var BordeauxLayer = new L.GeoJSON.AJAX("src/js/DI_Bordeaux.geojson", {onEachFeature: onEachFeature}).addTo(map);

You also have to get rid of

L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

相关问答

使用L.GeoJSON.coordsToLatLng()并阅读有时坐标为lat-lng且有时为lng-lat的原因 。 Use L.GeoJSON.coordsToLatLng() and read why sometimes coordinates are lat-lng and sometimes lng-lat.

我有点困惑，为什么你会尝试在你的URL上使用parseFloat 。 它需要一个字符串并将其转换为数字： parseFloat解析其参数，一个字符串，并返回一个浮点数。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseFloat 你可以将URL传递给$.getJSON ，它应该加载得很好。 您可以通过检查浏览器开发人员工具的网络选项卡来验证这一点。 一旦你有正确的加载部分，你需要确

...

您对onEachFeature的调用必须在您的AJAX调用中 var BordeauxLayer = new L.GeoJSON.AJAX("src/js/DI_Bordeaux.geojson", {onEachFeature: onEachFeature}).addTo(map);

你也必须摆脱 L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

Your call to onEachFeature has

...

iH8的初步答案几乎是正确的。 要指定将出现在矢量图层的GeoJSON导出中的属性(即，通过.toGeoJSON()方法)，您必须填充它的feature.type和feature.properties成员： var myVectorLayer = L.rectangle(...) // whatever

var feature = myVectorLayer.feature = myVectorLayer.feature || {};

feature.type = "Feature";

feat

...

我会切换到sf 。 您可以直接加载geojson并生成Multipolygon和Multilinestring对象，该对象的读取速度也比readOGR 。 然后你可以把这些对象放在addPolygons和addPolylines 。 以下示例应该有效： library(shiny)

library(leaflet.extras)

library(geojsonio)

library(rgdal)

library(sf)

dataurl

...

Doh，我发现它浏览了一些其他的传单文件。 我需要的样式属性是fillOpacity 。 我猜不透明只适用于边框。 在这里， weight会关闭边界，所以我没有注意到任何变化。 所以这个工作，应用不透明度的多边形的内部： var exteriorStyle = {

"color": "#ffffff",

"weight": 0,

"fillOpacity": .75

};

var exteriorMaskLayer = L.geoJson(exteriorMaskGeoj

...

要制作网格，您可以使用GeoJSON MultiPolygon http://wiki.geojson.org/GeoJSON_draft_version_6#MultiPolygon 对于非真实地图(只是图像)，我使用以下代码为Leaflet生成网格： var countX = 10; //cells by x

var countY = 10; //cells by y

var cellWidth = mapWidth / countX;

var cellHeight = mapHeight /

...

如果您只想显示标签，请返回L.circleMarker而不是L.Marker ： pointToLayer: function (feature, latlng) {

return L.circleMarker(latlng, labelMarkerOptions);

},

如果出于其他原因需要L.Marker ，请将标签直接绑定到标记： pointToLayer: function (feature, latlng) {

return L.Marker(latlng, labe

...

确实有更好的方法可以做到这一点，但是如果你不想过多修改你的代码架构，你可以在特定的层创建弹出窗口，在添加新数据时就不会清除。 为了给你一个想法(标记在你的例子中扮演myGeoJson的角色)： var popup_id = {};

var popup_layer = new L.layerGroup();

var markers = new L.layerGroup();

$.each(testData, function(index, p) {

var marker = L.marker

...

您应该尝试定义一个函数，该函数在将每个行加载到Leaflet时对其进行样式化。 从以下链接： https ： //github.com/Dominique92/Leaflet.GeoJSON.Ajax ...

new L.GeoJSON.Ajax(

, // GeoJson server URL.

{

argsGeoJSON: {

name: value, // GeoJson args pairs that will be add

...