Leaflet和GeoJSON

Question

关于Leaflet和GeoJSON的一个问题。成功后（我希望）将MySQL数据转换为GeoJSON我不知道是什么原因，但转换后的GeoJSON不会显示在地图上。

下面是代码的JavaScript（单张）块：

var karta = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', { 
maxZoom: 18, 
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
id: 'mapbox.streets' 
}); 

var roads = new L.geoJson(null, { 
      style: function (feature) { 
       return { 
        color: '#9a9afc', 
        weight: 2, 
        opacity:1 
       }; 
      }, 

onEachFeature: function (feature, layer) { 
if (feature.properties) { 
    var content = '<table border="1" style="border-collapse:collapse;" cellpadding="2">' + 
    '<tr>' + '<th>Oznaka</th>' + '<td>' + feature.properties.oznaka + '</td>' + '</tr>' + 
    '<tr>' + '<th>Opis</th>' + '<td>' + feature.properties.opis + '</td>' + '</tr>' + 
    '<tr>' + '<th>Podloga</th>' + '<td>' + feature.properties.podloga + '</td>' + '</tr>' + 
    '<table>'; 
layer.bindPopup(content);}} 
}); 

$.getJSON(parseFloat("php/cesta_geojson.php"), function (data) { 
     roads.addData(data); 
    }); 

var map = L.map('map', { 
     center: [46.15796, 15.75336], 
     zoom: 11, 
     layers: [karta, roads] 
    }); 

var baseLayers = { 
     "Podloga": karta 
    }; 

    var overlays = { 
     "Cesta": roads 
    }; 

L.control.layers(baseLayers, overlays).addTo(map); 

我成功调用地图，但没有载体层。当我在Chrome中按F12时，在代码中看不到任何错误。

这里我加了parseFloat（）;因为我得到这样的错误

Uncaught TypeError: Cannot read property 'length' of undefined

的用parseFloat（）也没关系，没有任何错误

(parseFloat("php/cesta_geojson.php") 

最后在这里从cesta_geojson.php文件呼应GeoJSON的文件

{"type":"FeatureCollection","features":[{"type":"LineString","geometry":{"type":"LineString","coordinates":[[15.724070907944,46.188443457772],[15.72425781562,46.188344185019],[15.724433034035,46.188218470156],[15.724559402649,46.188111948013],[15.724699297028,46.187990209886],[15.724812369871,46.18786041665],[15.724892165425,46.187729597635],[15.724971918506,46.187587520468],[15.725035777742,46.187481355449],[15.725105549827,46.187407292182],[15.725202581782,46.187342477582],[15.725321929846,46.187288459964],[15.725497857863,46.187225059864],[15.725739143267,46.187161204115],[15.725983191502,46.187106791869],[15.726194987431,46.187080890038],[15.726450533317,46.187073593716],[15.726602817686,46.187066995093],[15.726732946012,46.18703782005],[15.726868107328,46.186958068465],[15.726998796286,46.186811432945],[15.727134720374,46.186645560889],[15.727237900023,46.186502972888],[15.727374482222,46.186387000962],[15.727609563629,46.186189834001],[15.728096496604,46.185818387862],[15.728458503155,46.185542277868],[15.728743661394,46.185371657495],[15.728957680163,46.185259021799],[15.729172360784,46.185188581679],[15.729304310741,46.185137873122],[15.729369597827,46.185060721014],[15.729363091546,46.184984028821],[15.729328718982,46.184892184228],[15.729199870962,46.184762535748],[15.729071126927,46.184640592675],[15.728885780977,46.184525116727],[15.72887607759,46.184519072234],[15.728614827463,46.18440564005],[15.728282035417,46.184319532788],[15.728019456787,46.184201277051],[15.72762504466,46.184046453459],[15.727313665573,46.183902676003],[15.727130059528,46.183815574507],[15.726919608728,46.183782381293],[15.726687496419,46.183780027307],[15.726460925269,46.183781470428],[15.726240046183,46.183798247915],[15.725992218515,46.183861189086],[15.725841694066,46.183920515407],[15.725715865521,46.183874844727],[15.72565370341,46.183799755202],[15.725630852585,46.183709708534],[15.725634974679,46.183611977506],[15.7256379558,46.183427810893],[15.725685548243,46.183341072494],[15.725723013948,46.183206133169],[15.725809501193,46.183107700845],[15.725866680473,46.183003917087],[15.725960645834,46.182866651324],[15.726067912912,46.182727453662],[15.726190146802,46.182621424687],[15.726207337253,46.182606513725],[15.726244838952,46.182546780958],[15.726262053424,46.18251936173],[15.726297354311,46.182371391634],[15.726409723863,46.182212815967],[15.726455021424,46.182089085775],[15.726458519589,46.182079529914],[15.72654271426,46.182008813531],[15.726634629323,46.181917731008],[15.726792632784,46.181770199109],[15.726870857759,46.181649656343],[15.726912197146,46.181557050494],[15.726967278539,46.181495749682],[15.727067305319,46.181413846382],[15.727138343041,46.181354299035],[15.727214739778,46.181296555638],[15.727473161746,46.181121306861],[15.727754239725,46.180928261967],[15.727917519199,46.180774825857],[15.727918248443,46.180774140105],[15.728083066145,46.180681243366],[15.728268727778,46.180597218759],[15.728449559848,46.18052169389],[15.728548286636,46.180459010509],[15.728575622997,46.180441653688],[15.728626260839,46.180345881025],[15.728632981715,46.180266602979],[15.728631308038,46.180130877024],[15.728609388865,46.180042767469],[15.728631196407,46.179925578114],[15.728675382394,46.179736203158],[15.728754103416,46.179605518579],[15.728781671,46.179531509339],[15.728787555328,46.179527496718],[15.728853653803,46.17948242148],[15.729002926254,46.179391428483],[15.729178351986,46.179316475034],[15.729213424685,46.179222607354],[15.729243660268,46.179119997272],[15.729286990802,46.178940460721],[15.729302693271,46.178746820197],[15.729213398482,46.178659136971],[15.72916803677,46.178526359768],[15.729134552992,46.178405644044],[15.729135908104,46.178292729464],[15.72917552165,46.178190870101],[15.729232569898,46.178113930792],[15.72931294954,46.178044867023],[15.729428405555,46.177993744556],[15.729561627668,46.17796869873],[15.72976723911,46.177925063612],[15.729926481858,46.177895819181],[15.729998631576,46.177859065783],[15.730047156025,46.177800306668],[15.730080843602,46.177713416008],[15.730117005178,46.177590217794],[15.730153622997,46.177509337477],[15.730213731036,46.177440402819],[15.730294124893,46.177372576296],[15.730441029813,46.177280928037],[15.730544656814,46.177213711041],[15.730607373996,46.177126634301],[15.730649660998,46.177027590548],[15.730673997218,46.17689640446],[15.730686159037,46.176492333822],[15.73067821304,46.176331131495],[15.730644702458,46.176216444564],[15.730591136986,46.176118015619],[15.730532059953,46.176041779721],[15.730402473853,46.175910779433],[15.730311198495,46.175818660514],[15.730202718835,46.175734675489],[15.73000384574,46.175625079374],[15.729839704149,46.175515260703],[15.72969233216,46.175372356528],[15.729618528197,46.175276053085],[15.729562090074,46.175183670243],[15.729499659066,46.175069167915],[15.729446444294,46.174996966156],[15.72937016675,46.174936968289],[15.729212526507,46.174871463189],[15.729107168368,46.174815683654],[15.729054167406,46.174759569411],[15.72904170233,46.174695171342],[15.729052085512,46.17460236206],[15.729071071151,46.174497439542],[15.729087154347,46.174396528595],[15.72910546319,46.17424853196],[15.729094644915,46.17408531172],[15.7290668912,46.173966554875],[15.729033892426,46.1738901515],[15.728983769139,46.173827990596],[15.728872275277,46.173739313429],[15.728754586493,46.173621131114],[15.728657109853,46.173490722624],[15.728603498553,46.173388260382],[15.728590633883,46.173293603095],[15.728612735251,46.173208782415],[15.728646626319,46.17313730148],[15.728726199522,46.173007798075],[15.728831150529,46.172825712971],[15.728916739981,46.172712260059],[15.728991455769,46.172630617447],[15.7291006952,46.172549311964],[15.729258934442,46.172437431421],[15.729414216596,46.172325568664],[15.729546276642,46.172213855114],[15.729655393513,46.172107398665],[15.72974966273,46.171995925696],[15.72984693943,46.171880401689],[15.72991521628,46.171775124009],[15.729934468671,46.171698427],[15.72994194617,46.171601602666],[15.729920665681,46.17153322935],[15.729873420227,46.171473046011],[15.729800556251,46.171447282199],[15.729695765454,46.171433859113],[15.729553262543,46.171410576692],[15.729389846248,46.171370420111],[15.729270112466,46.171320761745],[15.729164786157,46.171258953799],[15.729123053626,46.171176577112],[15.7291044619,46.171087984683],[15.729068374669,46.170993474941],[15.728991729979,46.170905294001],[15.728892103246,46.170835384143],[15.728746006765,46.170763735876],[15.728573253272,46.170655965933],[15.728425511252,46.170555701764]]},"properties":{"id":1,"oznaka":"K-8","opis":"D206 - Vulica - Kraljevec - Horvati - Kordej - S1","sirina":"5m","podloga":"Asfalt-makadam","mo":"Kostel"}}]} 

我真的不知道我在这里错过了什么，什么是不显示GeoJSON向量的原因。 Thx的任何帮助，非常感谢

Answer 1

我有点困惑，为什么你会尝试使用您的网址parseFloat。它需要一个字符串，并把它变成一个数字：

parseFloat parses its argument, a string, and returns a floating point number.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

您可以直接将URL传递$.getJSON，它应该载入就好了。您可以通过检查浏览器的开发人员工具的网络选项卡来验证这一点。

一旦你得到正确的加载部分，你需要确保你发送一个有效的GeoJSON featurecollection对象。目前它是无效的。该是的FeatureCollection有效：

{ 
    "type": "FeatureCollection", 
    "features": [ 
     // Features 
    ] 
} 

但包含在集合中的功能对象不：

{ 
    "type": "LineString", 
    "geometry": { 
     "type": "LineString", 
     "coordinates": [ 
      // Coordinates 
     ] 
    }, 
    "properties": { 
     // Properties 
    } 
} 

A GeoJSON object with the type "Feature" is a feature object.

http://geojson.org/geojson-spec.html#feature-objects

所以你需要改变type成员属性的对象为feature：

{ 
    "type": "Feature", 
    "geometry": { 
     "type": "LineString", 
     "coordinates": [ 
      // Coordinates 
     ] 
    }, 
    "properties": { 
     // Properties 
    } 
} 

然后它应该正常工作。下一次，当你想确保你的GeoJSON是有效的，你在线验证它在http://geojsonlint.com