来自SQL Server的位置名称,并在Leaflet地图上绘图

时间:2018-09-04 17:15:45

标签: jquery laravel leaflet

当我尝试在地图上绘制纬度和经度时,它会返回

  

leaflet.js:5未捕获的错误:无效的LatLng对象:(NaN,NaN)

var obj =[{"lon":"27.748936","lat":"85.318788"},{"lon":"28\u00b0 02' 06.32","lat":"82\u00b0 28' 54.74"},{"lon":"83\u00b027'51.15","lat":"27\u00b042'28.5"},{"lon":"28\u00b002'06.1","lat":"082\u00b028'54.1"},{"lon":" 83\u00b027'7.00","lat":" 27\u00b030'21.02"},{"lon":"83\u00b027'51.15","lat":"27\u00b042'28.5"},{"lon":"87\u00b0 42' 12.83","lat":"26\u00b0 40' 10.11"},{"lon":"87\u00b0 42' 12.83","lat":"26\u00b0 40' 10.11"},{"lon":"N 27\u00b030'21.6","lat":"E 083\u00b027'06.6"},{"lon":"80.5794","lat":"29.3008"},{"lon":" 87\u00b042'13.92","lat":" 26\u00b040'11.44"},},{"lon":null,"lat":null},{"lon":null,"lat":null},{"lon":null,"lat":null},{"lon":null,"lat":null}]
console.log(obj);




var map = L.map('map').setView([28.41752832637288,84.13003176934866], 13);

var countrieslayer=L.geoJson(nepal).addTo(map);
map.fitBounds(countrieslayer.getBounds());
L.geoJson(obj.lat,obj.lon).addTo(map);


var marker = L.marker([obj]).addTo(map);
// var point=[27.6493, 85.3059];
// var marker=L.marker(point).addTo(map);
// L.geoJSON(sites, {
//     // style: myStyle
// }).addTo(map);

1 个答案:

答案 0 :(得分:1)

我从您的第一篇(未编辑)帖子中获取了地名列表,并使用Geocoder library编写了Python脚本,该脚本将从OpenStreetMap中获取坐标。

我不得不进行一些调整,最初找不到一些地方,我认为那是因为您只能通过它们的英文名称来真正搜索它们(或者可能有一些错别字)。所以我改变了这些:

Bheemdatta - Bhimdatta
Dasharathchand - Dasharathchanda
Kirt - (I haven't found this place?)
Saphebagar - Sanfebagar

Geocoder脚本会遍历每个地址,然后将结果保存到“ results.geojson”

import json
import geocoder
import time

places = ["Amargadhi","Banepa","Bhaktapur","... etc ..."]

# stub for building the GeoJSON    
geojson = {
    "type": "FeatureCollection",
    "features": []
}

for place in places:
    g = geocoder.osm('{} Nepal'.format(place)) # search for e.g. "Amargadhi Nepal"
    print place, g.latlng

    # create a point feature for the GeoJSON structure
    pointfeature = {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [g.lng, g.lat]
        },
        "properties": {
            "name": place,
            "address": g.address,
        }
    }

    # if there's a result, add it to the GeoJSON FeatureCollection
    if g.latlng:
        geojson["features"].append(pointfeature)

    time.sleep(1) # wait 1 second

print "Saving to results.geojson"

with open("results.geojson","w") as f:
    f.write(json.dumps(geojson, indent=2))
    f.close()

然后您可以在传单地图中使用生成的GeoJSON:

var map = L.map('map').setView([28.41752832637288,84.13003176934866], 10);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

var obj = nepaldata; // replace "nepaldata" and insert GeoJSON here
var geojsonLayer = L.geoJson(obj);
geojsonLayer.addTo(map);
geojsonLayer.eachLayer(function(layer) {
  console.log(layer);
    layer.bindPopup("<b>"+ layer.feature.properties.name +"</b><br/><br/>"+ layer.feature.properties.address);
});
map.fitBounds(geojsonLayer.getBounds());

您可以看到一个working demo on Plunkr。我还将地点和坐标的完整列表放在那里(请参阅nepal.js文件)。