Question

我正在使用Python的SimpleHTTPServer来显示基本的Leaflet地图。

我希望使用json.gz文件作为输入在地图上创建一系列点。

此文件（input.json.gz）的内容如下所示：

[[25.0153,55.45758],[25.01767,55.45569],[25.02065,55.45327],[25.02655,55.44846]]

我的硬编码代码如下所示：

var pointA = new L.LatLng(25.146619, 55.225746);
var pointB = new L.LatLng(25.198696, 55.269794);

如何阅读json.gz中的javascript文件，并在其中重复创建points？最终，我会将这些点收集到不同的点列表中，并从中渲染折线。完整代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Web Map</title>

<!-- reference to Leaflet CSS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

<!-- reference to Leaflet JavaScript -->
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

<!-- set width and height styles for map -->
<style>

html, body, #map {
   height: 100%;
   width: 100%;
}

/* css to customize Leaflet default styles  */
.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
    background: #e93434;
    color: #ffffff;
}
</style>

</head>

<body>

    <!-- place holder for map -->
    <div id="map"></div>

<script>

    //  create map object, tell it to live in 'map' div and give initial latitude, longitude, zoom values 
    var map = L.map('map', {scrollWheelZoom:false}).setView([25.198696, 55.269794], 15);

    //  add base map tiles from OpenStreetMap and attribution info to 'map' div
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
var pointA = new L.LatLng(25.146619, 55.225746);
    var pointB = new L.LatLng(25.198696, 55.269794);
    var pointList = [pointA,pointB];

    L.polyline(pointList,{icon: test_icon,color:'red','weight':10}).bindPopup(customPopup,customOptions).addTo(map);


</script>

</body>

</html>

修改

我现在已将数据重新格式化为geojson格式。这是一个施加：

{
 "type": "FeatureCollection", 
 "features": [
  {
   "geometry": {
    "type": "LineString", 
    "coordinates": [
     [
      25.1167, 
      55.19259
     ], 
     [
      25.11285, 
      55.18714
     ], 
     [
      25.11141, 
      55.1851
     ], 
     [
      25.11077, 
      55.18422
     ], 
     [
      25.11001, 
      55.18311
     ], 
     [
      25.10855, 
      55.18105
     ], 
     [
      25.10722, 
      55.17914
     ], 
     [
      25.10644, 
      55.17805
     ], 
     [
      25.10572, 
      55.17712
     ]
    ]
   }, 
   "type": "Feature", 
   "properties": {
    "url": "blah", 
    "name": "blue"
   }
  },

然后我尝试使用AJAX加载它。

var geojsonLayer = new L.GeoJSON.AJAX("polylines.geojson");       

geojsonLayer.addTo(map);

我还在<script src="./polylines.geojson" type="text/javascript"></script>文件的顶部添加了html。

但是，这会返回找不到的文件。我的文件与index.html

位于同一目录中

code 404, message File not found
127.0.0.1 - - [13/Mar/2017 14:52:40] "GET polylines.geojson HTTP/1.1" 404 -

使用来自`json.gz`文件的传单渲染点

0 个答案: