时间戳

首页 > 解决方案 > 来自 SQL Server 的位置名称并在 Leaflet 地图上绘制

jquery - 来自 SQL Server 的位置名称并在 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);

标签： jquerylaravelleaflet

解决方案

我从您的第一篇（未经编辑的）帖子中获取了地名列表，并使用Geocoder 库编写了一个 Python 脚本，该脚本将从 OpenStreetMap 获取坐标。

我不得不做一些调整，有些地方一开始找不到，我想那是因为你只能通过他们的英文名字来搜索它们（或者可能有一些错别字）。所以我改变了这些：

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

地理编码器脚本遍历每个地址，然后将结果保存到“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()

然后，您可以在 Leaflet 地图中使用生成的 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());

你可以在 Plunkr 上看到一个工作演示。我还将地点和坐标的完整列表放在那里（参见 nepal.js 文件）。

推荐阅读